Task and motivation
Once again, you will be creating a static webpage that is based on a reference image. The styling for this task is more complex than the previous one, and the final product will look more like a modern website as a result. You will practice styling buttons, using flex display and HTML entities/symbols.
Scenario: A friend has been blogging their interior design articles, but isn’t happy with how bland they appear. They have asked you to help them create a more polished looking blog in the hopes of gaining more viewers. They have provided you with this image for reference:
The aim of this activity is to create a page with HTML and CSS that looks like the below image. You will need to use tools such as a colour picker to obtain the HEX codes/RGB value of the colours used. If you are finding it hard to match the font sizes/spacing between elements you can use an image editor to measure sections of the reference.
You will need
Reference image: To base your implementation off of.
A colour picker - use whichever one you prefer,but here is an example.
A HTML validator - To ensure you’re using best practices while you’re doing any kind of web development work. This will ensure your code not only works, but is readable for people other than yourself. You can find one here. You’re creating habits that will stick with you for your career in tech, make sure they’re good ones!
Submit your files directly to Kristin via Discord or through the below form.
If you’re having any difficulty, jump into our Software Development Discord Server and join the discussion!