I've done this html/css rebuild of Miley Cyrus webpage as an exercise of the things I've learned so far on Rocketseat's "Discover" course.
I'm still on the very beginning of the course, so surely big part of the code could be better. But I'm quite happy for achieving something close to what her home page looks like on a desktop full screen view, with almost all same functionalities.
Up to know I've had the basics of hardware, html and css only on Rocketseat.
This is how I did this:
- I've taken image files from her website;
- Favicon done by myself on Photoshop;
- Firstly, I created html file with things I've seen on the course:
- meta info;
- lists;
- <a>;
- <img>;
- <link>;
- class;
- id;
- width;
- height;
- Then, started messing around on CSS:
- background settings;
- font set up for different kinds of headers (h1/h2/h3/h4/h5/h6) and paragraph;
- margins;
- paddings;
- text colors;
- Finally, searched for deeper knowledge on text alignment and decoration, vertical alignment of elements, display, buttons (different behaviour on hovering and "onclick", <select> (how to use it and copied a code containing a list of all countries) and also found out that I probably should know how to use scripts and other languages to be doing this.
Maybe I can try again once I finish the course.
ps.: It's not responsive. No sneak peek on the original code.
Check out her website to compare: https://mileycyrus.com