Skip to content
OverviewSolutions
15
Comments
21
Adam
@aemann2

All comments

  • Adam•430
    @aemann2Posted over 3 years ago

    This one is spot-on...the closest one I've seen to the sketch so far. I'm going to study yours. Great job!

    Marked as helpful
    1
  • Adam•430
    @aemann2Posted over 3 years ago

    It looks like the background image for your desktop version isn't quite taking up the whole page. You can fix this by setting min-height on your body element to 100vh instead of 100%, and adding background-size: cover to your body selector.

    0
  • Vinayak•30
    @d-vinayakSubmitted over 3 years ago

    I am not able to position social icons to the right bottom side for desktop version. I will be really grateful if someone tells me what I am doing wrong plus any additional feedback will be really helpful for me

    Huddle landing page with mobile first approach

    3
    Adam•430
    @aemann2Posted over 3 years ago

    For the social icons, I made the right side of the page its own div, set the height to 100vh, and made it flex container. Then I put a wrapper around everything except the social icons:

      .main {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .flex-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

    As you can see, I set the flex to 1 for the wrapper. I wrapped my icons in their own div within .main, and because they're a flex child of the .main container, I set their flex property to 0 and used flex-end and margin to align them:

        &__icons {
      flex: 0;
      align-self: flex-end;
      margin-right: 5rem;
    }

    Setting their div to flex: 0 is the key to making this work: it causes the .flex-wrapper container to expand and pushes the icons down to the bottom of the page. You can take a look at my code if you want more clarification.

    Also, for your body element on your desktop, add in background-size: cover. This will make your background image cover the entire page.

    1
  • Adam•430
    @aemann2Posted over 3 years ago

    I'm not sure how long you've been coding for, but it's smart that you're using min-width media queries. I've been coding for around 9 months and I only just started doing that in the past few months. It's made styling so much easier to do the mobile styling first, then scale up to the desktop.

    0
  • Axseinga•430
    @axseingaSubmitted over 3 years ago

    Hi everyone!

    Please feel free to comment my solution and let me know if I can improve my code. Please have a look at javascript part and let me know if it can be written differently or if there is something that can be improved (really appreciated!). If anyone knows where to read more about how to enable submitting the form after user clicks submit button - at the moment I used e.preventDefault() to stop form from submitting.

    Thank you!

    PS. I updated accessibility issues but somehow I cannot generate new report... If someone can check if I done it correctly I would be thankful!

    Mobile first with Flexbox and vanilla JS

    1
    Adam•430
    @aemann2Posted over 3 years ago

    Very nice job -- I like how you set the width for your form to a max-width so it doesn't get unnaturally large when you're scaling up to desktop size. One thing I'll suggest is that when you write your CSS, put your media queries in their own section rather than putting them in the individual classes. It's quicker to look for the screen width you want when you're changing a mobile style, rather than having to know the width in the specific class name.

    You've pretty much got it with your Javascript. In my solution, I basically did what you did, but with a forEach loop because I got tired of writing everything 4 times. You can actually cut down on your Javascript some by taking the error img out of your HTML and setting a background-image on your form fields with JS. Check my solution to see what I'm talking about.

    I checked your accessibility issues, and it looks like what you have should clear those. I had the same problem when I submitted mine, and I also fixed it by adding aria-label.

    1
  • Adam•430
    @aemann2Posted over 3 years ago

    Smart that you divide the main content into two halves, then have the content fill up the vertical space by using height: 100vh . I had a lot of trouble figuring out how to organize my content for the desktop, so your code gives me an idea of what direction to go in when I overhaul my solution.

    0
  • amir•30
    @amireousSubmitted over 3 years ago

    this is my first project I would be glad if you just check my codes and give me some advice thanks.

    flex-box , pure CSS

    2
    Adam•430
    @aemann2Posted over 3 years ago

    Not bad! It's really responsive and the image resizes well in the container. Visually it looks very good, although it does look like the "Queries" section slides under the image if you shrink the screen width down past 950px. Instead of setting the width of the 2 sides of the card to 50%, you might try using flex: 1 on each side?

    In your code, I've never seen a reset.css file like that. Might be overkill for most things you work on? Here are my resets, which I use so much I've created a VSCode snippet for them:

    html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

* {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  font-size: 100%;
}
    0
  • idkbit•350
    @idkbitSubmitted over 3 years ago

    Hi! In this challenge i practiced my sass skills. It's not pixel perfect, i can't figure margins, paddings, font-sizes and colors with my eyes. In my html i made many heading elements, is it ok or i should replace them with 'p' tags? Any feedback and suggestions is welcome!

    Price block with Sass, grid, flexbox

    1
    Adam•430
    @aemann2Posted over 3 years ago

    With SCSS imports for a project this small, I usually keep the bulk of my SCSS in the main SCSS file, then just import one or two modules (like the media queries). That way it's easier to get a general sense of what I'm doing at a glance rather than having to go to several separate files each time. Also, nice use of a mixin.

    If you haven't looked into it yet, you might want to check out BEM. It's a naming convention that I started using not long after SASS, and it makes it a lot easier to organize your code into blocks and nest styles for those blocks. Some people think the naming convention looks a little weird, but I think the tradeoff is worth it for how it helps me organize my stuff, and it works really well with SASS.

    1
  • Adam•430
    @aemann2Posted over 3 years ago

    Good solution -- I like how you used grid-template-areas to structure your grid. Your design is really efficient for relatively few lines of code.

    1
  • Adam•430
    @aemann2Posted over 3 years ago

    Do you mean the HTML validation issue? Look like you fixed it in your most recent code by removing type='text/javascript' . You can request a new report to get that error to go away. You can check your validation here:

    https://validator.w3.org/#validate_by_input

    1
  • Adam•430
    @aemann2Posted over 3 years ago

    Hey Mehmet,

    Nice solution! This one took me a long time, so it's good to see what others have done who have finished it. A few things:

    The <p> text is a little small. I think when I did this one I actually ignored the recommendation in the style guide because when I tried using it, I could barely see the text.

    I also tried setting the image with the <img> tag for this project. If I were to go back and do it again, however, I would have made the section of the card with the image a <div>, and set the image as a background image. The reason (I've recently found) is that background images are easier to control than <img> images.

    Also, if I were you, I would have done something different with the Javascript. It looks like you're using it to display certain styles according to the screen width. I think it would be much easier to use media queries for this, and use the Javascript to control what appears when you click on the share buttons. Check out my solution if you're interested.

    Hope this helps!

    -Adam

    0
  • Adam•430
    @aemann2Posted over 3 years ago

    Hi Wonuola,

    Good job on the challenge. A couple suggestions:

    First, I'd suggest putting all your content (except maybe the .attribution stuff) in the <main> tag and setting a fixed width on it. The reason for this is that all your main sections are set with a width of 100%, which means they'll all expand to take up 100% of the screen width. Sometimes this is what you want, but here, if you're viewing the page on a larger screen, the images become bigger than they're supposed to be and become distorted.

    With .svg files, you don't have to worry about images being distorted because those are actually bits of code that can expand or shrink and remain fundamentally the same. But with .png and .jpeg image files (like the ones in this project), you're limited by how much you can allow the images to expand before they distort and don't look so good. Just something to keep in mind whenever you're working with image files that aren't SVG.

    Second, in your Github code, you should put your image files in their own folder. This helps make your code more organized, so when people go to view your code it's easier to find your HTML and stylesheet. I've also completed this challenge if you wanna take a look at another solution.

    Best,

    -Adam

    Marked as helpful
    3