Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
19
Comments
28
paulDev
@dev-paulL

All comments

  • noshinc346•10
    @noshinc346
    Submitted 8 months ago

    QR-Code-challenge

    1
    paulDev•660
    @dev-paulL
    Posted 8 months ago

    hey, quick review:

    • missing <main> and <footer>
    • mention where the qr code leads to in the alt ('qr code to the frontend mentor website')
    • improve your naming, those imagine if you had 3000 lines class="line-three-thousand-seven-hundred-ninety-height"💀
    • your card need a heading. could be <h1> (ideally <h2> since h1 would be used somewhere else on a real website)
    • this challenge doesnt need media queries. your css could be improved (check flex & grid behaviors with gap etc)
    • don't give fixed sizes to elements, especially in pixels (max-width and min-height in rem)
    • font-size should never be in px, use rem or em.

    i suggest you create 1 github repo per challenge. if you have any questions lmk i can go more in depth happy coding

  • danielnero-bot•290
    @danielnero-bot
    Submitted 8 months ago

    Qr Code Component

    1
    paulDev•660
    @dev-paulL
    Posted 8 months ago

    Hi, quick review:

    • missing <main> landmark
    • why h4?
    • img needs an alt : QR code to the Frontendmentor website
    • we talked about <main>, .attribution could be inside of a <footer>
    • don't give fixed height and width to your elements
    • don't use pixels for font size, -> rem / em (responsive units that scale with the browser font-size preferences)
    • what text editor are you using? install Prettier extension on vscode or similar ones, for better formatting
    • * { } body { margin: 0; } import a modern css reset (eg: https://piccalil.li/blog/a-more-modern-css-reset/, but there are other ones that could do the job too)
    • looks like you're missing fonts too
  • shivak818•120
    @shivak818
    Submitted 8 months ago

    reciepe page

    #pure-css
    1
    paulDev•660
    @dev-paulL
    Posted 8 months ago

    Hi, quick review:

    • <main> landmark is present, that's good
    • missing headings (you used h1, but no h2 nor h3 for the rest : ingredients, instructions, nutrition are headings for example)
    • <strong> instead of <span> => good. But some of your <span> are useless
    • correct use of <ol> and <ul>
    • incorrect image path
    • incorrect image alt
    • using pixels for font-size is a bad habit for accessibility, instead use 'rem' (1rem = 16px), they adapt to the browser font size.
    • width: 100%; max-width: 80%; on your .wrapper?
    • repeated css properties (margin & padding).
    • missing some styling

    happy coding 🫡

  • shahjghst•40
    @shahjghst
    Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Getting the design as close as possible to the provided figma file. Probably to help more with the spacing next time, to set the margin and padding to 0 in the body tag to help deal with spacing issues and remember to use a flexbox when dealing with inline elements that have whitespace between them.

    What challenges did you encounter, and how did you overcome them?

    Once again spacing was an issue and figuring out how to prevent whitespace from the h1 tag from triggering the hover function. Setting the main tag as a flexbox and setting its direction to column seemed to help with the spacing issues. The whitespace issue was resolved by just reducing the width of the h1 tag.

    What specific areas of your project would you like help with?

    -Did I write semantically correct html?

    -For my "Greg" id, was it good to use a 12px margin-right for the spacing?

    -For my "name" id, was it good to use a grid and an align content to get it to center with the image at the bottom?

    Desktop Solution using CSS grid, flexbox and hover

    1
    paulDev•660
    @dev-paulL
    Posted 8 months ago

    Hello, good job for completing this challenge. Here's a quick review, don't hesitate if you have questions.

    • main, header and footer are present: however, they all need to be direct children to the body. (<body><header></header><main></main><footer></footer></body>). In your case, since your <header> and <footer> are inside of <main>, they behave like simple divs. Your <header id="learning"> should just be a <p>.

    • your card has a heading (h tag) which is good, but note that on a real website, H1 would be used somewhere else on the page, you could use h2.

    • use class instead of id as css selectors

    • your images have an alt text, that's good habit, but we could consider both the illustration and avatar decorative (doesn't provide important informations - aren't needed to understand the context), and let the alt empty (alt=""). Note that ALL images (img, svg..) need an alt text, even if empty.

    • since this is an article preview, the entire card should be clickable, and have the hover effect (and be focusable).

    • for accessibility, don't use pixels for font size, instead, use 'rem' or 'em'.

    • the way you centered your card is good

    • you should not give fixed height and width to your elements

    • "For future projects set the margin and padding to 0 in the body". Even better, you can import a modern css reset! https://piccalil.li/blog/a-more-modern-css-reset/

    Happy coding

    Marked as helpful
  • Irene Fuente Romero•10
    @ifuenteromero
    Submitted 9 months ago

    Responsive social link profile with HTML and CSS

    1
    paulDev•660
    @dev-paulL
    Posted 9 months ago

    Hello, good job 🫡

    • You have a <footer> but not a <main>, wrap the page main content in there (Put ur <article> inside of <main> or just rename <article> as <main>)
    • You are using rem for font-size, this is good.
    • Good use of heading, however this could be <h2> since we can suppose that h1 would be use somewhere else on the page on a real website
    • Good naming, this is a small challenge but you could make better use of bem in bigger ones
    • Good use of css reset, but *, *::after, *::before { box-sizing: border-box; } could be part of it
    • You are using <a> for links (and not <button>), that is good. It's a common mistake on this challenge. They are even target="_blank", good as well (it's better for external links)
    • The alt="A photo of Irene Fuente" is a bad alternative text. This should not include "photo of, image of". You can leave it empty for decorative images (alt="") - that are not important to understand context. We could consider the avatar decorative.
    • You could simplify your styling, pretty sure you don't need media queries for this challenge.

    Anyways, you're up to a really good start 👍. Keep it up, happy coding

    you can also post on the Front end mentor discord #finished-projets to ask for feedback or #help if you're stuck.

  • Katte18•110
    @Katte18
    Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of practicing semantic html, adding js functionality for section divider -> now section is added and it will add horizontal line automatically.

    What challenges did you encounter, and how did you overcome them?

    semantic html, most time is used div and for some cases it's better to use semantic tags.

    What specific areas of your project would you like help with?

    semantic html

    Recipe semantic HTML, CSS, JS

    1
    paulDev•660
    @dev-paulL
    Posted 9 months ago

    Hi, good job 👍 Quick review, I've probably missed things :

    semantic:

    • <header> behaves like a <div> in your case, since it's inside of <main>.
    • instead of <span>, use <strong>.

    • you are using headings well (h1, then h2).

    • sections and articles need to be labeled (either by a heading, or an attribute, in your case, sections are okay but your <article> behaves like a div).

    • good use of <table>, but they need a title

    • don't use pixels for font size, i saw you used rem too, rem is better.

    Keep it up 🫡

    Marked as helpful
  • nabinsth36•110
    @nabinsth36
    Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    I'm currently in the process of learning TailwindCSS, but I find myself struggling with confidence in my abilities. While I understand some of the concepts, I often second-guess my skills and worry about applying them correctly or efficiently in real projects.

    Social links profile page

    2
    paulDev•660
    @dev-paulL
    Posted 9 months ago

    Hi, quick review, I've probably missed things:

    • Too many useless div, use the right tags (h and p tag)
    • Repetitive classes, with tailwind classes, you can @apply classes in your css file : you give your html element the 'link' class, and in css : .link { @apply bg-gray-700 pt-2 pb-2 w-60 mb-3 rounded-md hover:bg-yellow-300 hover:text-slate-900 }
    • Btw, pt-2 pb-2 can be simplified : py-2.
    • Adding multiple 'mb-' 'pb-' 'pt-' to everything can be hard to maintain, instead, you can use 'space-y-' or 'flex' and 'gap-' on the container, or create children containers.
    • ❗The challenge is social links -> they need to be links (<a>)

    The only way to get gud at tailwind is to keep using it, but you need some css basics. If you don't know what's the tailwind translation for a particular property, you can still check their docs, it's well made.

    Happy coding 🫡

    Marked as helpful
  • A S DineshMoorthi•220
    @dineshmoorty
    Submitted 9 months ago

    QR Code

    1
    paulDev•660
    @dev-paulL
    Posted 9 months ago

    Hi, quick review, i've probably missed things:

    • you put your page content inside of <main> which is good, attribution could be in <footer>.
    • classes naming is okay (could be improved), check BEM for example.
    • don't give fix width and height to everything
    • you gave your image an alt attribute, which is good, however, you could precise where it goes 'QR Code leading to the front end mentor website'. Remember to leave it empty (alt="") when images are decorative.
    • you should give your card a heading, in that case, that would be <h2> since h1 would be used somewhere else on a real website.
    • the shadow is always present (not on the hover event)

    Keep it up, happy coding 🫡

  • MahmoudEmad•180
    @ma7mod7
    Submitted 9 months ago

    Social links profile

    2
    paulDev•660
    @dev-paulL
    Posted 9 months ago

    Hi, the link to your live site is not valid. However here's a quick review from your github code. I've probably missed things :)

    Good habits :

    • Your page has a <main>
    • you are using links (<a>) and not buttons
    • you gave your decorative image an empty alt attribute
    • aware of display:flex.

    You can improve :

    • You should use a modern css reset.
    • Don't use pixels for font-size.
    • Simplify your css (naming : (check out bem), organize it better it will considerably reduce its size - responsive units to avoid needing mediaqueries).
    • Don't skip heading levels (h4?), u can just use h2 (since we suppose h1 would be present somewhere else on the page on a real website) and style it.

    Happy coding

    Marked as helpful
  • othmane titebah•20
    @otitebah
    Submitted 9 months ago

    I used HTML for structuring the card and CSS for styling

    1
    paulDev•660
    @dev-paulL
    Posted 9 months ago

    Hi, quick review:

    • You are not importing fonts correctly.
    • Missing <main>.
    • It's better to use class="" instead of id="".
    • Images need an alt attribute. If they are decorative, leave it empty (alt="") but it needs to be there.
    • Don't use pixels for font-sizes (check out rem & em units)
    • Your css is too big, the card could be a display:flex with some gap.
    • Since this is a blog preview, it needs to lead to the full article, usually, u can interact with the entire card rather than the title only.

    Happy coding

    Marked as helpful
  • Samiullah•490
    @samir-Deve
    Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    ...

    What challenges did you encounter, and how did you overcome them?

    ...

    What specific areas of your project would you like help with?

    My project runs without any errors when I run it locally but When I deploy it on gh-pages the data.json file returns 404 error, Is there anyone who can help I would appreciate it !? Edited (Thanks for all your supports I finally with the helps you guys provided

    React.js

    #react
    1
    paulDev•660
    @dev-paulL
    Posted 9 months ago

    Hi, I think it comes from: await fetch("../public/data.json") the path is /data.json.

    https://vite.dev/guide/assets#the-public-directory

  • P
    pg686•10
    @pg686
    Submitted 9 months ago

    Social Links Profile solution

    2
    paulDev•660
    @dev-paulL
    Posted 9 months ago

    Hi,quick review:

    • missing <main>
    • fonts are not imported
    • you are skipping heading levels for no reason (h2 -> h5)
    • they are "social links" so they need to be <a href="githublink.qsd/qsdqd">Github</a>, etc. Since they are external links you can add target="_blank" so they open in a new tab. (note that it needs an href to be interactive, it could be either '/' or '#' as 'template' links)

    happy coding :)

  • Alex-Milton•30
    @Alex-Milton
    Submitted 9 months ago

    social-links-profile

    1
    paulDev•660
    @dev-paulL
    Posted 9 months ago

    Hi, quick review, i've probably missed things

    • missing <main>
    • they are LINKS styled as buttons, not <button>.
    • dont use pixel for font-size.
    • "avatar-jessica" is a bad alt text.
    • don't give fixed height and width to everything (change the font-size in your browser preferences and check what happens)
    • hover effect is missing

    happy coding

    Marked as helpful
  • Dimpho Sethiba•30
    @DimphoSethiba
    Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud that I able to complete the task, but I took a lot of time working on this task.

    What challenges did you encounter, and how did you overcome them?

    The challenged i came a cross was placing the card on the center of the screen.

    What specific areas of your project would you like help with?

    centering the card in the middle of the screen

    Respoonsive Blog Preview Card

    1
    paulDev•660
    @dev-paulL
    Posted 9 months ago

    hi again, quick review:

    • missing <main> again.
    • stop nesting everything in their own div, it looks like elementor projects 💀
    • "learning" is NOT a button
    • you used headings this time, which is good. However, you are going from h2 to h4, don't skip levels.
    • "avatar" is a bad alt text.
    • use a modern css reset
    • you can use display:flex and gap: instead of setting a padding on everything
    • DONT use pixel for font size, use rem or em (so it adapts to the user browser font-size preference)
    • this is an article preview so it needs to be clickable and lead to the full article
    • active effects are missing

    happy coding

    Marked as helpful
  • Dimpho Sethiba•30
    @DimphoSethiba
    Submitted 9 months ago

    Social Media Links

    1
    paulDev•660
    @dev-paulL
    Posted 9 months ago

    Hi, quick review:

    • missing <main>
    • they need to be links styled as buttons, not <button>.
    • you dont need to nest each <p> inside of their own <div>.
    • you could use headings (h2, h3)
    • "avatar-jessica" is a really bad alt text
    • use a modern css reset
    • don't use pixels for font size.
    • your css is unorganized and overcomplicated.

    happy coding

    Marked as helpful
  • Abdul Mannan Qaderi•80
    @Abdul-Mannan-Qaderi
    Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    Mostly I am proud of centering the card using inset:0, absolute positioning and margin:auto properties.

    Next time I will use semantic tag more.

    What challenges did you encounter, and how did you overcome them?

    I had problem with centering the card, but I came up with a pretty cool trick, using absolute positioning for the card, setting margin to auto and inset property to 0(zero)

    What specific areas of your project would you like help with?

    with defining with and height of the sections

    A Responsive blog-review landing page using css flexbox

    #pure-css
    1
    paulDev•660
    @dev-paulL
    Posted 9 months ago

    hi, just a quick 2min review from the inspector

    • this is an article preview so it would need to be clickable (and link to the full post)
    • "learning" is NOT a button
    • don't use "avatar avatar" as an alt text, better leave it empty alt="" in that case.
    • there are better ways to center a div
    • avoid giving a fixed height/width on elements (make sure to test with different zooms & font sizes)

    i suggest you to (keep) follow(ing) the learning paths, happy coding :)

  • shaikh zayed•70
    @undersigned-dev
    Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    It was fairly easy for a first challenge. looking forward to making complex projects and learning more

    What specific areas of your project would you like help with?

    I wonder that my css lines of code could have been fewer, for this challenge.

    flexbox

    2
    paulDev•660
    @dev-paulL
    Posted 9 months ago

    hi, quick 5min review, i probably missed things.

    • put your page content in <main>
    • h1? this would not be a page title on a real website, h2 would make more sense.
    • fix typos (you can copy paste the text from the given index.html)
    • say where the code leads to in the alt (qr code to front end mentor website)
    • don't give your container a fixed width, i would use max-width in rem
    • don't use pixels for font, use 'rem' or 'em' so it respects browser font-size preferences
    • i get a 404 on your gh repo

    happy coding :)

    Marked as helpful
  • P
    Y39WebDeveloper•660
    @Y39WebDeveloper
    Submitted 9 months ago

    Product preview card component

    1
    paulDev•660
    @dev-paulL
    Posted 9 months ago

    Hi, quick review, I've probably missed things;

    • Use <picture>: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture.

    • If you use <h3> in a real website, make sure h1 and h2 are used.

    • You didn't remove the closing style tag.

    • You could wrap the old price in a del https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del

    • Do not use pixel for font-size, instead, use 'em' or 'rem' (1rem = 16px).

    • Your css looks overcomplicated. You could simplify it a lot by using the right properties at the right time. Same for the naming, for example, class="perfume" doesn't make sense. Should be category or something.

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub