Skip to content
OverviewSolutions
30
Comments
82
Lance
@LanceOS

All comments

  • Stephanie Dennehy•220
    @Stephanie-Dennehy
    What are you most proud of, and what would you do differently next time?

    I started this challenge a while ago but didn't finish it because I got busy with other things. I am proud that I was able to come back to it and complete it faster than I have with previous challenges. I feel like it's easier for me to jump back into my code and figure out what's going on than it was when I first started.

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

    I think my biggest challenge when I started this project was getting all of the elements lined up correctly within the card.

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

    I don't have any specific areas where I am looking for feedback. Happy for any general comments on how I can improve my code to more closely match the original design concept!

    Order Summary Component

    1
    Lance•1,580
    @LanceOS

    Good work!

    The best way you could improve your code right now is by looking into semantic HTML. You have used divs to wrap everything and using divs is ok for styling however you do not want to use divs on content that needs context.

    Elements like <main>, <section>, and <form> give the browser context on what may be inside of them. Divs however are something call a generaic element and do not do this since they have no semantic value. This can hurt accessibility and SEO.

    Keep up the good work!

    Marked as helpful
  • Kane•210
    @Kane2881
    What challenges did you encounter, and how did you overcome them?

    It's my first time writing Javascript on a project and also, first time using animation.

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

    If you like it or notice something odd, please let me know in the feedback section. Have fun coding!

    Responsive homepage using CSS grid and subgrid

    1
    Lance•1,580
    @LanceOS

    Good work, I didn't notice anything odd but I just want to say that your semantic HTML is amazing!

  • Quoc Bao Dinh Le•160
    @junjhon12
    What are you most proud of, and what would you do differently next time?

    Popup functionality

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

    JavaScript and Media queries

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

    Media queries and how to achieve more with less css

    Responsive article preview using flex

    1
    Lance•1,580
    @LanceOS

    Good work

    If you want to know more about media queries then I highly recommend you check out this video about them.

    One major thing that I recommend you do in your code though is create a separate CSS file and then link it to your HTML document. This is so that way you are not trying to edit your CSS and HTML all on the same page.

    It makes writing CSS easier and makes your HTML page far more manageable!

    Keep up the good work!

  • P
    Ronan•310
    @CannyRo
    What are you most proud of, and what would you do differently next time?

    Even if I didn't learn anything special because I already had the basics for this challenge (Of course, there's always room for improvement) I'm still proud to have completed this challenge, because it's another step towards achieving my goals, and it has an impact on my reward system, my motivation and the positive dynamic I want to maintain.

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

    Getting the effect on the hover to be perfect is the hardest part of this challenge. Unfortunately I haven't found the perfect solution, so I've simply put in a simple hover effect with an ease-out transition and a transition time of 1s. It doesn't look as good, but it's simple and effective.

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

    Specifically... how do you find the perfect transition for the button... it needs to be able to turn green instantly on hover/focus and dissipate more slowly when the hover/focus leaves the button.

    Mobile-first solution using Flexbox and semantic Html

    1
    Lance•1,580
    @LanceOS

    Good job

    Buttons transitions are a little tricky and normally I just set a transition time of 0.2s on all of my buttons. However if you ever want to look at some button examples and check out their code here is a good website that has loads of buttons you can check out.

    Keep up the good work

    Marked as helpful
  • P
    wideirp•280
    @wideirp
    What are you most proud of, and what would you do differently next time?

    I starting learning Web Development 6 years ago but haven't used it much since then. I'm proud of what I remembered!

    What challenges did you encounter, and how did you overcome them?
    • I'm sure I need to work on my Semantic HTML but I tried to incorporate some into this project.
    • I need more practice with margin and padding. I made it work by starting from the outside and working my way down to the inner elements.
    What specific areas of your project would you like help with?
    • I'm interested to know if I used too many HTML elements. I went back and forth on using a as a container for the and `` text tags. I decided it would be easier to use it so I did.

    QR Code Component in HTML & CSS

    1
    Lance•1,580
    @LanceOS

    Good job

    I don't think you used to many text elements, it has good semantic HTML and it is written cleanly.

    Keep up the good work!

  • Dazank•120
    @Dazank
    What are you most proud of, and what would you do differently next time?

    This is my first ever React project. I'm glad I was able to implement the concepts I learned to create something. Next time I will utilize TailwindCSS's mobile first approach which only became clear to me towards the end of this project.

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

    Deploying a React and Vite site was a bit tricky but I read the Vite documentation. Additionally the Tailwind documentation cleared up the concept of responsiveness in Tailwind. I figured out that you can pass hsla as one time values in Tailwind if you use square brackets[ ] and no space in between the characters instead of extending the colors for one time use.

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

    As a pure React beginner, any feedback will be welcome. I don't even know enough to know what I don't know yet.

    Responsive results summary component using Tailwindcss, Vite and React

    #react#vite#tailwind-css
    1
    Lance•1,580
    @LanceOS

    Good job!

    In your code you have wrapped everything in divs, however semantic HTML still applies in react. I used to be guilty of this myself but when making new pages or components I like to try and utilize other semantic tags instead of generic tags like divs. So tags like <main>, <section>, <form>, etc.

    Keep up the good work!

    Marked as helpful
  • Lance•1,580
    @LanceOS

    Good job!

    If you every need help trying to match the measurements I highly recommend you check out the browser extension Pixel Perfect. It allows you to have an overlay of the projects design on your browser to make the styling and proportions easier! I highly recommend it, I use it all the time.

    Click here to check it out

    Keep up the good work!

  • AKR2803•20
    @AKR2803
    What specific areas of your project would you like help with?

    Could you provide feedback on my CSS? Did I overcomplicate it or write more than necessary?

    Recipe Page

    1
    Lance•1,580
    @LanceOS

    Good job

    I think you did a good job on the CSS

    Keep up the good work!

  • Asmaa Elbahrawi•80
    @asmaaelbahrawi1
    What are you most proud of, and what would you do differently next time?

    What I did in this task may be very simple or unprofessional, but I am proud of this result in my first attempt. And for the next step, I have decided to focus on how to make the website more responsive on different devices.

    Simple Social links design using HTML and CSS

    #accessibility
    2
    Lance•1,580
    @LanceOS

    Good work!

    There is nothing wrong with it being simple but these projects do represent real world projects! They are meant to help you learn and get a feeling of what it is like to code. Everyone has to start somewhere and and starting simple is the best way to go!

    Keep up the good work.

    Marked as helpful
  • Lance•1,580
    @LanceOS

    Good job!

    I recommend checking out the browser extension Pixel Perfect. It allows you to have an overlay of the projects design on your browser to make the styling and proportions easier! I highly recommend it, I use it all the time.

    Click here to check it out!

    Keep up the good work!

  • Lara Mesa•250
    @Lara-art
    What are you most proud of, and what would you do differently next time?

    With this exercise, I learned about the grid area and how do it in @media.

    .grid { display: grid; padding: 2rem; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 1.8rem; grid-template-areas: "a a b e" "c d d e"; }

    .item1 { grid-area: a; }

    .item2 { grid-area: b; }

    .item3 { grid-area: c; }

    .item4 { grid-area: d; }

    .item5 { grid-area: e; }

    @media (max-width:1000px) { .grid { grid-template-columns: 1fr; grid-template-rows: auto; gap: 1.8rem; grid-template-areas: "a" "b" "c" "d" "e"; } }

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

    The strangest thing was the image position: absolute and his @media.

    .comillas { width: 115px; z-index: 1; position: absolute; right: 100px; top: 0px; }

    @media (max-width:1000px) { .comillas { width: 115px; right: 30px; } }

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

    Could I have solved it without using grid-template-areas?

    Testimonials-grid-section solution

    1
    Lance•1,580
    @LanceOS

    Good work!

    For this project it is best if you use grid-template-columns because this project's design is structured as a grid. Doing this as a display flex would be very time consuming I image.

    Keep up the good work!

  • Notobd•120
    @Notobd
    What are you most proud of, and what would you do differently next time?

    overall, I am proud of myself for completing this challenge.

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

    I encountered challenges with using the @import method for fonts for my first time and got help from a mentor and friend.

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

    I would like to get feedback on the structure of my html, if it is okay semantically and my entire css.

    Resposive nft preview card using flexbox and media query

    1
    Lance•1,580
    @LanceOS

    Good work!

    Your HTML structure does not use semantic HTML. Semantic HTML utilizes elements such as <main>, <section>, and more. The reason why you want to use these is because they give context to the content they contain. Divs and span do not do this because they have no semantic value. Tags like divs and span should really only be reserved for styling or grouping of content that does not need context.

    In your css it is ok however I noticed that you utilized margin to try and center the card on the screen. An easy way to center the card would be to utilize the body element.

    body: {
 height: 100vh;
 display: flex;
 just-content: center;
 align-items: center;
}

    This should easily put your card in the middle of the screen!

    Keep up with the good work! :)

    Marked as helpful
  • juliet@21•10
    @julietM
    What are you most proud of, and what would you do differently next time?

    All feedback is welcome

    2024-qr

    1
    Lance•1,580
    @LanceOS

    Good work!

    Instead of using margins to move your qr code around you can do this

    body {
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
}

    This will automatically put your qr card in the middle of the screen. As well for the image instead of using margin you can give the qr container a padding. Padding will create even space between its order and the inside content.

    The projects also come with a stylesheet that gives you all the info you need to style the project correctly!

    Keep up the good work!

  • aurelien•130
    @pichade
    What are you most proud of, and what would you do differently next time?

    This challenge was more about speed than technical difficulty. I set a goal to complete it in 20 minutes, and I managed to finish it in around 15 minutes, so I’d say it was a successful challenge!

    Social links card

    2
    Lance•1,580
    @LanceOS

    Now I have the urge to go back and speedrun this project myself.

  • AReactDeveloper•340
    @AReactDeveloper
    What are you most proud of, and what would you do differently next time?

    I FELT CREATIVE SOLVING SOME OF THE PROBLEM I FACED NOT BEST CODE PRACTICES BUT U KNOW IF IT WORKS DONT TOUCH IT

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

    PLEANTY AT THIS POINT I CAN MAKE A 40MIN VIDEO LONG ABOUT IT

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

    IM STILL CLUELESS ABOUT ANIMATION AND OTHER STUFF BUT IM LEARNING AS MAKE THESE

    REACT SCSS game ROCK PAPER SCISSORS SHOOT

    #sass/scss#react
    1
    Lance•1,580
    @LanceOS

    Good work!

    Animation is was definitely one of the things that I spend the longest doing in this project because I did it in vanilla CSS. However I have started to use framer-motion a good bit so if you are looking for a library that has good animations I recommend framer motion!

    Keep up the good work!

  • Lance•1,580
    @LanceOS

    Good work!

    If you are looking for an easy way to change the images color you can use mix-blend-mode. This is the easiest way in my opinion to do this challenge.

    Keep up the good work!

  • Adarsh Gupta•790
    @adarsh78
    What are you most proud of, and what would you do differently next time?

    I have done this project in React. This is my first Form Validation Project in React and this is something I am proud of. Next time I am going to use any Form Validation Library to achieve the same task.

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

    I have encountered challenges like keyboard navigation because of that I came to know about the function of useRef hook. I have read some articles on google to overcome this challenge.

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

    I would like to get help with my logic building and how optimized me code is and where can I improve myself. Any feedback is highly appreciated.

    Contact Form

    1
    Lance•1,580
    @LanceOS

    Good work!

    If you are looking to optimize your code there are a few tricks you can use to do this. It seems that you have a useState that is an object of input fields however you are creating refs and using that on all fields as a way to match them with the input fields. This has caused you to use a lot of if statements to match them.

    In React when you have a state object you can use

    const handleInputChange = (e, key) => {
  setInputStates(prevState => {
    return {
      ...prevState,
      [key]: e.target.value
    };
  });
};

    The prevState is the input field values in the state object and in the return we are copying those previous values while matching the key paramter and assigning it to the event target value.

    This will keep the previous state values while updating the value with the matching key.

    This would allow you to dynamically use the input fields without having to use all those if statements.

    Here is what the input field would look like

    <input
  type="text"
  value={inputStates.username}
  onChange={(e) => handleInputChange(e, 'username')}
/>

    In here we are giving that input field its matching value and then passing 'username' as the key we are going to use to match while also passing the event value (e).

    Hope this helps, keep up the good work!

    Marked as helpful
  • Olena•190
    @helenhapp
    What are you most proud of, and what would you do differently next time?

    I tried my best to make it look good on mobile, desktop, and tablet. Using CSS Grid was fun. I used grid-template-areas and assigned grid-area to each card. I wonder if it was the best practice.

    🌼 Testimonials grid section (HTML, CSS, Grid, Flexbox) 🌼

    2
    Lance•1,580
    @LanceOS

    Good work!

    If you are ever using CSS grid and you need to make it responsive, just switch it to display: flex; flex-direction: column; align-items: center;`. This is what I do because I think it is the easiest method since if they are just going to be in a single column then there is no reason to keep it a grid. Hope this helps.

    Keep up the good work!

    Marked as helpful