Skip to content
OverviewSolutions
11
Comments
150
Gerben Dol
@GerbenDol

All comments

  • Gerben Dolβ€’3,115
    @GerbenDolPosted almost 4 years ago

    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
    @GerbenDolPosted almost 4 years ago

    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
    @hacmaz123456Submitted almost 4 years ago

    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
    @GerbenDolPosted almost 4 years ago

    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-bwSubmitted almost 4 years ago

    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
    @GerbenDolPosted almost 4 years ago

    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
    @NafsukiSubmitted almost 4 years ago

    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
    @GerbenDolPosted almost 4 years ago

    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
    @shivjoshi1996Submitted over 4 years ago

    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
    @GerbenDolPosted over 4 years ago

    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
    @kumarrajiv08Submitted over 4 years ago

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

    HTML and CSS

    2
    Gerben Dolβ€’3,115
    @GerbenDolPosted over 4 years ago

    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
    @eLpupilSubmitted over 4 years ago

    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
    @GerbenDolPosted over 4 years ago

    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
    @GerbenDolPosted over 4 years ago

    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
    @codefather91Submitted over 4 years ago

    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
    @GerbenDolPosted over 4 years ago

    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
    @GerbenDolPosted over 4 years ago

    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