Skip to content
OverviewSolutions
18
Comments
10
P

Natalie Smyth

@nataliesmythJersey City340 points

Full stack web-developer, software engineer, and dancer who is driven by empathy and a desire to leave things better than I found them. Welcome!

Latest solutions

View more solutions

Latest comments

  • P
    Wannika123•930
    @Wannika123
    What are you most proud of, and what would you do differently next time?

    It's satisfying to build this with only CSS, but I don't know if it's simpler with JavaScript.

    CSS-only hamburger menu

    #accessibility
    1
    P
    Natalie Smyth•340
    @nataliesmyth

    Wow, you did an amazing job! I think this is the most precise solution I've seen. The only small adjustment I would make is changing pixels to rems or ems for more flexibility.

  • Thomas•390
    @Fixito
    What specific areas of your project would you like help with?

    How to style radio and checkboxe with SVG?

    Contact form

    #accessibility#react#tailwind-css#typescript
    1
    P
    Natalie Smyth•340
    @nataliesmyth

    Great job! your solution looks exactly like the design we were given, very impressive. The only thing I would fix is the email validation. Your form validates if the email is filled out, regardless of if it's a valid email. You can use regex to check for certain requirements, and use that every time someone enters an email:

    const emailIsValid = email => {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

    something like that. Great job again!

  • Emerson Lima•200
    @poissonfou
    What are you most proud of, and what would you do differently next time?

    I am proud to have not struggled with the challenge and to have been able to do it without any majors issues appearing.

    What challenges did you encounter, and how did you overcome them?

    I didn't encounter any challenges in this project.

    What specific areas of your project would you like help with?

    I don't have any questions or issues that I'd like help with.

    ARIA, Accessibility, BEM

    #accessibility#bem
    1
    P
    Natalie Smyth•340
    @nataliesmyth

    Great job! My only suggestion is to change the background color to make your solution look more similar to the given design :)

  • moses ayodele•150
    @mowzayo
    What are you most proud of, and what would you do differently next time?

    my js , giving background color to html

    What challenges did you encounter, and how did you overcome them?

    when i use media query, my cursor stops working

    What specific areas of your project would you like help with?

    media query area

    css grid

    1
    P
    Natalie Smyth•340
    @nataliesmyth

    Nice job! I have a few suggestions to get your solution as close to the design as possible. First, the background color for the body is set to a different color than the design, which is an easy fix.

    body {
background-color: #e9f5f0; // change this color
}

    Second, if you add border: none; to your button element, the outline will go away.

    I'm not sure what you mean about your media queries, but this is a good project to practice on because there are only two sizes. My advice is to start with the one size, get it looking the way you want at that set size, and then add a media query to adjust the width and whatever else needs to be adjusted. I would start with mobile, and once that's done create a media query for the larger container, like this:

    .container {
code: here;
}

@media (min-width: 500px) {
  .container {
    changes: here;
  }
}

    in the above example, the changes would take place when the screen is larger than 500px. Hope that helps!

  • TomLuizCP•10
    @toniCodingMyBrain
    What are you most proud of, and what would you do differently next time?

    I have many points to improve, especially the begin the project, it's very strange and hard to think in a solution rapdly and efficiently.

    What challenges did you encounter, and how did you overcome them?

    I figured out that gotta to study much more styled components and prop types through it.

    What specific areas of your project would you like help with?

    At this time i need how to start a project, how to define architeturies of archives and other things, and where should i start for in a new project...

    Qr code component, using React and styled-components

    #react#styled-components
    1
    P
    Natalie Smyth•340
    @nataliesmyth

    Great job, your app looks just like the design given.

    I have some suggestions from my own experience learning to program

    1. I highly recommend understanding CSS and vanilla JavaScript before trying to learn frameworks like react. JavaScript frameworks and libraries are built with vanilla JavaScript, and learning react without understanding JavaScript is like building a house with no foundation; the smallest obstacle will make the whole thing fall.
    2. Frameworks like react are unnecessary for projects using HTML and CSS without JavaScript, and implementing react here added a lot of unnecessary code. So for this project, you may be better served to focus on getting comfortable with html and css, then add JavaScript, and then later in your journey add frameworks.

    All the best! Great Work!

    Marked as helpful
  • P
    Achara Chisom Solomon•710
    @AcharaChisomSolomon
    What are you most proud of, and what would you do differently next time?

    Whewww!!! . . . . This looked deceptively simple at first, definitely worthy of being an intermediate ranked project!!!

    getting the strength display was fun and is what I am most proud of.

    What challenges did you encounter, and how did you overcome them?

    A lot like figuring out how copying to the clipboard works, determining the strength of a password using regex and the css tricks involves, and also overriding the default styling for html input elements.

    loads of googling and chatgpt helped.

    What specific areas of your project would you like help with?

    nothing for now!!!

    Any tips to improve is welcome

    Password generator app

    2
    P
    Natalie Smyth•340
    @nataliesmyth

    Great job!

    I just finished this project as well, it was definitely more intricate than it seems on first glance.

    The functionality is great, my only suggestion would be to make the slider thumb in css using the -webkit-slider-thumb and -moz-range-thumb properties, and remove the white border from the strength meter by setting it to transparent.

    Great job!

View more comments