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

thaArcadeGuy

@thaArcadeGuy120 points

a guy from kasese

Latest solutions

  • Testimonials grid section solution built using CSS Grid


    thaArcadeGuy•120
    Submitted 10 months ago

    Advice on making the solution to be more accessible.


    1 comment
  • Four card feature section using grid and flexbox


    thaArcadeGuy•120
    Submitted 11 months ago

    any feedback on how I could have done it better.


    1 comment
  • Product preview card using CSS Grid


    thaArcadeGuy•120
    Submitted 12 months ago

    Any feed back on standard HTML and CSS best practices.


    2 comments
  • Responsive Recipe Page


    thaArcadeGuy•120
    Submitted about 1 year ago

    I want to understand more about Media Queries, then BEM; I would like to know if my code follows the BEM guidelines


    1 comment
  • Personalized Social links profile


    thaArcadeGuy•120
    Submitted about 1 year ago

    Any feedback on how I can improve my solution will be much appreciated.


    1 comment
  • Responsive Blog Preview Card


    thaArcadeGuy•120
    Submitted about 1 year ago

    I need to learn how I can structures my CSS properly so any feedback on it will be highly appreciated.


    2 comments
View more solutions

Latest comments

  • Karen Robertson•190
    @indigorose
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    The solution was a real push to develop CSS Grid. I have done it in the past but as I moved to backend work and development, my knowledge was hazy and the main reason why I am following these learning paths and designs to have good reference templates for future web applications.

    Now that I have this grid template, I will definitely refer back and experiment with other bento style layouts.

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

    This challenge definitely pushed my knowledge of grid and positioning of the testimonial cards.

    In the mobile view, it was simple to use flexbox and flex-direction: column for the initial card layout.

    However the issue came when wanted to use grid. I have previously used the site Layoutit! to design my grid designs.

    At first I thought the horizontal cards would be contained within their own div with the fifth card being vertical on the end.

    This took a long time to correct as doing so created various width and height card sizes. It wasn't until I stumbled on a css video about grid that finally helped and I was able to refactor my code removing the unnecessary parent child container elements and more seamless design.

    As I completed the challenge without using figma files, this is as close I could get.

    I am also building on my css custom properties, I mainly use them for the colourways, as it can become tedious typing out hsl colours for each html element.

    Maybe with the next I will look into SASS and Tailwind.

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

    In terms of styling, what I have struggled with is box shadowing. It may be due to my computer set up, but sometimes it hard to see from the design brief photos if you don't have the Figma files yet.

    As this challenge more focused on the ability for page to be responsive, it may be seen as minor detail but in the long run for web design it would be good to know how to gauge it on photos.

    Testimonial Grid Section

    1
    thaArcadeGuy•120
    @thaArcadeGuy
    Posted 10 months ago

    The layout is responsive though could have also set the max-width and margins on either the body element or container class.

  • Hamzeh Bajbouj•60
    @HamzehBajbouj
    Submitted 11 months ago

    Four cards features solution

    1
    thaArcadeGuy•120
    @thaArcadeGuy
    Posted 11 months ago

    Your solution is the same and its responsive except that for smaller screen it goes back to the desktop design.

  • Fachrezi•450
    @Fbeye04
    Submitted 12 months ago
    What are you most proud of, and what would you do differently next time?

    The different thing I did on this project was how I set the markup on the html file where through https://fedmentor.dev/posts/html-plan-product-preview/, I learned to use the picture tag to wrap images on various types of screens, use hgroup to make it easier to write titles, and use the s tag.

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

    adjustment to start working on the project through mobile design first. Other than that, the other things I faced were the same as in the previous question.

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

    all area of html and css

    Simple Product Preview Card using vanilla HTML and CSS

    1
    thaArcadeGuy•120
    @thaArcadeGuy
    Posted 12 months ago

    Your solution is responsive on different screen sizes.

  • phucphan01866•130
    @phucphan01866
    Submitted about 1 year ago

    Recipe page

    1
    thaArcadeGuy•120
    @thaArcadeGuy
    Posted about 1 year ago

    Congratulations upon finishing you solution. So here are a few issues that I think you can work on:

    • Add a horizontal line below the ingredients and instructions sections using the <hr> element in your index.html file.
    • Add border bottom lines using such CSS code:
    table {
        border-collapse: collapse;
    }
    
    tr {
        border-bottom: 1px solid hsl(30, 18%, 87%);
    }
    
    tr:last-child {
        border-bottom: 0;
    }
    
    • Style lists by adding space between the list markers and text using such CSS code:
    ul, 
    ol {
        padding-left: 1.25rem;
    }
    
    li {
        padding-left: 1.125rem;
        margin-bottom: 0.5rem;
    }
    
    li::marker {
        color: hsl(332, 51%, 32%);
        font-weight: 700;
    }
    
    • The other issue is that your solution is not responsive so instead of using px use rem or em and percentages for your measurement values. And also do some research on Media Queries.

    Let me hope you find this helpfully.

    Marked as helpful
  • Sudais Ahmad•10
    @AhmadDeveloperPro
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    know i learning tailwind css so i use tailwind again with some project

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

    this my first challenge and i started from basic

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

    this is very easy project so for this project i don't need any help from websites and youtube

    Social link profile using css flex and for responsive media screen

    1
    thaArcadeGuy•120
    @thaArcadeGuy
    Posted about 1 year ago

    Your solution is on-point except that you forgot to include the font family. Include <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet"> in your index.html and do the necessary styling.

    Marked as helpful
  • Snezhana Petlova•30
    @snpetlova
    Submitted about 1 year ago

    Social Media Profile Links | Solution

    1
    thaArcadeGuy•120
    @thaArcadeGuy
    Posted about 1 year ago

    Hey, I think you uploaded the wrong solution to the challenge.

View more comments

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