Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
11
Comments
12
P
lawless
@djlaw90

All comments

  • P
    Juan Vallejo•180
    @CiaoGab
    Submitted 11 days ago
    What are you most proud of, and what would you do differently next time?

    Most proud of getting the email validation through thinking on my own

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

    some padding and margin issues

    Newsletter sign-up form with success message

    1
    P
    lawless•200
    @djlaw90
    Posted 10 days ago

    colors are just a little bit off but the design looks about pixel-perfect to the design guide. super clean and easy to understand JS.

  • Hannan-codes•70
    @Hannan-codes
    Submitted about 1 month ago
    What challenges did you encounter, and how did you overcome them?

    Centering the card vertically proves to be challenging even when using the display:flex, i couldn't use it here because it just messed up my entire code when i tried so I had to eyeball it.

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

    Centering it. I'm never able to make it work.

    Social Media Links Challenge

    2
    P
    lawless•200
    @djlaw90
    Posted about 1 month ago

    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container >> great resource for centering a div with flexbox, both horizontally and vertically. I basically never do anything else now.

  • P
    Kyle Mulqueen•400
    @kmulqueen
    Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of creating a component that works well across different screen sizes with distinct behaviors appropriate to each. The way the share functionality adapts between mobile and desktop demonstrates good responsive design thinking.

    Next time, I would:

    • Plan my HTML structure more carefully to avoid issues with overflow and positioning.
    • Create a more modular CSS approach to handle the speech bubble styling.
    • Consider using CSS custom properties for values like the mobile breakpoint to maintain consistency.
    • Implement proper focus management from the beginning rather than adding it later.
    What challenges did you encounter, and how did you overcome them?
    1. Maintaining accessibility while toggling visibility - I initially struggled with properly updating aria-hidden attributes. I solved this by consistently checking the element's hidden state and setting the aria attribute accordingly.

    2. Different behaviors across screen sizes - The mobile vs. desktop layout required different behaviors for the same components. I implemented conditional logic based on screen width to handle these differences.

    3. Positioning issues with the toast component - I had challenges with the toast being cut off by overflow settings. I had to carefully balance maintaining border-radius on images while allowing the toast to be fully visible. Because I had overflow: hidden set on the article initially, the toast pop-up on larger devices was getting cut off. When I updated my stylesheet to have overflow: visible at larger devices, my border-radius on the image disappeared. I solved that by manually adding the border-radius to both the top-left and bottom-left corners of the image. This allowed me to have the toast visible while maintaining the border-radius on the image.

    4. Focus management - The button staying in focus state after closing the toast was confusing. I learned to use the blur() method to programmatically remove focus when appropriate.

    What specific areas of your project would you like help with?
    1. Creating a more elegant solution for the speech bubble styling that works well across all screen sizes

    2. Improving my CSS Grid implementation to better handle complex layouts

    3. Implementing smooth transitions/animations when toggling the visibility of elements

    4. Developing a more comprehensive focus management system for better keyboard accessibility

    Responsive Article Preview Component HTML / CSS / JS

    1
    P
    lawless•200
    @djlaw90
    Posted about 1 month ago

    Looks great visually, well done! A couple pieces of feedback-

    1. if you click "share" in mobile, the author section disappears. you'd want to toggle between the author info and share buttons.

    2. the user can't dismiss the share popup in desktop. you can fix with javascript!

    Marked as helpful
  • P
    lawless•200
    @djlaw90
    Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of how it looks responsively. I would try to not use !important next time and make the CSS cleaner, and use <picture> for images in different viewport sizes. I would also try to start with the mobile version first.

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

    The biggest challenge were positioning the little numbers accurately and making the page mobile responsive.

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

    How to do mobile-first design effectively.

    Meet Landing page with mostly flexbox and a touch of grid

    2
    P
    lawless•200
    @djlaw90
    Posted 3 months ago

    Thanks I thought that was the case, I tried to fix and recommitted. Appreciate it!

  • Tania•480
    @tsiestova
    Submitted over 2 years ago

    meet-landing-page

    1
    P
    lawless•200
    @djlaw90
    Posted 3 months ago

    I'm honestly floored by how precise this is to the mock. I have a lot to learn lol. Just wanted to say kudos and hope I can get on your level eventually!

  • nilikopo•110
    @nilikopo
    Submitted 4 months ago
    What challenges did you encounter, and how did you overcome them?

    using grid in general

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

    i would like to know how i can improve my code, especially how can i position content in .container better without using .container-outer with flex positioning

    testimonials-grid-section-main

    1
    P
    lawless•200
    @djlaw90
    Posted 4 months ago

    I did this on the <body> to center my grid rather than using flexbox. Pretty similar to what you did, really:

    display: grid; align-items: center;

    Marked as helpful
  • MiloOliveira•70
    @MiloOliveira
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Of understanding Grid and the command position, were super helpful with the icons

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

    To the desktop version, i didn't knew how to adjust the boxes, and i searched a lot. I just put 4 rows, instead of two, and use grid-area to move them

    Four card made with CSS grid

    1
    P
    lawless•200
    @djlaw90
    Posted 4 months ago

    Looks good! I think for desktop, you may want to apply a max-width for the cards so they don't continue to stretch out in wider viewports. I would also add padding to the cards to match the design a little better. Mobile looks solid!

  • P
    Elewude Okikijesu•430
    @Helewud
    Submitted 4 months ago

    Responsive product preview card component with HTML and CSS

    1
    P
    lawless•200
    @djlaw90
    Posted 4 months ago

    Super close to the design, great work! The word breaks are a little different in desktop. I work in ecommerce and annoyingly this can matter to your stakeholders. Truly just about perfect though.

  • user2830581•90
    @user2830581
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Creating a solution that fits the brief and is responsive on smaller screens. Next time I would probably use Flexbox instead of relying on margins and padding to create a more uniform responsive solution.

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

    Trying to get the solution to look as close to the design without the Figma file.

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

    I think my CSS nesting is ok as it's now supported natively in most browsers but if it's bad practice or anything let me know!

    Recipe Page

    1
    P
    lawless•200
    @djlaw90
    Posted 5 months ago

    This is spot-on to me, great work. only little thing is the top margin seems to be a bit much, but very much nitpicking.

  • Abdulsamad•30
    @Sammy-dev-eng
    Submitted 5 months ago

    Responsive social links page

    1
    P
    lawless•200
    @djlaw90
    Posted 5 months ago

    I appreciate the addition of the icons and it looks spot on to the design. very comprehensive with media queries and solidly coded. My only real critique is the card blends with the background so i'd make it so you can discern the card from the background. excellent work overall.

    Marked as helpful
  • ryanslabroom•220
    @ryanslabroom
    Submitted 5 months ago

    display flex margins box shadow

    1
    P
    lawless•200
    @djlaw90
    Posted 5 months ago

    Code looks great! It's difficult but I would take a closer look at the design provided to make sure the dimensions are closer. the padding around "learning" looks a bit funky and author img a little large. Good job overall.

  • Mariam Khan•40
    @mariamkhan04
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of to implement my learning of flexbox and grid for styling a responsive design. I got to know how to import custom fonts and use them in styling also how to host a website on Netlify. Next time i want to add dynamic interactions using javaScript as well.

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

    I encounter challenges when importing custom fonts then i googled up and resolved those issues. I also faced issue centering the Qr- code and resolved it using flex,grid and top margin. Although i think there might be a better approach to get it done more easily. i will look for other methods as well.

    What specific areas of your project would you like help with?
    • I want to know is can we use div to complete this task or is it more better than main or not ?
    • i also want to know how can i center my elements in a better way?

    QR Code using HTML and CSS

    3
    P
    lawless•200
    @djlaw90
    Posted 5 months ago

    Looks good to me! I think you probably just could use flexbox for this, grid is great for more complex layouts from what i've heard. I just realized there's a box shadow on the QR box I forgot on mine too ><; Great work!

    Marked as helpful
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

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