Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions14Comments17

All comments

  • Alex• 1,090

    @AlexBueckig

    Posted

    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

    @nlefty

    Submitted

    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

    @AlexBueckig

    Posted

    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

    @AlexBueckig

    Posted

    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

    @AlexBueckig

    Posted

    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

    @pyteng

    Submitted

    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

    @AlexBueckig

    Posted

    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

    @cguttweb

    Submitted

    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

    @AlexBueckig

    Posted

    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

    @TwKnD

    Submitted

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

    CSS Grid

    2

    Alex• 1,090

    @AlexBueckig

    Posted

    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
  • Descifle• 110

    @descifle

    Submitted

    I have an issue with getting the cards to shrink and stay within the viewport

    html css grid

    1

    Alex• 1,090

    @AlexBueckig

    Posted

    Hi @descifle,

    your card aren't shrinking because your .card has a fixed width set. If you want them to shrink try max-width instead of width. max-width allows them to scale down if they don't have enough room left to span the whole width.

    1
  • Alex• 1,090

    @AlexBueckig

    Posted

    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-gallardo

    Submitted

    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

    @AlexBueckig

    Posted

    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

    @AlexBueckig

    Posted

    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

    @AlexBueckig

    Posted

    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

    @cguttweb

    Submitted

    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

    @AlexBueckig

    Posted

    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
  • Silas Huereca• 50

    @silashuereca

    Submitted

    I used react-select. Does anyone have any good resources on styling select elements?

    This challenge was a lot of fun and I learned a ton from it.

    REST Countries API

    1

    Alex• 1,090

    @AlexBueckig

    Posted

    Hi @silashuereca,

    I'm currently reworking my REST-Api project and I started using react-select as replacement for the standard HTML select tag.

    Currently I came to the conclusion that the easiest way to style the components is using both props className and classNamePrefix.

    I'll quote something from the docs right now, I hope it clears things up a bit! 😃

    For example, given className='react-select-container' and classNamePrefix="react-select", the DOM structure is similar to this:

    <div class="react-select-container">
  <div class="react-select__control">
    <div class="react-select__value-container">...</div>
    <div class="react-select__indicators">...</div>
  </div>
  <div class="react-select__menu">
    <div class="react-select__menu-list">
      <div class="react-select__option">...</div>
    </div>
  </div>
</div>

    To sum it up, every element gets a className which you can use to style it then. The control e.g. is the typical select box with the dropdown arrow you normally see while nothing has been clicked. The menu on the other hand are the options, which show up as soon as you click on the control.

    Btw... Here is the link to the docs if you want to check out the other options aswell. https://react-select.com/styles

    Edit: Here are some usefull classes for styling the options I just found out about... Unfortunately the docs are kinda bad at describing all the different class variations... Either that or I'm just blind... 🙄

    .react-select__option:hover {}
.react-select__option:focus {}
.react-select__option:active {}
.react-select__option--is-focused {}
.react-select__option--is-selected {}
    1
  • Alex• 1,090

    @AlexBueckig

    Posted

    Hi @J-Guidry,

    in my solution I actually included the parapgraph in the form tag just to get rid of another additional wrapper-div. In my opinion its totally fine to add the paragraph inside to form tag because its a description/legal-notice which is contextually tied to submitting the form/pressing the button.

    Maybe someone else can confirm or deny? 😃

    1
  • Savaaa22• 220

    @Savaaa22

    Submitted

    Anyone knows how to make email placeholder red after error message?

    Html Scss Js

    2

    Alex• 1,090

    @AlexBueckig

    Posted

    Hi @Savaaa22,

    actually there is a pseudoclass for elements using a placeholder! You can change lots of properties including color, font-size, etc.

    e.g.:

    input::placeholder {
    color: red;
}

    Of course you don't have to use the input selector, you can just use a class or id selector instead aswell. e.g. .my-input-element-class::placeholder {...}

    2
  • Ryan Wickham• 30

    @RyanWickham

    Submitted

    With the email submit bar, for some reason the change of colour for the border changes into two different colours (left/top one colour and bottom another).

    Base Apparel Coming soon page

    2

    Alex• 1,090

    @AlexBueckig

    Posted

    Hey @RyanWickham,

    from what I saw it's because you never set any border-style, you just use the default border-style the input element has (which is inset).

    To get a proper border you seem to want you need to set border-style: solid;. (Or use the shorthand while adding a border like border: 3px solid red;

    Here is a codepen which shows you the different borders. Click me

    Here is another overview of all the existing border-styles: https://developer.mozilla.org/en-US/docs/Web/CSS/border-style

    2