@TonyAppiah
Latest solutions
Latest comments
- @kxnzx
Hi TonyAppiah,
It makes much more sense to start with Mobile First. It will make working on your projects like these much more easy! When you look at the design of the Mobile First version you can see that the elements are in order from top to bottom. This is in the exact order you would write the html. You then only have to add the css styling in the same order as if you're building blocks from top to bottom. When that's done you can start with the Desktop version with media queries. It makes the working process much more smooth & easy (in my opinion).
Hope this helps.
Marked as helpful - @Maylayloo@kxnzx
@Maylayloo Congratulations with finishing your second challenge. You did a good job!
I have a suggestion for improvement:
Your page should contain one <h1></h1>. Instead of <p class="general-information"><span>Victor Crest</span>26</p> do this: <h1 class="general-information"><span>Victor Crest</span>26</h1>
Having an h1 on your page is very important for search engines, screen readers, SEO and people with visual visual impairment to know what your page is about. You always need one h1 in your page. Then (when needed) you follow it up with subheadings such as an h2, h3, h4 etc. It’s the hierarchy that matters. Just remember that the most important title on the page is an <h1></h1>.
Marked as helpful - @DanielAgofure@kxnzx
Hello Daniel,
The name of the font family that is required to use in this challenge is named "Outfit" in the weights Regular (400) and Bold (700).
- Go to https://fonts.google.com/ and type in the name of the font family in the search bar
- Click on the font family and scroll down. You will see a list with all the font weights
- Click on the plus + to select the font weight you need, it will be added on the menu on the right side
- You'll see two radio buttons with <link> and <import> on the right side on that menu. Select <import> and copy the following link: @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');
- Place the this @import link inside your css file. Now you're ready to use the font family in your styles
- @OhSorrow@kxnzx
@OhSorrow your solution looks neat! Well done!
It does not scroll and the page is not too wide.The page is only scrollable when the toolbar is enabled and that's fine.
You can use a max-width on the container if you want to prevent that the width of the container grows, when you enlarge the screensize. Another advantage of using a max-width is that when you shrink the screensize the container will scale down. However in your case it's unnecessary, because you used (grid-template-columns: 1fr;) on the container, which keeps the container in one fraction of the available place. Well done!
Marked as helpful - @Yavanha@kxnzx
Hi! You did a good job. What you did is considered as good practice. Well done!
I have a suggestion: It is good to use div’s for the purpose of styling and arranging components on the page. Div’s are like empty containers, but they do not have any semantic meaning. So instead of <div class="container"> use <main class="container">.
The main tag is considered an accessibility landmark and ensures that a screen reader and people with visual impairment have the ability to jump to sections of the page. Examples of landmarks are: header, nav, main, aside, section, footer.
Marked as helpful - @idirieh@kxnzx
Hello @idirieh,
Congratulations finishing your second challenge, good job!
You have some accessibility issues:
It is good to use div’s for the purpose of styling and arranging components on the page. Div’s are like empty containers, but they do not have any semantic meaning.
- Instead of <div class="card"></div> use <main class="card"></main> and instead of <div class="attribution"></div> use <footer class="attribution"></footer>.
Main and footer are tags that are considered an accessibility landmark and ensures that a screen reader and people with visual impairment have the ability to jump to sections of the page. More examples of landmarks are: header, nav, aside, section.
Your page must contain at least one H1 element:
- Wrap “Gabrielle Essence Eau De Parfum” in an <h1></h1> tag.
An H1 is very important on a page for search engines, screen readers, SEO and people with visual impairment to know what your page is about. You always at least need ONE h1 in your page. Then (when needed) you follow it up with subheadings such as an h2, h3, h4 etc. It’s the hierarchy that matters. Just remember that the most important title on the page is an h1.
-
You can wrap “PERFUME” in an <h2></h2> tag. Even though it starts earlier on the page, this does not matter. It’s the hierarchy that matters.
-
Instead of placing your styles inside the <head> it is good practice to create a css file, like for example styles.css and use an external link inside the <head>. Example: <link rel="stylesheet" href="styles.css">
Marked as helpful
