Task and motivation
Now that you have grasped the basics of CSS and HTML, you will be creating a static page base that complies with a visual specification. When working as a web developer, it is very common to be presented with a visual specification (usually created by a designer) that you need to translate to code. You will practice using images, text and background styling in this activity.
A family member is starting their own travel blog. They love travelling and writing, but don’t know how to code. They have asked you to help them by creating a web page that nicely displays photos and headings, so they can showcase the places they are visiting. 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
A colour picker - use whichever one you choose but here is an example.
A HTML validator - To ensure you’re using best practices/style 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 answers
Submissions close 28/01/2021 at 12:00pm AEST.
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!