Skip to content
OverviewSolutions
38
Comments
373
P
David Turner
@brodiewebdt

All 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
  • P
    David Turner•4,130
    @brodiewebdt

    This is your code for the Social Media links

    <div class="social-media">
	<i class="fab fa-facebook"></i>
	<i class="fab fa-twitter"></i>
	<i class="fab fa-instagram"></i>
</div>

    This is how I coded it:

    <ul class="social">
              <li>
                  <a class="circle" href="#" aria-label="Facebook link">
                      <i class="fab fa-facebook-f"></i>
                  </a>
              </li>
              <li>
                  <a class="circle" href="#" aria-label="Twitter link">
                      <i class="fab fa-twitter"></i>
                  </a>
              </li>
              <li>
                  <a class="circle" href="#" aria-label="Instagram link">
                      <i class="fab fa-instagram"></i>
                  </a>
              </li>
             </ul>

    Hope this helps. David

    Marked as helpful
  • P
    David Turner•4,130
    @brodiewebdt

    Nice job with this. Your logo isn't showing because you forgot to add the dot in front of the path to the images folder. Your other images have it, which is why they are showing up.

    To clear the accessibility issues, wrap all of your main content in a main tag and change the ALL YOUR FILES text to an H1. Every page should have an H1. You can style it however you want it to look. Don't use Headings according to their size. You can always re-style them. You also want to avoid skipping Heading sizes as well. Change your div class of footer to an actual Footer tag since this is a footer. You can leave Headers and Footers out of the Main tag since they have semantic meaning already.

    Add the code aria-label="Facebook link" or whatever describes it to links that only show icons for screen readers. That should clear all of the accessibility warnings.

    Hope this helps. David

    Marked as helpful
  • P
    David Turner•4,130
    @brodiewebdt

    That didn't take long.

    Marked as helpful
  • P
    David Turner•4,130
    @brodiewebdt

    The image is showing up for me now.

  • P
    David Turner•4,130
    @brodiewebdt

    That is how mine looks, and is that way in Figma. The design comparison must be using a different color. Nice job.

  • P
    David Turner•4,130
    @brodiewebdt

    You did a pretty good job on this. The submit button can use some work, they are a little small at some resolutions. The phone and mail Icons are distorted at some resolutions as well. You also want to research form validation as you will need to use it later on.

    Add Fylo to the ALT text on your logo images, and add aria-label="Facebook" etc.. to the A tags surrounding your social media icons. That will clear the accessibility warnings.

    Download AXE DevTools and you can clear accessibility warnings while you code. https://www.deque.com/axe/devtools/

    Hope this helps.

    Marked as helpful
  • P
    David Turner•4,130
    @brodiewebdt

    You did a great job on this. Your code is easy to read, and you did a good job with the comments. The alignment, spacing and hover effects are just like the design. No issues in the report either. Great job.

    Marked as helpful
  • P
    David Turner•4,130
    @brodiewebdt

    The hover effect is working fine for me in your project.

    Wrap your container div in a Main tag and change the attribution div to a Footer. Change the H2 in your code to an H1. Every page should have an H1 for accessibility reasons. Doing these things will clear the accessibility warnings.

    Download AXE DevTools and you can clear accessibility warnings while you code. https://www.deque.com/axe/devtools/

    Hope this helps.

    Marked as helpful
  • P
    David Turner•4,130
    @brodiewebdt

    Nice job. Everything looks like the design. Alignment and spacing are good. Very good.

    Marked as helpful
  • P
    David Turner•4,130
    @brodiewebdt

    You did a great job on this. Looks really good. You want to wrap all of your content in a Main tag. You just have one section named main. Add aria-label="Facebook link" etc.. to the A tag surrounding your font-awesome links. Add Alt text to your two testimonial images. They can stay empty as they are decoration only.

    Download AXE DevTools and you can clear accessibility warnings while you code. https://www.deque.com/axe/devtools/

    Hope this helps.

    Marked as helpful
  • P
    David Turner•4,130
    @brodiewebdt

    Everything on the card looks good. Put the background-color on the body instead of the main tag and will cover the entire view-port. Change your H2 to an H1. Every page should have an H1 for accessibility reasons. Use the same styles that you have on the H2 with the H1 and you won't have to re-style. Change the attribution div to a Footer and it will clear the accessibility warnings.

    Hope this helps.

    Marked as helpful
  • P
    David Turner•4,130
    @brodiewebdt

    Everything looks good on this. Just like the design. Change the Equilibrium text to an H1. Every page should have an H1 for accessibility reasons. You may not have to re-style it because you used a class name. The box shadow is a little heavy. In the Figma file the box shadow is this:

    box-shadow: 0 25px 50px hsla(0, 0%, 0%, .1);

    Hope this helps.

    Marked as helpful