@AnnaS86
Frontend Developer | JavaScript Developer I am focused on building beautiful, high-performance websites using React and Next.js. Always eager to expand my knowledge and take on new challenges in web development. Very passionate about clean code, the power of modern CSS and UX.
I’m currently learning...Strengthening my skills in React, JavaScript, and TypeScript. Always exploring new features and best practices to build better, faster, and more reliable web apps! 🚀
Latest comments
- @Oreolis
Hi Anna, really good job and nice effort 👌🙂 Looking at the design, it's pretty similar to the mockup given. If I may, I would only suggest some minor things to pay attention to:
- Nice job of setting up CSS variables (it's a good practice)
- No need for reset.css where you are doing reset for elements you don't even use, like textarea, button, em, i, etc.
- You have stylings for <body> in 2 files, that override eachother, like color
- avoid using px, try rem/em instead
- Consider using BEM (block__element--modifier) when naming class
- Good job of using <h1>, <h2> etc, but it's not a good practice to hide them, for google indexing, SEO, etc.
Other than that, awesome job and keep up with good work! 🐱🏍💪
Happy Coding!
Marked as helpful - @jldevxWhat are you most proud of, and what would you do differently next time?
I'm proud that I completed my first Frontend Mentor challenge and got more comfortable working with HTML and CSS. Even though the challenge provided some starting assets, I was able to build the layout on my own, apply styling using Flexbox, and make the design look clean and centered.
It also helped me understand how using rem units and responsive sizing like
What I'd do differently next timemin()can make layouts more adaptable.Next time, I would:
- Focus more on responsiveness, especially on very small or large screens.
- Separate my CSS into an external file to keep the HTML cleaner.
- Try using media queries for better scaling.
- Explore different layout techniques like CSS Grid.
One of the main challenges I faced was aligning the text properly inside the QR card. It took me some time to understand how to center the text and space everything out nicely.
I didn’t encounter any major technical bugs, but getting the layout to look right still required some patience. I used trial and error to tweak the CSS until things looked balanced and aligned.
I also learned how to use Google Fonts and how to create a basic Markdown file (
README.md) for the first time, which are both important skills when working on real-world web projects.@OreolisHey buddy, nice work and good effort! 👌 I would have a few points to add, if you allow: 🙂
- Remove the <style> attribute from the Head (create a CSS file where you'll have all the styling for this app
- Try using BEM methodology (block__element--modifier) for class naming
- Don't mix px and rems (I would always urge anyone to use rem/em).
- Don't name your classes like "titleb", it doesn't describe anything and it's not quite readable.
- When you defined body {font-size: 15px}, don't then update the .titleb { font-size: 0.7rem}, cause it's too small then.
- for <p class="title"> you're better to use Heading tag.
- try implementing CSS custom properties (variables).
Other than these hints, nice job and keep up the good work! 💪🐱🏍
Marked as helpful - P@crstern@Oreolis
Nice job and good work. 👌 If I may, just a few things to maybe pay attention to:
- Try using BEM methodology in CSS class naming
- Avoid using (mixing) px and rems. I would always suggest rem/em
- Good job with stopPropagination() on event handling, skipping event bubbling.
- There's an issue when user clicks on social icons, popup disappears
- Mobile trigger goes below the full with popup (not a best UX practice)
Other than this, really good job. Keep on going and improving your skills. 🙂
Happy Coding mate! 🐱🏍💪
Marked as helpful - @ibramy@Oreolis
Hey there! 🙂 Nice work and good job. 👌 There's only few minor things I would suggest to pay attention in the future:
- Good job using CSS variables
- Avoid using px (try rem/em instead)
- Be careful when naming classes (.auteur)
- For font-size, explore clamp(), min(), max()
- Consider using BEM methodology for class naming convention
Other than that, awesome job and keep on going!! 💪🐱🏍
Happy Coding!
- @Imissh3rWhat are you most proud of, and what would you do differently next time?
- Proud of how responsive and clean the layout turned out, although I did it in a bit of a hurry lol.
- Next time, I’d plan spacing and typography earlier in the process.
Spacing issues on smaller screens were tricky, but inspecting elements and adjusting flex gaps helped fix them.
What specific areas of your project would you like help with?- I'd appreciate feedback on improving mobile spacing and making the typography more consistent.
- Also, does learning CSS frameworks early on help, or should I get more comfortable with raw CSS first?
@OreolisHey there, nice job and solid work. 🙂 If I may, just a few comments for better UX and performance:
- Start your headings from <h1> for better SEO and indexing purpose
- Consider using BEM (block__element--modifier) methodology
- Pay a bit more attention to colors, font-size, etc.
- I would avoid mixing px/rems. Always go for rem/em or try checking min(), max(), clamp() new CSS API perks :)
- consider defining CSS custom properties (vars), so you can reuse them on multiple places.
- Avoid using #ids for CSS. Not a good practice. Read MDN for more info.
Other than these .. really nice job and keep on coding 🐱🏍💪
Marked as helpful - @AnKit1840@Oreolis
Hey, nice job and good effort! 👌
Visibly quite similar to the design provided.
If I may, I would just suggest a few minor improvements:
- Remove the styling from HTML. Create a separate CSS file and move changes there
- Avoid using/mixing px and rems. I would always suggest to use rem/em.
- Consider using BEM methodology (block__element--modifier)
- You should not write alt='' with -, _ or other symbols.
Other than that, great job and keep up with good work. 💪🙂
