Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
19
Comments
9
Max
@maxkdavis

All comments

  • Holloman777•50
    @Holloman777
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of the positioning and the JavaScript elements that were implemented.

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

    positiong of the Image and the button position for the desktop view.

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

    image Positioning withing the container

    Article preview component

    1
    Max•260
    @maxkdavis
    Posted 7 months ago

    Really nice job completing the design. The layout is responsive and the 'share' button functionality is working properly.

    • Your code is written cleanly
    • Nice use of flexbox and grid to get the layout working properly

    Suggestions for future projects:

    • Looking into CSS BEM naming conventions. This will help create more consistent (and widely adopted) naming conventions for your css classes
  • P
    Arfath•290
    @arfath-ali
    Submitted 9 months ago

    Meet-Landing-Page

    1
    Max•260
    @maxkdavis
    Posted 9 months ago

    Really nice job with this challenge! Looks like you matching the design specs quite closely. A couple minor things I noticed, but some of these are more personal opinions/suggestions...

    1.) Create custom variables not just for the color but typography too. For example, the <h1> element: --heading-line-height: 110%; --h1-font-size: 2.5rem; /40px/ --h1-font-weight: 900;

    2.) Be intentful with how you name your element classes. I highly encourage you to dig into the BEM principle. It's a very common naming convention developers use for classes. For example, instead of naming your first image as '.main_img1' I did 'class="hero__img hero__img--mobile"'.

    Hope this helps! And again, great job!

    Marked as helpful
  • Nazar•140
    @tsiupaknazar
    Submitted 10 months ago

    Testimonials Grid Section

    1
    Max•260
    @maxkdavis
    Posted 10 months ago
    • Amazing responsiveness for desktop, tablet, and mobile screens. Your final output mirrors the design very all. One small feedback is to give the entire grid a bit of breathing room from the viewport... your grid stretches the entirety of the screen, but the design has it centered. I recently found the 'place-content:center' css rule to be quite helpful in these scenarios.
  • P
    JJorgeMS13•440
    @JJorgeMS13
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    me encanto poder ocupar CSS grid, podriá cambiar la forma en que lo hago y encontrar mejores practicas.

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

    el desafio mas grande fue el acomodo de las tarjetas ya que no conozco casi CSS Grid, pero gracias a sus links de la pagina pude entenderlo mucho mejor.

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

    Me encantría recibir feedback en como puedo mejor el acomodo de mis tarjetas con CSS Grid.

    Tarjetas responsivas creadas con Flexbox y CSS grid.

    1
    Max•260
    @maxkdavis
    Posted 11 months ago

    Overall your solution looks good and lines up well with the Design. A couple, minor suggestions:

    • Use Semantic HTML as much as possible. Instead of wrapping the header and description in a <div> element consider using the <header> element. I would also wrap the entire title in an <h1> and use the <span> for the bolded 'powered by technology' line.

    • Overall responsiveness is good! I noticed there was some misalignment in the heading when on a mobile breakpoint. Also, the final, desktop breakpoint doesn't occur until the full desktop breakpoint, which leads to a bit of an awkward layout between 400px and 1400px.

  • Peter Godspower•710
    @TheBeyonder616
    Submitted 12 months ago
    What are you most proud of, and what would you do differently next time?

    getting the right size

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

    getting the right size for the card

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

    Any advice would do

    responsive card created using Flexbox & Grid

    1
    Max•260
    @maxkdavis
    Posted 12 months ago

    Overall, really nice work. I like your use of media queries to incorporate responsiveness in your design. The use of CSS variables is a nice practice too.

    Some minor suggestions to consider:

    • the content container's padding isn't aligned to the design, which is causing your h1 heading to not look like the designs.
    • put all your right-side content into one container so that one padding property will align everything. Notice that your 'perfume' text is a bit left of the heading, and your button element is to the right of the pricing text. Ideally, this should have the same vertical left-side alignment.
    • old price text should be smaller. consider the <small> text.

    Hope these help! Again, nice job!

    Marked as helpful
  • Gabriel.cmd•220
    @gabriel-m-dev
    Submitted about 1 year ago
    What challenges did you encounter, and how did you overcome them?

    many. Especially the tables section. I even left this project unfinished because I couldn't match the boards to the original design. I did my best although I am not satisfied with the final result.

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

    table section

    Recipe page

    2
    Max•260
    @maxkdavis
    Posted about 1 year ago

    Overall, you did an amazing job matching your final solution to the design specs. Could (minor) things I noticed:

    • For the <ul> element, you can adjust the size of the bullet point with the ::marker pseudo-class and 'font-size' property. So you can do something like li::marker { font-size: 12px; }

    • It doesn't appear your project is mobile responsive. You can read more into Media Queries or leverage a CSS Library (i.e., Bootstrap) to add this.

    Nice job and good luck with your continued coding journey!

    Marked as helpful
  • Savannah Acevedo•70
    @savvycolleen
    Submitted about 1 year ago

    Respsonsive Social Links Profile Using CSS Flex, Grid, and BEM

    1
    Max•260
    @maxkdavis
    Posted about 1 year ago

    Webpage looks great! I love your use of CSS Variables to more easily assign color to your elements. It looks like your solution is smaller than the design. I would encourage you to dig into Figma to get a better grasp on the various specs and sizes.

  • tickox•30
    @tickox
    Submitted about 1 year ago

    Blog preview card

    1
    Max•260
    @maxkdavis
    Posted about 1 year ago

    1.) Try to me more meaningful with the elements you're using to describe the content (semantic HTML). Some examples: • Experiment with the <button> element for the 'learning' text. • Be sure to add an alt attribute to your <img> for accessibility • Experiment with the <small> element to denote text of lesser importance (the published date text) • Main header should always be <h1>. Don't think about it as a sizing thing, but rather semantic and displaying to users (and SEO) which text fields are of most importance

    Marked as helpful
  • ankushPana•40
    @ankushPana
    Submitted about 1 year ago

    Making First QR Scanner Webpage Using CSS And HTML

    3
    Max•260
    @maxkdavis
    Posted about 1 year ago

    HTML & CSS

    1. Use the a header element (<h1>) to improve your html semantics.
    2. Size of the component can be changed using the max-width css class. This will help ensure the size of your component matches the design.
    3. Make your code more readable for other users. Removing spacing between lines 35 and 44.
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