portfolio website

We are working hard 👷🏼‍♂️ 🏗 🚜 to continually add more.
Please email if you have requests or questions 🙋.
Contact 👽 🛸 info below.
📬

create homepage

Add boilerplate html code to your file and then add your first content in the body.

img-height-width-set

Add Boilerplate HTML

In index.html, add boilerplate html code by typing ! on line 1 and hitting Enter.

Or copy the following code and paste it into your file.

HTML Boilerplates
Mozilla HTML
W3 Schools HTML
VS Code Tips and Tricks
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

Read about the parts of the boilerplate html.

Watch this video to add boilerplate html code to your index.html file.

Please like the video on YouTube and subscribe to our channel. It helps us attract more attention.

This course links you to highly relevant and mainstream resources to help introduce you to quality documentation so that you know what to look for when out in the wild.
Occasionally this course links you to videos but we encourage you to use videos sparingly and strategically because they are not an efficient and active way of learning.

Add Browser Title

Read about the title tag.

Yes, we know it can be tedious to click links and read docs carefully. Please do it anyway.

Change the title that users see in the browser from Document by default to something appropriate for this project.

Save the file.

Refresh the browser with your index.html file.

Look at the browser tab to see it showing your new document title.

Add Content Titles

Read about the h1 - h6 tags.

Reading docs is a critical skill for developers. It gets easier the more you do it. Practice reading documentation online instead of relying primarily on videos.

In the body of your boilerplate html, add an h1 tag with your name as the content.

Add an h2 tag below it with whatever you want as the content.

W3 Schools Headings Tags
Mozilla Headings Tags
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Glad to meet you.t</title>
  </head>
  <body>
    <h1>Jane Doe</h1>
    <h2>Darn glad to meet you.</h2>
  </body>
</html>

Save the file.

Refresh the browser.

Look in the browser for your name in large font and your subtitle below it in smaller font.

What makes the font sizes different between h1 and h2 tags?

More on that in the discussion.

vs-code-h1-h2

In your project folder create a new subfolder named images.

vs-code-new-folder

Drag any image to that folder.

vs-code-html-image

If you can choose an image file that is around 800px x 800px, that would be nice.

In your index.html file, add an img tag and set its src value to the relative path of the image.

Here is an example of the img tag.


W3 Schools img
Mozilla img
<img src="./images/street-example.png" />

Here is an example of the img tag in index.html.

W3 Schools Relative Path
Stack Overflow VS Code Autofill Path
Geeks for Geeks Relative Path
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Glad to meet you.</title>
  </head>
  <body>
    <img src="./images/street-example.png" />
    <h1>Jane Doe</h1>
    <h2>Darn glad to meet you.</h2>
  </body>
</html>

Save and refresh the page.

Look for the image.

If your image is like mine, the image is huge!

Size The Image

Add height and width to the image using the height and width attributes.

Add the alt attribute and set its value to text that you want the browser to display in case if the image does not load.

W3 Schools img height
W3 Schools img width
Geeks for Geeks
<img
  src="./images/street-example.png"
  alt="A street"
  height="auto"
  width="200"
/>

Play around with the size dimensions and then settle on something that looks good to you.

img-height-width-attributes

img-height-width-set

Below the h2 tag, add a div with at least 3 but no more than 5 a tags nested inside.


W3 Schools div tag
W3 Schools a tag
<div>
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
</div>

For each a tag, give it an href value equal to a social account of yours and text that says the name of that platform.

Mozilla div tag
Mozilla a tag
<div>
  <a href="https://www.linkedin.com/company/money-club-for-makers/">LinkedIn</a>
  <a href="https://github.com/thacash">GitHub</a>
  <a href="https://twitter.com/thacash_club">Twitter</a>
  <a href="https://stackoverflow.com/users/19829260/maker">Stack Overflow</a>
  <a href="https://www.youtube.com/channel/UCB2UGLXI2IYuIX9QVkXB2ew">YouTube</a>
</div>

Don't be shy. Upvote our Stack Overflow posts, like our YouTube videos, retweet our Tweets, and such.

Save your file.

Refresh the browser.

Look for the image and links on the page.

Inspect Browser

Right click on the browser and choose Inspect.

A panel should open within your browser.

Like looking under the hood of a car for the first time.

You should see tabs at the top of this new panel.

Find the Elements tab.

Look for the HTML from your index.html file.

Explore Styles In Inspector

In the Elements tab, click on the h2 element.

Scroll down in the panel and look for the built-in styles for that element.

In the inspector, change the h1 tag font color by setting color: red.

inspector-browser

In the inspector, click on the h2 element and double click on the text in the inspector to edit it.

Type something new.

Hit enter.

You should see the new text in the browser.

inspector-developer-tool

The changes you make in the browser's Elements tab give you immediate feedback so you can see what they look like.

Play around with it a bit.

It speeds up your development process because you see your changes immediately in the browser.

The changes you make in the Elements tab do not automatically update your code files.

Those changes last only so long as the browser session.

Before you close or refresh your browser, copy any changes you liked in the Elements tab and save them in your code files.

Wrap Content

Wrap all the content in a div.

<body>
    <div>
        <img src="./images/street-example.png" alt="A street" />
        <h1>Jane Doe</h1>
        <h2>Darn glad to meet you.</h2>
        <div>
            <a href="https://www.linkedin.com/company/money-club-for-makers/"
                >LinkedIn</a
            >
            <a href="https://github.com/thacash">GitHub</a>
            <a href="https://twitter.com/thacash_club">Twitter</a>
            <a href="https://stackoverflow.com/users/19829260/maker"
                >Stack Overflow</a
            >
            <a href="https://www.youtube.com/channel/UCB2UGLXI2IYuIX9QVkXB2ew"
                >YouTube</a
            >
        </div>
    </div>
</body>

Discussion

The basic setup of an html file requires some structure.

Here is a bare bones html file.

HTML Boilerplates
Mozilla HTML
W3 Schools HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    // Your content here
  </body>
</html>

No need to think about it.

Every HTML file should have one and only one of each of the following tags structured in the same way as in the example.

  • <!DOCTYPE html> - tells the browser that it is an html file
  • <html> - indicates where the html code begins and ends
  • head - metadata section of the html file
  • body - content section of the html file

Every html file starts on the first line with <!DOCTYPE html>.

Then follow the <html> tags that wrap two main sections - a head and body.

The head contains the metadata for your page.

The head should always be above the body.

Like the browser title and a link to your CSS stylesheet.

Here is a list of HTML tags.

The list is long.

For now, just focus on reading about the tags that are not for content: head, link, and script.

Which tag connects the html and css files?

Which tag connects html and js files?

The body contains the content that appears between the four corners of the browser window.

Things like text, images, videos, maps, buttons, links, and more.

Read about a few content-holding tags listed below.

What types of content can you display in a browser?

Do you display text the same way as an image or video?

How do you style the content?

  • body tag hold all the page content and wraps the content-holding tags
  • div tag are very commonly used, hold text and other HTML elements, and have a built-in display: block style property
  • span tag are like div tags because the hold text and other HTML elements, but they have a built-in display: inline style property
  • h1 - h6 tag hold text and other HTML elements and have built-in font-size
  • p tag hold text and appear as a paragraph
  • a tag create links to other webpages
  • img tag display an image on the page
  • input - accepts and displays user inputs

Tips on working with images: Web Images: Practical Tips Plus Code To Put Them To Best Use and Images in HTML

When you finish familiarizing yourself with the various tag types, continue reading below.

What makes the font sizes different between h1 and h2 tags?

What makes a div tag different from a span?

How do you use an img tag to show content?

More broadly, what makes any tag type different from the others?

You will experience it later.

Here is a little background before you do.

Three important things define a tag.

  • Boundaries
  • Built-in styles
  • Attributes

It is important to get familiar with these concepts because they are critical for your JavaScript work.

Boundaries. HTML elements have either wrapping or self-closing tags.

Wrapping tags have an opening tag and a closing tag with the content in between.

W3.org Tag Syntax
W3 Schools HTML Elements
Mozilla HTML Basics
<div>Welcome to class.</div>

The opening tag and closing tag must have the same text as one another and the closing tag must start with /.

Nesting elements inside other elements is a very common thing to do for purposes of layout and style.

<div>
  <div>
    <div>Welcome to class.</div>
  </div>
</div>

Self-closing tags have just one tag that opens and closes itself.

Any content is loaded using an attribute.

<img src="./images/photo.jpg" />

The tag in the example opens itself with < and closes with />.

Read more about about HTML elements.

Here is an example of a tag type with opening and closing tags.

<div>It is a beautiful day today.</div>

The content is set in between the opening and closing tags.

Here is an example of a tag type that is self-closing.

<img src="/a-path-to-your-image.jpg" />

The content is set using an attribute named src.

Built-in Styles. All tags have built-in styles except for the span tag.

For instance, a div and the h1 - h6 tags have the built-in style named display: block.

When an element has its display property set to block, the element takes up the entire horizonal row in the browser.

That is why you see the h1 and h2 content stacked vertically in the browser.

In contrast, span, img, and a tags have the default display value of inline.

This means the elements take up only as much width as their content requires.

This allows for other content to apear right and left of the element on the page.

One place you can find the built-in styles for an element is at the bottom of its W3 Schools page.

You have not yet seen CSS in this course, so the below might not make sense and that is okay and to-be-expected right now.

It is good to see it now regardless.

Below are the built-in styles for the h1 - h6 tags as shown on W3 schools.

This is an example of how the built-in styles make one element different from another.

What is different about each style class?

W3 Schools Headings Tags
Mozilla Headings Tags
h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h2 {
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h3 {
  display: block;
  font-size: 1.17em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h4 {
  display: block;
  font-size: 1em;
  margin-top: 1.33em;
  margin-bottom: 1.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h5 {
  display: block;
  font-size: .83em;
  margin-top: 1.67em;
  margin-bottom: 1.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h6 {
  display: block;
  font-size: .67em;
  margin-top: 2.33em;
  margin-bottom: 2.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Attributes. All tags have a collection of properties named attributes.

Different tag types have a specific set of attributes.

For instance, the <img /> tag has an src attribute that sets content for the image using the location of where the image is stored: <img src="./images/profile_photo.jpg" />.

In comparison, the a tag does not have an src attribute.

Instead, it uses the href attribute to link one page to another using a url as its value.

<a href="https://www.thacash.com">Visit our site</a>

Here is the list of attributes for a tags and for img tags.

Search those pages for the word attribute and read what the pages say.

Here is a list of all html attributes and which tags they apply to.

Too many exist to remember them all and no reasonable person expects you to memorize which tags have which attributes.

Just know how to look up examples and eventually you will remember the ones you need.

Here are some you will use frequently:

  • id unique value for an html element used to differentiate one element from another (tags: any)
  • class used to style and select one or more html elements (tags: any)
  • title stores extra data about the element
  • value specific elements have a content value, like an input has this attribute
  • src sets the content using a relative path for certain elements (tags: audio, embed, iframe, img, input, script, source, track, video)
  • href sets the url for certain elements (tags: a, area, base, link)
  • type for defining the type of element (tags: a, button, embed, input, link, menu, object, script, source, style)

Make sure that a tag actually has a certain attribute before using it.

When a tag has attributes, each of those attributes has a default value or has no value.

When you write the element, you can override the default by explicitly declaring an attribute's value.

<div class="title">Welcome to class.</div>

You can write tags that explicitly declare multiple attributes.

<div id="mainHeader" class="title">Welcome to class.</div>

You also can write tags that explicitly declare no values for any attributes.

<div>Welcome to class.</div>.

When you do declare attributes, write them in the opening tag in key:value pairs where the key is left of the = and the value on the right.

In the example below, the only attribute is the href with a value of "https://www.example.com".

<a href="https://www.example.com">Enroll</a>

You will see in code examples online use of the style attribute.

  • Do not use this as your primary way of styling because it can be difficult to maintain
  • The style attribute allows for setting an HTML element's style (called inline styling)
  • It is okay to never use the style property or to use it only in special situations
  • Instead of using style, use a stylesheet that you write or import from a CSS framework

Some HTML attributes listen for events, and then trigger functionality when that event happens

  • Do not use them
  • Examples: onchange, onclick, oncopy, ondrag, onsubmit
  • Instead, use JavaScript code to listen for events instead of an HTML attribute for code that is easier to read and maintain

You will use JavaScript to change attributes dynamically.

Examples of attributes use cases to get you thinking.

You get hands-on practice with all of this later and it will become second nature to you after enough repetition.

The best way to learn html it is just to get repetition with it and keep it simple.

Fow now, focus on just the tag types you use in this course.

No offense, but your index.html page looks pretty plain.

Make it more interesting with CSS in the next section.

Last updated Sept 12, 2022 at 8:49