Skip to content
Submitted over 4 years ago

HTML and CSS site using Flexbox

Mindaugas Jocevicius•70
@MindaugasJ88
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi, I just finished my first HTML and CSS project, therefore I have some questions:

  1. Does my website meets the responsive website standards? As I was trying to reduce the size of screen, the columns wraps and turns into the mobile version. Do you see any places where it's working/looking wrong?
  2. When it's best to use percent values and when fixed pixels values? At first I thought that I need to use everywhere percent values in order to make everything responsive, but I saw that it's difficult when you using percentage both to parent and child items. So I used both pixels and percentage, just wondering what is the best practice?
  3. Can you check the classes code? Now I had literraly styled everything in styles.css files. First I had styled tag selectors and then created bunch of class selectors classes. What could be improved in terms of styling logic and naming? Was my approach effective?

I'm grateful for any feeback. Thank you! ps: code is in two files - index.html and css/styles.css

Community feedback

  • Alexander Heo•80
    @AlexanderHeoPosted over 4 years ago

    Here's my two cents on fixed vs responsive sizing. Keep in mind I am new to webdev, about 8 months of studying and i just starting to look for my first job.

    So this has been my latest approach: the main container - responsive. this way the background image or color gradient will resize automatically with the screen. images, buttons, and other components - fixed. i don't want a button to stretch with the screen. same for images, i always set a specific pixel by pixel width and height on images, or image containers, and use media queries to make them responsive. certain things like side bars i like to set a fixed width, while the rest of the DOM will be set responsive. As far as selectors: this was something that took me a long time to get, and i'm still modifying my system with every project. but bottom line is to have a system. i like to plan out the styling so i know which elements will need styling, and which classes can be reused. learn the sibling and child selectors, and pseudo-classes like :nth-child(), :first-of-type, as these will help you select specific elements without giving every single element a class name. Hope this helps; these are such dense topics and there are so many different approaches to them.

    1
  • Moustafa Mahmoud•245
    @DevMoustafa97Posted over 4 years ago

    good work but if you don't mind your solution as small issues

    • price $29 should be bold using css or just b tag
    • you should resize your signup button and take care of padding and font size inside it

    but still great work

    1
  • Mindaugas Jocevicius•70
    @MindaugasJ88Posted over 4 years ago

    Thank you for the answers!

    0

Please log in to post a comment

Log in with GitHub

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