NW6 | AREEB-SATTAR | HTML-CSS | MODULE-PROJECT | WEEK-1

[areebsattar]

Volunteers: Are you marking this coursework? You can find a guide on how to mark this coursework in HOW_TO_MARK.md in the root of this repository

Your Details

• Your Name: Areeb Sattar
• Your City: Manchester
• Your Slack Name: areebsattar

Homework Details

• Module: HTML-CSS
• Week: 1

Notes

• What did you find easy?
  Writing some of the HTML,
• What did you find hard?
  Found writing semantic HTML a bit tough and styling few things
• What do you still not understand?
  When is it best to use relative and absolute values
• Any other notes?
  N/a

[netlify]

✅ Deploy Preview for cyf-module-project-html-css ready!

Name	Link
🔨 Latest commit	16f011f
🔍 Latest deploy log	https://app.netlify.com/sites/cyf-module-project-html-css/deploys/653037b12b4887000881e8c4
😎 Deploy Preview	https://deploy-preview-646--cyf-module-project-html-css.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[SpectacularLandscape]

I love what I see here Areeb. You've demonstrated a great range of HTML/CSS super powers, with advanced CSS selectors and excellent semantic HTML.

I particularly like how you use a nested flexbox for the Karma icons on the homepage. And your order form looks great, they are notoriously difficult to style - made even better by using HTML5 validations such as required.

Just a few pointers from me:

1. In a few places there is a class on a HTML element that is the same as the element type (e.g., <header class="header">). Feel free to ditch the class and just reference the element type directly from CSS (header instead of .header). This should make your code easier for other developers to work with
2. There are some slight deviations from the proposed design, for example the menu links. They're very slight, but I can guarantee the designers of the page would notice 😄

To help your uncertainty on when to use absolute/relative units: I can't give any solid answers, but as a rule of thumb I would prefer relative units wherever possible. This helps to make the site as responsive as possible. You need to be disciplined (lots of nested relative units can get confusing), but on the whole you can use relative units to make sizes that scale beautifully, whether that is based on the screen size or the user's preferred font size.

[areebsattar]

Thank you for the feedback Jay, I will keep these pointers in mind for future