Latest solutions
Latest comments
- @o-k-harmash@Katherine-Kapinus
Nice job!! Great attention paid to variables, very professional✨
- @alepacc@Katherine-Kapinus
Hi! Your site looks really good
I just noticed that there's a message in the console about the stylesheet not loading, and the styles aren’t being applied.
If you change the stylesheet link to this, everything should work:
<link rel="stylesheet" href="./assets/style/style.css">Hope this helps! ✨
- @byteAndBaitWhat challenges did you encounter, and how did you overcome them?
I did encounter an issue which i didn't know how to position the image and it's size , but when i used flexbox on the article the image just takes up all the space which is great
@Katherine-KapinusHello!✨ Your code looks really good — nice job!
Suggestions for improvement: Semantic HTML I’d recommend enhancing the semantic structure a bit:
Use <h1> and <h2> where appropriate (e.g., for the title).
Wrap the date in a <time> tag.
Consider replacing <span> with <div> .
Typography If I’m not mistaken, there’s no italic font in the layout — feel free to remove it if it's unused.
Spacing & Layout The height difference compared to the layout may be due to insufficient spacing and line-height.
Interactivity You can add :hover/:active states to links and buttons via pseudo-classes to improve UX and match the layout behavior.
Responsiveness Great job on the responsive part — the block looks good even on narrow screens! One small thing to improve: add some horizontal padding (e.g., padding: 0 16px) so the card doesn't touch the screen edges on mobile.
Keep it up — you're on the right track! 💪
- @glrodriperez98What are you most proud of, and what would you do differently next time?
What I am most proud of is my grasping the foundations of having a scalable website that responds well on both desktop and mobile. It is an issue I have had with my personal portfolio page and I managed to use availbe resources to understand it for this project and will apply them on a greater scale for my portfolio. Here is an example code that I'm proud of:
css .qr-code img { width: 100%; max-width: 250px; height: auto; border-radius: 10px; }
What I would do differently next time which was suggested at the beginning of the project is focus on structuring the html entirely before moving to the styling. While it didn't impact me that much with a bigger project I can see where things would get complicated.
What challenges did you encounter, and how did you overcome them?My biggest challenge was understanding how to build components with reusable CSS. I overcame them by using the offline CSS resources I found to try and reuse as much script as possible without creating new css code to style the project.
What specific areas of your project would you like help with?My specific area that I would like help in is reusing CSS code. I'm struggling to determine when to use Flexbox or Flex grid for example, and then understanding how to factor that into the entire design of a project.
With this project, I'm not sure if it's possible but I would love to know if theres a way to cut down the amount of CSS that I used and make it more efficient and easier to read to a third party reviewing my code.
@Katherine-Kapinushello! Your code looks great✨ Here are a few suggestions to improve it semantically:
<main class="container"> <div class="qr-code"> <img src="./images/image-qr-code.png" alt="Scan this QR code to visit Frontend Mentor"> </div> <h1 class="blurb-1">Improve your front-end skills by building projects</h1> <p class="blurb-2"> Scan the QR code to visit Frontend Mentor and take your coding skills to the next level. </p> </main>Your styles look clean and well-organized 👌
A few additional tips: Consider using utility-first class naming to make this block more reusable in larger projects.
You can try the Figma plugin "Weblify Code Inspector" — it helps get precise px values from the layout and works great as a developer panel replacement.
And finally, I’d recommend giving SCSS a try — it’s a CSS preprocessor that can really simplify your workflow as your projects grow.
It might feel unfamiliar at first, but once you get used to it — it’s hard to go back! Definitely worth exploring 😊
Keep it up — you’re doing great! 🌟
Marked as helpful - @puja-oliWhat are you most proud of, and what would you do differently next time?
I’m proud of completing this component with clean HTML and CSS. I kept the layout responsive and consistent across screen sizes. Next time, I might experiment with using CSS Grid or try adding transitions to enhance interactivity.
What challenges did you encounter, and how did you overcome them?The most challenging part was aligning the component precisely on the screen while ensuring it remained responsive across various screen sizes. I used Flexbox on the <body> to center everything and added padding to improve responsiveness on smaller devices.
Another challenge was matching the exact color values and font styles from the design specifications. I double-checked the style guide and used tools like Google Fonts to make sure it matched closely.
What specific areas of your project would you like help with?I’d appreciate feedback on:
How I can improve my responsive design strategy
Whether my HTML structure is semantic and accessible
Anyways to improve the clarity or efficiency of my CSS
@Katherine-KapinusHello! Your code looks great ✨
To make it look even closer to the layout, you could wrap the title and description in an additional container with a limited width and add some bottom margin for spacing.
Also, in future projects, it might be more convenient to separate styles into a dedicated CSS file and apply styles via class names — this makes your code more reusable and easier to maintain in larger projects.
Great work overall, keep it up! 🚀
- @Yasminxs3What specific areas of your project would you like help with?
I'm open to feedback on any part of the project, but here are a few areas where I'd especially appreciate suggestions:
CSS organization – Could my styles be structured in a more scalable or cleaner way?
Code quality – Are there parts of my HTML or CSS that could be more efficient or simplified?
@Katherine-Kapinushello! for some reason I can't find the repository for this project on your github🌸