Code Outside the Box

Learning about programming, the fun and interactive way.

Create a simple GitHub website

By Ethan K. |

Project

In this exercise, you will create a website with a new GitHub project repository. This project will test you on basic knowledge of HTML and CSS. If you need help, go to this post about the HTML and CSS content of a website. A list of the website’s conditions will be listed, and a solution will be posted, but only look at the solution after attempting to create the website on your own.

HTML Requirements

  • You must include the <!DOCTYPE html> declaration, the html tag, the head tag, and the body tag.
  • You must display the website’s content in a language of your choice.
  • You must include all required metadata in the head element.
  • Name your HTML file ‘index.html’ and your CSS file ‘styles.css’. Both files should be attached to the root of the new repository. Make sure to link to the correct CSS file.
  • In the body, add a header, main section, and footer.
  • In the header, add links to the current page and to a different page to be added later inside a navigation element.
  • In the footer, add a copyright logo followed by the current year and your GitHub project name.
  • Your website should have 2 pages with the same code from above. The only differences are the main sections of your pages and the titles.
  • Name your second HTML file ‘second.html’.
  • For each webpage, add a heading element with the page title as its content.
  • For the main section of 1 page, add at least 2 paragraphs and 2 images. Make each type of content an individual section and split the sections with a horizontal rule.
  • For the main section of the other page, add two lists (1 ordered and 1 unordered) then add 2 images that are both clickable and will send you to an external source. Split the sections with another horizontal rule.
  • Each list should have at least 3 items.
  • Add a subheading for each section.

CSS Requirements

  • Use a red background color and make the text black.
  • The heading should have a font size of 36px, the subheadings should have a size of 24px, and the paragraphs should have a size of 14px.
  • Add a margin of 10px between all elements.
  • Make the main heading align in the center of the page (horizontally).
  • Use a different font of your choice.

Final Thoughts and Solution

Now that you know the requirements of this exercise, it’s time to get coding! Feel free to add more content to go beyond the minimum requirements! When you’re done, check the solution. Have fun creating your website!

Comments