@KevallionSubmitted about 1 year ago
Hi there !
I just finish this challenge. I used html and SASS.
P
Nikki
@nicolette-codesAll comments
- @nicolette-codesPosted 8 months ago
Hi,
I like that you html file is very clean and well structured.
I think your css could be improved. My suggestions.
- Use CSS custom properties to make adjusting/changing of certain properties easier i.e. font color etc.
- Your purple button in the header section is broken on my screen because it has a fixed width
width: 139px;- Font sizing should ideally not be done with hard-coded px values
0 - @DivasJaglanSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
Proud of completing this new task. Next time I will get more prepared for the grid layout.
What challenges did you encounter, and how did you overcome them?I faced challenge in aligning the cards in the desired position for the desktop mode. The I used the chrome developer tools for help which came in so handy for that.
What specific areas of your project would you like help with?I think my grid section need some more improvement in the media query. I am not that good in designing with grid at this moment. 🥲
@nicolette-codesPosted 8 months agoHello,
I have a bit of advise for you.
- In your markup you do not use the main & section elements
i.e. you could replace the <div class="container"></div> with this
<main> <section class="testimonials"> .... here goes the rest of the markup </section> </main-
Your img elements are missing text in the alt attribute.
-
You should set a fixed with or better maximum width on your grid container for desktop version. Otherwise it won't stop growing in width and starts to look weird.
Marked as helpful1 - @dcubicSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I liked my feature layouts
What challenges did you encounter, and how did you overcome them?I couldn't quite figure out how the box shadows worked. I also don't like the transition from mobile to desktop state. The expanded mobile state looks far too bulky and the shrunk desktop state looks too compressed. I think the only solution would be to use an entirely different grid layout for that middle transition stage, but the design didn't specify anything so I didn't bother.
What specific areas of your project would you like help with?Nothing really
@nicolette-codesPosted 8 months agoNice work. Don't have any suggestions to improve your solution. Keep up the good work.
0 - @vonsackerSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I think the responsiveness came out well, without using to much extra code
What challenges did you encounter, and how did you overcome them?I had some issues with copying the layout of the text from the designs. After some trial and error it came out pretty close to the original
What specific areas of your project would you like help with?I'm using a normalize.css file, but i'm not sure it's necassry. Also i'm not sure if i'm using spacing the right way fot the text.
@nicolette-codesPosted 8 months agoI received some feed earlier today that I found helpful, so I gonna copy it here.
--variables: don't use color name for your variable
:root{ --Dark-Cyan: hsl(158, 36%, 37%); --Cream: hsl(30, 38%, 92%); --Very-Dark-Blue: hsl(212, 21%, 14%); --Dark_Grayish-Blue: hsl(228, 12%, 48%); --White: hsl(0, 0%, 100%) }what happened when your designer calls you and he will tell you that he wants color of the background change it to pink?
--Cream: pink;It's better to names like this: primary, secondary, link-color, header-color, bg-color, text-color and so on.
--bg-color: hsl(30, 38%, 92%);Marked as helpful1 - @PeterBachman100Submitted 8 months agoWhat are you most proud of, and what would you do differently next time?
Most proud of the table spacing at the bottom. Next time I would ask ChatGPT for ideas form the get go.
What challenges did you encounter, and how did you overcome them?Getting the spacing right on the tables and the list items and markers was difficult. Persistence was key in figuring it out.
What specific areas of your project would you like help with?Not a big deal, but the number 1 in the instructions list is different than the design doc despite being the same font, and I can't figure out why.
@nicolette-codesPosted 8 months agoExcellent work. I really like what you made here. Don't really have any tips to make it better. I especially like how efficient your CSS is, I have like 100 lines more in my solution.
Keep up the good work!
1 - @vonsackerSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
It went pretty smoothly.
What challenges did you encounter, and how did you overcome them?doubts about using list with tags or just buttons.
What specific areas of your project would you like help with?Any feedback is more then welcome.
@nicolette-codesPosted 8 months agoHey, I like your solution, good work.
I don't really find much to critique. You could remove the empty header and the footer elements (content of footer is commented out ).
I also agree with your choice of using a list with links in it. I think it's semantically the best way.
Code on.
2 - @pettikSubmitted 11 months agoWhat are you most proud of, and what would you do differently next time?
I'm most proud of the clean and organized structure of my HTML and CSS code. I've made sure to use semantic HTML tags for better accessibility and SEO, and I've managed to keep the CSS well-structured and easy to understand. The use of CSS variables and the
box-sizingproperty have also helped in creating a more efficient and maintainable codebase.If I were to do this project again, I would consider using a CSS preprocessor like SASS or LESS. I would also consider adding more comments to my code to make it easier for others (and future me) to understand the purpose of each section. Lastly, I would look into making the website more responsive for different screen sizes using media queries.
What challenges did you encounter, and how did you overcome them?One of the challenges I encountered was ensuring that the layout and design were responsive and looked good on different screen sizes. To overcome this, I used media queries in my CSS to adjust the layout and design based on the screen size.
Another challenge was managing the CSS for the different elements in the HTML. With so many elements, it was initially difficult to keep track of the styles for each one. To solve this, I used CSS variables and organized my CSS in a way that made it easier to understand and manage.
What specific areas of your project would you like help with?I would like help with improving the responsiveness of my design. While I have used media queries to adjust the layout for different screen sizes, I’m still not completely satisfied with how it looks on all devices. I would appreciate any advice or best practices on creating truly responsive designs.
Additionally, I would like to learn more about optimizing the performance of my CSS. While I’ve tried to keep my CSS clean and organized, I’m sure there are ways to make it even more efficient.
Lastly, I’m interested in learning more about accessibility in web design. I want to ensure that my web pages are accessible to all users, including those with disabilities. Any resources or tips on this topic would be greatly appreciated.
@nicolette-codesPosted 8 months agoHi, I like the work you did here. It looks like you used mobile first approach which is really cool.
Regarding feedback:
- In case you haven't already looked into it you can maybe check out the BEM methodology to better group your class names.
Marked as helpful0 - @NecxesSubmitted 8 months ago@nicolette-codesPosted 8 months ago
My feedback:
- The main element could have been used in your markup
- The alt text for the image could be more verbose. i.e. "QR code that can be scanned to redirect to the Frontend mentor website."
0
