HTML/CSS Project - initial draft -konika - #48
Conversation
Added semantic tags and few styles
Added all the style but media queries
HTML/CSS
|
just checking .. |
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
There was a problem hiding this comment.
Take care with the formatting of your HTML - occasional blank lines can be useful to help make your code easier to read, but large blocks of blank space like this should be avoided
There was a problem hiding this comment.
Thank you for your comment. I rectified the issue as suggested . However every single review is showing outdated. I hope I am not very late to address the reviews. Kind regards.
| <div class="read_more"> | ||
| <a href="https://www.gardenersworld.com/offers/travel-and-events/bbc-gardeners-world-spring-fair/"> | ||
| <button>Read More</button></a> | ||
| </div> |
There was a problem hiding this comment.
The tags here are not correctly indented - usually you will want a child element to be indented 1 level (e.g. a tab or 2 spaces) from its parent. There are a few places where this is the case - remember that you can format your HTML within VS Code;
On Windows Shift + Alt + F.
On Mac Shift + Option + F.
On Linux Ctrl + Shift + I.
There was a problem hiding this comment.
Hi Paul, I followed your suggestion and used an auto formatter in VS code. Thank you.
| <img class="gallery_image" src="/image/pomegranate-tree.jpg"alt="a photo of a pomegranate tree"> | ||
| <img class="gallery_image" src="/image/big tree.jpg" alt="an image of a big tree in the garden"> | ||
| <img class="gallery_image" src="/image/nature-wallpaper-1.jpeg" alt="picture of a nature wallpaper"> | ||
| <img class="gallery_image" src="/image/garden-1.jpeg" alt="a designed garden's photo"> | ||
| <img class="gallery_image" src="/image/Orange-Persimmons-Growing-on-the-Tree.jpg" alt="a persimmons fruit picture"> | ||
| <img class="gallery_image" src="/image/fruit_bowl.jpg" alt="a photo of a beautiful fruit bowl "> |
There was a problem hiding this comment.
great to see alt text here! You should avoid using phrases like "picture of", "image of" in alt text - accessibility tools can pick up that it is an image because it is contained in an tag
There was a problem hiding this comment.
Thank You, for your comment. I changed the alt texts of all the suggested tags.
| *{box-sizing:border-box; | ||
| padding: 0; | ||
| margin:0; | ||
| } | ||
| body{ | ||
| background-color:#e8e1e0 ; | ||
| } | ||
| h1,h2,h3{ | ||
| color:#57394a | ||
| } |
There was a problem hiding this comment.
Take care with the formatting of the CSS file - you should include a space between the selector and the first curly brace, indent rules within a block etc. It is also a good idea to include a new line between rules to aid readability.
You can auto format CSS in VSCode to fix much of this;
On Windows Shift + Alt + F.
On Mac Shift + Option + F.
On Linux Ctrl + Shift + I.
There was a problem hiding this comment.
Hi Paul, Thank you for your comment. I addressed the issue and edited the formatting of the CSS file.
konikalily
left a comment
There was a problem hiding this comment.
Hi Paul made all the changes you have suggested on the project. However all the comments are showing outdated. Not sure whether I have done anything wrong or not? Please have a look. Thank you.
|
Your coursework submission has been closed because nobody has interacted with it in six weeks. You are welcome to re-open it to get more feedback. |
Added semantic tags and few styles
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
html
styling gallery
flex box, grid
View rendered README.md