Huddle Landing Page Made with CSS Flexbox, Grid & Mobile First.

👾Hello Johnny, congratulations for your new solution!

I saw the live site and code and have nothing to say, this time you've reached an amazing level of details. Congrats 👊👊

There are two tools that can be cool to apply for your next challenges, one is called css minify that's a extension for VScode that reduces the css code and make file super lightweight, automatically, other is the tool in devtools called lighthouse that gives you a full report saying what you can improve in your solution.

👋 I hope this helps you and happy coding!

Hello Johnny, congratulations on finishing the challenge! your layout looks awesome and it seems that the responsive is doing perfect on resizing!

I would like to give you some little advices that can improve a bit your project:

• Try using some transitions on your buttons!, also on your social media icons, is just a line of code that will improve a lot the user experience of your application, for the 'role-buttons' you could try something like transition: filter 0.5s ease; and for the social media icons you could use transition: color 0.5s ease, adding a cursor: pointer; to this ones will make them better!

• Regarding the structure of your html, I think you should get the header-context (this is what developers usually call the hero) out of the header, and add it as a section of your main, then in the main all those articles could get wrapped around a section tag for a even better semantic html! (good job using the article tag, you don't see it that much here!)

Hope my feedback helps you with this little advices in your future challenges, great job!

Hi Johnny, how are you?

You did a great job on this challenge, but I have a few tips that I think you'll like:

I noticed that the layout is growing a lot and the elements are getting very stretched, to fix this you can use a max-width.

For example.

We will create a div that will contain all the layout content, and in it we will place the max-width and a margin: 0 auto; to center the div. But you may be wondering what about the backgrounds? Well, we put the backgrounds in a div that is the parent of the content div.

for example:

<div class="dad"> we put the image here via the css <div class="content"> <h1>title</h1> </div> </div>

The rest is really good! hope it helps... 👍