aidanasc20/week2.day1.copythatwebsite

week2.day1.copyThatWebsite

Instructions

1. You’re tasked with copying the homepage of a professional website, with a focus to replicate,1 key feature as close as possible.
   • Do NOT spend more than 5 minutes finding a site.
   • A key feature might be:
     • The navbar
     • Tables
     • Lists with images
     • Forms (just the look, not the functionality!)
       • Checkboxes
       • Radio buttons
   • Feel free to pick one of the following sites to get started quicker:
     • https://www.hillarys.co.uk/perfect-bedroom-environment/
     • http://www.jdcdesignstudio.com/
     • https://www.mongodb.com/cloud
     • https://www.aceandtate.com/
     • https://www.showwwcase.nl/
2. Reverse Wireframe the website! Ignoring the fancy styling and imagery, imagine the elements as boxes positioned on the page. Draw out these boxes in a wireframe along with whatever details you feel are relevant.
   • Once done, present the website you chose and your wireframe to your instructional team for approval. If your website or wireframe is not approved, make any necessary revisions and try again.
3. Once approved, use command line to create a new project folder called "copyThatWebsite"
   • Navigate into the folder and create your required files (index.html, etc.)
   • Feel free to include additional files according to your needs
4. Keep in mind these professional websites took web developers weeks, if not months, to make! You are not expected to completely remake what they did in just ~1hr!
   • Do the best you can! And really try to replicate the key feature mentioned above.
   • If you need placeholder content, feel free to use:
     • Placeholder Text: Lorum Ipsum
     • Placeholder Images: Unsplash
5. Your website should be properly hosted on GitHub

Extra Credit

• You may notice the website you chose used CSS that includes @media queries. Think of it as conditional CSS styling. It’s used primarily for detecting when the window width passes a certain threshold (like for mobile devices). You can see what changes occur by shrinking the width of the window. Try including an @media query in your project’s CSS.
• You may notice a background image that doesn’t move while scrolling. This is an example of parallax. Try including parallax in your project’s CSS.

Helpful Resources

• Example sites to copy:
  • https://www.hillarys.co.uk/perfect-bedroom-environment/
  • http://www.jdcdesignstudio.com/
  • https://www.mongodb.com/cloud
  • https://www.aceandtate.com/
  • https://www.showwwcase.nl/
• Lorum Ipsum (placeholder text)
• Unsplash (placeholder images)
• W3Schools @media
• W3Schools Parallax