London Class 9 - Pamela Luna - HTML & CSS-Module-Project#512
Conversation
Homework
nav centre using flex
adding a form into store.html with image
ehwus
left a comment
There was a problem hiding this comment.
I think that this is a really good effort Pamela - you have demonstrated:
- A good ability to write semantic HTML.
- A good understanding of CSS selectors and rules.
- Appropriate and effective use of flex boxes
- Starting to default to responsive CSS, good consistent use of relative units.
Your site hits the basics of the brief well, though there are areas where you could make refinements. When we are given a design in a workplace, it's often expected that we will make things as close to pixel perfect as is reasonably possible. I would have a look at the design again on revision, and perhaps try to use Chrome's dev tools to make tweaks to get your submission more accurate. For example:
- Making sure the font is the same
- Making sure background colours match up
- Centering elements where they are centred on the design.
Overall, this is a really good effort, and I've left some specific comments on parts of the code with some suggestions for areas of improvement.
| @@ -1,19 +1,219 @@ | |||
|
|
|||
| /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ | |||
| body{ | |||
There was a problem hiding this comment.
Be careful here that you try to style your code consistently - there's some good information on how to style available here: https://www.w3schools.com/html/html5_syntax.asp
| } | ||
|
|
||
| body { | ||
| font-family: 'Roboto', sans-serif; |
There was a problem hiding this comment.
Roboto is a nicer looking font than the browser defaults and it's something that the project initially had imported. I would in general try to be very specific with the fonts that you use, because otherwise the text will look different on each device.
| text-decoration: none; | ||
| } | ||
|
|
||
| .list :nth-child(1) { |
There was a problem hiding this comment.
I really like this use of a pseudoclass selector, it's a very good use case for it.
| flex-direction: row; | ||
| justify-content: space-around; | ||
| align-items: center; | ||
| align-content: centre; |
There was a problem hiding this comment.
We use American English as standard practice in CSS, even though the British spelling of centre does also actually work!
| font-family: sans-serif; | ||
| } | ||
|
|
||
| header { |
There was a problem hiding this comment.
This is a great use of flexbox to create the appropriately spaced header!
| </div> | ||
|
|
||
| </div> | ||
|
|
There was a problem hiding this comment.
Not a huge issue again, but let's try to ensure that there is consistency with the whitespace and indentation in your code - automated tools are great here, but it's also good to know the rules for yourself as well.
| <option value="Panama">Panama</option> | ||
| </select> | ||
| </container> | ||
| <container> |
There was a problem hiding this comment.
This container doesn't seem to be doing anything!
| </ul> | ||
| </nav> | ||
| </header> | ||
| <hr 1> |
There was a problem hiding this comment.
I think this is a small typo that needs correcting
|
|
||
| <div> | ||
| <img src="./img/icon-coffee.svg" alt="coffee"> | ||
| <h5>Boots your productivity</h5> |
There was a problem hiding this comment.
Be careful that your text is free from typos and matches the copy.
|
|
||
| <body> | ||
| <header> | ||
| <img class="img" src="./img/karma-logo.svg" alt="Logo"></img> |
There was a problem hiding this comment.
Good to see usage of alt text here, it's great that you had accessibility in mind.
added a new store page to Karma with image and a form.
|
|
||
|
|
||
|
|
||
|
|
There was a problem hiding this comment.
good formatting, it's easy to follow.
|
|
||
| /* footer */ | ||
|
|
||
| footer { |
There was a problem hiding this comment.
it's better to use class instead of just footer. Overall, great job!
| </div> | ||
| <div> | ||
| <img src="./img/icon-refill.svg" alt="refill"> | ||
| <h5>Pas as You Go</h5> |
There was a problem hiding this comment.
Excellent job Pamela, I am impressed with your code, and I would like to suggest that in lines 37, 41, and 45, try to use a '
' or span instead of 'h5'. about the rest, it's all clear. Well done!
Homework
Volunteers: Are you marking this coursework? You can find a guide on how to mark this coursework in
HOW_TO_MARK.mdin the root of this repositoryYour Details
Homework Details
Notes
What did you find easy?
What did you find hard?
What do you still not understand?
Any other notes?