Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Latest solutions

  • Submitted

    Age calculator app

    #accessibility
    • HTML
    • CSS
    • JS

    0


    P
    tonexvi 20

    @A-Bago


    Hello there, lovely folks!

    This is my first experience working with JavaScript and, in particular, event listeners. I would sincerely appreciate any guidance or suggestions you could provide based on your experiences.

    In addition, I'm trying to adhere to the BEM naming convention for classes. If you have any insights or constructive feedback about this aspect of my work, it would be most welcome.

    Thank you in advance for your time and your valuable input.

  • Submitted


    @aboisam


    Tools

    VSCode

    Git

    Prettier

    Built with

    • Semantic HTML5 markup
    • CSS custom properties
    • Flexbox
    • CSS Grid
    • Mobile-first workflow

    My process

    1. structure the html layout
    2. add classes
    3. css

    Areas of the code i was not sure of

    @media screen and (max-width: 425px) {

    .container{

    min-width: 87%;

    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    i will need more explaination on media query

  • Submitted

    CSS- Flexbox

    • HTML
    • CSS

    2


    Jaykler 30

    @Jaykler


    What did you find difficult while building the project? Using @media for some reason was kind of tideus.

    Which areas of your code are you unsure of? I feel like my code could've been better if i would've used CSS Grid instead of flexbox.

    Do you have any questions about best practices? Im open to feedback when it comes to best practices.

  • Submitted

    NFT Preview Card Component Sass

    #sass/scss#vite
    • HTML
    • CSS

    1


    matryosha 30

    @matryosha


    • Fundamentals are important. Again. When I needed to wrap img in div I could see that for some reason the div was taking more vertical space than the image inside of it and that's totally unlogical and bs but trying to find some info why is that I founded logical explanation: because of display: inline property. More about it here.
    • Used Sass primarily for nesting and more clean variables usage(no var()). Don't know why nesting took so long to implement in main specs but it is coming.
    • Neat trick to use even though it's a little bit clunky:
    @media (hover: hover) and (pointer: fine) {
    .image:hover {
    opacity: 1;
    }
    }
    

    So the hover will work only on devices with pointer and not in phones.

  • Submitted

    News Home Page

    #sass/scss#semantic-ui
    • HTML
    • CSS
    • JS

    1


    @AnakonStar


    I just want to know your thoughts on whether it's semantic enough or if there are any issues that can be resolved. let me know I'll be very grateful!

  • Submitted


    @porter-s-ross


    I don't think that my project really transfers very well to mobile. I wanted to make this component as simple as possible, so without getting into things like media queries, are there some ways that would help to create responsive designs?

  • Submitted

    news-homepage

    #react
    • HTML
    • CSS
    • JS

    0


    dereck445 80

    @dereck445


    My first time ever using react or sass. Turned into a bit of a mess towards the end. Ill redo this challenge in the future.

  • Submitted


    @wilbros


    What did you find difficult while building the project? Which areas of your code are you unsure of?

    • I find the back ground image a little hard, and I'm not even sure if I coded it correctly. I would love to hear some feedback and how to improve.
  • Submitted


    @KaramEl-loh


    Took my own approach when it comes to the side images, since the design will not look nice on very large screens (>1440px) if these images are positioned this way.

    In addition, did not add the background for the "State of the Art" section on desktop

  • Submitted


    JiYoon 10

    @JIY00N2


    I'd appreciate it if you could tell me what's wrong with my code or what I can easily implement.

  • Submitted

    TailwindCSS

    #tailwind-css
    • HTML
    • CSS

    1


    P

    @Kofiastro


    I had difficulties maintaining the same dimension on mobile and Desktop since i was using flexbox.

Discord logo

Join our Discord community

Join other Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord