Submitted over 2 years ago

Huddle Landing Page | Flexbox | Responsive

Nick OD• 270

@NickODxyz

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Huddle landing page with a single introductory section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

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

Community feedback

Account Deleted

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

Nick OD• 270

@NickODxyz

Posted over 2 years ago

@maqsudtolipov thankyou for the advice and link. I will certainly take a look.

bikeinman• 1,080

@BikeInMan

Posted over 2 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 2 years ago

@BikeInMan Hey!

The decision was a tough one yes, but was 100% correct for me. I took my time and made the right choice I believe.

& I've looked at some of your work and it looks great, hence the follow. It is always best to look to those better than you, to learn from ;)

bikeinman• 1,080

@BikeInMan

Posted over 2 years ago

@NickODxyz Thanks for taking time and looking into my work. Appreciate it. I was just having fun, until now. You have raised the bar for me. Good Luck.

Nick OD• 270

@NickODxyz

Posted over 2 years ago

My word, my original question looks a mess.

Apologies all.

Please log in to post a comment

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