These notes are for Kevin Powell’s video series titled Build a responsive website with HTML & CSS.
The GitHub repo for this video is located here.
Introduction
Typically, a design team will give the front end dev team design files that shows a mock up of the site for various device form factors. The design files will inform the developers about the layout, spacing, color scheme, and fonts.
This video walks us through creating a style.css file for a prototype website illustrated in a Figma file. Kevin’s finsiehd style.css file can be viewed here.
Start a project
Launch VSC and open the terminal (ctrl + `). In the terminal change the working directory to where you want to put the source code files for your project.
Next, run the following commend to create a new Vite project.
$ npm create vite@latest
Enter the responses in parenthesis at the prompts: project name (responsive), framework (vanilla), variant (vanilla). Then press enter.
Now change the working directory to the new project directory (responsive) and install the modules and scripts for the project.
$ cd responsive $ npm install
Vite creates a bunch of files for us. Let’s strip out the contents of the web page source code files.
- In index.html remove the
<div id="app"></div>and add a <link> element to load style.css. - In main.js remove all the contents
- In style.css remove all the contents
In terminal, run the following commend to start a local web server.
$npm run dev
Hover over localhost and click on the link that is displayed. A browser will load the web app.
Create a Reset File
Copy the contents of Andy Bell’s reset file and paste into style.css.
The reset file has comments to delineate sections. Make the following changes to the following sections
/* Remove default margin */
Replace all of the rules in this section with the following:
[code language=”css”]
* {
margin: 0;
padding: 0;
font: inherit;
}
[/code]
/* Set core root defaults */
Add the following:
[code language=”css”]
html, body {
height: 100%;
}
[/code]
/* Set core body defaults */
Remove min-height from the body selector.
Add svg selector to existing img, picture rule:
[code language=”css”]
img,
picture,
svg {
max-width: 100%;
display: block;
}
[/code]
/* Inherit fonts for inputs and buttons */
Remove this section in its entirety.
Add Custom Variables
Scroll up to the top of the style.css file and create a root rule with the following variables to define the colors used on the site.
[code language=”css”]
:root {
–clr-accent-100: hsl(13, 100%, 96%);
–clr-accent-300: hsl(12, 88%, 75%);
–clr-accent-400: hsl(12, 88%, 59%);
–clr-accent-500: hsl(12, 60%, 45%);
–clr-primary-400: hsl(228, 39%, 23%);
–clr-neutral-100: hsl(0, 0% 100%);
–clr-neutral-900: hsl(232, 12%, 13%);
}
[/code]
If the design uses Google fonts, go to google fonts and grab the link for the code and add it to index.html.
Then in the root selector in style.css add a variable for the font family and add variables for font weights, font sizes, and some variables for utility classes.
[code language=”css”]
:root {
…
–ff-primary: 'Be Vietnam Pro', sans-serif;
–ff-body: var(–ff-primary);
–ff-heading: var(–ff-primary);
–fw-regular: 400;
–fw-semi-bold: 500;
–fw-bold: 700;
–fs-300: 0.8125rem;
–fs-400: 0.875rem;
–fs-500: 0.9375rem;
–fs-600: 1rem;
–fs-700: 1.875rem;
–fs-800: 2.5rem;
–fs-900: 3.5rem;
/* For padding */
–size-100: 0.25rem;
–size-200: 0.5rem;
–size-300: 0.75;
–size-400: 1rem;
–size-500: 1.5rem;
–size-600: 2rem;
–size-700: 3rem;
–size-800: 4rem;
–size-800: 5rem;
/* Default values for font size variables */
–fs-body: var(–fs-400);
–fs-primary-heading: var(–fs-800);
–fs-secondary-heading: var(–fs-700);
–fs-nav: var(–fs-500);
–fs-button: var(–fs-300);
}
/* Modify font size variables for larger screens */
@media (min-width: 50em) {
:root{
–fs-body: var(–fs-500);
–fs-primary-heading: var(–fs-900);
–fs-secondary-heading: var(–fs-800);
–fs-nav: var(–fs-300);
}
}
[/code]
Add Utility Classes
Now below the reset rules in style.css, let’s add some utility classes.
[code language=”css”]
.text-primary-400 { color: var(–clr-primary-400); }
.text-accent-100 { color: var(–clr-accent-100); }
.text-accent-400 { color: var(–clr-accent-400); }
.text-neutral-100 { color: var(–clr-neutral-100); }
.text-neutral-900 { color: var(–clr-neutral-900); }
.bg-primary-400 { background-color: var(–clr-primary-400); }
.bg-accent-100 { background-color: var(–clr-accent-100); }
.bg-accent-400 { background-color: var(–clr-accent-400); }
.bg-neutral-100 { background-color: var(–clr-neutral-100); }
.bg-neutral-900 { background-color: var(–clr-neutral-900); }
.fw-regular { font-weight: var(–fw-regular); }
.fw-semi-bold { font-weight: var(–fw-semi-bold); }
.fw-bold { font-weight: var(–fw-bold); }
.fs-primary-heading {
font-size: var(–fs-primary-heading);
line-height: 1.1;
}
.fs-secondary-heading {
font-size: var(–fs-secondary-heading);
line-height: 1.2;
}
.fs-300 { font-size: var(–fs-300) }
.fs-400 { font-size: var(–fs-400) }
.fs-500 { font-size: var(–fs-500) }
.fs-600 { font-size: var(–fs-600) }
[/code]