Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
14
Comments
5

Devon Hughes

@DevonHughesCodesUSA220 points

I'm working diligently towards becoming a full-stack developer/software engineer. My interests are web and application development.

I’m currently learning...

HTML5, CSS, JavaScript, React, Python, Vue.js

Latest solutions

  • Interactive Rating Page Solution


    Devon Hughes•220
    Submitted 9 months ago

    0 comments
  • Huddle Landing Page Solution w/ Loading Effects


    Devon Hughes•220
    Submitted about 1 year ago

    I am always open to any and all feedback. Thank you!


    1 comment
  • Four Card Feature Section Solution


    Devon Hughes•220
    Submitted over 1 year ago

    0 comments
  • Profile Card Solution


    Devon Hughes•220
    Submitted over 1 year ago

    Any feedback on the background image would be great, I had trouble with positioning when browser window is resized.


    2 comments
  • 3 Column Preview Card Challenge Solution


    Devon Hughes•220
    Submitted over 1 year ago

    I'm always open and receptive to any and all feedback. Thank you!


    0 comments
  • Results Summary Component Challenge Solution


    Devon Hughes•220
    Submitted over 1 year ago

    Any and all feedback is much appreciated. Thank you!


    0 comments
View more solutions

Latest comments

  • Yannisp2000•70
    @Yannisp2000
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    I am proud of my second website i build.

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

    my challange was to lern the difference between block, inline and inline-block elements to get the yellow background around the "Learning".

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

    i need help with my main container. what i need to do that the container orientates on the svg?

    Blog preview card

    1
    Devon Hughes•220
    @DevonHughesCodes
    Posted over 1 year ago

    Hello @Yannisp2000

    Great solution you've got here, well done!

    If you don't mind, I have a few suggestions I'd like to share about semantic HTML for improvement:

    📌 First: Use <main> to wrap the main content instead of <div>.

    Think of <div> and <span> in HTML like plain boxes or placeholders. They're handy for holding content, but they don't tell us anything about what's inside or what it's meant for on the webpage.

    📌 Second: Use <h1> for the main title instead of <h2>.

    Unlike what most people think, it's not just about the size and weight of the text.

    The <h1> to <h6> tags are used to define HTML headings.

    <h1> defines the most important heading. <h6> defines the least important heading.

    Only use one <h1> per page - this should represent the main heading/title for the whole page. And don't skip heading levels - start with <h1>, then use <h2>, and so on. All these tag changes may have little or any visual impact but they make your HTML code more semantic and improve SEO optimization as well as the accessibility of your project.

    📌 Third: There are two active hover effects for the card when the user places their cursor over them. One for the Title of the card and one for the box-shadow. I've provided a snippet from my CSS stylesheet for you to have a look.

    /* Box-shadow hover effect */

    .container { max-width: 400px; margin-inline: auto; background-color: var(--white); padding: 1.5rem; margin-bottom: 2rem; border: 2px solid var(--black); border-radius: 1rem; box-shadow: 10px 10px 0px var(--black); transition: 0.5s; }

    .container:hover { box-shadow: 15px 15px 0px var(--black); }

    /* Title hover effect */

    .container h1 { color: var(--black); font-family: 'Figtree', sans-serif; font-size: 26px; font-weight: 800; margin-bottom: 0.8rem; }

    .container h1:hover { color: var(--yellow); cursor: pointer; }

    All in all your solution looks awesome. I hope this helps. Keep up the great work!

    Marked as helpful
  • EMMANUEL DAMILOLA•170
    @DAEM007
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    I am happy I was able to work with vanilla css again.

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

    Just a little challenge with image fitting properly into containers

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

    How to fit images into containers properly with css

    blog-preview-card

    2
    Devon Hughes•220
    @DevonHughesCodes
    Posted over 1 year ago

    Hello @DAEM007

    Your solution looks really good!

    Just a quick piece of feedback from something I noticed. On the active state of the element with the box-shadow there is a very subtle hover effect that's super easy to overlook in the design previews provided for the challenge.

    Here's a snippet from my stylesheet for reference:

    .container { max-width: 400px; margin-inline: auto; background-color: var(--white); padding: 1.5rem; margin-bottom: 2rem; border: 2px solid var(--black); border-radius: 1rem; box-shadow: 10px 10px 0px var(--black); transition: 0.5s; }

    .container:hover { box-shadow: 15px 15px 0px var(--black); }

    Other than that, great work and Keep it up!

  • Yohannes Merete•340
    @YohannesDream
    Submitted over 1 year ago

    Blog Preview Card

    1
    Devon Hughes•220
    @DevonHughesCodes
    Posted over 1 year ago

    Hello @YohannesDream

    Your solution looks really good!

    Just a quick piece of feedback from something I noticed. On the active state of the element with the box-shadow there is a very subtle hover effect that's super easy to overlook in the design previews provided for the challenge.

    Here's a snippet from my stylesheet for reference:

    .container { max-width: 400px; margin-inline: auto; background-color: var(--white); padding: 1.5rem; margin-bottom: 2rem; border: 2px solid var(--black); border-radius: 1rem; box-shadow: 10px 10px 0px var(--black); transition: 0.5s; }

    .container:hover { box-shadow: 15px 15px 0px var(--black); }

    Other than that, great work and Keep it up!

    Marked as helpful
  • Harsh Kumar Dwivedi•720
    @Harsh-Kumar-Dwivedi
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    I am proud that I was able to build the highly closest design in comparison to the required design. From next time, I would try to complete the project in a significant lesser amount of time without compromising on the quality of the project.

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

    Essentially, I encountered following challenges:-

    1.Responsive paragraph.

    2.Designing the plan portion.

    3.Box-Shadow for the payment button.

    4.Designing the background of the card.

    I tackled these problems calmly by researching out various possible solutions, choosing the better solution, applying the solution, modifying it and then finalizing it. I used following approaches for respective problems:-

    1.Padding helped out in the problem of making the paragraph responsive as per the given design across different devices.

    2.Flexbox and `` element were highly useful, in designing the plan portion.

    3.Setting up the box-shadow CSS property with proper values, helped in giving the payment button a bottom box-shadow.

    4.Pseudo element ::before and position: fixed; were significantly helpful in designing the background.

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

    Would love to know following:-

    1.What better approach could be used for designing the background?

    2.Any suggestions in general or specifically regarding code optimizations, better approaches and production worthy practices.

    Checkout my solution ! Feedbacks are welcome ! Stay Happy & Well ! Happy Coding ! Thanks 😀

    Responsive Order Summary Component Code (HTML + CSS)

    #accessibility
    4
    Devon Hughes•220
    @DevonHughesCodes
    Posted over 1 year ago

    Awesome solution @Harsh-Kumar-Dwivedi

    Looks great. The only thing I noticed from your preview is that the overall container is missing a box shadow like in the design example.

    Here's an example from my own stylesheet for referrence:

    .container { background-color: white; margin: 20px; padding-bottom: 20px; border-radius: 20px; box-shadow: 0px 10px 40px rgba(34, 34, 34, 0.2); }

    Other than that, great job and keep up the good work!

    Marked as helpful
  • keltiek•210
    @keltiek
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    Doesn't look as bad as I thought:)

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

    Don't know enough about CSS/Flexbox and Tailwind

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

    Any suggestions on how I can improve on my solution are welcome. Thank you!

    Blog Preview Card (TailwindCSS)

    #tailwind-css
    1
    Devon Hughes•220
    @DevonHughesCodes
    Posted over 1 year ago

    Hello! @keltiek

    Your solution looks great!

    Just a quick suggestion, I can't see your stylesheet, however, for the active state on the element with the box-shadow there is a very subtle hover effect that's super easy to overlook in the design previews provided.

    Here's a snippet from my stylesheet for reference:

    .container { max-width: 400px; margin-inline: auto; background-color: var(--white); padding: 1.5rem; margin-bottom: 2rem; border: 2px solid var(--black); border-radius: 1rem; box-shadow: 10px 10px 0px var(--black); transition: 0.5s; }

    .container:hover { box-shadow: 15px 15px 0px var(--black); }

    Other than that, great work and Keep it up!

    Marked as helpful
Frontend Mentor logo

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

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