Skip to content
OverviewSolutions
14
Comments
16
Alex
@AlexBueckig

All comments

  • Alex•1,090
    @AlexBueckigPosted about 5 years ago

    Hi Vaibhav,

    one thing I'd advise you is to have a look at HTML5 semantic elements. They greatly improve accessibility (for both search engines and screen readers) and make your markup easier to understand for everyone. ;)

    3
  • Nikkita Leftwich•140
    @nleftySubmitted about 5 years ago

    Open to input especially around the media query. I need to modify my width too as I set them differently from the specified size while working through!

    Price Grid w/ HTML & CSS

    2
    Alex•1,090
    @AlexBueckigPosted about 5 years ago

    Hi nlefty,

    Your solution looks great. As you already mentioned, there is one slight issue with your media queries. Your content starts to overflow and creates horizontal scrolling starting from 960px. One thing that'd get around the issue quite easily is to set your current breakpoint to something like 970px. Furthermore you can then add a max-width: 600px; with a margin: 0 auto; to your .wrapper class for the mobile part. And if you don't like your elements being pushed all the way to the corners of the viewport, just add padding: 0 1em; to your .wrapper aswell. That should make it, hopefully... 😃 Didn't test it myself, just went through it in my head real quick. 😇

    And I saw you are using a desktop first workflow! How about trying to use mobile first for your next project! 😃 It's the preferred workflow nowadays because it makes mobile devices load less style-information which is better for optimization purposes.

    Another advantage is that you don't have to use any special layout tools for mobile, you can mostly just use block level elements which is the default behavior. That means that you have to reset way less code when doing the desktop parts of your layout in your media queries later on. Less code means less work and better maintainability in general. 😇

    1
  • Alex•1,090
    @AlexBueckigPosted about 5 years ago

    Hi pranavbegade,

    I noticed you used absolute positioning in both of your submissions a lot. If you are unfamiliar with other layout techniques CSS has to offer you I'd start with learning flexbox to start with. Especially if you want to make your layouts responsive. Right now your desings only work for one screen size and as soon as you start resizing the page to try to fit it on a mobile screen size it get messy pretty fast.

    There are quite a few free courses out there to give you a great entry point in creating responsive websites. Here is one I can recommend myself, its totally free and I really like the interactive approach scrimba took on teaching. https://scrimba.com/g/ghtmlcss If you already feel comfortable with the basics of html you can skip forward to lesson 21, but I'd advise you to at least have a quick look at the earlier lessons. It's always great to re-hear things you already know, maybe you'll even learn new tricks you didn't think about earlier.

    1
  • Alex•1,090
    @AlexBueckigPosted about 5 years ago

    Hi Vaibhav,

    I saw you used position: absolute; to position your cards. I'd recommend you to use the layout tools provided by CSS like flexbox or grid to position your elements instead of using position: absolute. You can find good tutorials on how to use them here: https://www.frontendmentor.io/resources

    I'd pick flexbox to start off with and when you are pretty familiar with it I'd have a look into grid. Both of them combined will allow you to create all kinds of amazing layouts.

    2
  • Teng•170
    @pytengSubmitted about 5 years ago

    Encountered a bug with box-shadow and border-radius.

    For some reason there's an extra border showing like this when i put box-shadow to the container.

    I fixed it by putting border-radius to the header and container div.

    Single price grid compontent | flexbox

    1
    Alex•1,090
    @AlexBueckigPosted about 5 years ago

    Hi pyteng,

    your solution looks amazing, good job! 👍

    One really small thing I noticed is that the bottom borders are not display correctly for desktops. The why us section still has borders on the bottom left and right while the subscription section has no border. 😉

    1
  • Chloe•240
    @cguttwebSubmitted about 5 years ago

    I'm attempting to use grid, but struggling with alignment of the boxes on desktop. I wonder if perhaps I would be better off using flexbox instead? Any feedback appreciated.

    Four card feature section attempt with CSS grid

    1
    Alex•1,090
    @AlexBueckigPosted about 5 years ago

    Hi Chloe,

    this project is a perfect exercise for using grid! You can play around with a lot of things like grid template areas (basically named parts of your grid which you can assign to specific parts of your html.)

    If you really want to stick with it, don't switch over to flexbox for this one. Wes Bos has a great free course on Grid, you can find it in the resources section here on the website.

    Now its time for some real feedback! 😅 I saw you wrapping your whole content inside a single grid. I approached this a bit differently. I created two sections, one for the header part and one for the 4 cards. I then used grid to position the cards, while just using block level elements (which is the default display property for all sections, divs, paragraphs, etc.) for the header. Feel free to check out my code, there you can see how I achieved it using grid with grid-template-areas. 😃

    If you have any specific questions using grid, feel free to ask! 😇

    Keep up the great work! 👍

    1
  • TwKnD•85
    @TwKnDSubmitted about 5 years ago

    First time using CSS Grid, Any feedback is helpful at this point.

    CSS Grid

    2
    Alex•1,090
    @AlexBueckigPosted about 5 years ago

    Hello @TwKnD,

    your solution looks amazing, I love how you use the grid to give your component a left and right margin giving it an extra empty column to the left and right! Good job!

    The only thing I noticed is that the list in the Why us section isn't looking right. Maybe use an ul instead of an p for all the list items so the list gets displayed properly?

    1
  • Alex•1,090
    @AlexBueckigPosted about 5 years ago

    Hi Patrick,

    your solution looks great and everything scales nicely! 😃

    Without having looked at you code what I immediately noticed is that it is hard to tell for users that your buttons are actually clickable. I'd recommend you to just add a cursor: pointer; to your button to indicate that you can actually click them. Maybe even a hover-state would look great and give the user further indications that these elements are actually clickable.

    1
  • ariel-gallardo•40
    @ariel-gallardoSubmitted about 5 years ago

    The instructions indicate that they are 15px for the letters, but from there with the rest of the page, as well as for the titles and so on, should the size of the letters be changed with em?

    Four card feature section Solution

    2
    Alex•1,090
    @AlexBueckigPosted about 5 years ago

    You are right, but I'd recommend using rem over em for the font-size. When using em for font-size the value always refers to the elements parent font-size and calculates its size according to it. Using rem (abbreviation for root-em) always looks at the root element (html-tag) and calculates its size from there. (Remember: Using em for margin and padding always refer to the actual elements font-size, not the parents.)

    This makes it easier if you want to change the font-size in media queries because you mostly just need to change the html's font-size and all the other font-sizes scale accordingly. The parts where you actually need to manually adjust the font-sizes will be a lot less using this approach.

    2
  • Alex•1,090
    @AlexBueckigPosted about 5 years ago

    Hey Kingsley,

    I noticed you are still using float to position your elements. Since we have Flexbox and Grid nowadays this kind of positioning is outdated and barely anyone uses it anymore because it is way to complicated and prone to errors. If you really want to improve on web development and level up your skills I'd really advise you - since you already know the basics of HTML and CSS - to start off with learning flexbox. Flexbox is such a powerful tool and is definiately considered best-practice in todays web-development workflows!

    Here are some great resources you can learn from. https://www.frontendmentor.io/resources I personally took the free Flexbox course by Wes Bos and I can totally recommend it!

    But coming back to the original problem, why seem your social icons to be out of the container...? Actually... They are still inside the container and what is happening is the expected behaviour of using floats in this use case.

    If you float an element inside a block-level element (e.g. your div) it gets taken out of the flow and gets pushed to the right until it hits the border of the containing content-box (in your case your .bottom-container). Since the social icons are now taken out of the flow your .bottom container doesn't have any more children which could give it a height and so the height collapses to 0. It seems kinda weird... But that's how floats works...

    Since floats inside floats work differently you could also float your .bottom-container to the left or right, remove the margin and re-add it to the .socials container...

    Edit: @argelomnes already mentioned 2 different - in my opinion better solutions - to your problem. Definiately have a look at them! 😃

    1
  • Alex•1,090
    @AlexBueckigPosted about 5 years ago

    Hi @andrewabreur,

    your solutin looks great! There is only one small thing I'd change. If the screen gets really small the 4 containers get squished a lot before the media query kicks in and it looks kind of strange...

    An easy work-around for this would be to get rid of your width: 70% and only use max-width: 1000px; in your .features class instead! 😃 This will free up some room to the left and right on smaller screens to make it less squishy.

    If you want to get some whitespace between your elements and the edge of the viewport you can also just add a little bit of extra padding on the left and right aswell.

    2
  • Chloe•240
    @cguttwebSubmitted about 5 years ago

    Refreshing my knowledge of flexbox if anyone has any suggsetions happy to hear them as I started with the mobile view before adding min-width media queries for desktop.

    Single price component using flexbox

    1
    Alex•1,090
    @AlexBueckigPosted about 5 years ago

    Hi Chloe,

    your current workflow with starting with the mobile view first is great, it's the preferred way of coding websites nowadays.

    First of all, your project scales great across both mobile and desktop. I noticed you put a display: flex; on your body with flex-direction: column;. But since the flex-items (main and footer tag in your case) are alreay block level elements there is no use in adding these properties to the body. Block level elements will already be aligned in columns by default and since you are not using the justify/alignment options flexbox provides you don't really need it. It's not breaking anything though so it really doesn't matter, its just a tip to keep your codebase as small as possible. 😉

    Another thing you could change to make your solution look closer to the actual design is to increase the padding on your 3 elements - I saw you added different paddings to the different containers, a single padding for all 3 of them would make it look more consistent. Another minor, but design-wise important change, is to give your whole container a border-radius to make the corners look more roundish. You might even set a max-width: 700px; on it to stop it from getting too wide. But thats just personal preference.

    Also another thing that is really important to make your button look more interactive is to simply add a cursor: pointer; to it. It's a nice addition to your already existing hover effect. Another minor thing I'd change is to just add a border: none; to your button to make the default border disappear and you are good to go! 😃

    Keep up with the good work! 😇

    1