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

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  👋 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!

  Marked as helpful

  2

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @vanzasetia Wow, thank you for teaching me new things, Vanza!!!!!!!!! Some of your points are going straight into my notes. I appreciate you so much!

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  @anoshaahmed You're welcome! Glad to know that it is helpful!

  1

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  @anoshaahmed I have one suggestion that I forget to mention earlier, you don't need to push the node_modules folder to the GitHub repo.

  I would recommend creating and pushing the .gitignore file so that if you or somebody else want to work with it, they don't need to worry about unwanted file like (.DS_Store) or folder getting pushed to the GitHub repo.

  Marked as helpful

  1

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @vanzasetia I ACTUALLY NEEDED TO KNOW THAT LOL. i googled it but i still didn't know for sure so thank u for letting me know.

  One question though: Would my Git Page keep working?

  2

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  @anoshaahmed Yes, the GitHub page is fine without the node_modules folder.

  Marked as helpful

  1
• Account deleted

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

  Marked as helpful

  2

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @MoBlack24 Thanks Mo :))))

  0
• 

  Rohit singh•40

  @rohitkuderiyaPosted over 2 years ago

  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

  Marked as helpful

  1

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted over 2 years ago

  @rohitkuderiya when you start a challenge, you should have the option to "download starter." frontend mentor provides the images. here's the link to the challenges. good luck :)

  0
• 

  xZAYEDx•250

  @xZAYEDxPosted almost 3 years ago

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

  Marked as helpful

  1

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @xZAYEDx you're better than me. i just spend a lot of time trying to get the right measurements

  0
• 

  Mays•170

  @MaysMajeedPosted almost 3 years ago

  Good Job on that @Anosha

  Marked as helpful

  1

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @MaysMajeed thank u :))

  0
• 

  Nikola Maricic•200

  @dzoni19Posted almost 3 years ago

  Good job! Excellent response for any device!

  Marked as helpful

  1

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @dzoni19 thanks Nikola :))))

  0
• 

  Cameron Chandler•850

  @webstormcamPosted almost 3 years ago

  This comment was deleted almost 3 years ago

  1

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @webstormcam thank you Cameron! :))

  0
• 

  Elroy Toscano•630

  @elroytoscanoPosted almost 3 years ago

  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.

  Marked as helpful

  1

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @elroytoscano Yeah I know, I did that on purpose. Clicking those links takes you to /# because there's nowhere to go, as this is a demo landing page.

  However, if this was a real landing page, it would take the user to another page, that's why I chose to use <a>.

  Although, I always appreciate your input, Elroy, thank you.

  1
• 

  Raj Kiran Chaudhary•100

  @rk-codeflowPosted almost 3 years ago

  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.

  Marked as helpful

  1

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @rk-codeflow i know right! and thnks! :)

  1
• 

  darryncodes•6,390

  @darryncodesPosted almost 3 years ago

  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!

  Marked as helpful

  1

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @darryncodes Damn this is some advanced sh*t lol. It does help!! Thanks Darryn :D

  0
• 

  Akash Siddamshetty•190

  @akashsiddamshettyPosted almost 3 years ago

  Great work ✨ @anoshaahmed

  Marked as helpful

  1

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @akashsiddamshetty thanks Akash! :))

  0
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

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

  Marked as helpful

  1

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @PhoenixDev22 Thank you !!! Good luck 💟

  0
• 

  Dani Feelshot•370

  @FeelshotPosted almost 3 years ago

  Nice work! 🙌

  Marked as helpful

  1

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @Feelshot thank u Dani 😊

  0
• Account deleted

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

  Nice!

  Marked as helpful

  1

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @Daviddp96 By spending a lot of time getting headaches LOL

  0

  Account deleted

  @anoshaahmed Yeah but what are you comparing against? The design has a certain far away perspective

  0

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @Daviddp96 link

  0

  Account deleted

  @anoshaahmed ._.

  Marked as helpful

  1
• 

  Victor•510

  @therealmaduanusiPosted almost 3 years ago

  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 😊👍

  Marked as helpful

  1

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @therealmaduanusi thank u so much :) this solution took a while to be pixel perfect

  0
• 

  Neeraj Chauhan•40

  @codewithneerajPosted almost 3 years ago

  No doubt @anoshaahmed you have done really great job.

  Marked as helpful

  1

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @codewithneeraj thank u Neeraj!

  0
• 

  Aakash Verma•6,710

  @skyv26Posted almost 3 years ago

  Really Nice Work !

  Marked as helpful

  1

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @skyv26 thanks Aakash!!

  1