Dog Party is a project designed for learning the basics of HTML and CSS. The objective is to take a static image of a web page design and recreate it. You have the option to go further and build out extensions but I did not do those extensions with this project. What you see is just the HTML and CSS I used to best attempt the recreation of the Dog Party Comp provided to us.
Example provided:
As I didn't submit the extensions for Dog Party, my recreation is very simple. The way in which I approached the project was to try my best at keeping the HTML simple by utilizing semantic elements and classes for the simple structure to be communicable to CSS. I worked by grouping or containing specific sections of the web design, based on the order in which you see them in the comp.
In CSS I did my best to keep the styling properties simple. The layout in which I organized my CSS was by starting with the selectors and then moving to edit the classes (.) and then moving on to any id tags (#) I identified in the HTML.
My examples:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent