Product Hunt is a website that lets users share and discover new products. The site, which was founded by Ryan Hoover in November 2013, is backed by Y Combinator. Users submit products which are listed in a linear format by day.
Product Hunt is one of the best website to keep you updated about trending tech products. We recommend you to visit the website to see how it works... because you are going to clone it!
We will work with the repo we have prepared for you. First of all, you have to get the exercise:
- Fork this repo
- Clone this repo into your
~/code/labs - Use SASS to create the styles of your page
- Use Media Queries to create different layouts in your Product Hunt clone
-
Upon completion, run the following commands
git add . git commit -m "done" git push origin master -
Navigate to your repo and create a Pull Request
The starter code contains the basic structure of an HTML & SCSS project to start working. It also contains the Product Hunt logo in the /images folder, with some other images you may need during the exercise.
Before start doing the project, remember you must have installed the sass-autocompile plugin in your atom editor.
We have added one line in the SCSS file that will colorize the <body> background. Set the <body> font color to white and save the scss file to check out that the compiler is working fine. Once you have checked this out, you can start working on the exercise.
Note: For the right side "Upcoming Live Chats" section, you can use a rounded
<div>to represent the speacker picture.
Product Hunt has an interesting Responsive design. We have done four different screenshots representing each of the different layouts you have to reproduce.
Forget about super detail things on each box, the main goal of this exercise is to practice our skill to adapt content to differents screen sizes, and the main thing that changes from one resolution to another are the big boxes and how they are been displayed. Just pay attention to see which are the differences between all of them, and be sure you do your best to copy each.
/Happy Coding!