Submitted over 3 years ago

Huddle Landing Page | Flexbox | Responsive

Nick OD•270

@NickODxyz

A solution to the Huddle landing page with a single introductory section challenge

Preview Code

Solution retrospective

Hi all,

Just a couple of questions on this one please. Would be great to hear your feedback.

1 - I played around with min & max for things like font-size and my .logo to make it responsive. Is this a good practice at all? Or should I just hard code the changes in my media queries?

    width: max(120px, 14.71%);
}```

2 - Given that I get the figma drawings, is it best to actually hard code the paddings into my `.wrapper` class the way I do? As I use it to set out where elements start / end. When ever I come to the complete 1440 desktop version, I'm always off and have to play around with them a bit.

I'm juist wondering how the professionals would tackle responsive mobile first workflow knowing the desktop version needs to be a certain size.

Thanks again for all comments.

Nick

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

Account deletedPosted over 3 years ago
Hi there again 👋

Not sure about the first one but I can help with the second question 😉.

As a not really good but a new professional, I use a design system, I leave it down below 👇. Let's say in 1440 I chose 44px font size to my h1 or main heading, and the next comment size 1920 as you know. This is the time when you think I chose 44px on 1440 and what about this bigger one right? I just choose the next value from the design system now it's 52px, in this case, you don't need to worry and play around with different values.

It device-width gets bigger chose next value, it gets smaller the other way
```
## Font sizes
- 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

## Spacing system
- 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
```
I learned it from the best course on udemy about HTML and CSS and highly recommend buying it Link: https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3/. There are more than spacing there colors, fonts, box-shadow, border-radius, systems, images, icons and waaay much more thins to learn from there
Marked as helpful
bikeinman•1,080
@BikeInMan
Posted over 3 years ago
Hi Nick,

You have completed some impressive challenges and far ahead in the game. And for some strange reason you decided to follow me :) I am honored.

Senior Analyst to Frontend ? Must be a difficult decision. But you seem to enjoy this a lot. Somewhat same here.

Good Luck.
Nick OD•270
@NickODxyz
Posted over 3 years ago
My word, my original question looks a mess.

Apologies all.

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