Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
38
Comments
373
P

David Turner

@brodiewebdtUnited States4,130 points

I was a Healthcare aide, who also took care of my disabled brother. When my mother got sick, and my father couldn't take care of her I took over. She past away in August and I went from having no time to plenty. I started doing Frontend Mentor and Scrimba too build my skills.

I’m currently learning...

HTML CSS and Javascript.

Latest solutions

  • Meet landing page

    #accessibility

    P
    David Turner•4,130
    Submitted 12 months ago

    If anyone has info on how to get the images to overflow the page, it would be appreciated.


    2 comments
  • Testimonials grid section


    P
    David Turner•4,130
    Submitted 12 months ago

    1 comment
  • Recipe Page


    P
    David Turner•4,130
    Submitted 12 months ago

    0 comments
  • CSS Grid, CSS variables


    P
    David Turner•4,130
    Submitted 12 months ago

    1 comment
  • Product preview card component

    #accessibility

    P
    David Turner•4,130
    Submitted 12 months ago

    1 comment
  • Designo agency multi-page website


    P
    David Turner•4,130
    Submitted about 2 years ago

    0 comments
View more solutions

Latest comments

  • Ralph•190
    @RalphPastel972
    Submitted 12 months ago
    What are you most proud of, and what would you do differently next time?

    Not much. I'm actually disapointed of myself on many aspects. The huge amount of time I needed to realise this design was surprising.

    But I had fun juggling with the various layouts (flex, grid, block) to achieve my goals.

    What challenges did you encounter, and how did you overcome them?
    • I struggled with the 4 images: what is the best layout to use and when.
    • I struggled having the image in the banner overflowing the container without getting scrollbars.
    What specific areas of your project would you like help with?

    n/a

    Responsive Meet landing page

    #accessibility
    1
    P
    David Turner•4,130
    @brodiewebdt
    Posted 12 months ago

    Hi, Ralph. Don't be disappointed in this solution. I think you did a great job. My first try at this took a very long time. I am not seeing any horizontal scrollbars. Did you fix the problem? I struggled to get the images to overflow the page. I will have to check out this solution. Hope this helps. David

  • P
    JacobKnittle•110
    @JacobKnittle
    Submitted 12 months ago
    What are you most proud of, and what would you do differently next time?

    Using grid-template-area for the first time. Not have as much redundant css

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

    had a had time with grid until I used grid-template-area and grid-area together to get the layout

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

    General advice for how to structure a lot of cards that are similar but not exact to save on redundant css.

    Testimonials grid section vanilla css, grid

    1
    P
    David Turner•4,130
    @brodiewebdt
    Posted 12 months ago

    Nice job. A couple of suggestions. You want your main content to be in a Main tag for accessibility. You should also use the blockquote tag for the testimonial quotes. There are several contrast issues with the design. It isn't required to fix them in the challenge, but it will help fix accessibility issues. Get AXE dev tools: AXE dev tools

    Hope this helps David

    Marked as helpful
  • P
    Dom Leverment•120
    @DomLeverment
    Submitted 12 months ago
    What are you most proud of, and what would you do differently next time?

    Finishing. That was hard.

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

    Choosing between grid and flexbox, also getting the cyan and blue cards to move beyond the grid. And then remove it for media queries.

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

    Any ideas to refactor the code so it's cleaner.

    Four card feature solution

    1
    P
    David Turner•4,130
    @brodiewebdt
    Posted 12 months ago

    Nice job. The only thing I would recommend is to soften the shadows on the cards. They look a little dark.

    This is what I used:

    box-shadow: 0px 15px 30px -11px hsla(213, 47%, 67%, 0.5);

    Hope this helps. David

  • Darek•140
    @DarekRepos
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I'm more comfortable using grid and flexbox layouts. I've also adopted the BEM (Block, Element, Modifier) naming convention for SCSS. While I prioritize using modern fonts, I ensure compatibility with older browsers. Matching exact spacing and fonts from design files can be challenging. For future projects, I'll focus on creating adaptive solutions with visually appealing elements. I won't strive for pixel-perfect font replication, as it can be time-consuming.

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

    The challenge was finding the exact padding and fonts used in the design files. I figured it out through experimentation.

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

    At this point i am more comfortable with working in css and html. Do you use the same font sizes and spacings as in the design photos? Do you try to match the exact elements in design files, like font sizes and spacing, or do you use your best judgment to achieve the most accurate representation? Also if you find any mistakes or have suggestions for improvement, please let me know. I will be very grateful.

    Product preview card component

    #accessibility#vite#sass/scss
    1
    P
    David Turner•4,130
    @brodiewebdt
    Posted 12 months ago

    Nice job, Darek. I have started using BEM more and more now. It makes it easier to name classes, and they are more relevant. I try to match the layout as much as possible, but some of the older challenges have spacing that isn't totally accurate. Sometimes I change things and go with what looks good to the eye. Hope this helps. David

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

    I was able to learn basic Git commands and utilize CSS flexbox tools

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

    I had difficulty with centering the element at first, which I resolved by using flexbox

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

    Nothing in particular

    QR code component using HTML and CSS with flexbox

    1
    P
    David Turner•4,130
    @brodiewebdt
    Posted about 1 year ago

    Nice job. Use rem units for the font sizes for accessibility. They will scale if the user changes the font size on their individual computer.

  • AlphaCharlieWeb•90
    @AlphaCharlieFoxtrot
    Submitted almost 2 years ago

    FAQ AccordionComponent

    2
    P
    David Turner•4,130
    @brodiewebdt
    Posted almost 2 years ago

    Just looking at this quickly, the image is set to display: none at 1024px. If you use the Devtools to inspect the page you can turn off that property and the image will show up. You will have to position it as it is not in the right place. Hope this helps. David

    Marked as helpful
View more comments
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

Beta Member

This badge is a shoutout to the early members of our community. They've been around since the early days, putting up with (and reporting!) bugs and adjusting to big UX overhauls!

Mentor of the Week - 3rd Place

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

Fun fact

The Hansen Writing Ball shown in the badge was the first commercially produced typewriter. It was put into production in 1870 with its unique ergonomic design. It was overtaken in the market in 1873 by the Sholes and Glidden typewriter which was the first keyboard to utilise the QWERTY layout we now use today.

Mentor of the Week - 2nd Place

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

Fun fact

Keypunches were used in early computing to punch precise holes in stiff paper card. The punched cards were then used for data input, output, and storage. No code linters or auto-complete suggestions to help out back then! 😅

Mentor of the Month - 3rd Place

This badge is awarded to the 3rd placed community member on the monthly Wall of Fame.

Fun fact

An abacus is an ancient calculating tool. These days we would typically use a calculator or computer but the abacus is where it all started!

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