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
OverviewSolutions11Comments150

All comments

  • Gerben Dol• 3,115

    @GerbenDol

    Posted

    Hey Chris-Ann! Great job on the layout!

    There's a couple of things I'd keep in mind regarding the design:

    • The font-size is a bit small in my opinion, it's a bit hard to read
    • Make sure to check sizes and spacing within the cards. For example right now the profile photos are a bit too big and the margin below the photo is a bit small.

    It's details like this that will get your solution from looking good to looking great!

    1
  • Gerben Dol• 3,115

    @GerbenDol

    Posted

    Hi Salah Eddine,

    First thing I noticed: your solution is looking really nice! Loving the spacing, typography and overall feel. Well done! 👌

    A thing to consider:

    • Check out your accessibility and HTML issue rapports

    Honestly, going through your code I think you did really well and I don't have a lot of feedback. Keep up the great work! 😁

    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

    Gerben Dol• 3,115

    @GerbenDol

    Posted

    Hey Toyger,

    I think your solution is looking really good! 🙌🏻

    The things I found are that:

    • The animation on the answer in the FAQ is a bit slow
    • The hover on the answer is a bit odd. The color changing and the cursor becoming a pointer suggests the answers is somehow interactive.

    Curious to see what feedback other people have! Keep up the nice work! 💪🏻

    2
  • Leon• 180

    @leon-bw

    Submitted

    First attempt at trying to use BEM so please let me know if this is even close to being correctly done at all. Also my javascript is still a work in progress so I know there's probably an easier way of doing that too. Any areas of this project that you feel could be improved please let me know, I'm open to all suggestions. Thanks for looking :)

    Intro with sign up - using BEM, CSS, JavaScript

    1

    Gerben Dol• 3,115

    @GerbenDol

    Posted

    Hey Leon, cool to see you're learning to use BEM! 💪🏻

    I've looked at your code and noticed you're not using the -- part in BEM correctly yet.

    For example: <div class="card__offer"><p class="card__offer--text"><span>Try it free 7 days</span> then $20/mo. thereafter</p></div>

    So .card__offer suggests that this is in an element in .card which it is not. So, maybe change this to be the block and call it .card. The text (honestly, I'm not sure you even need a class on this paragraph as you'll probably style all text the same in here) could become .card__text.

    Only use the -- in your class if it is a modifier on an already existing element. For example, let's say this case of the .card__text is special since it is highlighted. You want all the styling .card__text already has, but with a modification on it's background-color. You'd make it like <p class="card__text card__text--highlight"> to use the basic styles and apply the modifier.

    Be sure to check out some articles diving into what all the ideas behind BEM are to avoid making these mistakes. Hit me up on Slack if you need some more help! I'm on there using the same name as I am here. 🙌🏻

    2
  • Nafsuki• 245

    @Nafsuki

    Submitted

    I coded desktop first, mobile responsive design using Sass and flexbox layout.

    form validates the value and gives error if input value is empty, and if email address is not formatted correctly.

    Any feedback & suggestion for improvement would be very much appreciated ☺️🙏!!

    Ping Coming Soon Page using Sass & JS

    3

    Gerben Dol• 3,115

    @GerbenDol

    Posted

    Hey Nafsuki!

    Your solution looks great - really well done! 🤩

    One thing I'd consider paying attention to is the nesting of your SASS. Right now your style on, for example, your h1 only works as long as it is in the .container. Do you really need that depth in your selector or risk the style breaking as soon as it is used outside of the .container?

    In a small project like this obviously it's no problem at all, but keep this in mind on bigger projects! 😄

    1
  • Shivam• 520

    @shivjoshi1996

    Submitted

    Hey guys,

    I skipped the JS for this challenge, I'll probably come back to it a little later. Some questions:

    • Any improvements on the way I made the mobile & desktop images switch out? I had a little trouble figuring out the best way to make them switch, as well as positioning the logo where I wanted it to go.
    • Best way to define the width of content? For example, the logo, h1, p, and form all use padding-left: vh to make them all line up. Is there a better way to do this?

    Cheers

    Mobile-First Page using CSS Flexbox

    1

    Gerben Dol• 3,115

    @GerbenDol

    Posted

    Hey!

    So my tip: instead of setting a padding or margin left on all the separate content elements, just set a padding-left on your .left-wrapper so it's more universal and anything your throw in there is just aligned properly by default.

    Great solution overall, keep up the good work! 💪🏻

    2
  • Rajiv Kumar• 30

    @kumarrajiv08

    Submitted

    I am having problem in writing code for mobile design.Please guide me with the same.

    HTML and CSS

    2

    Gerben Dol• 3,115

    @GerbenDol

    Posted

    Hey Rajiv! I'd suggest for your next challenge you also look into mobile first development. This way your default layout is working for mobile and with the use of min-width breakpoints you'll add more complexity to the layout to make columns and stuff like that!

    0
  • Jacky Xie• 40

    @eLpupil

    Submitted

    I had a lot of trouble with the positioning and child/parent height relationships. Ended up having to use width: 100% for the html and body elements.

    I also need a better way to position the buttons. I tried but could not anchor them to where I'd like it to be and have the position scale with the page size.

    If someone could take a look at my html/css and give me some pointers, I'd greatly appreciate it.

    HTML, CSS, JavaScript, jQuery

    1

    Gerben Dol• 3,115

    @GerbenDol

    Posted

    Hey Jackie! Overall it's looking great!

    I think you should really just dive a bit deeper into how setting position absolute affects the element.

    In this case you'd want a div around your image that is position: relative; and also has your absolute element in it.

    This way the absolute is always relative to the dimensions of the image and it's easy to always display it at the bottom-left with a little offset!

    0
  • Gerben Dol• 3,115

    @GerbenDol

    Posted

    Hey Bestian! Your solution looks great!

    I think on your next challenge try to really nail the details in the design. For example:

    • Make sure the white space (your margins and paddings) match the design
    • Make colors match, for example your green text is slightly different compared to the arrow
    • You are using a different font

    I think learning to work on this next level of details will greatly help you become an even better front-end developer! 💪🏻

    1
  • Kanav Gulati• 20

    @codefather91

    Submitted

    Hey folks, This is my first ever attempt at creating a responsive webpage. I decided not to use Bootstrap and try and figure out the responsiveness using the CSS media queries. Do let me know your thoughts and feedback as it will definitely help me get better at this.

    Four Card feature section in HTML, CSS by KvG

    1

    Gerben Dol• 3,115

    @GerbenDol

    Posted

    Hey Kanav, honestly a great job for your first responsive page! 🙌🏻

    What I noticed is that before the layout goes to mobile it gets very narrow. Try adding another breakpoint for screens that are small, but not as small as mobile phones and maybe set it to have 2 cards per row! 😁

    Marked as helpful

    0
  • Gerben Dol• 3,115

    @GerbenDol

    Posted

    Hi Adetayo! Overall I think you did a great job! 💪🏻

    For the help with JavaScript I think it's easiest to help for more specific help in the Slack channel.

    Regarding your solution:

    • In general it's looking really good, but when you start looking at details from the design it could still improve. Try paying more attention to proper spacing, background layout, hover effects and stuff like that
    • Try checking the top borders on the cards. In the design the bottom of the border is flat and there's a gradient in the Instagram one

    I see you already worked on some awesome challenges, but maybe try a few of the Newbie ones. They'll be easier, but they're quick and great practice to work on your skills to really focus on implementing the design more accurately. 😁

    1
  • Gerben Dol• 3,115

    @GerbenDol

    Posted

    Hey Ayaka! Your solution is looking spot on, great job!

    There's a few places I'd check your spacing. For example, the iMac mockup below "Keep track of your snippets" is very close to the left side of the screen on a bigger monitor.

    Another example is the logo's, try giving them some padding so that when they get closer to each other they don't touch.

    Last but not least try adding some nice hover effects to your buttons! 🤓

    Thanks for the great solution and keep up the great work! 💪🏻

    0
  • Ledi Hildawan• 140

    @ledihildawan

    Submitted

    I really need feedback for my progress, If you've seen my solution and found bugs please let me know. I really appreciate.

    Your new friend, Ledi Hildawan.

    Mobile first using Sass and BEM

    1

    Gerben Dol• 3,115

    @GerbenDol

    Posted

    Hi Ledi! Great solution, I really like all the subtle hover animations you added! 😁

    For me the last section, the "Ready To Build Your Community?" part, could be a bit better. There's a weird light grey background there and it's not vertically aligned with it's middle to the top of the footer.

    You did awesome, so keep up the great work! 💪🏻

    0
  • Gerben Dol• 3,115

    @GerbenDol

    Posted

    Hey Fatih! Great to see you managed to finish the challenge, nice job! 😁

    I can see you did really have some issues with the images and the purple backgrounds. I think by making the image position: absolute; you made it hard for yourself to leverage the resizing nature of the image as it's taken out of the flow of the page. 🙈

    I think learning a bit more about using position: absolute; and it's power when relative to the proper parent could be a nice way for you to later revisit this challenge and kill the image part! 💪🏻

    1
  • Gerben Dol• 3,115

    @GerbenDol

    Posted

    Hi Sebastian! Your solution looks great! 😁

    Try and give the header a little more space on mobile, it's very close to the top of the browser now.

    Also try and add some more interactivity to the page!

    • Change the background color of the card when hovered
    • Add cursor: pointer; to your switch when hovered

    Keep up the nice work! 🙌🏻

    1
  • Kaho• 130

    @shiv-chan

    Submitted

    I have two things that I couldn't figure out myself. If anyone would give me some advice or comment about it, it would be appreciated!

    1. How can you align the header(the first two sentences) and the paragraph below? I couldn't match the start line of those ones anyway.

    2. When applying the responsive design on 320px wide view(Mobile S size), the paragraph inside each box got chopped off a bit. How should I have done to make it look right?

    Thank you for reading!

    Four card feature section with pure HTML and CSS

    1

    Gerben Dol• 3,115

    @GerbenDol

    Posted

    Hi Kaho! Your solution is looking super good! Well done! 💪🏻

    1. Honestly, this is something you shouldn't even want to attempt unless you are sure the layout is never going to change. You could set a max-width on the heading that's exactly the same width as your heading and maybe look into using text-align: justify;. But in the end that's not the point of responsive web design and not a requirement of the design given.
    2. You are setting width: 250px; on your paragraph, which is wider than the card around it. Remove the width or set it to 100% to fix it.

    Please also be sure to adept your layout to other screen sizes, smaller screen (but wider than 320 pixels) the layout is overflowing the body. I think on your next challenge you should focus on making things as fluid as possible, so it's truly responsive.

    Keep up the great work and good luck on your next challenge! 😁

    1
  • Gerben Dol• 3,115

    @GerbenDol

    Posted

    Hey Barbara! Great job! 💪🏻

    I noticed that on bigger screens your footer breaks, so be sure to have a look at what's causing that. 🤓 Be sure to pay good attention to your layout as the screen resizes. Don't let content get too narrow or too wide, so it's a plesant experience for your user no matter their device!

    Keep up the good work!

    1
  • Gerben Dol• 3,115

    @GerbenDol

    Posted

    Hey David! 👋🏻

    I'd really recommend you dive into using grid or flexbox and trying this challenge again! Right now the layout is made to work on a really specific browser width, which wouldn't work in a real-life project.

    Keep up the good work and keep on learning! If you're ever stuck or in need of tips be sure to ask for help in the Slack channel! 😁

    1
  • Arun• 285

    @arun-roberts

    Submitted

    First encounter with the grid. POWERFUL. Did I include any superfluities? Media queries etc?

    Also, particularly interested in feedback on code layout and CSS best practices.

    I added an extra breakpoint because I didn't like how the cards looked when either over stretched or squished in. Are there any better ways around this?

    Cheers, Arun.

    Four card feature section

    1

    Gerben Dol• 3,115

    @GerbenDol

    Posted

    Hey Arun! Your solution is looking really good. Nice job on adding the extra breakpoint for an additional version of your layout. 💪🏻

    There usually aren't super easy ways around adding multiple breakpoints and I don't think that's a bad thing.

    You could use some clever wrapping on grid or flexbox to avoid this in some cases. I recently read this clever article which you might find interesting!

    1
  • Gerben Dol• 3,115

    @GerbenDol

    Posted

    Really nice job! Clever way of using order to switch the layout around.

    You could also use flex-direction: row-reverse; to switch it around, which could maybe make your CSS just a little more flexible.

    I think a nice little bonus to the design would be to add some hover effects to all the different elements such as links, social icons and buttons. 👌

    2
  • Gerben Dol• 3,115

    @GerbenDol

    Posted

    Hey! It does work fine on smaller screens, but I think it collapses to a full-width layout too soon. Maybe add a step in between with 2 cards per row? 😁

    1
  • Gerben Dol• 3,115

    @GerbenDol

    Posted

    Hey Eduardo, really nice job! It's looking really good on different kinds of resolutions. 💪🏻

    Maybe add the background color to the body like in the design? And try making the borders on your cards flat on the bottom, instead of curved. They're flat in the design! 😁 (tip: you'll probably have to replace the border with a pseudo-element)

    Thanks for the great solution! 👌

    2
  • Gerben Dol• 3,115

    @GerbenDol

    Posted

    Hey Alan! Your solution is looking really good. Two things I'd improve are:

    • Remove the overflow: hidden on your body. My screen isn't high enough so now I'm missing part of your content.
    • Set a bigger font-size on the input, it's a bit small and hard to read

    Hope to see more of your work soon! 😁

    1