Looking to hire developers?
@kxnzx
@TonyAppiah
Submitted
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.
@kxnzx
Posted
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
Submitted
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
@kxnzx
Posted
@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
Submitted
How can I upload fonts from google?
@kxnzx
Posted
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).
@OhSorrow
Submitted
Is it okay that the page is too wide and scrollable? If not, how can I fix it?
Your feedback is greatly appreciated.
@kxnzx
Posted
@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
Submitted
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
@kxnzx
Posted
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
Submitted
All feedback welcome, Thank you
@kxnzx
Posted
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">
Marked as helpful
@Peteonthebeat
Submitted
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!
@kxnzx
Posted
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.
Marked as helpful
@NienDev
Submitted
All comments are welcome
@kxnzx
Posted
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
Marked as helpful
@ESteban-07
Submitted
Any feedback will be appreciated!
@kxnzx
Posted
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).
@Joshuakme
Submitted
Hi, Can you help to look at my HTML code, is it a semantic HTML code?
@kxnzx
Posted
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! :)
Marked as helpful
@bit-bayusaputra
Submitted
All feedback is welcome
@kxnzx
Posted
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!
@MabIggo
Submitted
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.
@kxnzx
Posted
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;
Marked as helpful
@joecobb
Submitted
I would love to know what you think and how I can improve it.
@kxnzx
Posted
Hello @joecobb,
Your mobile version looks great! To finish your desktop version use in your div wrapper: display: grid and grid-template-columns: 1fr 1fr;
In your div wrapper us max-width instead of width, because with a max-width your element can shrink when the screen is resized.
Instead of <div id="wrapper"></div> use <main id="wrapper"></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 id="content"></div> use <section id="content"></section>. You can use the section tag when the content within is related. As you can see the image with the perfume bottle and the description are related.
Wrap “Gabrielle Essence Eau De Parfum” into an <h1></h1> tag. 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. 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. Just remember that the most important title on the page is an h1.
Marked as helpful
@Maher0551071612
Submitted
I couldn't find free icons.
@kxnzx
Posted
Hello @Maher0551071612,
Well done finishing your second challenge! I have some suggestions...
You need to wrap the title "Gabrielle Essence Eau De Parfum" in a <h1></h1> tag, because this is the most important heading on the page. This helps the search engines understand what the page is about. Besides that it helps (screen)readers understand the hierarchy of the page. Always first start with an H1 and then you can follow it up with an H2 etc. (in case you have subheadings.) You could wrap "perfume" in an <h2></h2> tag. Even though this starts earlier on the page, this does not matter: the screenreaders will understand the hierarchy.
You are also missing the <main></main> tag. (Wrap or make your div in(to) a main tag). The main tag acts like a landmark. Screen readers and other assistive technologies read them. By using landmark elements such as <main>, you improve the navigation experience for users of assistive technology such as people with bad eyesight. The footer is also a landmark, and you included that. Well done!
Also..Look into CSS Flex-box and CSS-Grid to learn how to center containers on the page.
Marked as helpful
@alecioweb
Submitted
I am just getting started in web development. I would really appreciate if someone could give some feedback.
@kxnzx
Posted
@alecioag Congratulations with finishing your first challenge! You did an excellent job!! The design looks similar and your HTML is semantically correct. Keep on going :)
Marked as helpful
@kenobi404
Submitted
Hi ! This was a nice challenge, I did it with css grid for practice and I think it went really well. Im looking for ways to improve my code, how to make it more cleaner, more good-looking and in general any advice on the code will be great. Thanks.
@kxnzx
Posted
Hello KENOBI404,
You made a good choice by using grid! It looks good.
I have a suggestion:
Instead of <div class="container"> use <main class="container"> . The <main> tag acts like a landmark. Screen readers and other assistive technologies read them. By using landmark elements such as <main>, you improve the navigation experience for users of assistive technology such as people with bad eyesight. Also remember to include a footer.
Marked as helpful
@Aryan-Rahul-Jaiswal
Submitted
Is there any better alternative way to make this using just html and css? Please let me know how i could make my code better.
@kxnzx
Posted
Hello Aryan,
You did a pretty good job for your first challenge. I have some suggestions:
When you start a project like this it is important to first start with a good understanding of HTML. You did a good job by wrapping the elements in a div, but you are missing semantic tags:
Semantic tags structure the page and helps the browser and the developer understand what the meaning of the content is. Semantically correct HTML also helps search engines and screen readers.
When you finished the HTML you can use a Markup Validation to inspect if you did it correct. Only then I would go begin with the design. Some tips:
body { display: grid; place-items: center; }
Define the max-width of the card/container/box.
For the background of the card; never use height, use padding.
You can always check my finished solution as guidance.
Hope you learned something.
Marked as helpful
@DadoVeliki
Submitted
I would appreciate some feedback :)
@kxnzx
Posted
Hello David,
Well done making this challenge. I have some suggestions.
Marked as helpful
@yonigold
Submitted
Hi ! This was a nice challenge, I did it with bootstrap for practice and i think it went really well. Im looking for ways to improve my code, how to make it more cleaner, more good-looking and in general any advice on the code will be great. Thanks.
@kxnzx
Posted
Hello Yonatan,
Well done finishing your third challenge! I have some suggestions...
Marked as helpful
@RoyalYum
Submitted
whats the difference between width using any of the measurement vw, px, em and rem?
@kxnzx
Posted
Hi Paul,
REM Units are relative to the font-size of the root element. It is best to use REM for defining the width’s of elements, margins, padding, and font-sizes. Using this relative unit is important for accessibility settings, they adapt to the user's browser. People with visual impairment can zoom in to make the font-size/components on the screen bigger/smaller.
EM Units are relative to the font-size of the element (2em means 2 x times the size of the current font). It is best to use EM for padding in buttons. The padding will auto adjusts to the font-size of the button. You can also use EM for media queries to scale elements/fontsize, I however have not tried that yet.
Pixels are fixed/static. I use them for shadows & borders, because they need to stay the same size always.
VW is relative to 1% of the width of the viewport/the browser window size. I personally mostly use VH (viewport height), to define the min-height of the html element. However I have read somewhere that this is not the best practice to do yet, so now I use % instead.
@pyaetheiN
Submitted
Things I learned from this challenge:
picture and source html tagsmix-blend-mode: multiply; css property on a CHILD element inside PARENT element with a background propery background-colorQuestion:
Things I learned from feedbacks:
display: block takes all the place that is possible@kxnzx
Posted
Hi! Try this in your picture element: display: block;
Marked as helpful
@luciferad
Submitted
Is it ok to set height property to 100vh for body selector to use flexbox?
@kxnzx
Posted
Hi @luciferad,
Yes that's okay, it essentially means that the body will take in the whole height of the viewport. Instead of Flexbox you could also use Grid with only two lines to center your card. This is how I would do it:
html, body { width: 100%; height: 100%; }
body { display: grid; place-items: center; }
Marked as helpful
