Now that we have become masters of Copy Kitten, let's become masters of Copy Calico. I think we are ready to get to the Big Leagues and show our skills!
Below you will find a list of the websites that you have been requested to copy by Copy Calico. Don't worry, you don't have to copy all of them; you only have to choose one and work with that one. ONLY ONE! (Unless you REALLY want to challenge yourself!)
Fork this repository, make HTML and CSS files, and get going!
Do NOT forget to add a link tag from your HTML to your CSS.
Also, as you work, make at least three commits in git as you go with clear messages!
- DuckDuckGo
- Facebook (when you are NOT logged in!)
- Twitter (again, when logged out!)
- 4ocean
- Ed Nacional
- You do NOT have to cover the whole page, just the "above the fold" section. That is, you don't have to do anything you'd have to scroll down to see! Start at the top and work your way down, and if you only get halfway down the page, that's acceptable. The farther you go, the more you'll learn!
- You don't have to do any fancy fonts or animations or videos. Feel free ot screenshot any videos so you can just use the still image. And save or screenshot any actual images, of course
- You CAN use your browser's Developer Tools, and we recommend you do! Every browser has them. (Though Safari's isn't as good, so... probably use something else?)
- While your Dev Tools will actually show you the HTML and CSS you could steal, getting it perfect isn't the point; learning is. Make yourself work on implementing the layout yourself, and then you can always check out the original code later.
Try adding a font to better match the site: https://fonts.google.com/
Upon selecting a font in Google Fonts, you'll be given <link> tags to import the fonts into the <head> of your HTML doc along with a CSS font-family property demonstrating how to apply the font.
Try another copying another one of the sites!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent