This example takes snippets from the Landing Page project in Foundations, and is meant to show how an authored project might look after following the style guide.
For this project you’ll be creating an entire web page from a design we’ll provide for you. If you’ve been following along you should have the skills you need to accomplish this, but it may not be easy!
As we did in the Recipe project, go ahead and set up a git repository before beginning work on this project. Git and GitHub are going to act as a portfolio for you moving forward, so you need to keep everything in there! Look back at the recipe project if you need a reminder on how to set it up.
-
Download the design images and take a look at what you’re going to be creating here. Image One (Full Design), Image Two (Color and Fonts)
- The font that’s being used in the images is roboto.
- Hero text is the statement that appears at the top of a web page.
-
There are many ways to tackle a project like this, and it can be overwhelming to look at a blank HTML document and not know where to start. Our suggestion: take it one section at a time. The website you’re creating has 4 main sections (and a footer), so pick one and get it into pretty good shape before moving on. Starting at the top is always a solid plan.
- This section isn't in the original Landing Page project, but we want to show what an extra credit item might look like.
- Put your own spin on the project! Instead of copying the text from the design images 1:1, theme the project to your own interest or something you like.
There are a couple of ways to go about publishing your project, but the simplest is the following:
- Make sure that the main HTML file of your project is called
index.html. If it is not, you need to rename it.