Skip to content
Submitted over 4 years ago

Basic HTML and CSS style using grid

George_alex•140
@GeorgeCaldarescu
A solution to the Single price grid component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi everyone! this is my first challenge and also my first project. I know the code can be better so feel free to give me some suggestions where I can change something. Cheers George

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Tamarchika•250
    @Tamarchika

    good work for the first challenge. Also I recommend import font in the head of HTML. for example : <link rel="preconnect" href="https://fonts.gstatic.com">

    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap" rel="stylesheet"> U have to write this code in the head , so U import the font, and when u put ur solution here, the font doesnt change, it appears as it is imported.. Have a nice coding ! Also, look at my solutions, if u have a wish, an send me feedbacks ^_^
    Marked as helpful
  • Aishwarya Mali•280
    @aishwarya-mali

    Hello George!

    Good work on this challenge! Your solution looks great and is responsive as well! I would only suggest to add width to .main class and to reduce font-size, padding and margin.

    Happy Coding!

    Marked as helpful
  • Grace•32,130
    @grace-snow

    Hi George,

    I think there's still a lot of work to do on this I'm afraid.

    I don't think you're fully understanding

    • how to import and apply fonts
    • how to use margins and paddings correctly - this is a big one, a really fundamental concept you've not grasped here and need to read up on. I would remove all paddings and margins from all elements and start again on those after learning more.
    • what font sizes to use (some should be defined in the style guide)
    • html semantics - you've used multiple paragraph tags where a list should be, you've used a main class but no main element etc
    • when to use a button vs a link (this also needs focus state)
    • when to use widths (rarely needed)
    • how to make css grid work... In this challenge i recommend you only use grid on the grid itself, not on the whole page as I think you'd find that easier. To make it work on the whole page, you probably need to be doing 4 minmax columns, something like minmax(1rem, auto) repeat(2, minmax(auto, 350px)) minmax(1rem, auto)
    • how to ensure content doesn't touch the side of the screen (or it's container)

    I hope these tips point you in the right direction

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord