@HyoganSubmitted about 2 years ago
--Need a maximum advices
Bilal Salmi
@BilalSalmiAll comments
- @BilalSalmiPosted about 2 years ago
Hi nelson, your design is awsome!
all you need is remove "margin-top" from your main container.
`.cars-main-bloc {
/* margin-top: 100px; */ display: flex; height: 380px; width: 830px; border-radius: 8px 0 0 84px; padding: 100px;}`
- this will perfectly center your <main>.
That is, keep it up!
0 - @gbtan1991Submitted about 2 years ago
What would be the best practice to make this responsive in any sizes of the screen
@BilalSalmiPosted about 2 years agoHi Gilbert, well done!
Your design is already responssive, all you need to do to optimize it is to modify the div with class named ".card-wrapper". it will be prefectly centered!
.card-wrapper { background: var(--white); border-radius: 10px; display: grid; grid-template-rows: 1fr 2fr; grid-template-columns: 1fr; width: 344px; height: 600px; margin: auto; margin-top: 10px; margin-bottom: 20px; /* margin: 30px 15px 10px 15px; */ }you forget to set margin to "auto".
To fix your Accessibility report issues consider to read more about the following topic which is as follows:
- Html semantic elements click
That is, Keep going!
Marked as helpful1 - @nt-squaredSubmitted about 2 years ago
Hi everyone! Here is my solution. This challenge is quite tricky.
- I ended up using 5 img tags for the stars. I tried
background-imagein different ways, but the gaps between the stars are too narrow, even withbackground-repeat: space. - Regarding the indentation of rating and review sections, I chose to use flex-box with
align-self: start | center | endovertransform: translate().
Feel free to leave comments if there are better solutions. Appreciate your feedback for me. Thank you so much!
@BilalSalmiPosted about 2 years agoHi NT-squared, that was awsome!
As you said, I really like how you get around the problem of images but I
highly recommend to use icons instead of images. because it's much faster in loading compared to images, moreover it can be manipulated by css, so that you can change its color in the dark mode and light mode!
For icons you use font-awsome framwork click here and take a look at its offical website.
how to use it here.
That is, Keep Going!
0 - I ended up using 5 img tags for the stars. I tried
- @PierreFrsSubmitted about 2 years ago
I still have problem for the mobile first responsive layout. Do you guys know a good online course/article about how to do this properly without having to change each value everytime I reach a breakpoint ?
@BilalSalmiPosted about 2 years agoHi Pierre Fraisse,
There are a lot of techniques to get your website respossive which are as follows:
Consider to read the following articles
Keep it up!
0 - @sujeong054Submitted about 2 years ago
below the h3, I want to extend the margin but I couldn't. I don't know why so give me some advice plz.
the div.card is smaller than the main. I want the div. card to be the same as the main.
and I want the div. section more clearly. is there any solution to clear it?
@BilalSalmiPosted about 2 years agoHi sujeong, good job!
to extand the margin consider to use overflow css property in div.card
.card { overflow: hidden; min-height: 100%; width: 450px; text-align: center; border-radius: 20px; background-color: white; }Keep it it!
0 - @FrostLordVISubmitted about 2 years ago
All feedbacks are welcome!
@BilalSalmiPosted about 2 years agoHi FrostLordV, your design is so awsome!
- All you need to do for optimizing your design is to minimize the phone image a little bit.
that is . now let's move on to fix your accessbility report issues.
Heading levels should only increase by one
It looks like you forget to use <h4> in your page.
alt attribute
read more about images and alt attribute here.
Consider to use alt attribute which stand for alternative text , this text will appear if for any reason browser can't load your image, as well as it used by screen readers and google.
All page content should be contained by landmarks
Consider to use html semantic elements such as <section> <article> < aside> < header> <footer> and <main> .
The <main> should exist only once in your page.
read more about html semantic here.
that's all, keep it up!
Marked as helpful1 - @dazzlerabhi30800Submitted about 2 years ago
Need Help on how to save to local Storage.
@BilalSalmiPosted about 2 years agoHi Abhishek, good job!
your design is good but still need to be optimized.
for your question . local storage is a browser API that allows you to store some data locally
in the brawser . the best way to store your data is JSON . because it is fully compatible with javascript , it helps you to convert your js object into string format and vise versa.
Marked as helpful1 - @CBID2Submitted about 2 years ago
During this challenge, I initially used the <article> tag to build the card in a semantic way, but someone told me that using the <div> tag. I also struggled with picking px amounts when using properties like margin and padding, and positioning elements. In the future, how can I improve on these two issues?
@BilalSalmiPosted about 2 years agoHi Christine, good effort!
Your design needs some optimization which are as follows:
- consider to use alt attribute in your <img> tag .
read more about alt attribute and html images here.
- consider to use <h1> tag in your page.
Read more about html heading here.
- to center your card consider to use css height in your html body
for example :
height: 100vh. it will perfectly center itkeep it up!
0 - @DarionasSubmitted about 2 years ago
It was hard to do it, but finally I have defeated it. Any feedback is appreciated. Thanks.
@BilalSalmiPosted about 2 years agoHi Darionas, you did a good job! your design is good but still need to be optimized in terms of accessibility
-
- Accessibility recommadations*
- consider to use <h1> in your page
Read more about html heading here.
- consider using Html semantic elements like <section> <article> <header> <nav> <footer> in your page.
Read more about them here.
to improve your inputs's style consider to read this article.
keep it up!
Marked as helpful0 -
- @juancmdevSubmitted about 2 years ago
Please submit your feedback, this helpme to learn easily.
@BilalSalmiPosted about 2 years agoHi Juan, you did a great job!
-
- Accessibility recommadations*
-
Your web page should contain just one <main> element
-
consider using Html semantic elements like <section> <article> <header> <nav> <footer> in your page.
Read more about them here.
- You shouldn't put <div> inside <button> because <div> element is a container for elements and button is an element , so you could put <button> in <div> but vice vera you will get accessbility error .
read more about <div> container here.
- your page should contain <main> element just once
Keep it up!
Marked as helpful0 -
- @Marylu6Submitted about 2 years ago
So this challenge was the most stressful and complicated i just gonna do this
What did you find difficult while building the project? the cuttng of the image
Which areas of your code are you unsure of? the <picture> cuz i found someone who did i they disappear and in the end i couldn't understand how they made the cut
Do you have any questions about best practices? i dont hhhhmmm maybe how to make the icons to be on the right
@BilalSalmiPosted about 2 years agoHi Ash, good job, your design is good.
I notice that your icons are below.
your can aligned with text using the follwing code:
display: inline-block; margin-left: 5px;that happed because you set display property to "block", that's why your icons are right below the text.
you can read more about css display here.
Keep it up!
Marked as helpful1 - @joyrexjrlSubmitted about 2 years ago
Was unable to complete the javascript section of this challenge, like my last submission spent more time focusing on layout to make it like the provided material as possible.
@BilalSalmiPosted about 2 years agoHi rick, good job! your design is so good but still need to be optimized.
Accessibility recommadations
Your web page should contain just one <main> element consider using Html semantic elements (landmarks) like <section> <article> <header> <nav> <footer> in your page. Read more about them here.
consider to use html h1 - h6 for your page headings You can read more about them here.
0
