Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
27
Comments
8

Pietrell

@PiotrPlotastPoland470 points

Problems are opportunities to find solutions.

I’m currently learning...

Typescript, React, Tailwind, Node.JS

Latest solutions

  • markdown editor web app

    #react#supabase#tailwind-css#typescript

    Pietrell•470
    Submitted 4 months ago

    0 comments
  • newsletter-sign-up using react+typescript+tailwindcss+email validator

    #react#typescript#tailwind-css

    Pietrell•470
    Submitted 5 months ago

    0 comments
  • typemaster-pre-launch-landing-page

    #sass/scss

    Pietrell•470
    Submitted 5 months ago

    0 comments
  • age calculator using react and tailwind

    #react#tailwind-css

    Pietrell•470
    Submitted 9 months ago

    0 comments
  • Mortgage repayment calculator React+TailwindCSS

    #react#tailwind-css

    Pietrell•470
    Submitted 10 months ago

    0 comments
  • job-listings-with-filtering using react and tailwind

    #react#tailwind-css

    Pietrell•470
    Submitted 12 months ago

    0 comments
View more solutions

Latest comments

  • praveen952•10
    @praveen952
    Submitted over 1 year ago

    QR code component

    1
    Pietrell•470
    @PiotrPlotast
    Posted over 1 year ago

    Hey, well done on completing the challange! If you're just starting out keep going! I see you applied very basic css reset and that's good, for bigger projects you could look at: andy bells css reset. The one thing I'd change is h2 font-size to fit in two lines. To add some accessibility(some may prefer bigger font size as their browsers default) padding could be applied with rem or em units, besides that very well done!

  • Mahmoud_Amin•540
    @Mahmoudamin11
    Submitted almost 2 years ago

    responsive sunnyside agency project Html, css , js

    1
    Pietrell•470
    @PiotrPlotast
    Posted almost 2 years ago

    Hi, first of all congrats on completing the challange! I'll advice you:

    • Instead of <div class="header"> you could use <header> tag. It's part of semantic html(I see you know what it is).
    • instead of 2 different imgs for mobile and desktop view use <picture> tag element with srcset and media attributes. MDN article on picture element.
    • there's a bug on the website, when i click anywhere nav buttons dissapear, you should work on this issue -do not use px units as much and especially for anything related to font as it breaks accessibility(read about realtive units, the most important are em rem and less important ch). For instance font-size: 16px; should be font-size: 1rem; as it scales with users browser font size and px don't.
    • you could clean up unnecessary comments in your css because there's a lot of unused styles.
    • read about mobile first approach(trust me it's easier in the end)
    • socials icons should be links
    • read about aria-attributes for mobile nav menu
    Marked as helpful
  • Jennifer Souza•340
    @zoedarkweather
    Submitted almost 2 years ago

    Mobile-first solution using CSS grid and JavaScript

    1
    Pietrell•470
    @PiotrPlotast
    Posted almost 2 years ago

    Hey, great job completing the project! I've done it recently as well so the tips from me would be:

    • add placeholder to the email input html element with the text Your email address...
    • adjust some margins between h1 and p
    • instead of wrapping h1 and p in a div you could just use h1 and h2 semantic structure
    • font size on the button could be bigger.
    • If you need any help write it in the reply :)
  • William Chandra•30
    @williamc712
    Submitted almost 2 years ago

    Product preview card using CSS Flex

    3
    Pietrell•470
    @PiotrPlotast
    Posted almost 2 years ago

    When you need to change image depending on the size of the screen you should use picture html element. Here is helpful article on mdn: The picture element

  • Mandlakazi Nxumalo•550
    @NxumaloDev
    Submitted almost 2 years ago

    Product-preview-card-component-solution

    3
    Pietrell•470
    @PiotrPlotast
    Posted almost 2 years ago

    Hi, here's some advice from me:

    • In your project if you have images uploaded and want them to display properly in your GitHub page, the source of the image should start with ./ and not with / -> <img src="./images/image-product-desktop.jpg" alt="" class="desktop">.
    • If your image changes depending on the screen size you should use picture html element.
    • You should do mobile-first approach for your web pages(it's easier trust me).
    • Font size shouldn't be in px units, instead search for em and rem units.
    • Read about Semantic HTML
    Marked as helpful
  • Unanimous•10
    @Unanimous-1001
    Submitted almost 2 years ago

    Solution to the QR-Component-Challenge using HTML and CSS only

    #web-components
    1
    Pietrell•470
    @PiotrPlotast
    Posted almost 2 years ago

    Hello, in this project you don't need to worry about your js experience due to the fact that this is html and css only project which means it's static page with no js needed. Flex is by far the easiest way to do layouts, I'd recommend watch/read about it and its properties. In this particular project flex-direction: column; could be helpful for the layout of your component. You should avoid using px units with font-size, instead read/watch about relative units like em and rem. Overall you did a good job. Stay strong and keep learning! ;)

View more comments
Frontend Mentor logo

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