"clipboard landing page" + sass + flexbox + mobile-first + responsive

👋 Hi Anosha Ahmed!

🎉 Congratulations on finishing this challenge! 🙌 Your solution is responsive and pixel-perfect based on the design comparison! 👍Good job!

I have some feedback in this solution:

• Create a custom :focus-visible styling to any interactive elements (button, links, input, textarea). This will make the users can navigate this website using keyboard (Tab) easily.
• In this case, there's no header, so you can put everything inside the main element. Also, the header should not contain hero section, which in this case the section with the class header__section. Also, all the elements should be inside the section tag, since it is the part of that section.

<section class="header__section">
    <div class="header__logo">
      <img src="images/logo.svg" alt="#">
    </div>
      <h1 class="heading--1">A history of everything you copy</h1>
      <p class="desc">
        Clipboard allows you to track and organize everything you
        copy. Instantly access your clipboard on all your devices.
      </p>
     <div class="header__btns btns">
        <a href="#" class="btn--cyan">Download for iOS</a>
        <a href="#" class="btn--blue">Download for Mac</a>
    </div
</section>

• I would recommend every section is wrapped by section tag for better semantic markup. Each section should contain a heading tag (h2).

<section>
<h2 class="heading--2">Keep track of your snippets</h2>
    <p class="desc desc--snippets">
      Clipboard instantly stores any item you copy in the cloud,
      meaning you can access your snippets immediately on all your
      devices. Our Mac and iOS apps will help you organize everything.
    </p>
    ... some code
      <div>
         <h3 class="heading--3">Complete History</h3>
         <p class="desc">Retrieve any snippets from the first moment you started using the app.</p>
        </div>
      </div>
    </div>
</section>

• You can make it(the below code & another part of your code) as an unordered list and wrap each item with li. Also, there's no reason to make the text Quick Search, iCloud Sync, and Complete History as a heading. The below content is too small. You can think of the heading tag as a title on a document file.

  <div class="snippets-container__text">
        <div>
          <h3 class="heading--3">Quick Search</h3>
          <p class="desc">Easily search your snippets by content, category, web address, application, and more.</p>
        </div>

        <div>
          <h3 class="heading--3">iCloud Sync</h3>
          <p class="desc">Instantly saves and syncs snippets across all your devices.</p>
        </div>

        <div>
          <h3 class="heading--3">Complete History</h3>
          <p class="desc">Retrieve any snippets from the first moment you started using the app.</p>
        </div>
      </div>

• The logo image is an important image since it identifies the users what website they are currently at. so you can use the company name which is Clipboard as the alternative text.
• The alternative text for any image should not contain the word, image, logo, etc, since the screen reader will pronounce it as an image and the user will know that it is a logo (the same as we see the image).
• Don't change the html (root) font size. It can serious issue. Read what an accessibility expert has said about it. Since you are using Sass, you can create a rem() function that can automatically convert the px to rem for you.

@function rem($value) {
    @return ($value / 16) * 1rem
}

• How it works:

/* In Sass file (.scss) */
body {
  font-size: rem(16);
}

/* In CSS file */
body {
  font-size: 1rem;
}

That's it! Hopefully, this is helpful!

I really appreciate your interest in every detail while you designing and coding, You gonna be a great one in the near future ☺☺.

Hey mam, I am a big fan of your coding skills and give you a lot of love from India 🇮🇳 . Actually I am a fresher and Firstly , I just see your code and try to do it but I have a question. From where do you get the svg files , images and other things for the code. I will be really very happy if you tell me the way of getting them or if , it's a secret then no problem. Thank you @anoshaahmed

Really nice neat work! I hope to be as good as you someday :')

Good Job on that @Anosha

Good job! Excellent response for any device!

Hi Anosha, you've done a great job at the design. Pixel Perfect. The animations are really smooth 👍

There's just one issue, the buttons are designed with a (link) as the element, which is semantically incorrect as when you click on any of the buttons, notice the url changes to https://anoshaahmed.github.io/fem12-clipboard-landing-page/#. The "#" symbol at the end represents the href of the link element which directs you to another page instead of a button. Here's an article to help you out with the differentiation between these elements: Difference between link and button.

Hope this helps.

Look so clean. But if you are not going to use nesting then won't it feel like using vanilla CSS again?? Nesting makes us write less code which I love.

Hey Anosha,

You've smashed this - really well done!

Welcome to SCSS. Regarding your point about nesting and media queries - this might be worth trying: see my example on line 10 and 97

Hope it helps!

Great work ✨ @anoshaahmed

Your solution is absolutely perfect. I can’t wait to try to solve it , Keep up Anosha Ahmed!

Nice work! 🙌

How do you always fit the solution and the design comparisson?

Nice!

Honestly I have to give it to you, your pixels are just so good 🙌 I couldn't even get the exact background color when am building😔. Best of luck on your journey 😊👍

No doubt @anoshaahmed you have done really great job.

Really Nice Work !