Mobile design is not yet complete
Requires more practice about mobile RWD
my design process
(I think it will take a long time to finish everything.
How can I streamline implementation time? just try it?
thanks for read)
Hello Charis 👋. Good job on completing the challenge ! I just have a few recommendations:
-In order to create an amazing site that is very responsive and compactible across devices. You might have to take the mobile-first approach. Visit this url to learn more and I am always available to answer your questions. Responsive Design at w3schools
-In order to make your implementation of the UI screens more similar to the UI design. Try to pay more attention to details and change your size ratios they seem a bit large especially the font sizes. Instead of using the value you use for the font size try to use values in px or rem. The reason is that every browser render large, normal, bold differently
p {
letter-spacing: 8px;
font-weight: 900;
font-size: large;
}
h2 {
line-height: 1.8;
margin-top: 30px;
margin-bottom: 20px;
font-weight: normal;
}
But I will like to commend your efforts. Keep coding!
Here is my solution to the Product Preview Card Component. I will appreciate any feedback. I want to grow as a developer through building these fun projects.
Hello there 👋. Good job on completing the challenge !
Your solution looks so sleek. I wanna acknowledged the fact that you have good eyes for design and keen attitude to details.
Happy coding!
I found it difficultto write optimized code that adheres to the best practices. I also found it challenging to style the mobile view to prevent overflowing of child elements.
Hello Rose U+1F60A, Great job your did here. I would like to suggest your add this to your button css:
.summary-btn button{
background: hsl(224, 30%, 27%);
color: white;
width: 100%;
border-radius: 35px;
height: 3.5rem;
/* margin:15px 0 0 0 ; */
font-family: 'Hanken Grotesk', sans-serif;
}
.summary-btn button{
background: hsl(224, 30%, 27%);
color: white;
width: 100%;
border: transparent;
border-radius: 35px;
height: 3.5rem;
/* margin:15px 0 0 0 ; */
font-family: 'Hanken Grotesk', sans-serif;
}
This will help take off the default border and make the button match the UI design better.
all feedback is welcome thank you in advance
Great Job Micheal! You nailed it. But I will like you to check your css and make this correction if you see it neccesary:
.cont {
height: 100vb;
display: flex;
justify-content: center;
align-items: center;
}
Change your b on the height property to :
.cont {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
Keep soaring, Happy Coding!
I am a beginner to front-end development. Tried my best to make the page responsive to small display sizes. Feedbacks and suggestions to optimize the code are welcome.
Hello Kaushai Joshi, You did a really nice job. But I just have a few corrections you can improve with. You should put a lang attribute in your <html> tag like <html lang="en"> because of accessibility issues. I would advise you to use your developers tool (F12 on your browser) in order to view the responsiveness of your web app on different devices. Happy Coding!
I would like to seek feedback regarding my solution for mobile responsiveness. My solution is definitely not the best, and I am not sure of what the best practices for it are.
Hello Junwei! I really love your solution, it's nice and well constructed. I will just suggest some ways to get rid of the HTML(20) and Accessibility issues(11). The issue with img tags is that you must always add an alt text even if it for an icon. So instead of omitting it when it doesn't seem to be necessary like in the case of an icon, you just have to add it with an empty string. for example <img class="logo" src="./images/logo.svg"/ alt=""> or <img class="logo" src="./images/logo.svg"/ alt="logo">.
Next is about the landmark issues, since you are working with HTML5, you are expected to use header, footer, nav, article, or section when necessary. So keep coding and keep flying!
I hope you review my code and help me to fix my problem and write cleaner code.
You did a nice work pal. You just had a few accessibility issues. I will advise you always add a (lang = "en-us") attribute to your HTML tag. I believe this link will help
www.w3schools.com/html/html_accessibility.asp
I would like to know a bit more about accessibility so, any advice about it would be more appreciated .
About your question...Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. Read more here
https://www.w3.org/WAI/fundamentals/accessibility-intro/#:~:text=Web%20accessibility%20means%20that%20websites,contribute%20to%20the%20Web
https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility
I would like to know a bit more about accessibility so, any advice about it would be more appreciated .
I love the way you structure and comment your CSS. Nice job
