Skip to content
Submitted about 4 years ago

Clipboard Landing Page - HTML/CSS - Flexbox/Grid

Josh Prenticeā€¢235
@jfprentice
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Clipboard landing page
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

Work is definitely slowing my progress with these challenges..

I'm not sure why, but the image-computer.png isn't showing up off the left of the page like it did in the 1440p view in chrome dev tools.

I'm not sure I did the footer correctly - I used space-around but I think there is too much space between the logo and the links. I think I had the most trouble with the footer. I originally used the supplied social media icons in my anchor tags but couldn't figure out how to get the color to change on click - I tried using icon:active{ color: } and icon:active{fill: } - I ended up just going to fontawesome and using their icons instead.

I also see that I have an html issue because <section class="companies"> doesn't have a heading. How would I go about creating a heading for that section, but only for a screen reader? - I added an h2 with an sr-only class with visibilty:hidden, hopefully that fixes it.

Any feedback or tips would be greatly appreciated!

Community feedback

  • Emmilie Estabilloā€¢5,540
    @emestabilloPosted about 4 years ago

    Hey Josh, it's me. Once again šŸ˜„ Congrats on your first landing page! Awesome to see your progress. Here are a few notes:

    • there's a horizontal scroll from small to medium widths due to the margins on .main-images. I would probably play with the widths of the images per breakpoint. Or it might be helpful to look into responsive images to control the stretch and sizing.

    • For the footer: I agree working the svg icons can be tricky, I had a similar question in my last project. What I've gathered is that if I was placing them inside an img tag, as you've done prior to FA, the only thing that worked for me was using filter. Another option would be embedding the svgs inline and changing the fill attribute in CSS.

    For the spacing, you can wrap the logo and link-container into one div and adjust the spacing between them as you wish, separate from the icons. If you don't want to touch html, you can add margin-left: auto to the icons to push them to the right of the page. You would also be adjusting the space between the logo and links.

    • Lastly, I saw a few repeating snippets that can be cleaned up. In the footer for example, display: flex and align-items: center were written for both mobile and desktop. Same with the color for footer-link - it appears 3x on the stylesheet starting with the a tag. Nothing major, I know, but if this was a big site, it would all add up. Best to keep it DRY :-)

    Hope this all helps! See you on your next one lol

    1
    Josh Prenticeā€¢235
    @jfprenticePosted about 4 years ago

    @emestabillo Thanks for checking out my work! Again! haha I always appreciate your feedback! :)

    I'll definitely go back before I start a new challenge and fix those image margins. I don't know why I didn't just put the logo and links in the same div - I'll go back and change that as well. I do really need to work on cleaning up my code as I go, I have a habit of copy and pasting classes into the media queries and forget to delete repeating properties.

    Thanks again!

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord