Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
30
Comments
82

Lance

@LanceOS1,580 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Link Sharing App


    Lance•1,580
    Submitted 11 months ago

    0 comments
  • Article Preview


    Lance•1,580
    Submitted 12 months ago

    1 comment
  • Tip Calculator

    #react#vite#accessibility

    Lance•1,580
    Submitted 12 months ago

    0 comments
  • Contact Form

    #vite#react

    Lance•1,580
    Submitted 12 months ago

    0 comments
  • Dictionary Web App

    #react#vite#motion

    Lance•1,580
    Submitted 12 months ago

    Feel free to leave anything!


    0 comments
  • Single Price Grid Solution


    Lance•1,580
    Submitted 12 months ago

    0 comments
View more solutions

Latest comments

  • Stephanie Dennehy•220
    @Stephanie-Dennehy
    Submitted 12 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
    @LanceOS
    Posted 12 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
  • Kane•210
    @Kane2881
    Submitted 12 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
    @LanceOS
    Posted 12 months ago

    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
    Submitted 12 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
    @LanceOS
    Posted 12 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!

  • P
    Ronan•310
    @CannyRo
    Submitted 12 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
    @LanceOS
    Posted 12 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
  • P
    wideirp•280
    @wideirp
    Submitted 12 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
    @LanceOS
    Posted 12 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!

  • Dazank•120
    @Dazank
    Submitted 12 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

    #react#vite#tailwind-css
    1
    Lance•1,580
    @LanceOS
    Posted 12 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
View more comments

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

Mentor of the Week - 1st Place

This badge is awarded to the top placed community member on the weekly Wall of Fame.

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

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