"clipboard landing page" + sass + flexbox + mobile-first + responsive
Solution retrospective
First time using SCSS! I love it! It's so convenient!
One thing I wish I had done differently is not nesting. I don't know why I was nesting at first... maybe because I was using SCSS for the first time?and it felt cool? But when it came to do media queries, it was so inconvenient to deal with specification etc. I'm gonna make sure not to do that again if I don't need to.
One problem I kept having, with this solution, was that every time I would save, and my live server would reload, the font-size of random paragraphs would appear larger than before I saved last time. And it was weird because I didn't even touch the font-size of those paragraphs. So, I would stop the live-server and open it again, and the font-size would be back to normal. Then I'd save again, and the font-size would appear larger. Ugh, it was such a hassle.
But yay I'm happy with the result!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @vanzasetia
👋 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-visiblestyling 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 themainelement. Also, theheadershould not contain hero section, which in this case thesectionwith the classheader__section. Also, all the elements should be inside thesectiontag, 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
sectiontag for better semantic markup. Eachsectionshould 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 textQuick Search,iCloud Sync, andComplete Historyas 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 arem()function that can automatically convert thepxtoremfor 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 - Create a custom
- 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 - @rohitkuderiya
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 - @elroytoscano
Hi Anosha, you've done a great job at the design. Pixel Perfect. The animations are really smooth 👍
There's just one issue, the
buttonsare designed witha(link) as the element, which is semantically incorrect as when you click on any of thebuttons, notice theurlchanges tohttps://anoshaahmed.github.io/fem12-clipboard-landing-page/#. The "#" symbol at the end represents thehrefof thelinkelement which directs you to another page instead of abutton. 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 - @rk-codeflow
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 - @darryncodes
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 - @PhoenixDev22
Your solution is absolutely perfect. I can’t wait to try to solve it , Keep up Anosha Ahmed!
Marked as helpful - Account deleted
How do you always fit the solution and the design comparisson?
Nice!
Marked as helpful - @therealmaduanusi
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 - @codewithneeraj
No doubt @anoshaahmed you have done really great 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