David Turner

Latest comments

• 

  Ralph•190

  @RalphPastel972Submitted 10 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

  60
  

  P

  David Turner•4,130

  @brodiewebdtPosted 10 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

  1
• 

  P

  JacobKnittle•110

  @JacobKnittleSubmitted 10 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

  10
  

  P

  David Turner•4,130

  @brodiewebdtPosted 10 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

  0
• 

  P

  Dom Leverment•120

  @DomLevermentSubmitted 10 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

  11
  

  P

  David Turner•4,130

  @brodiewebdtPosted 10 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

  1
• 

  Darek•140

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

  40
  

  P

  David Turner•4,130

  @brodiewebdtPosted 10 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

  1
• 

  zstephenson2•10

  @zstephenson2Submitted 11 months 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

  60
  

  P

  David Turner•4,130

  @brodiewebdtPosted 11 months 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.

  1
• 

  AlphaCharlieWeb•90

  @AlphaCharlieFoxtrotSubmitted over 1 year ago

  

  FAQ AccordionComponent

  2

  20
  

  P

  David Turner•4,130

  @brodiewebdtPosted over 1 year 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

  0