Creating a Website on GitHub Pages
Challenge Project: Company Home Page with Flexbox Overview This project is slightly different than others you have encountered thus far on Codecademy. Instead of a step-by-step tutorial, this project contains a series of open-ended requirements which describe the project you’ll be building. There are many possible ways to correctly fulfill all of these requirements, and you should expect to use the Internet, Codecademy, and other resources when you encounter a problem that you cannot easily solve.
Project Goals In this project, you’ll be using flexbox to design and build the layout for a company’s homepage. You can choose to build a new homepage for an existing company or imagine your own dream company!
Setup Instructions If you choose to do this project on your computer instead of Codecademy, you can download what you’ll need by clicking the “Download” button below. If you need help setting up your computer, read our article about setting up a text editor for HTML/CSS development.
Tasks Prerequisites 1. To complete this project, you should have completed Codecademy’s Flexbox curriculum in any of the following:
Full-Stack Engineering Career Path Front-End Engineering Career Path Learn How to Build Websites Skill Path Project Requirements
You’re going to build a company homepage for a real or imagined company. You’ll get to decide exactly what content to include for this company, but you should at least include:
A title and logo or splash image. A mission statement or brief description of the company. A list or set of images and titles representing the product or products of the company. A section describing some of the company’s employees or teammates. If you want, you can tour our example site for inspiration or to see how we used flexbox. Your site will probably look very different from ours, and that’s great!
Your project should use flexbox styling for layout. Aim to use flexbox’s advantages, such as easy horizontal and vertical positioning, flexible element flows as the page size changes, and great styling for repeated elements.
In our example project, we used flexbox to:
Create a centered navbar at the top of the page. Create a flexible display of company products that changes from a more grid-like list to a column list as the page shrinks. Create a flexible display of company employees. Our example site is not an elaborate use of flexbox–we’re sure you can come up with other uses of flexbox in your layout, such as taking advantage of flex-grow or flex-shrink.
Your page should also use custom styles for other properties, such as colors, fonts, and other layout properties such as borders and padding.
Our example site uses:
A simple color scheme using CSS named colors, but yours can be more elaborate with hexadecimal, RGB, or HSL colors. Fonts from the Google Fonts API. Custom images. A great source for project images when you’re practicing web design is Unsplash. Get creative! Customizing your site’s look and feel is one of the most exciting parts of building your own websites. You can review any of these other CSS properties in our Learn CSS course.
Project Solution
Great work! Visit our forums to compare your project to our sample solution code. You can also learn how to host your own solution on GitHub so you can share it with other learners!
Remember, this is just one possible solution. Your own project may be coded totally differently, have more or less content, and look totally different! We’re providing our solution for you get a sense of one way to flexbox to help with page layout. There are multiple ways to solve these projects, and you’ll learn more by seeing others’ code.