Design comparison
Solution retrospective
That's my resolution to the Fylo landing page challenge. I had a lot of trouble creating a layout that I liked and that looked like the original. The problems and doubts I faced were diverse, but here are the main ones:
-
How can I avoid aligning items or resizing elements with "magic" pixel numbers?
- There were many parts where I used pixel-size "margin and padding" to make small changes. And that gives me the feeling that the page is not adaptive and only works with specific screen dimensions.
- Would it be better to have created 2 CSS files, one for desktop and one for mobile?
- Because when I made the desktop responsive, I had to override several properties of some elements, something I think could also have been avoided.
- Is it a good idea to create default classes with some properties? Is it a good idea to create standard classes with some properties already built in? Or initialize elements that have identical properties before styling more specific ones? Example:
<section class="flex align-center"> <div>some content...</div> </section>
/* Default classes */ .flex { display: flex; } .align-center { align-items: center; } /* Elements with identical property */ h1, h2, h3, button, input, .testimonial { font-family: "Raleway", sans-serif; }
There are several other issues (I can't remember which ones) that I ran into when building the page, but I've only flagged these 3. If you see something in the code that can be removed or improved, whether it's about semantics or accessibility, be welcome.
Community feedback
- @vanzasetiaPosted over 1 year ago
Hi, Kauã de Souza! 👋
My answers to your questions:
- I was using magic numbers because I wanted to make my solution perfectly match the design. But, as soon as I knew it is impossible to create a pixel-perfect website, I stopped using magic numbers. I recommend reading Chasing the Pixel-Perfect Dream and The Myth of Pixel Perfection.
- You should only have one stylesheet. You can overwrite the styling on the same stylesheet.
- I recommend writing global styling first such as making all elements
box-sizing: border-box
, setting default body font stylings, and other stylings. Then, you can start writing for specific styling using single-class selectors. Only then, if you need default classes or utility classes, then start adding them when you actually using them.
More about utility classes.
You should not start adding them at the beginning of your project because you will have to write a lot of classes on your HTML.
You should think of utility classes as a way to specifically say you want this element to be exactly like this.
For example, if you want to make a particular paragraph to be bigger, then you can have a
font-size-bigger
class to make it bigger:<main> <h1>Hello world!</h1> <p>What a beautiful world</p> <p class="font-size-bigger">I love this world</p> <main>
Do not add
font-size-bigger
to make<h2>
bigger. You should style it withh2
selector. Also, you should not have it to make all<p>
elements bigger. You should specify thefont-size
on thebody
element instead.Sorry for the long answer.
I hope this helps. Happy coding! 👍
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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