Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
8
Comments
8
James Le-Goff
@jameslegoff92

All comments

  • Snehamoy Bag•600
    @snehamoybag
    Submitted over 2 years ago

    Intro component with sign-up form using HTML, SCSS JS

    #accessibility#vite#sass/scss
    1
    James Le-Goff•310
    @jameslegoff92
    Posted over 2 years ago

    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
  • BlunderBarry•210
    @GGRoy03
    Submitted over 2 years ago

    Coming soon project

    1
    James Le-Goff•310
    @jameslegoff92
    Posted over 2 years ago

    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
  • P
    Shane Pinder•240
    @ShanePinderDev
    Submitted over 2 years ago

    Responsive component signup form using CSS flexbox and JavaScript

    1
    James Le-Goff•310
    @jameslegoff92
    Posted over 2 years ago

    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
  • Deepak•270
    @DEEPAK-tech40
    Submitted over 2 years ago

    Intro component with sign-up form

    1
    James Le-Goff•310
    @jameslegoff92
    Posted over 2 years ago

    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
  • Roxanne•260
    @rox-stahl
    Submitted over 2 years ago

    Base Apparel Coming Soon

    1
    James Le-Goff•310
    @jameslegoff92
    Posted over 2 years ago

    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
  • Kelebglin•70
    @JerryWski
    Submitted over 2 years ago

    CSS flexbox, SCSS, JS

    2
    James Le-Goff•310
    @jameslegoff92
    Posted over 2 years ago

    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!

  • Victor imafidon•590
    @Osauyi
    Submitted over 2 years ago

    sign up form page with css-html&javascript

    1
    James Le-Goff•310
    @jameslegoff92
    Posted over 2 years ago

    Hi there Osauyi,

    Good effort on this project but I noticed a few things. Your project breaks on different screen sizes and the form validation needs to be fixed. I have a few suggestions that I think will make your life a lot easier.

    1. Add the CSS property "box-sizing: border-box" to all html elements by using the '*' selector. This will make sure that your elements respect the size you want them to be, even if you add padding. If you want to learn more about it. https://www.w3schools.com/cssref/css3_pr_box-sizing.php

    2. Get rid of the min-width for your input elements on your form and use width with a percentage value. This will make your input size responsive. You want this because it will allow your input fields to adjust to the appropriate size based on the user's device.

    3. Add a min-width value to your body element. This will make your project look good even on much smaller screen sizes. I usually put a min-width of 365-375px. This is the size I need my project to be in order for the content to still be proportional.

    With a few changes made to your code you could make your project fully responsive. If you can't these tips don't suffice and you need more hints, feel free to respond here and I will help you out.

    Happy Coding!

    Marked as helpful
  • Diegochits•105
    @mrdiegodev
    Submitted over 3 years ago

    Single Price Component

    1
    James Le-Goff•310
    @jameslegoff92
    Posted over 3 years ago

    Hi Diego, Great work on this challenge, you really knocked it out of the ballpark. The only piece of advice I can offer is to use a CSS methodology when creating your stylesheets. In case you don't know, a CSS methodology is simply a set of rules to follow when writing CSS that makes it easier to manage. While for a small project like this it could be considered overkill, getting used to it now will help you later on in your developer journey when you begin being responsible for larger and more complex projects.

    The link below provides a good overview of the different CSS methodologies out there and their benefits. https://www.webfx.com/blog/web-design/css-methodologies/#:~:text=1%20Object-Oriented%20CSS%20%28OOCSS%29%202%20Block%2C%20Element%2C%20Modifier,%28SMACSS%29%204%20SUIT%20CSS.%205%20Systematic%20CSS.%20

    So I challenge you to implement one of them for your next challenge. I personally enjoy the BEM methodology. It's simple and very easy to implement.

    Keep up the good work and happy coding!

    Marked as helpful

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub