OK, you’ve decided. Gonna make a website to showoff your skills; like Skills Trail at White Clay. Start put’n some skill in there and meander around with content and ideas to differentiate, only to find out months-in that you’re on the 2027 release plan. Time to get your saw and cut that site down; build a tiny home with the lumber. Find out that’s a pretty good idea ‘cause cuz’s old busted website was like, “Hey 1999, I’m fly!” Progressive design; mobile first; these the modern equivalent to DSL. Luckily the geniuses in charge of CSS have you covered with flex box and grid, min-width and max, the odd media query making sure content stacks. So dive into the deep end with me...ok it’s probably the shallow end, so don’t dive in or you’ll end up in the hospital, hopefully only with “recoverable quadriplegia”.

First, just take a look around on the www for other sites to steal...I mean, OK steal from, who cares, it’s the www. Get some inspiration with a dose of what everybody’s love’n on these days - the “EverScroll” - that’s where a site just keeps on scroll’n. Don’t fight it;’ acquiesce and join the scroll’n fun.

Next, decide your site is just going to be static pages. I actually did not do this, choosing some node js with Express and Handle Bars templating, but turns out I didn’t need that stuff and hosting a static site (plain HTML and CSS and some java script if needed), is free/costs next to nothing. So I got rid of the fancy node stuff and went with the following folder structure:

public/index.html public/prj_emulate.html public/prj_cactus.html public/css/styles.css public/css/projects.css public/img/(all the site images)

This structure makes deploying on a hosing provider like Netlify easy - you just drag and drop the “public” folder and Netlify figures out that index.html is your site’s starting point.

Now I know the title says CSS, so what to do first? Choose a color scheme. You can go get a graduate degree in Color Systems, but I just went here: paletton.com

This joint’s got a color wheel. And above the wheel are selectors that let you choose monochrome, adjacent, triad, tetrad or freewheel’n. Now I did seven minutes of color theory research, so I’m thinking of calling up Cornell for that honorary Masters Degree, because I know there’s also Complimentary - that’s where you go 180 degrees across the wheel for your second color. You can choose one of these modes, say adjacent, and move the dots around the wheel until you see some colors you like. You can then move the dots on the inside circle to lighten or darken the colors, ending up with a color pallet next to the wheel that you can click on to get the color codes. Typically, you want at least one primary, or background color and a secondary, or foreground color. I chose white for the top of the site, then two “adjacent” colors for the rest.

Next, you gotta use hsl colors dog! Binary got us to the moon. Hex built the internet, but now it’s all HSL (Hue, Saturation, Lightness) - at least that’s what I decided to use after watching this on YouTube. Freaky. Anyway, so go here colordesigner.io and convert if you wanna be in the cool crowd.

Great, now you have some colors, it’s time for root. Make a styles.css file and make a “root:” block like so:

:root {   --clr-background: hsl(0, 0%, 98%);   --clr-header: hsla(0 0% 98% / 90%);   --clr-primary: hsl(180, 33%, 37%);   --clr-primary-hover: hsl(210, 70%, 40%);   --clr-secondary: hsl(180, 20%, 50%);   --clr-secondary-hover: hsl(45, 85%, 45%);   --clr-triad-primary: hsl(89.7, 42.6%, 56.3%);   --clr-triad-secondary: hsl(90, 71.64%, 26.27%);   --clr-accent: hsl(340, 80%, 60%);   --clr-accent-hover: hsl(340, 80%, 50%);   --clr-neutral: hsl(0, 0%, 90%);   --clr-neutral-hover: hsl(0, 0%, 80%);   --clr-text-primary: hsl(0, 0%, 10%);   --clr-text-secondary: hsl(0, 0%, 40%);   --clr-text-compliment: hsl(0, 0%, 100%);   --fs-300: 1rem;   --fs-400: 1.25rem;   --fs-500: 1.5rem;   --fs-600: 1.57rem;   --fs-700: 2rem;   --fs-800: 2.5rem;   --fs-900: 3rem;   --std-left-margin: 2rem;   --std-max-width: 70%; }

You can reference these variables in you CSS using var(--clr-triad-primary) for example. Also I called that a triad color when its probably adjacent. Guess Cornell’s gonna come knocking for my diploma back.

Font sizes can also go into the root to help ensure consistency throughout the site. Really, any CSS value that you find yourself typing over and over becomes fodder for the root. You can also override the root to change colors if the user set’s their browser to dark mode using a media query as such:

@media (prefers-color-scheme: dark) { :root {     --clr-background: hsl(0, 36%, 4%);     --clr-header: hsla(0 36% 4% / 90%);     --clr-primary: hsl(203.3, 75%, 4.7%);     --clr-primary-hover: hsl(210, 70%, 40%);     --clr-secondary: hsl(202.8, 96.1%, 10.2%);     --clr-secondary-hover: hsl(45, 85%, 45%);     --clr-triad-primary: hsl(80, 60%, 4.9%);     --clr-triad-secondary: hsl(78.95, 30.16%, 12.35%);     --clr-accent: hsl(340, 80%, 60%);     --clr-accent-hover: hsl(340, 80%, 50%);     --clr-neutral: hsl(0, 0%, 90%);     --clr-neutral-hover: hsl(0, 0%, 80%);     --clr-text-primary: hsl(0, 0%, 100%);     --clr-text-secondary: hsl(0, 0%, 40%);     --clr-text-compliment: hsl(0, 0%, 100%);     } }

Finally, I looked up a standard somewhere and not sure I found a definitive one, but naming your CSS variables, classes and such using dashes for separators is a thing.

Next up: The Header