Project: Landing Page

Introduction

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 of them an image of the complete website, and one with 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 (i.e. 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 margin between the various sections. The point of this assignment is creating something from scratch and getting 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 margin: 48px.

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.

Setting up your project’s GitHub repository

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.

Warning About Looking at Other People’s Finished Project Code Before You have Completed Your Own

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 to compare your completed code to 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:

  • All of the submitted projects are other student solutions. This means they are written by other people who are also still learning and may not necessarily be representative of “best practice” or quality code.
  • Looking at solutions robs you of the chance to develop your problem solving and researching skills. In the real world, there will not always be “solutions” for you to look at and you will have to come up with your own.
  • There are many different ways to achieve the same end result, it is not “one size fits all”.
  • An Analogy: “Looking at completed code is like learning how to make pizza dough from looking at a baked pizza.” There is a lot more that goes into it than you would have assumed by only seeing the final product and not the process that lead to it.

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!

Assignment

  1. 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)
  2. 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.
  3. For the section you’re working on, begin by getting all the content onto the page before beginning to style it. In other words, do the HTML and then do the CSS. You’ll probably have to go back to the HTML once you start styling, but bouncing back and forth from the beginning will end up making things take longer and may end up causing you more frustration.
  4. Many of the elements on this page are very similar to things you saw in our flexbox exercises… feel free to go back to those if you need a refresher.
  5. Do not worry about making your project look nice on a mobile device. We’ll learn that later.
  6. When you finish, don’t forget to push it up to GitHub!

Viewing your project on the web

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 your-github-username.github.io/your-github-repo-name

There are a couple of ways to go about doing this, but the simplest is this:

  • make sure that the main HTML file of your project is called index.html. If it is not, you will need to rename it.
  • go to your GitHub repo on the web and click the Settings button
  • click on Pages on the left side bar
  • change the Source from none to main branch and click Save.
  • it may take a few minutes (the GitHub website says up to 10) but your project should be accessible over the web from your-github-username.github.io/your-github-repo-name (obviously substituting your own details in the link)
Improve this lesson on GitHub

Have a question?

Chat with our friendly Odin community in our Discord chatrooms!

Open Discord