Skip to content
OverviewSolutions
30
Comments
82
Lance
@IzykGit

All comments

  • Stephanie Dennehy•220
    @Stephanie-DennehySubmitted 3 months ago
    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
    @IzykGitPosted 3 months ago

    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
    2
  • Kane•210
    @Kane2881Submitted 3 months ago
    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
    @IzykGitPosted 3 months ago

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

    0
  • Quoc Bao Dinh Le•90
    @junjhon12Submitted 3 months ago
    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
    @IzykGitPosted 3 months ago

    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!

    1
  • Ronan•310
    @CannyRoSubmitted 3 months ago
    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
    @IzykGitPosted 3 months ago

    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
    1
  • wideirp•280
    @wideirpSubmitted 3 months ago
    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
    @IzykGitPosted 3 months ago

    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!

    1
  • Dazank•120
    @DazankSubmitted 3 months ago
    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

    1
    Lance•1,580
    @IzykGitPosted 3 months ago

    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
    1
  • Lance•1,580
    @IzykGitPosted 3 months ago

    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!

    1
  • AKR2803•20
    @AKR2803Submitted 3 months ago
    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
    @IzykGitPosted 3 months ago

    Good job

    I think you did a good job on the CSS

    Keep up the good work!

    0
  • Asmaa Elbahrawi•50
    @asmaaelbahrawi1Submitted 3 months ago
    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

    2
    Lance•1,580
    @IzykGitPosted 3 months ago

    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
    0
  • Lance•1,580
    @IzykGitPosted 3 months ago

    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!

    0
  • Lara Mesa•180
    @Lara-artSubmitted 3 months ago
    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
    @IzykGitPosted 3 months ago

    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!

    0
  • Notobd•120
    @NotobdSubmitted 3 months ago
    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
    @IzykGitPosted 3 months ago

    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
    0