LONDON CLASS _8-DONA_SHEHU-HTML/CSS-WEEK_3 #276
Conversation
| <!----------HERO SECTION---------> | ||
| <div class="homepage-hero"> | ||
| <img src="images/american-heritage-chocolate-vdx5hPQhXFk-unsplash.jpg" alt ="hero-img" /> |
There was a problem hiding this comment.
Hi Dona, try to use alt attribute to describe your image
| <footer class="footer"> | ||
| <section class="homepage-footer "> | ||
| <div class="footer"> <a href ="#">About Us</a></div> |
There was a problem hiding this comment.
You have one class name "footer" for many divs, wrap them in one to avoid repeating it
| <p>© BonTon Cakes</p> | ||
| </section> | ||
| </footer> |
| padding:15px; | ||
| } | ||
| .logo-img { | ||
| width: 50%; |
There was a problem hiding this comment.
Using % for width shows how great your understanding of CSS is
| text-align: center; | ||
| } | ||
| /* TABLET VERSION*/ | ||
| @media screen and (min-width: 550px) { |
There was a problem hiding this comment.
Was this break point not supposed to start at 540px?
| .homepage-welcome p { | ||
| font-size:30px; | ||
| } | ||
| .homepage-header .logo-img { |
There was a problem hiding this comment.
Great way of avoiding code repetition
| </head> | ||
| <body class="body"> |
There was a problem hiding this comment.
Please make sure the indentation in this document is properly done please :)
| <!--HEADER--> | ||
| <header class="header"> |
There was a problem hiding this comment.
Well done on separating the sections into header, main, and footer using proper semantic HTML. I would do exactly the same!
| <!---------MAIN---------> | ||
| <main class= "main"> | ||
| <nav class="nav-bar"> |
There was a problem hiding this comment.
In my opinion, nav tag should be part of the header, not the main content. Main tag should only contain the contents of the web page
| <!-------PRODUCTS SECTION---------> | ||
| <section class="homepage-products"> | ||
| <div class="products"> |
| display:grid; | ||
| grid-template-columns: repeat(4, 1fr); | ||
| grid-template-rows: auto; | ||
| grid-template-areas: |
| text-align: center; | ||
| } | ||
| /* TABLET VERSION*/ | ||
| @media screen and (min-width: 550px) { |
There was a problem hiding this comment.
I believe the homework mentions only 2 breakpoints: 540px and 900px!
| color:black | ||
| } | ||
| .products img { | ||
| width:100%; |
There was a problem hiding this comment.
yes thats correct! having 100% width and height applied to the image(s), those images will then try to fit whatever width of the div that wrap them. I would do exactly the same to achieve responsiveness
| .homepage-footer { | ||
| display: flex; | ||
| } | ||
| .homepage-footer { |
There was a problem hiding this comment.
footer should be aligned in one row instead of 3 rows for desktop view
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?
How to use Grid Css.
What do you still not understand?
How to use correctly Grid Css
Any other notes?