10: Website Copy Studies

Your final study will be to complete copies of websites. You are only copying the visuals of a single page from these websites, and you can use my copies, or go directly to the website. I find that one of the greatest ways to learn CSS is simply copying as many websites as possible, so when you're done with this challenge you should find more things to copy. You can also only copy small elements of website design. One excellent source of things to copy is the existing components of another framework like Bootstrap. If you went down their list of components and copied each one you would come out knowing almost everything you need.

If you do make copies of the components from Bootstrap then keep in mind they're using an older class based style that isn't necessary. You can use their CSS for clues, but I'd attempt to use the HTML and CSS style I present here since it's simpler and can do the exact same things with less code and effort.

Google

The very first website to copy is Google's main landing page. This is easily the simplest website you could copy so don't over think it. Here's my attempt:

80% Discount for Alpha 1

Register today for the early access release and get an 80% discount on the final release price. You'll get true lessons in true modules right now, and early access to content as it's released.


Still Not Sure? Check out more curriculum!