Welcome to the first Intro to Web Development challenge! Now's your chance to show off some of your new HTML, CSS and JavaScript skills.
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.
Scenario
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.
Hints
- Use the font family Georgia
You will need
Reference image: To base your implementation off
Starter files:
- Index.html - this is where you HTML goes. Your text and images will go here. The starter code imports your stylesheet in the <head> tag.
- Exercise1.css - This is your style sheet. You can set the styles for default tags (such as body or h1) or you can create your own class and assign it to an element in your HTML file. An example of styling <body> and a custom class is already in the CSS file.
- Images - Ensure these images are in the same directory as your HTML and CSS files (this avoids you having to include the relative file path when you reference this image in your HTML file).
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.
Good luck!
If you’re having any difficulty, jump into our Software Development Discord Server and join the discussion!