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

All comments

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

    1
    David Turner•4,150
    @brodiewebdtPosted 5 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
  • JacobKnittle•110
    @JacobKnittleSubmitted 6 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
    David Turner•4,150
    @brodiewebdtPosted 5 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
  • Dom Leverment•120
    @DomLevermentSubmitted 5 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
    David Turner•4,150
    @brodiewebdtPosted 5 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 8 months 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

    1
    David Turner•4,150
    @brodiewebdtPosted 5 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 7 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
    David Turner•4,150
    @brodiewebdtPosted 7 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

    Hi, if someone can help and tell me why the pictures does'nt want to show on the @media (min-width: 1024px){} it would be very helpful, thanks

    FAQ AccordionComponent

    2
    David Turner•4,150
    @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
  • Obaida Shurbaji•250
    @obaidash99Submitted over 2 years ago

    I want to know if this is the best practice for writing the code for this project? Or is it a clean code I wrote? The logo picture is not showing on the live demo but is showing on my localhost. Does anyone know why? Making Global components was a lot of fun, if there is a better way to write or think about them, please inform me.

    Responsive Web Design Using Html and CSS only.

    2
    David Turner•4,150
    @brodiewebdtPosted over 2 years ago

    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
    1
  • Obaida Shurbaji•250
    @obaidash99Submitted over 2 years ago

    I want to know if this is the best practice for writing the code for this project? Or is it a clean code I wrote? The logo picture is not showing on the live demo but is showing on my localhost. Does anyone know why? Making Global components was a lot of fun, if there is a better way to write or think about them, please inform me.

    Responsive Web Design Using Html and CSS only.

    2
    David Turner•4,150
    @brodiewebdtPosted over 2 years ago

    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
    1
  • David Turner•4,150
    @brodiewebdtPosted almost 3 years ago

    That didn't take long.

    Marked as helpful
    2
  • Alex•710
    @alexcarmonadevSubmitted almost 3 years ago

    Do you think the code needs any changes? Please let me know so I can keep improving. And if you liked it, you know, give me a lot of love by pressing the like button.

    mobile first

    1
    David Turner•4,150
    @brodiewebdtPosted almost 3 years ago

    The image is showing up for me now.

    0
  • David Turner•4,150
    @brodiewebdtPosted almost 3 years ago

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

    1
  • David Turner•4,150
    @brodiewebdtPosted almost 3 years ago

    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
    1