Introduction
It’s time to take what you’ve learned from Module 2 and apply it to your Course Assignment.
Process
Images and Icons
- Decide which images should be added as an
<img>element in the HTML and which should be added with CSS. A useful question to ask is ‘would a visually impaired user like to know about this image?‘. - Add the images.
- Apply the appropriate styling.
Forms
- Look at your prototype and consider what different elements you’ll need. For example, text inputs, number inputs, select elements etc.
- Open the Contact page in VS Code and add the elements.
Navigation
- Style the navigation to look like your prototype. This might include adding the checkbox hack for showing a hamburger menu on mobile and having the navigation displaying on desktop. NOTE: Please don’t add two navigations, one for mobile and one for desktop. Have one navigation you style differently for different screen sizes.
- Style your links, this could include updating your call-to-action links.
CSS Box Model
- Find elements that need padding, margin or border applied to them and style them appropriately.
Questions to ask yourself about the CA so far
- Are my images loading correctly and look like they should?
- Is my form using the correct inputs and is it bug free?
- Does my navigation look good and is it correctly laid out?
- Have I used padding, margin, and border to add space to elements?
To help answer these questions, you can use:
- W3C Validator
- Test on different devices
Outcomes for this module
You should now be able to say:
- “I can add images with HTML and style them”
- “I can use the correct input types in forms”
- “I can style navigation items”
- “I understand the CSS Box model and how to use it”