Submitted about 2 years ago

Fylo Landing Page Two Columns HTML and CSS

accessibility

Kauã de Souza•260

@SouzaSantosK

A solution to the Fylo landing page with two column layout challenge

Preview Code

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.

Code

Please log in to post a comment

Community feedback

Vanza Setia•27,715
@vanzasetia
Posted about 2 years ago
Hi, Kauã de Souza! 👋

My answers to your questions:
1. 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.
2. You should only have one stylesheet. You can overwrite the styling on the same stylesheet.
3. 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 with h2 selector. Also, you should not have it to make all <p> elements bigger. You should specify the font-size on the body element instead.

Sorry for the long answer.

I hope this helps. Happy coding! 👍
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