@Joshua-kalu
Latest comments
- P@teempe
The project is well-executed and visually accurate. The HTML and CSS code is generally clean and correct, though it could benefit from minor semantic and technical improvements to fully align with front-end best practices:
- Use semantic tags – Replace
#headerwith an<h2>and#publishedwith a<time datetime="2023-12-21">element. - Prefer class selectors over IDs – Especially for styling reusable components.
- Review the
grid-template-rowsrule – The current value appears to be invalid or unnecessary.
The layout and styling are very well done — great job!
- Use semantic tags – Replace
- @bulhakovolexiiWhat are you most proud of, and what would you do differently next time?
I already had some experience in solving similar problems, so I decided to make the layout more adaptive, using Flexbox, and more improveable, using CSS variables.
In order not to worry about resetting built-in browser styles, I used Normalize.css.
What challenges did you encounter, and how did you overcome them?Unfortunately, I found out that the standard CSS does not have such functions as mixins, although they would be appropriate for adding text styles. See the example below.
@mixin text-preset-1 { font: 700 22px/120% "Outfit", sans-serif; letter-spacing: 0px; } @mixin text-preset-2 { font: 400 15px/140% "Outfit", sans-serif; letter-spacing: 0.2px; }
What specific areas of your project would you like help with?.card__title { @include text-preset-1; margin: 0; text-align: center; color: var(--slate-900); } .card__subtitle { @include text-preset-2; margin: 0; text-align: center; color: var(--slate-500); }I'd be interested to know what fallback exists to reproduce mixin functionality in vanilla css.
P@teempeNice job with this task. You may consider for future projects using semantic elements like for example
<article>,<section>etc. instead of<div>making your markup more meaningful to both developers and assistive tech. Try using rem/em for your fonts and spacing instead of px so your layout adapts smoothly across screen sizes and respects user settings. Keep experimenting and refining, you’re doing fantastic work!Marked as helpful - @fatemzhWhat are you most proud of, and what would you do differently next time?
I am most proud of how I successfully managed the visibility and display of elements across different screen sizes (desktop, tablet, phone) with a mobile first approach. This project has really helped me get comfortable with manipulating display and visibility properties to create a responsive design that adapts well to various devices. However, if I were to do this project again, I would explore more efficient ways to handle responsive design, possibly by using more advanced CSS techniques like CSS Grid or Flexbox combined with CSS media queries. This might help streamline the process and reduce the amount of conditional logic required for different screen sizes.
What challenges did you encounter, and how did you overcome them?One of the main challenges I encountered was juggling between what should be displayed or hidden depending on the format (desktop, tablet, phone). It was tricky to ensure that each element appeared as expected on each device without conflicting with the layout or user experience. I overcame this by carefully managing the display and visibility properties in my CSS and thoroughly testing the design on multiple devices to ensure everything worked smoothly. Although I feel there's a simpler way to achieve this, I'm satisfied with how this approach got me used to handling responsive elements.
What specific areas of your project would you like help with?I'm having trouble understanding why, when I initially open the page in desktop mode, the image meant for mobile mode is sometimes displayed. However, when I refresh the page, the image disappears as it should. This behavior seems random—sometimes the image is there, and other times it isn't. I can't figure out what's causing this inconsistency. Also, I do hope that next time I will be able to finish the project faster by applying more efficient design techniques that I've learned from this experience. My goal is to continue improving my speed and efficiency in future projects.
P@teempeYour HTML code is well-structured, with effective use of semantic elements. You're clearly on the right track! I have a few suggestions that could help you further improve your skills.
First, while your form is properly labeled, which aids accessibility, the id for the email input (email-address) and its corresponding label (for="email") don’t match—correcting this will ensure proper screen reader functionality.
Consider using the <picture> element to provide alternative versions of images for different screen sizes, which enhances responsiveness (see MDN documentation).
Also, re-evaluate the necessity of wrapping single images in <section> tags. Use <section> only when there’s a clear need for grouping content. For a single image, a <div> might suffice, or it may not need wrapping at all.
Regarding styling, be cautious with font size changes in media queries, as too many variations can affect readability. A consistent scale is generally more user-friendly. Additionally, creating reusable classes, such as for buttons, can improve both maintenance and readability of your CSS.
These are just a few areas to consider. Overall, you're doing great—keep up the good work!
Marked as helpful - @mariotbg11What are you most proud of, and what would you do differently next time?P@teempe
Hi there,
Great job on your solution! I really appreciate the effort you've put into crafting it. While reviewing, I noticed that the responsiveness could be enhanced to improve user experience across different devices. Keep up the fantastic work!
Best regards :)
- @NataliaDeJagerP@teempe
Hi :) I do not think you could change alpha for once defined color. You can manipulate with custom values of opacity, but you need to define your variables as values passed to hsl() function. See example below.
:root { --bg-color: 0, 0%, 0%; --opacity: 50%; } div { background-color: hsla(var(--bg-color), var(--opacity)); }Hope it helps... a bit at least ;)
Marked as helpful - @BryanCarlosP@teempe
Hi, clever attempt to this challenge. You may try to use form instead of bunch of buttons, and then handle submit event on it. It could make html a bit cleaner. You may check my solution if it helps: https://github.com/teempe/frontend-mentor-interactive-rating-component Keep up coding :)
