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
OverviewSolutions15Comments21

All comments

  • Adam• 430

    @aemann2

    Posted

    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

    @aemann2

    Posted

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

    Submitted

    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

    @aemann2

    Posted

    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

    @aemann2

    Posted

    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

    @axseinga

    Submitted

    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

    @aemann2

    Posted

    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

    @aemann2

    Posted

    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

    @amireous

    Submitted

    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

    @aemann2

    Posted

    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

    @idkbit

    Submitted

    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

    @aemann2

    Posted

    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

    @aemann2

    Posted

    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

    @aemann2

    Posted

    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

    @aemann2

    Posted

    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

    @aemann2

    Posted

    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
  • Adam• 430

    @aemann2

    Posted

    Looks pretty good. I just finished this one and I'm impressed with how much you were able to get done in the 60 lines of CSS before your media queries.

    One problem I noticed is that the card pops out of format between 770px and 575px width. I think it has to do with setting a min-width in one media query and a max-width in another...seems like some widths are getting skipped over.

    0
  • Adam• 430

    @aemann2

    Posted

    Looks like you've got 6 stars for the review ratings instead of five 😉

    0
  • Adam• 430

    @aemann2

    Posted

    Hi Godfred,

    It's hard to tell exactly where the problem is coming from, but I think it might be because you've got the left and right sides both wrapped in the .row class. When you open the accordions, it's pushing the padding down for both sections.

    I think the big thing you need to do is to take everything that's nested under body and un-nest it in your CSS. Generally, you should avoid nesting classes within elements and elements within classes, as it sets up specificity problems. If you're going to set a style for an element, it should be because you want all elements to have that style globally. Classes/elements that are nested under other classes / elements have a different weight than classes that are not nested, which can cause your code to behave strangely.

    SCSS makes it easy to nest things, and it can be a handy way to structure blocks of code. Here's a methodology I use to nest classes in sections: http://getbem.com/introduction/

    1
  • Dominic Klaic• 20

    @DeKodingCode

    Submitted

    Decided to give my hand a try at using Flexbox, and since I'm rather new to JS, I did the accordion animations with JS.

    Still learning about making sites more fluid and responsive.

    Any tips or suggestions are welcome!

    Flexbooks, Animations & JS

    1

    Adam• 430

    @aemann2

    Posted

    Hi Dominic,

    One problem I noticed is that if the user opens too many accordion tabs, the text will go off the page. I solved this in my solution by writing some JS to only let one tab be open at a time.

    The way the box is animated to look like it's levitating is a really nice touch -- I didn't even think to do that.

    0
  • aok• 140

    @kvcarido

    Submitted

    Hey community!

    I completed this challenge a few months back and just realized I never submitted my solution. 😄 Overall feedback is always welcomed!

    Plain ol' HTML + CSS practice

    1

    Adam• 430

    @aemann2

    Posted

    Looks good -- I just finished this project and it's cool to see the style differences. I like how you use min-width on the container to get the elements to resize responsively.

    1
  • Toyger• 155

    @hacmaz123456

    Submitted

    Please give me some feedback, i think my script need to optimize :D I can make this thing like in design (with 1 media query at 375px), but it too hard if you wanna see content between around 376px - 800px, so i split it to 3 parts. Did i do anything wrong? Sry for my bad english. Thank you!

    FAQ accordion card with html, css and javascript

    3

    Adam• 430

    @aemann2

    Posted

    Hi Toyger,

    One easy improvement would be to make your HTML more semantic. It would be easy, for example, to switch out some of the div sections in the text dropdowns with details elements.

    It also looks like your FAQ section is sliding over into the left side of your card when the window shrinks and cutting off the image there. You can fix that by setting the width of the card with just width rather than using max-width.

    I think you should also find a way to center the card -- right now you've got margin-top pushing the card down, but if someone's screen is a little too small, it cuts off the bottom of the card. Maybe use flexbox, or one of the centering strategies here:

    https://css-tricks.com/centering-css-complete-guide/

    I struggled with this one also, and it's interesting to see that we did some of the same things. I also wrote my Javascript so that the user can only open 1 according section at a time.

    2
  • Adam• 430

    @aemann2

    Posted

    Hi Paul,

    It looks like your card is sliding around a lot on mobile, which seems to be because of the way your images are set in the HTML. Because they have a set height / width in the container, they're actually taking up space even though you use absolute positioning. I had a similar problem with my code, and I solved it by taking the BG images out of my HTML and adding them as background-images to the body container.

    0
  • Adam• 430

    @aemann2

    Posted

    Your solution looks pretty spot-on. I actually made a note for myself of the transform: translate() trick you used for centering. Only thing I would do is add more semantic markup in the HTML. You're using all divs -- you could use "main" or "article" for the card, "footer" for the footer, etc.

    0
  • Andy Curley• 30

    @racurley

    Submitted

    This was my first project. I was much harder than I expected. I had a hard time thinking through the proper way to use DIV's. I have some unnecessary ones in the html file still. Probably ended up with more than I needed that I did use.

    Problems:

    • I think I generally got the right answer but I struggled on positioning the card. Not sure I did it most efficiently.

    • Had a hard time mimicking the spacing of the font.

    • I used percentages to place the background images. They behave kind of weird when I resize the screen.

      background-image: url("../images/bg-pattern-top.svg"), url("../images/bg-pattern-bottom.svg"); /* background-position: -500px -600px, 500px 300px; */ background-position: -130% -200%, 200% 150%; background-repeat: no-repeat; background-attachment: fixed;

    Profile card using HTML and CSS

    1

    Adam• 430

    @aemann2

    Posted

    I had a similar problem when I was positioning the background image. After using percentages for the positioning, I saw that another user used vh and vw to position the background. I incorporated that into my own project and the results were much better.

    If you're interested, here's a link to what I came up with:

    https://www.frontendmentor.io/solutions/profile-card-component-sass-and-bem-Qbhs9MwOS

    Interesting that you chose to go with a table for the stats. Did you find that simple or difficult? I used flexbox on that section and it was breeze.

    0