Skip to content
Submitted about 1 year ago

Responsive Clipboard landing page using CSS Grid and Flexbox

stautuan•160
@stautuan
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?

This is my first landing page. What I would do differently next time is I would start with a plan and set up as this took longer to complete than I expected. For instance, implementing the footer section was particularly challenging as there were many ways to tackle it, and especially deciding on breakpoints and adjustments.

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

Figuring out how to implement the hover color effect on the social links took some creative problem solving. Through this process, I learned about the filter property and used a filter generator to achieve the desired effect.

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

Structure and layout of the sections. Feedback is welcome 😄

Code

Please log in to post a comment

Log in

Community feedback

  • Bernardo Poggioni•6,770
    @R3ygoski

    Hello again @stautuan, and congratulations on the project, it turned out wonderfully perfect, truly, my sincere congratulations.

    A small observation: between 595px and 1120px, the titles in the "snippets" section end up aligning to the left, which is slightly awkward, but this is just a minor detail.

    Regarding your code organization, it is very good, I would say almost impeccable. If you want to improve it even further, you could use Sass and distribute its sections into partial Sass files, so you can organize it better. The idea of using "utils" was very good, and a tip about "utils", in sass you can use mixins for this. Sass - Mixins

    Your HTML organization is very good, the comments help to understand where we are in each section, which is great for maintenance, congratulations.

    I just wanted to give you a tip related to your semantic HTML, it is very good, but there are some parts that can be improved, they are here:

    • In the Hero section, your <section class="hero-section text-center"> can be changed to <header>, because it serves as an introductory section.
    • Below the Download section, your <section class="footer"> can be changed to <footer>, because it is the end of your content, so it is more appropriate to use it.

    Again, congratulations on your project, it turned out very well, really, I really liked it as you could tell 😅. If you have any questions, you know where to ask.

    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