Welcome to the second Intro to Web Development challenge! Now's your chance to show off some of your new HTML, CSS and JavaScript skills.
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.
Hints:
- Use the font family serif for the paragraph text and Arial for the sub-headings
- Use a text generator such as this to generate the content of the paragraphs. Of course this text won’t look the same as the reference, just ensure your paragraphs are a similar length to the reference.
You will need
Reference image: To base your implementation off of.
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 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!
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.
- Exercise2.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).
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!