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!
The design we’re providing you comes in the form of 2 images: one is an image of the complete website, and one has some details about some of the fonts and colors we’ve used.
Do not be afraid to use google or go back to previous lessons to look something up. Real-life, professional developers use google constantly for things that they have been doing for years. At this point it is not expected that you will have everything memorized, so don’t worry about it. Additionally, there are a few small details that you may not have encountered in our lessons yet. This is by design. These details are minor, and easily searched (e.g. google
css rounded corners).
Get your project as close as you can to the design, but do not worry about getting it pixel-perfect. Don’t get out your ruler or count pixels to find the exact margins between the various sections. The point of this assignment is to create something from scratch and get the various elements in more or less the right position relative to the rest. It doesn’t matter if you use
margin: 24px when the design actually has
Finally, feel free to substitute your own content into this design. The images have some meaningless dummy content, but if you want to make up a business and personalize this page, please feel free to do so! Insert actual images in the placeholders, and feel free to play with the colors and fonts a bit too.
A note about images on the web
You do not have the legal right to use just any image that you find on the web. There are many free images to be found, but make sure that the image you use is actually free for you to use, and make sure to credit the creator of the image in your project. An easy way to give credit is to put the creator’s name and contact info in a README file in your repository. Some good places to find free-to-use images on the web include Pexels, Pixabay, and Unsplash.
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.
All of our projects have a “Student Solutions” section at the bottom for people to post their completed code and live websites for the projects. These are here for you both to compare your completed code with and see what other routes people have chosen to take with their project code and designs.
We know it may be tempting to look at the solutions when you get stuck or don’t know where to start, but don’t do it! Here are some reasons why:
Once you have completed your project, feel free to look at the other solutions to see alternative ways the project was completed.
DO NOT PEEK. Come ask for help in our discord server!
If you want to show your work (the project) to others, or submit a solution below, you will need to publish your site so that others can access it from the web, rather than just on your local machine. The good news is that if you have your project on GitHub (as described above), doing this is incredibly simple.
GitHub allows you to publish web projects directly from a GitHub repository. Doing this will allow you to access your project from
There are a couple of ways to go about publishing your project, but the simplest is the following:
index.html. If it is not, you need to rename it.
your-github-username.github.io/your-github-repo-name(obviously substituting your own details in the link).