To create my website, I first had to set the doctype to html, and set the html tag. I then set the head, and body tags to set where the shown elements will be, and the hidden ones. I used the box model to separate the body tag into three different sections. The header, used for the title, some pictures, and the navigation bar, the main, used for the main content of the page, and the footer, to set who made the website and any copyright information etc. 

After finishing the box model setup, I went into the head tag, and added the title and link HTML tags. The title tag will set the name of the website. The link tag along with the href and rel attribute will allow me to link another page into the website. In the href attribute I linked the actual stylesheet to the page, and in the rel attribute I named it as a stylesheet. Applying the link tag and its attributes will allow me to add css to the page and let me to customize the website and HTML elements’ properties to make it look however I like. The HTML elements are the entirety of a HTML tag and the content in between the start and closing tags. After setting up the head, I then added another link which will add the font that I wanted to use across the website. I got my font from google fonts which was a built-in link tag already set up so I only have to copy and paste the link into the head. 

Finally done with the head tag, it was time to move onto the body. The first thing in the body I will be looking at is the header. The header of the website will be the place where I will put the main title, some images that look nice, and the navigation bar to go across the different pages I have made. The first tag I added to the header was the img tag. This tag allows me to add any image I want to my website. The first attribute I set in the img tag was the id attribute to give a unique name so that no other image will be like it. I then set the src attribute of the image which was in my “Images” folder. I set the image in the src attribute by first setting the folder name, added a forward slash, and put the name of the image followed by its end to state the kind of file it is, whether it be png, jpg etc. the final attribute I will be adding to the img tag will be the alt attribute. While it’s not necessary to add it, it shows what the image is supposed to be to those with a screen reader, or if the image fails to load. In the alt I just said what the image would be. If it’s a dog I just say, a picture of a dog. The next step in the header is the tag that will show text for me. This tag is none other than the h tag, or more specifically in my case, the h2 tag. This tag just writes texts at various sizes based on the number. The bigger the number, the smaller the text, all the way down to 6. It’s usually used for titles and headers but can be used other times as well. I also needed an id attribute in this tag. But, for the text to show up I needed to add some element content to the tag. The element content goes in between the starting and closing tags, and will be whatever I want to show up on the page. After the h2 tag is done, I decided I wanted another image, and added it in the same way as before. After the images and title were done I just needed a navigation bar using the nav tag to be able to go through the different pages of my website. After I set the nav tag, I needed to use nesting to nest other tags inside the tag, which would be before the closing tag and after the starting tag. The tag I will be adding is the a tag to add hyperlinks to the website. In each a tag I added a class attribute so that I can customize only those a tags specifically. I then set the href attribute to the page I wanted to add like about.html. Finally, I needed a tag to show some text so that the user can understand where the link will send them. I added the name of where they were going as the element content and repeated the process for the rest of the a tags. Now the header is complete.

The footer, while being last, I will be complete next as it will be the same across all my web pages. The footer will just have some h3 and h4 tags stating I made the website, all rights are reserved, and it was made by specifically the “Up Sell” marketing agency. That is all I need for my footer.

Now that the footer is done, the only thing left is the main. The main site just has the main content I want on my web page. My main webpage doesn’t have much content. It really only has two tags. THe h2 tags, and the p tag. The p tag is used for text that isn’t as important as the headers. The h2 tag contains some element content just stating that coming up will be the bio of Marshmello. The p tag’s element content will be the actual bio. Now that’s it!