Kevin Powell Part One Responsive Design Reference Notes.
Kevin has a very solid series on YouTube where he walks us through his design and building process when tackling a new project. These notes work best if you have already watched the video and just want some key takeaways to reference later.
All credit to Kevin for showing us how to have fun with CSS
Design Series Part One
The major point of this video is to get and overview of Kevin's thought process and first steps when looking at the design. Its all about getting a grasp of the big picture so you can design a system to make the work easier.
Things to consider at start of project:
- How many fonts and font weights are used?
- What is the primary color palette?
- Gather all of your svg and image files
- Design of Site in rest (Desktop View)
- Design of Site in active: (When you hover over buttons and items)
- Design of Mobile Layout
- Design of Mobile Menu
Set-up Process:
- make folder
- npm create vite@latest
- name project
- vanilla
- follow steps ( change directory, npm install but pause before npm run dev
- remove div app
- remove js file
- clear out information in style.css
- connect style.css to html
- npm run dev
Afterwards you will bring in all assets. Images needed, icons, style guide
Shortcuts
When adding your link to stylesheets in vscode, you can just type in link:css then tab and it will auto complete and connect to your style sheet.
For style sheet, you want to use [[Andy Bells CSS Reset]] page with the included changes from Kevin Powell already included in said link.
When editing multiple of the same name you can use (ctrl+d) to select more of the same name objects, then edit all at once.
When you build for mobile layouts, start with the root for base elements and setting variables for primary and accent colors, fonts to be used and weights.
:root {
}