Skip to content
OverviewSolutions
8
Comments
8

James Le-Goff

@jameslegoff92Canada310 points

Hi there😁 I'm a frontend developer that balances aesthetics and functionality in everything I code. Here to code. Here to learn. Here to help.

I’m currently learning...

ReactJS, NodeJS, website optimization, data structures and algorithms, frontend testing, and CI/CD.

Latest solutions

View more solutions

Latest comments

  • James Le-Goff•310
    @jameslegoff92

    Hi there Snehamoy Bag

    Absolutely excellent job with this project. The only thing I found that needs to be fixed would be the background image. By default the background image has repeat on and at a certain size it begins to repeat. A quick fix is to add no-repeat to the background-repeat property and to add the value 'cover' to the background-size property.

    But other than that, perfect job. I think you're ready for more challenging projects.

    Happy Coding!

    Marked as helpful
  • James Le-Goff•310
    @jameslegoff92

    Hi there BlunderBarry,

    Good work on this project but there's just a few things I'd like to point out.

    1. At smaller screen sizes the image no longer takes up the entire width of the viewport. This can be fixed by adding a width of 100% to your image element.

    2. The button on smaller screen sizes should be centered. This can be fixed by getting rid of the 80% width value that's is on your form.

    To help you with responsive design I would recommend reading the book "Responsive Web Design" by Ethan Marcotte. Great intro book into responsive web design.

    I'd also challenge you to fix the body element on your project. It currently doesn't cover the entire viewport height and it is ruining your background colour. Good luck!

    Happy Coding!

    Marked as helpful
  • James Le-Goff•310
    @jameslegoff92

    Hi there Shane,

    Good work on this project. I would just like to point out some things about your project.

    1. You should apply the background image and color on the <body> element. If you give a min-height of 100vh to your <body> element you'll have your background image take up the entire viewport. Hence, you won't have any whitespace ruining your design.

    2. At the screen width of 607px the design start's to break.

    I would challenge you to fix these 2 things. It will definitely help you for when you start designing more complex UIs.

    Happy Coding!

    Marked as helpful
  • James Le-Goff•310
    @jameslegoff92

    Hi Deepak,

    Good effort on this project. There a just a few suggestions I'd like to point out.

    1. In between the screen sizes 511px and 950px the design starts to become all mangled.

    2. At really big screen sizes(greater than 1200px), the design becomes stretched and is no longer centered vertically.

    3. The background image doesn't stretch the entire vertical viewport because the <body> element doesn't.

    Responsive design is basically a must for most web applications these days, so I would suggest practicing as much as you can now so that when you build more complex sites/apps you will have built up the necessary knowledge to do so properly. I would challenge you to fix the 3 points I've noted above. It will help be invaluable practice. If you need help, feel free to ask me any questions.

    Happy Coding 😊

    Marked as helpful
  • James Le-Goff•310
    @jameslegoff92

    Hi there Roxanne,

    Excellent work on this project. I would just like to point out a few things.

    1. When the screen size is less than 375px, your image disappears because of the min-width you set for it. This is the piece of code responsible for it: <source media="(min-width: 375px)" srcset="images/hero-mobile.jpg 375w">.

    2. Between the screen sizes 862px and 1049px the design breaks.

    3. At larger screen sizes (greater than 1500px), the text content is no longer vertically centered.

    Responsive design is almost a must in the industry these days, so our designs need to look good on most screen sizes. I challenge you to fix these edge cases. What you'll learn, will become invaluable. Especially, once your start building multi-page websites, with multiple components. If you need help, you can always send me a message😊

    Happy Coding!

    Marked as helpful
  • James Le-Goff•310
    @jameslegoff92

    Hi there Kelebglin,

    I just wanted to say great job on this project! There are just 2 things I want to highlight.

    1. When the screen size is between 511px and 918px, the design gets messed up.

    2. When accessing your design from my phone in landscape mode, the design is broken.

    Hence, my challenge to you is to fix both of these problems.

    Happy Coding!

View more comments