Learn to build responsive website from Kevin Powell!

#webdev #beginners #tutorial #css

@kevinpowell Youtube Tutorial - Build a responsive website with HTML & CSS
Frontend Mentor Landing Page

Had been go thru Scrimba's The Frontend Developer Career Path Module 5 solo project to build responsive website but understand of theory only is not enough! So i found Kevin video and it is good!

I am halfway of this tutorial but I just want to share a few thing that put a lightbulb above my head.

:root{
 --color-setup
 --font-family-setup
 --font-weight-setup
 --font-size-setup
}

/* CSS RESET */

/* General styling */

/* Button */

/* Navigation */

/* Utility classes */
}

First is the setup of the CSS file. Setting of the initial setup is something I learn and I think it make life easier! Setup the root and then link to utility classes. So we can add the class on element when working on html to match the design.

Then the use of @media (max-width: 50em) for small screen size design. Focus to work on mobile design first, afterward only shift to desktop version.

On Javascript, use .setAttribute() and .toggleAttribute() method to add data-* attribute on element for CSS design such as click on the hamburger icon and popup of the navigation menu.

The tutorial show how Kevin's planning and process to build up the website. It is something I think I need to learn more from expert.

Thanks for your time to finish read about my post. Feel free to share your idea and thought! 😸

let life = {
  first: 'eat',
  second: 'sleep',
  third: 'code',
  forth: 'repeat',
};

const {first, second, third, forth} = life

function capital(word) {
  return word[0].toUpperCase() + word.slice(1)
}

console.log(`${capital(first)}, ${capital(second)}, ${capital(third)}, ${capital(forth)}!`);