Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
26
Comments
16
DocForLoop
@DocForLoop

All comments

  • Kravchenko Evgeny•270
    @evgeniy8509
    Submitted 5 days ago

    Loopstudios-landing-page

    1
    DocForLoop•630
    @DocForLoop
    Posted 4 days ago

    Hi, I've checked your code and, here are my suggestions:

    • You should hide the nav menu on mobile, right now it is accessible with tab even the menu is closed.
    • In interactive section I would keep the column layout till 1200px and then switch to the offset layout.
    • I think flexbox is better for footer container to switch from 1 column to a row, so the layout won't slip.

    Hope it helps!

  • José Alfonzo•370
    @JoseAlfonzo92
    Submitted 27 days ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of how clean and structured the layout turned out. If I were to do it again, I’d focus more on responsiveness, specifically the gap between 375px and 600px where the layout didn’t adapt as smoothly.

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

    Nothing too tricky at the moment, it was a pretty straightforward build. But I’m always open to feedback, especially on layout or responsiveness. And if you ever need help on your own project, feel free to reach out I’m happy to help too.

    Four card feature section HTML and CSS

    1
    DocForLoop•630
    @DocForLoop
    Posted 27 days ago

    Hi, here are my suggestions for the layout:

    • You can solve this only with grid, so you don't need to use flex on mobile.
    • Keep one column layout till about 768px where a 2 cloumns layout looks nice and switch to it, then from 1200px you can switch to a 3X4 grid.
    • Use grid-area for the card's div individually and you can set grid-template-areas: "c1" "c2" "c3" "c4" for mobile, then "c1 c2" "c3 c4" for tablet and so on and set grid-auto-columns: 1fr to make the columns equal
    • css-tricks
    Marked as helpful
  • P
    turtlewords•500
    @Turtlewords
    Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    The JS hover effects work nicely, and I think I did alright conforming to the BEM methodology.

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

    I tried applying a filter to the main img for the hover effect, but a hidden div with a somewhat transparent background worked better.

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

    Responsiveness, design accuracy, and bem styling. Thanks!

    NFT Card Component using BEM

    #bem
    1
    DocForLoop•630
    @DocForLoop
    Posted 28 days ago

    Hi, I've checked your code and here are my suggestions:

    • I think it's better not to split the card into main and footer. You can use a section or an article for the whole card inside the main.
    • You can use semantic elements like figure and figcaption here.
    • The content__title should be an h2 as it's just a component. You can create an h1 only for screen readers if needed.
    • You can solve the hover effect without JS, just using opacity and transition for better UX.

    Hope it helps! :)

  • Eric Aguayo•1,095
    @EAguayodev
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of being able to create the JavaScript carousel from scratch and getting it to work smoothly using only 24 lines of vanilla JavaScript. It was a fun challenge to build a feature that's both interactive and responsive without relying on external libraries. If I were to do things differently next time, I’d focus more on accessibility—like adding keyboard navigation and ARIA roles to improve usability for all users. I’d also consider modularizing the JS code for better scalability and maintenance if the project were to grow.

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

    One of the main challenges I encountered was getting all the CSS grid layouts to adapt properly across different screen sizes. I especially had trouble maintaining the original desktop layout without it breaking or overlapping when scaling down. I ended up keeping the desktop layout fairly similar to the tablet version to ensure consistent alignment. If anyone has suggestions or solutions on how to keep the original desktop grid structure while still allowing it to adapt seamlessly to each device size, I’d appreciate the feedback. It’s something I’d like to improve on in future projects.

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

    I’d appreciate feedback on two main areas. First, the CSS grid layout—I had some issues getting the grid to align properly across all device sizes, especially when trying to keep the desktop layout intact. If anyone has tips on making the layout more flexible while preserving design intent, I’d love to hear them. Second, I’d like some input on the JavaScript I wrote for the carousel. I managed to get it working with just 24 lines of vanilla JS, but in a real-world scenario, would this code be considered maintainable? Also, are there alternative approaches to creating an infinite carousel that can scroll in either direction without jumping back to the start image? Any feedback would be super helpful!

    Single-Page-Design-Portfolio(HTML5, CSS3, JavaScript)

    #van-js
    1
    DocForLoop•630
    @DocForLoop
    Posted 2 months ago

    Hi, I've checked your code, and here are my suggestions:

    • I think it's better to start with the mobile layout first and then move to tablet and desktop layouts. It helps to make the card grid more flexible.

    • You can use grid-template-areas with grid-template-rows to specify different heights and grid-auto-columns: 1fr to make it look nice, but don't put your grid in a flex container, because it doesn't allow it to grow if you set justify-content: center.

    • Try to break down the grid layout into smaller, reusable units. Since the Graphic Design card also consists of 4 smaller units, you should reuse these in the grid-template-areas for example, in the mobile version:

    grid-template-areas: 
            "graph graph"
            "graph graph"
            "ui apps"
            "illust illust"
            "photo photo"
            "motion motion";
    

    Hope it helps!

  • gtarrojo•240
    @gtarrojo
    Submitted 3 months ago
    What specific areas of your project would you like help with?

    A bit overkill to use Angular for this but need practice.

    Responsive dashboard

    #accessibility#angular#bem#typescript
    1
    DocForLoop•630
    @DocForLoop
    Posted 3 months ago

    Hi, I'm not familiar with Angular yet, so I won’t comment on the framework-specific parts. I'll focus on the layout and structure instead.

    Here are my suggestions:

    • In the nav component <button> is better than <a> as it performs an action on the current page

    • In the info-card component, the ellipsis is also a button for the same reason. Currently it moves with the dynamic content if I switch tabs. I would change the card layout by placing the title and ellipsis in one flex container, and the dynamic data in another.

    • And I would check whether to use "hr" or "hrs" based on the number value.

    Everything else is fine!

    Marked as helpful
  • Jason Burke•170
    @JasonPBurke
    Submitted 5 months ago

    responsive signup page w/ validate & toggle functions

    #sass/scss
    1
    DocForLoop•630
    @DocForLoop
    Posted 5 months ago

    Hi, I have checked your code here are my suggestions:

    • I see that the picture element media query is set to 768px, but I think is better to set about 1200, because between 768px and 1200px is usually for tablets and small laptops , and you can keep the column layout till 1200px and switch to desktop design from 1201px
    • I think flexbox is better than grid for simple column to row layout changes, less code needed and it's simpler
    • In body use min-height: 100vh
    • For font sizes you can use clamp() function to make the title responsive, I don't think you need transform: scale()
    • I you want to add transition to button with linear grad use overlay effect with opacity and you can add transition to opacity and it will work

    Hope it helps! :)

    Marked as helpful
  • nodegreecode•390
    @nodegreecode
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I’m excited to embark on this new learning path and to see my solution come closer to the intended design. That said, my current solution is optimized only for desktop browsers, specifically Firefox and Chromium-based engines. For my next project, I’ll focus on improving responsiveness to ensure a better experience across different devices and screen sizes.

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

    What started as a seemingly simple challenge quickly became more complex as I got deeper into the project. After finishing the markup and half the styling, I realized that positioning the popup with social links wasn’t as straightforward as I thought.

    To solve this, I had to get creative. I wrapped the preview article in an extra container to make it relative, allowing me to position the share popup exactly where it needed to be. I also decided to use a background image instead of embedding the image with an <img> tag. However, I’m aware this might not be the cleanest solution.

    Styling the card for the mobile version was another unexpected hurdle. Getting the flex-basis proportions just right to match the design was tricky, and I had to experiment quite a bit to achieve the desired look.

    While it wasn’t as smooth as I’d hoped, overcoming these challenges was a great learning experience and a reminder of how attention to detail can make all the difference.

    Responsive article preview with SASS

    #sass/scss
    1
    DocForLoop•630
    @DocForLoop
    Posted 7 months ago

    Hi, I've checked your code ;)

    • I think both images are decorative so you can use empty alt="" or link as background-images.
    • you can use <time> element with datetime attribute for semantic date.
    • for bg-image use background-position too.
    Marked as helpful
  • olaf•235
    @Ziorko87
    Submitted 7 months ago

    HTML CSS GRID FLEX

    1
    DocForLoop•630
    @DocForLoop
    Posted 7 months ago

    Just a few tips:

    • use rem for font-sizes, if you change your browser default font-size you will see the difference.
    • try px for spacing, gap, same reason above
    • you can use grid-template-areas with grid-area, it's a simpler way for this kind of layout :)
  • P
    Mario Jesús Arias Hernández•100
    @Mario-jesus
    Submitted 8 months ago

    meet-landing-page

    #sass/scss
    1
    DocForLoop•630
    @DocForLoop
    Posted 8 months ago

    Hi, here are some feedbacks:

    • for responsive typography use clamp() function and you don't need to use media queries.
    • in media queries use em, it is better than px
    • it is better to use flexbox than grid if you want the footer-texts to align next to each other, and when you need only row or column layout.

    Hope it helps :)

  • Artem Kotko•260
    @artemkotko14
    Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Most proud of making a design using CSS Grid

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

    I've tried to recreate the exact designs given without having a Figma file. The only way in which I managed to do so was with

    .card__additional-quote {
          padding-right: ;
        }
    

    on two sepate cards which just doesn't feel right for me.

    I would be glad if someone would suggest how I can improve my code without a need to use that.

    Five cards using CSS Grid

    #bem#sass/scss
    1
    DocForLoop•630
    @DocForLoop
    Posted 8 months ago

    Hi, it is hard to make proper spacing without the design file, but good job, here are some tips:

    • don't use <br> in card-author, use flexbox instead and maybe a simple <p> is enough with <h3>
    • try to use semantic elements for cards like <section> <article> <header> <blockquote>
    • in layout try to use grid-template-areas for card's placement so you don't have to specify grid-column and grid-row
    Marked as helpful
  • BledanIT•370
    @BledanIT
    Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Proud of getting the grid done in much less time than the previous exercise and getting a good idea for the upper colored border.

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

    Correct sizing, solved easier than the other times

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

    I'd like to get feedback on sizes and layout.

    CSS Grid four card solution

    4
    DocForLoop•630
    @DocForLoop
    Posted 8 months ago

    Hi, here are some tips:

    • try to use rem for font-size instead of px , I only use px for padding currently
    • try to use clamp() for main title(h1) it grows from 24px to 36px
    • try to use em in media queries
    • I don't know why footer got absolute position it overlaps the main content , let it stay in the normal flow
    • usually tablet breakpoint starts at 768px, your breakpoint at 600 px give a very narrow card style, you can make a custom tablet layout e.g 2 column layout from 678px to 1200px or increase your breakpoint to look nice
    • svg's on mobile a bit smaller than on desktop size
    • try to use inheritance from body element and h1,h2,h3 so you don't need to repeat code blocks
    • try to use css variables for better structure and reusability, maintainability

    Hope it helps ;)

    Marked as helpful
  • P
    Rinta Roy•100
    @rinta-git
    Submitted 8 months ago

    Responsive product preview web page

    #sass/scss
    1
    DocForLoop•630
    @DocForLoop
    Posted 8 months ago

    Hi, I've checked your code and here are my suggestions:

    • try use picture element for responsive images
    • I don't think you need <br> in h1 it's unnecessary
    • for prices use span element instead of h2, h3
    • try to use @use and @forward rules in scss

    Hope it helps :)

    Marked as helpful
  • P
    kilozdazolik•190
    @kilozdazolik
    Submitted 9 months ago

    Recipe page made using tables and flexbox

    1
    DocForLoop•630
    @DocForLoop
    Posted 8 months ago

    Hi, I see there is a problem with your preview and code links, so I couldn't check it now.

  • dorobantu97•150
    @dorobantu97
    Submitted 9 months ago

    Social Links Profile

    1
    DocForLoop•630
    @DocForLoop
    Posted 9 months ago

    Hi, here are some suggestions:

    • try to use semantic elements like main, article, section, footer
    • I don't think you need media queries
    • try to use :hover and :focus pseudo class selectors to change color and background-color on links

    Hope it helps.

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

    Me gusto haber practicado css puro sin framewors

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

    aprender a usar figman

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

    al momento de nombrar las clases y los commit

    Pagina hecha unicamente con Html y Css

    2
    DocForLoop•630
    @DocForLoop
    Posted 9 months ago

    Hi, here are my suggestions :

    • due to GDPR compliance check @font-face rules ,as these font files are in your project.
    • missing hover effects on the card
    • consider using relative CCS units like rem, em, % .. instead px
    • check your margins and paddings in figma files, because there are unnecessary gaps in the layout
    • check clamp() function for font-sizes

    Hope it will help you.

    Marked as helpful
  • EBUNOLUWA•70
    @ReactLlord
    Submitted 9 months ago

    Responsive card design

    2
    DocForLoop•630
    @DocForLoop
    Posted 9 months ago

    Hi,

    Welcome, I see some issues in your code here are my suggestions:

    • I would use semantic HTML , like main, section, footer
    • I would put every css rules to the separate css file
    • In figma design file there are the correct colors, fonts ,spacings that you can use
    • I would dowload the font files and in css I would use @font-face rules
    • Your h3 element set to display:flex, but it is unnecessary ,because it is not a flex container.

    I hope it will be helpful. All the best!

    Marked as helpful

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