Hello.
So I tried the Mobile-first approach for this challenge and I found it slightly difficult, particularly with the transition from mobile to desktop. I have heard it is the best approach to begin a project with. Is it best practice to use the mobile-first approach or is it based on personal preference?
Your response and a constructive criticism of my code will be highly appreciated. Thank you.
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.
Hi! This is my second solution, I had a lot of fun doing it. Could you please tell me mistakes that I made? Especially with those background circles
@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>.
How can I upload fonts from google?
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).
Is it okay that the page is too wide and scrollable? If not, how can I fix it?
Your feedback is greatly appreciated.
@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!
Hello everybody,
The thing that got me while doing this project, is I have no idea how to handle the height to center the main container. So I did something whith the min-height on the main container element.
I would like to know if what I did is considered as good practices or there is a better solution ?
Except from this, I really enjoyed working on this project, so if you have any feedback please feel free to le me know.
Thank you
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.
All feedback welcome, Thank you
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.
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:
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">
This is my solution for the 'Social Proo Section' challenge. I am open to suggestions and constructive criticism. I'd also be happy to know whether I should actually write the read.me files for these challenges or should I upload them with the plain instructions.
Regards!
Hello @Peteonthebeat,
Well done, you did a great job!
You should write the read.me file to summarize what you have learned. Writing it down helps with remembering the information that you just have learned. At the same time you can use your read.me as a reference for yourself, but it's also a good source for recuiters to see your learning progress and skills.
Greetings K.
All comments are welcome
Congratulations with your first challenge, you did a great job! Your solution looks similar to the design.
You have one accessibility issue. Your page must contain at least one H1 element.
Here is my 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.
An H1 is very important on a page for search engines, screen readers, SEO and people with visual 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 find more information here: https://dequeuniversity.com/rules/axe/4.3/page-has-heading-one?application=axeAPI
Greetings K
Any feedback will be appreciated!
Hello @ESteban-07,
You did a great job! The design looks similar, well done!
I have some suggestions...
It is important to use semantic HTML. "A semantic element clearly describes its meaning to both the browser and the developer." 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="grid-container"></div> use <main class="grid-container"></main> tag. The main tag is considered an accessibility landmark and ensures that a screen reader and people with visual impairment have the ability to jump and identify sections of the page. Examples of landmarks are: header, nav, main, aside, section, footer.
You always need just ONE h1 in your page. This is very important for search engines, screen readers, SEO and people with visual visual impairment to know what your page is about. Wrap “Join our community” into an <h1></h1> tag. Then (when needed) you follow it up with subheadings such as an h2, h3, h4 etc. It’s the hierarchy that matters. (Don't look at the font-size.) Just ask yourself the question "What is the most important title on the page?". Then just remember that the most important title on the page is always an h1. You can wrap “30-day, hassle-free money back guarantee” in an <h2></h2> tag, because it's a subheading of the h1. I would wrap "Monthly Subscription" and "Why Us" also in an <h2></h2> tag. They are both subheadings of the <h1></h1> (the most important title on the page).
Hi, Can you help to look at my HTML code, is it a semantic HTML code?
Hello @Joshuakme,
Congratulations finishing your first challenge! You did a great job! You managed to make the design look similar!
I have some suggestions:
Wrap the <section class="card"></div> in a <main></main> tag. The main tag is considered the primary content of the page (also called an accessibility landmark). A landmark ensures that a screen reader and people with visual impairment have the ability to jump and identify to sections of the page. Examples of landmarks are: header, nav, main, aside, section, footer. Also remember to wrap your <div class="attribution"></div> in a <footer></footer> tag.
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. You made the right choice by wrapping your elements in a <section></section> tag! We use the section tag when the content within it is related. As you can see the image with the perfume bottle and the description are related. So well done!
Keep on going! :)
All feedback is welcome
Hello @bit-bayusaputra,
Congratulations with finishing your first challenge! You did a great job! You managed to make the design look similar!
I have some suggestions/learning points:
Instead of <div class="card"></div> use <main class="card"></main>. 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.
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="card-body"></div> use <section class="card-body"></section>. You can use the section tag when the content within it is related. As you can see the image with the QR Code and the description are related.
Wrap “Improve your front-end skills by building projects” into an <h1></h1> tag (not an h2). This 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. In this challenge there are no subheadings, though. Just remember that the most important title on the page is an h1.
Keep on going to the next challenge! Best of Luck!
I used a CSS grid to center the element. Is there another way to center the element? and I can use flexbox to center the element.
Hello @MabIggo,
Remove display: grid; place-items: center; on your <div class="container></div> and try this instead:
display: flex; justify-content: center; align-items: center; height: 100vh;
