Skip to content
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

View more solutions

Latest comments

  • Ralph•190
    @RalphPastel972
    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

    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
    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

    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
    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

    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
    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

    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
    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

    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.

  • P
    David Turner•4,130
    @brodiewebdt

    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