General Assembly Logo Build a Responsive Website! For your first project, you're going to build a responsive website using HTML and CSS. You'll pick one of a few provided designs and build an honest replica of it.
Instructions Create a new repository on GitHub (not GitHub Enterprise). Clone down the repository and complete your work in there. Fulfill the listed requirements below. Please turn in your submission by the deadline on your cohort calendar.
Requirements Pick a design implemented in Adobe XD from the provided collection of designs.
You can find the designs here.
Pick from the Easy or Medium folders. Pick something that seems challenging but manageable!
The goal is to build an accurate clone of your chosen site. Do your best to get everything looking as similar as possible. Treat it like you were handed this mockup and given a deadline to deliver it. Use all the available resources you've been given - documentation, your peers, your instructors, placeholder images, etc.
Additionally, your site should be responsive (meaning it looks good on mobile, tablet, and desktop).
Use media queries to rearrange content so that it looks good on different devices. If your mock only has designs for desktop, then it's up to you to figure out how to make it look good on mobile. Great! It's really common in the industry for designers to come up with the desktop designs and then have the developers figure out the best way to present it on mobile and tablet.
Finally, you should deploy your website to GitHub Pages. This is a free hosting service provided by GitHub for deploying static websites (no server or database). This is the part of the project that you get to figure out on your own! 😃
In sum, the requirements for this project are:
Pick a mock and implement it with HTML and CSS Make your mock responsive using media queries Deploy your website to GitHub Pages Submission Please submit your project via a new issue. Click the issue tab above and selcet the new issue button.
Helpful Suggestions Don't spend too much time getting the images exactly right. If you need to, pick a placeholder stock image from Unsplash.
Work on the structure first. Don't get stuck in the weeds with details until you've got most of the high level stuff done. This means start with the container/row/column pattern and fill them in as you go along.
Try to find the exact font on Google, if you can. Don't pay for a font! Instead, use Google fonts and try to find a font that is close to the one in the design!
Plagiarism Take a moment to refamiliarize yourself with the Plagiarism policy. Plagiarized work will not be accepted.
License All content is licensed under a CCBYNCSA 4.0 license. All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact legal@ga.co.