Skip to content
Submitted about 2 months ago

Clipboard landing page - Using Responsive HTML , CSS, and a little JS

Nathan Ray•400
@NathanRayM
A solution to the Clipboard landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I wanted to challenge myself and take on a little of a larger project like this landing page. I'm glad I did. I'm proud I was able to work through the quirks of building the page. I did also add a bit extra to the logo, the buttons, and the footer links 😁

Overall, this was really fun to build.

What challenges did you encounter, and how did you overcome them?

There were many challenges throughout the project. Getting close to the design without an actual figma file is a challenge within itself. I was able overcome the majority of challenges by referencing w3 schools, and the MDN.

What specific areas of your project would you like help with?

I'm looking to improve overall but for this would appreciate any feedback on the semantics, and how I can more efficiently write my code including the CSS.

Code

Please log in to post a comment

Log in

Community feedback

  • Chamu•13,860
    @ChamuMutezva

    Well done with your project, here are a few items that you can have a look at:

    • the logo <img class="logo-img" id="logoFly" src="images/logo.svg" alt="" /> is an important element of the page and is usually a link for the homepage. That is the logo will have an anchor element as the parent.
    • alt values for images can be empty for decorative images (alt=" ") or in other cases should be a summary of the image. What is the message being potrayed by the image. Words like image, picture , logo etc should not be part of the alt value.
    • most recommendations these days favours to style mobile first rather than desktop. So your initials styles will be for small devices and then add media queries when appropriate using min-width instead of max-width.
    • the display for small devices looks good up until it hits 400px, from there the site breaks until it reaches about 760px. You will need another media query for this layout to look better on medium devices
    Marked as helpful
  • P
    Nick J•90
    @troy71

    I really like how you managed to get the logo to float into the page when loaded, and the wiggle on the buttons, just amazing.

    Well done, fantastic job!

    Marked as helpful

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