Fundamentals

CSS (Cascading Style Sheet)

#Overview

CSS is a style sheet language and one of the core technologies in web development. It is used to design HTML pages like layouts, fonts, color, animation, and various other styles. So without CSS, your website will look like a regular plain Word document.

#Beginner Concepts

Inline, Internal, and External CSS

There are three methods for adding CSS styles to your HTML page. First, the inline style is written inside the HTML tag using the style attribute. But, this is the least recommended option as the styles are unique to that specific HTML element. The second option is the internal CSS where you use the <style> tag inside the <head> tag of your HTML document.

<head>
  <!-- Internal CSS example  -->
  <style>
    h1 {
      color: gray;
    }
  </style>
  <!-- Link an external CSS file in a HTML document -->
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <!-- Inline CSS example -->
  <h1 style="color: turquoise;">Heading Text</h1>
</body>

For the external option, we create a new CSS file and link it to the HTML document. This is the most common method for using CSS as the file can be linked to other documents which makes the style reusable.

Selectors

To apply a style, you first need to select the element unless you are using an inline style. There are various ways of using a selector and some commonly used are type selector, class selector, and id selector. Each selector has its own method of defining the selector for e.g. class selector always starts with . while id selectors start with #.

/* Basic selectors */

/* Universal selector */
* {
  
}

/* Type selector */
h1 {
  font-size: 30px
}

/* Class selector */
.class-name {
  color: blue;
}

/* Id selector */
#id-name {
  
}

/* Attribute selector */
[attr] {
  
}

Properties and Values

Properties are used to define the visual characteristics of the selected elements, such as font-size to set the text size, or color to set the text color. While values are used to set the specific values for the selected properties. As from the example code above, color: blue; sets the color of any text in that class to blue.

Box Model

CSS allows control of the layout of elements on a web page using the box model, which defines how elements are positioned and sized on the page. By using background-color or border property, you can see every content on the page is placed inside a box. Having a good understanding of this concept can make the designing layout process easier later. Learn more about the box model from web.dev.

Resources

W3Schools - CSS Introduction
MDNWebDocs - Learn CSS
The Odin Project - Intro to CSS
Web.dev - Learn CSS
CSS Reference (Reference to CSS properties with illustrated examples)

#Flexbox and Grid Layout

Defining the layout on a webpage has been getting a lot easier with the introduction of new layout properties in recent years. Using layout techniques helps in positioning the elements on the page and creating complex layouts with ease.

There are two common layout techniques; flex and grid. We can use them by using the display property. Flexbox handles the page layout in one dimension so the items are placed either horizontally or vertically. While the grid is designed for two dimension layouts.

The function to style the layout in two dimensions means there are more properties to define the layout than Flexbox. This could be overwhelming for a beginner so starting with Flexbox may be preferable.

Resources

CSS-tricks - A Complete Guide to Flexbox
Flexbox Froggy (A game to learn about flexbox)
CSS-tricks - A Complete Guide to CSS Grid
Grid Garden (A game to learn and practice Grid)
Video: Learn Flexbox the Easy Way by Kevin Powell
Video: Learn CSS Grid in 20 Minutes by Web Dev Simplified
Video: CSS Grid like you are Jan Tschichold by Layout Land

#Responsive Web Design

A website that adapts to different devices and screen sizes is considered a responsive website. CSS allows developers to create web pages optimized for different devices and screen sizes, using techniques such as media queries and flexible layouts. With the increase in mobile users, most websites use a mobile-first approach for designing.

First and foremost, adding the viewport meta tag inside your <head> tag is very important to design a responsive website.

<meta name="viewport" content="width=device-width, initial-scale=1">

The width=device-width tells the browser that the width of the website is the same as the device's width and initial-scale=1 is the zoom level that the webpage loads with.

To apply styles in different screen sizes, we use @media rules and state the width of the screen. In the mobile-first approach, we write the styles for mobile screens and other general styles then use media queries to apply styles to larger screen sizes.

Other techniques include using relative units like %, em, vw (viewport width) or vh (viewport height) instead of fixed pixels units (px). The grid or flexbox layout mentioned earlier also allows for creating flexible containers amongst many others.

/* Mobile styles and other 
general styles applicable for all screens */

body {
  font-family: "Arial", sans-serif;
  color: #eeeeee;
  background: black;
}
nav {
  width: 100%;
  height: 100vh;
  background: #202123;
}

/* styles apply for screen sizes with a width of 768px or higher */
@media (min-width: 768px) {
  nav {
    width: 60%;
    height: auto;
  }
}
/* styles apply for screen sizes with a width of 1024px or higher */
@media (min-width: 1024px) {
  /* styles from the 768px rule also applies to this screen size */
}

Resources

#Animations

Besides changing the layouts and colors, CSS can be used to add animations to create more visually appealing websites. The easiest way to add some small effects is through transition property which is limiting but can be used to create smooth changes during hover, or focused state.

To use transition, we need to provide some properties which are; transition-property to define which property (color, background, transform, or all) to apply the transition, transition-duration for the time the transition takes to complete, and transition-timing-function to determine how the transition occurs over the specified duration. E.g. using transtion: color 0.4s ease-in will apply a transition only to the color of the element and it will take 0.4 seconds to fully change the color. The ease-in starts the transition slowly and gradually increases the speed. Learn more about other values with a visual guide from CSSReference.io.

/* Provide basic styling */
button{
  width: 100px;
	height: 60px;
	background: rgb(49, 98, 172);
	/* "all" applies to color, background and transform property  */
  transition: all 0.4s ease-in;
  color: white;
}
/* When the button is hovered change background and scale the size by 1.1*/
button:hover{
	background: rgb(21, 103, 82);
	transform: scale(1.1);
}

/* there's also an optional delay property */
div{
  /* the transition will only start after the 1 sec has passed*/
  transition: all 0.4s ease-in-out 1s;
}

But, transition has a very basic usage and requires to be in a state like :hover or :active. So to create more complex animations, we use @keyframes rule. Using keyframes we can define values at different periods of the animation duration. Defining the keyframes is just like @media but instead of providing the width, it’s the animation-name which can be anything you want it to be. The keyframes can be provided any value between 0% to 100% or from and to when there’s no change in-between.

To use the defined keyframe, we use the animation property in the element we want the animation to occur and use the same animation-name for the value. The properties in animation are similar to transition with some additional ones like animation-iteration-count to define the number of times animation repeats, animation-direction for the direction of the animation, and animation-fill-mode to determine the state of the element after the animation completes.

div {
/* 'infinite': the animation loops infinitely 
		'reverse': plays the animation from 100% to 0%
*/
  animation: pulse 1.2s ease-in infinite reverse;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

Resources

#Useful Tools

Haikei (Generate SVG shapes like waves and blobs)
Keyframes (Create keyframe animations in a timeline editor like a video editing app)
Omatsuri (Useful tools like color shades and gradient generators amongst many others)
Cubic-bezier (Generate custom cubic-bezier for animations)
Magic Pattern Tools (Various tools for generating gradients, patterns, and many more)
Realtime Colors (Visualize colors on a real website or generate randoms and export them in CSS)

#Challenge Yourself

100 Days CSS Challenge (100 days and 100 CSS challenge)
CSS Battle (Recreate the given design and compete with others)
Daily UI (Get daily UI design challenges)

Fundamentals

CSS (Cascading Style Sheet)

#Overview

#Beginner Concepts

Inline, Internal, and External CSS

<head>
  <!-- Internal CSS example  -->
  <style>
    h1 {
      color: gray;
    }
  </style>
  <!-- Link an external CSS file in a HTML document -->
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <!-- Inline CSS example -->
  <h1 style="color: turquoise;">Heading Text</h1>
</body>

Selectors

/* Basic selectors */

/* Universal selector */
* {
  
}

/* Type selector */
h1 {
  font-size: 30px
}

/* Class selector */
.class-name {
  color: blue;
}

/* Id selector */
#id-name {
  
}

/* Attribute selector */
[attr] {
  
}

Properties and Values

Box Model

Resources

W3Schools - CSS Introduction
MDNWebDocs - Learn CSS
The Odin Project - Intro to CSS
Web.dev - Learn CSS
CSS Reference (Reference to CSS properties with illustrated examples)

#Flexbox and Grid Layout

Resources

CSS-tricks - A Complete Guide to Flexbox
Flexbox Froggy (A game to learn about flexbox)
CSS-tricks - A Complete Guide to CSS Grid
Grid Garden (A game to learn and practice Grid)
Video: Learn Flexbox the Easy Way by Kevin Powell
Video: Learn CSS Grid in 20 Minutes by Web Dev Simplified
Video: CSS Grid like you are Jan Tschichold by Layout Land

#Responsive Web Design

First and foremost, adding the viewport meta tag inside your <head> tag is very important to design a responsive website.

<meta name="viewport" content="width=device-width, initial-scale=1">

The width=device-width tells the browser that the width of the website is the same as the device's width and initial-scale=1 is the zoom level that the webpage loads with.

/* Mobile styles and other 
general styles applicable for all screens */

body {
  font-family: "Arial", sans-serif;
  color: #eeeeee;
  background: black;
}
nav {
  width: 100%;
  height: 100vh;
  background: #202123;
}

/* styles apply for screen sizes with a width of 768px or higher */
@media (min-width: 768px) {
  nav {
    width: 60%;
    height: auto;
  }
}
/* styles apply for screen sizes with a width of 1024px or higher */
@media (min-width: 1024px) {
  /* styles from the 768px rule also applies to this screen size */
}

Resources

#Animations

/* Provide basic styling */
button{
  width: 100px;
	height: 60px;
	background: rgb(49, 98, 172);
	/* "all" applies to color, background and transform property  */
  transition: all 0.4s ease-in;
  color: white;
}
/* When the button is hovered change background and scale the size by 1.1*/
button:hover{
	background: rgb(21, 103, 82);
	transform: scale(1.1);
}

/* there's also an optional delay property */
div{
  /* the transition will only start after the 1 sec has passed*/
  transition: all 0.4s ease-in-out 1s;
}

div {
/* 'infinite': the animation loops infinitely 
		'reverse': plays the animation from 100% to 0%
*/
  animation: pulse 1.2s ease-in infinite reverse;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

Resources

#Useful Tools

Haikei (Generate SVG shapes like waves and blobs)
Keyframes (Create keyframe animations in a timeline editor like a video editing app)
Omatsuri (Useful tools like color shades and gradient generators amongst many others)
Cubic-bezier (Generate custom cubic-bezier for animations)
Magic Pattern Tools (Various tools for generating gradients, patterns, and many more)
Realtime Colors (Visualize colors on a real website or generate randoms and export them in CSS)

#Challenge Yourself

100 Days CSS Challenge (100 days and 100 CSS challenge)
CSS Battle (Recreate the given design and compete with others)
Daily UI (Get daily UI design challenges)