Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
18
Comments
9

geektim

@geektim230 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

JavaScript

Latest solutions

  • Fylo data storage component using flexbox


    geektim•230
    Submitted over 1 year ago

    Please, provide a helpful way by which I can achieve the design of the desktop view.


    0 comments
  • Testimonials grid section using grid and css


    geektim•230
    Submitted over 1 year ago

    .


    1 comment
  • Social proof feature section using grid and flexbox


    geektim•230
    Submitted over 1 year ago

    .


    0 comments
  • Four card feature section using grid and flexbox


    geektim•230
    Submitted over 1 year ago

    .


    2 comments
  • Single Price card component using grid


    geektim•230
    Submitted over 1 year ago

    .


    0 comments
  • Huddle landing page


    geektim•230
    Submitted over 1 year ago

    Responsive Web Design. I still need more grasp over it.


    0 comments
View more solutions

Latest comments

  • João Ribeiro•90
    @joaoevribas
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    I needed to practice CSS Grid so this was a fun challenge.

    If I was to start over again, I would definitely do mobile first. Because I did the grid layout for the desktop first, I had to manually reset each card position to stack them vertically on a single column. If I started mobile first, they would already be stacked in a column because of the display grid. I would've written less CSS.

    Next challenge that I need to use CSS Grid, I might try and practice grid template areas.

    Any feedback is appreciated, thank you.

    Responsive four-card grid layout

    1
    geektim•230
    @geektim
    Posted over 1 year ago

    This is awesome!

  • Carisa Elam•100
    @carisaelam
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    Did not take me very long. I feel like I'm getting quicker at making things happen.

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

    I'm still unsure whether or not my CSS naming conventions make sense.

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

    I don't really understand how to use semantic html in this case when there really isn't that much going on in the design. I get using "header" "nav" "footer" etc., but for a project this small, how do I incorporate semantic html, or is it even worth it?

    Social links

    1
    geektim•230
    @geektim
    Posted over 1 year ago

    A nice job! About the issue of Semantic html, my idea was this: since there's no logo or navigation links which usually occupy the header position, and since there isn't information that could be classified as "footer", I just didn't use them. I took the whole card containing the links and intro-profile as the "main" with a class of "card". Then I just used divs inside. I hope you find this relatable.

  • Lahir-Sai-Vignesh•20
    @Lahir-Sai-Vignesh
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    I used the mobile first design approach , about which I am most proud of.

    Next time , when designing I would also keep the desktop design in mind.

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

    Displaying different images for different screen sizes was challenging.

    I overcame it by using two img tags with two different classes and using display:none in the media queries.

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

    I designed the mobile version first and then the desktop version. I used display : none and media queries to achieve the desired output.

    But I see many developers using picture tag or img tag with srcset and sizes.

    I tried to implement my solution that way but the styling I did before is not being applied properly so I opted display:none and two media queries .

    Some advice on the other methods that I mentioned could be very helpful .

    Thanking You, Lahir

    Product Preview Card

    1
    geektim•230
    @geektim
    Posted over 1 year ago

    Well done!

  • Anton Vasilache•580
    @Antonvasilache
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?
    • Creating multiple lists with custom bullet points, applying common formatting, and then customizing each, as so:
    .prep-list-item::before,
    .ingredients-list-item::before,
    .instructions-list-item::before {
      content: "•";
      font-size: 1rem;
      color: var(--Nutmeg);
    }
    
    • Creating the media queries to match the mobile design file.
    • Creating the table by using grid in a simple and effective way.
    What challenges did you encounter, and how did you overcome them?
    • Grouping up the lists to apply common attributes, before styling them individually. I tried to not repeat myself, but it took longer than writing them separately.
    • Tried to create the table using the `` tag, but couldn't add margins and borders at the same time, so I switched to grid
    • Figuring out how to follow the mobile design properly, without changing the page structure
    What specific areas of your project would you like help with?
    • Not sure if it is the best way to implement the mobile design.

    Responsive recipe page using CSS Flex and Grid

    1
    geektim•230
    @geektim
    Posted over 1 year ago

    This is a job well done. I couldn't even space the list-style markers away from the texts, nor could I change the color of the number-type markers from black. Nice work!

  • Raphaelj1•30
    @Raphaelj1
    Submitted over 1 year ago

    Social links profile

    1
    geektim•230
    @geektim
    Posted over 1 year ago

    Well done!

  • Tomek•40
    @PunyHuman666
    Submitted over 1 year ago

    Blog Preview Card

    1
    geektim•230
    @geektim
    Posted over 1 year ago

    Hi, Tomek! An awesome job done. However, do consider the following: you set the max-width: 400px; and max-height: 600px;. But if you consider smaller screen sizes like the fold phones and the iPhone SE, the card will overflow and cause the scroll bar to appear. My suggestion is this, set width in percentage, for example width: 90%; and then max-width: 400px. This will make it so that when the screen size is smaller than 400px, the card will adjust to become 90% of the screen size. Then for the height, just make it height: auto; this is because when you have a project that has word counts exceeding the height, it will overflow. I hope you find this helpful.

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