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

Pickle

@Augurk66The Netherlands230 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...

HTML, CSS, JavaScript, Angular

Latest solutions

  • Resulats summary component using flexbox


    Pickle•230
    Submitted 3 months ago

    Writing less CSS. More use of appropriate HTML elements.


    0 comments
  • Testimonials grid section


    Pickle•230
    Submitted 9 months ago

    I didn't find a way to get the horizontal gap between the name and the "verified" smaller.


    2 comments
  • Four card section using grid


    Pickle•230
    Submitted 9 months ago

    Working with sizing the page content. The content doesn't fit within a browser page.


    1 comment
  • Responsive product preview card


    Pickle•230
    Submitted 9 months ago

    I like to do more with images. I am still not confident with working with images.


    1 comment
  • Recipe page with mobile version


    Pickle•230
    Submitted 9 months ago

    My CSS is always a bit chaotic. I need to learn to write consistent code.


    1 comment
  • Social links with flexbox


    Pickle•230
    Submitted 9 months ago

    I still find it very fascinating how people can manage to write such short and efficient codes. I did my best by make the CSS as short as possible, but there is always room for improvement.


    1 comment
View more solutions

Latest comments

  • Ramon-Alvez•500
    @Ramon-Alvez
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    I was really very proud of the result of this, not only because of the ease and speed but because of the code itself. I thought I managed to organize myself better and also organize the structure of both HTML and CSS

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

    Nothing in particular, it was smooth from beginning to end.

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

    I am open to suggestions, tips and feedback :D

    | HTML5 e CSS | #17 | #2 Junior | Testimonials grid section

    1
    Pickle•230
    @Augurk66
    Posted 9 months ago

    Nicely done!

    Very cool that you made a neath readme for the project on github. Only thing I can mention at the first glance is that the font colour of the two white cards is too dark. In my case, I used opacity of 70% on the <p> element and the names, just like on other cards. For the rest very good job.

    Keep coding and good luck on the next one!

    Marked as helpful
  • FARHAN AHMAD•120
    @farahn0104
    Submitted 9 months ago

    That very challenging work for me And its fully responsive

    1
    Pickle•230
    @Augurk66
    Posted 9 months ago

    Hi there! Good job on this project! I see that your image is not loading. You need to delete the slash at the beginning of your src. So instead of:

    <img src="/assets/images/image-omelette.jpeg" alt="Omellette">

    Delete de slash:

    <img src="assets/images/image-omelette.jpeg" alt="Omellette">

    That will make it work :)

    Good luck and keep coding!

    Marked as helpful
  • P
    Jocelyne Teles•180
    @JocelyneTeles98
    Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    I think I did a good job with responsiveness. I tried to find the most suitable options to solve the challenge. Also, I went a little bit more far, and create by myself a design for tablets in portrait mode with 2x2 grid which it seems to fit very well to these sizes.

    The next time, I hope to have more present the idea of use relative sizes instead of fixed ones. I started using fixed sizes and I noticed that it doesn't work for all devices (even if they're inside of the same media breakpoint).

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

    As I explained a little bit in the last question, the most challenging part was to find the correct sizes that work for multiple screen sizes. I used the grid-template-columns property to create the space to place the cards, and each one of them I put 100% of width to cover corresponding space.

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

    As I challenged myself and I set different design for tablets and small screens, I would like to know if my solution is good. Basically, I arranged the middle cards position with a span to fix them in the middle of the grid, but I hide this span and repeat the cards div outside the span for tablets screen sizes. I don't know if it is the only way or if there is another better one. Please, let me know if you have a suggestion and I will be grateful 😉

    My Four Card Feature Section Solution

    1
    Pickle•230
    @Augurk66
    Posted 9 months ago

    Very good job on this one!

    I took another approach. You can get the same result by starting by building mobile first. You can make the mobile lay out by declaring only a grid with a gap. Next declare three columns for the grid for lager screens within the @media. And to center the left and the right cards on the bigger screens you can use the properties:

    #supervisor {
        grid-row: 1 / 3;
        align-self: center;
      }
    
    #calculator {
        grid-column: 3 / 4;
        grid-row: 1 / 3;
        align-self: center;
      }
    

    This way the card will center itself between the rows. This was my source: https://gridbyexample.com/examples/example26/

    Hope this helps :)

    Keep coding!

    Marked as helpful
  • P
    İsmail Hasır•120
    @ismailhasir
    Submitted 9 months ago

    Product Preview Card (Responsive)

    1
    Pickle•230
    @Augurk66
    Posted 9 months ago

    Very good job on this one!

    You can save a lot of lines of code in your CSS by declaring media queries once. It is possible to declare @media (max-width: 635px) { } once an write all your CSS in that declaration.

    Even better is to start building mobile first without declaring anything and eventually adjust some CSS with a media query for bigger screen. But it can also be a personal preference. Check out Kevin Powell on YouTube, I think he can explain this topic more in detail.

    A tip on details: the crossed out price and button text has Montserrat as Font-Family.

    Good luck on the next one!

    Marked as helpful
  • P
    Brian Meinert•380
    @bmeinert8
    Submitted 9 months ago

    Responsive Recipe Page

    1
    Pickle•230
    @Augurk66
    Posted 9 months ago

    Compliments on this project! Almost a copy of the original. You even made the component change when shrinking the browser on desktop, very nice! The comments in your code are very useful and make the code very readable. Only thing I can say is that the mobile version has no rounded corners on the component and the image.

    Keep coding!

  • ajrm16•70
    @ajrm16
    Submitted 10 months ago

    Social links profile - frontend mentor solution

    1
    Pickle•230
    @Augurk66
    Posted 9 months ago

    Very good job on the design!

    I see you also use flexbox. You can shorten your CSS by making a class which once declares to center your elements with flexbox. For example:

    .flex-center { display: flex; justify-content: center; align-items: center; }

    .. and just add .flex-center class to the HTML elements which you want to center. In your case that will be only two elements. But I think if you start to get used to this method, it will save you a lot of lines of code in the future projects.

    Also it would be cool to add actual links <a> to your buttons.

    Good luck and keep coding!

    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