The Katrina Guide

Let's look at some basic web design concepts :)

Index

Whoops, index could not be generated... :) Just read everything, I guess

Changelog

22-02-2023
Added #general
Reordered sections, updated styling

21-02-2023
Added #index, #changelog
Added #cascading-benefits
Minor tweaks in various places
Published as Open Source

Wait, before we begin

If you want to play around with the styles in some of the sections, just right-click on it and choose Inspect. Then just enable/disable styles at your leisure.

General web dev stuff

Most HTML tags need to be opened and closed.

<section></section>
<main></main>
<header></header>

Know that all these tags above and more are just divs with a fancy name. They do have significance, especially for accessibility, but treat them as divs.

A notable exception to this are images: <img src="..." />

This is how to break a line

<br/>

Actually, nowadays you can also just do this:

<br>

Now this is what I call white space...

Do you know about "cascading"?

Hint: it's literally the C in CSS.

Cascading

// HTML
<div class="make-it-blue" id="make-it-red"></div>

/* CSS */
div { background-color: black }
/* Now the div is black */

div.make-it-blue { background-color: blue }
/* Now the div is blue */

div.make-it-blue.make-it-blue { background-color: green }
/* Now the div is green...... wut */

div.make-it-blue { background-color: blue }
/* Still green. The order doesn't matter, */
/* that weird double make-it-blue still has priority */

div#make-it-red { background-color: red }
/* The div is now red because id is more important than class */

div { background-color: pink !important }
/* Heck yeah, pink! */
/* Seriously though, use "!important" only as a last resort... */
/* Normally, there are much better solutions! */

Try it out below with inspect!

What are the benefits of cascading?

Say, you have 5 divs.

<div class="abstract">Abstract</div>
<div class="introduction">Introduction</div>
<div class="methods">Methods</div>
<div class="results">Results</div>
<div class="discussion">Discussion</div>

They all need to be styled identically except for one. How to approach this situation?

One could style each element:

div.abstract {
    width: 100%;
    color: white;
    background-color: black;
    border-radius: 8px;
}
div.introduction {
    width: 100%;
    background-color: grey;
    border-radius: 8px;
}
div.methods {
    width: 100%;
    background-color: grey;
    border-radius: 8px;
}
div.results {
    width: 100%;
    background-color: grey;
    border-radius: 8px;
}
div.discussion {
    width: 100%;
    background-color: grey;
    border-radius: 8px;
}

This is so verbose! What if you want to change the background? And what if you need a new div? So much work!

There is a better way: cascading!

Clever use of cascading:

/* Give every div the same styles */
div {
    width: 100%;
    background-color: grey;
    border-radius: 8px;
}
/* Overrule some styles on a specific div */
div.abstract {
    color: white;
    background-color: black;
}

This has so many benefits:

• New background? Only one CSS change
• New div? No CSS changes needed!
• 'div.abstract' also gets the 'div' styles!

Yes, we did give the 'div.abstract' a grey background. But then, thanks to cascading, we overruled the background-color to black and gave it an extra color! But it will also have a border-radius of 8px and 100% width. This results in much cleaner code that is easier to write and maintain.

How to make the sections full-screen?

// HTML
<main>
    <section></section>
    <section></section>
    ...
</main>

/* CSS */
section {
    min-height: 100vh;
}

Wow, much simple :)

Notice the min-height and not height! I don't want to force a specific height, if a section needs more space, it should just take it.

Now, let's center everything inside a section with flexbox

section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

Flexbox can do much more neat tricks, but for now, this is good.

Don't forget to change the direction of flex to column, else every element (here, h2 and p) will just be put side by side.

My mnemonic is: "aic jcc". If you type these in VSCode/VSCodium, autocomplete will give you the right code!

Source: Flexbox [MDN], Complete guide to Flexbox [css-tricks]

How to make the alternating background color?

section:nth-child(2n) {
    background-color: #ccc;
}
/* or */
section:nth-child(even) {
    background-color: #ccc;
}

Source: :nth-child() [MDN]

Noticed the links at the top-left of each page?

Looked at the code and couldn't find them? =P

Have a look at the very bottom of the HTML page!

Hint: it's done automagically with javascript

Let's apply some of this to make your figma dreams come true

The invitation to scroll

This is a neat design trick I appreciated from your figma file!
It's not always simple with full-screen pages to make the user understand they can scroll.

section {
    position: relative; /* This is important or else the "position: absolute" below won't work properly! */
}
.invitation-to-scroll {
    position: absolute; /* Make it fly */
    left: 0; /* Make it move to the left of the section */
    bottom: 0; /* Make it move to the bottom of the section */
    width: 100%; /* Make it the same width as the section */
    z-index: 100; /* Make it appear above everything else */
    text-align: center; /* Make the text centered */
    font-size: 2rem; /* Make it big */
    transform: translateY(40%); /* Make it visually pleasing */
}

Pretty cool!

Let's do that again, with a background-color to make it easier to understand!

Neat

Next, your... Well, whatever you want to call this:

That's done like this:

<section>
    <div class="showcase">
        <img src="..." />
        <p>...</p>
    </div>
    <div class="showcase">
        <p>...</p>
        <img src="..." />
    </div>
    <div class="showcase">
        <img src="..." />
        <p>...</p>
    </div>
</section>

.showcase {
    display: flex; /* Turns on flexbox for this div */
    gap: 16px; /* Creates a nice little gap between image and text */
    /* Note I did not change the flex-direction! Now I actually want stuff to sit next to each other */
}
.showcase p {
    flex: 1; /* Lets the paragraph take as much space as it can get! */
}
.showcase img { /* This is not the code I actually use because I didn't use an image, but this is probably what you will want*/
    width: 40%; /* Does exactly what you think it does */
    height: auto; /* Prevents distortion of the image */
}

Well, that's one way... I'm sure you can find others!

Now, for bonus points, let's make things pretty on phones.

Giving something a hard-coded width

p {
    width: 640px;
    padding: 8px;
}

Yeah, on phone, that text is gooooooone

Giving something a flexible width

p {
    width: 100%;
    padding: 8px;
}

Yayyy

Make something appear in top right corner

div {
    position: absolute;
    width: 64px;
    height: 64px;
    top: 8px;
    left: 568px;
    background-color: #c0aae9;
}

Bad div. Bad bad div.

Make something appear in top right corner

div {
    position: absolute;
    width: 64px;
    height: 64px;
    top: 8px;
    right: 8px;
    background-color: #c0aae9;
}

Good div.

Other tips?

Yeah, one! Always add this to a project:

* {
    box-sizing: border-box;
}

At least, for me, it makes thinking about divs, width and borders much more sense.

Source: MDN

Oh, that reminds me...

If you need to look something up like a CSS selector or a HTML element, always try the Mozilla Developer Network first.

What is this new ":has()" pseudo class? Just search mdn has and there's good documentation on MDN!

How does "vmin" exactly work? Just search mdn vmin!

Before we leave, don't forget rule #1 when programming.

When you're stuck...

... just explain your problem to a rubber ducky.

Not a joke, this really works.

Enjoy web dev :)