🍲📖

Contemporary Web Development Cook Book

Fundamentals


You win the game by understanding these

  • HTML
  • Understand what is a DOM and how HTML is tied to it

  • CSS
  • CSS styling, positioning, alignment, transitions and animations
  • Responsive design (media queries)

  • Javascript
  • Variables, arrays, funcitons, loops
  • DOM manipulation and styling
  • Array methods ( foreach, map, filter, reduce )

  • React
  • Functional components
  • Hooks (useEffect, useState)

HTML

Dom tree
Picture from Wikipedia. (CC BY-SA 3.0)
The DOM represents a document with a logical tree. With the Javascript you can

  • Add, modify or delete any of the elements and attributes
  • Change any CSS styles
  • React to events that are tied to the tree
  • Create new events

Basics


<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8" />
      <meta 
        name="viewport"
        content="width=device-width, initial-scale=1.0"
      />
      <title>Document</title>
  </head>
  <body>
      
  </body>
</html>
Every html file should have at least doctype, html, head and body tags.

Commenting


<!-- This is a comment -->
Todo:
  • div
  • span
  • img
  • all the semantic html5 tags
  • where to find more resources

CSS

Basics


selector {
  property name: property value;
}

Comment


/* You can comment things like this */      


/* Works 
also
as a
multiline 
comment */

IDs and classes


.box {
  color: green;
}

#one-specific-box {
  color: gray;
}

Pseudo-classess


/* Note the two ::*/

box::first-letter {
  font-size: 2rem;
}

button:hover {
  background-color: #ff0000;
}

/* Give your tables a better readability */

.zebra-table:nth-child(2) {
  background-color: gray;
}

Helpful resources for you to master css

JS

Variables


var year = 2020;
year = 2021;
console.log(2021); // prints 2021

const cat = "Garfield"; // immutable
cat = Tigger // 🚨 Error

let city = "Helsinki"; // mutable
city = "Stockholm"; // ✅
With ES6 there has been new ways to declare variables with const and let

Functions


// ES5 way of typing out things

function double(parameter) {
    return parameter * 2;
}

double(4) // outputs 8


// ES6 way of typing out things. More common nowadays.

const double = (parameter) => {
    return parameter * 2;
}

double(4) // outputs 8
(There are some semantic details that we won't go into. Output is equal.)

Ternary operation


// ternary operation

// condition ? truthy output : falsy output;

const weekday = "Monday";
const info = weekday == "Monday" ? "No lecture!" : "Go to the lecture!";

console.log(info) // outputs Monday
(There are some semantic details that we won't go into. Output is equal.)

Creating empty iterable array


const iterableArray = Array(100).fill(undefined)
Returns an array with a hundred members filled with [undefined, undefined, undefined ...

Map


const animals = ["cat", "dog", "kitten"];
animals.map((animal) => animal.length); // [3, 3, 6]
Mapping things to other things is a fundamental part of programming. Make sure you learn it well.

Selecting DOM components


document.getElementById('idOfTheComponent')
// returns only one component

document.getElementsByClassName('className')
// returns an array of components. 

document.getElementsByClassName('className')[0]
// you can take the first one from the array with this

document.getElementsByTagName('div')
// get all the divs

Alter CSS of DOM components


document.getElementsByClassName('layer3')[0].style.top = '100px';
// alter the top css prop

React

Basic Component

const Block = (params) => {
  return (
    <div>
      {params.name}
    </div>
  )
}
You can simplify complicated structures by abstracting them behind a React component. Passing parameters is optional.
  • Don't forget to return what you want to render
  • Wrap javascript inside the return function with {curly.brackets}
  • React component needs to start with Capital letter

Using components


<Block />

Tieing React to html


ReactDOM.render(<App />, root);

React hooks

What and why?
When you declare something in React, it will be loaded only once when the component is rendered. However if you want something to change along the way so that React knows it, you need to wrap it in a hook!

useState


import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
Whenever the button is clicked, the function gets triggered, the {count} gets updated and it renders the element again!

You clicked 0 times

useEffect


import React, { useEffect } from 'react';

const YourReactComponent = () => {

  useEffect(() => {
    // this will happen every time your function gets rerendered
  })

  useEffect(() => {
    // this will trigger only on the initial render
  }, [])

  useEffect(() => {
    // this will trigger only when the variable1 gets changed 
  }, [variable1])

  return (
    <div>👀</div>
  )
}
By using this hook you tell React that your component needs to do something after render. It will run after every render, unless otherwise specified (using the second parameter as an array).

Combining your skills

Map array to React components


const AnimalList = () => {
  const animals = ["cat", "dog", "kitten"];  
  
  return (
    <ul>
      {animals.map((animal) => {
        return(<li>{animal}</li>)
      })}
    </ul>
  )
}
Returns:
  • cat
  • dog
  • kitten
By using your knowledge with React and javascript's map function you can get far.