Skip to content

Latest commit

 

History

History
403 lines (290 loc) · 6.47 KB

lesson-01.md

File metadata and controls

403 lines (290 loc) · 6.47 KB
Raw
theme class highlighter lineNumbers info drawings background
seriph
text-center
shiki
true
HTML and CSS basics
persist
true

Introduction to web development

HTML and CSS Basics

Say hello world to web

Reference: https://nimo.network/post/get-started/

An easy webpage example:

<!doctype html>
<html>
  <head>
    <title>Wow! Web!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Create a file called `index.html** and paste the above codes into the file.

What is a HTML file?

A webpage is actually an HTML file.

<style> .HTML-container { margin-top: 8rem; font-size: 2rem; } .HTML { font-size: 6rem; color: orange; } .spacer { width: 3rem; display: inline-block; } </style>
Hyper Text Markup Language

clicks: 6

Look in details

How is a HTML file formed?

<!doctype html>
<html>
  <head>
    <title>Wow! Web!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

The first line declares the filetype.

An HTML file is formed with tags and their children, recursively. The html tag is the root tag of an HTML file.

The head tag defines the meta data of the webpage. The content of head tag are tags.

The body tag specified the visible part of webpage.

The content in body tag are tags or plain text.

layout: image-right image: https://source.unsplash.com/collection/94734566/1920x1080

Tags

Common tags in head tag

  • title
  • meta
    • description
    • viewport
  • link
    • stylesheet
    • icon
    • scripts

layout: image-right image: https://source.unsplash.com/collection/94734566/1920x1080

Tags

Common tags in body tag

  • Headings: h1, h2, h3, h4, h5, h6
  • Utilities: div, span, p, img, a, section
  • Table related: table, thead, tbody, tr, td
  • Layout related: header, footer, main, aside

layout: section

The webpage is so boring

layout: section

Have a short break first!

Dedicate your website

CSS is what you need

<style> .CSS-container { margin-top: 8rem; font-size: 2rem; } .CSS { font-size: 6rem; color: orange; } .spacer { width: 3rem; display: inline-block; } </style>
Cascading Style Sheets

layout: image-right image: https://source.unsplash.com/collection/94734566/1920x1080

The structure of CSS is simple

<selector> {
  <prop1> : <value1>;
  <prop2> : <value2>;
  ...
}

An example:

h1 {
  color: red;
}

But wait...Where to put my CSS code

  • Inline
<h1 style="font-size: 100px">I want to be larger</h1>
  • Via style tag
<!doctype html>
<html>
  <head>
    <title>Wow! Web!</title>
    <style>
      h1 {
        font-size: 100px;
      }
    </style>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

clicks: 2

But wait...Where to put my CSS code

  • Load external via link tag

index.html

<!doctype html>
<html>
  <head>
    <title>Wow! Web!</title>
    <link ref="stylesheet" href="./style.css" type="text/css">
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

style.css

h1 {
  font-size: 100px;
}

Common properties

  • Text related:

    • text-align
    • font-size
    • font-family
    • font-weight
    • color

  • Utilities

    • width / max-width / min-width
    • height / max-height / min-height
    • display / visibility
    • background / background-color / background-image

Common properties

  • Layout related:

    • margin / margin-left / margin-right / margin-top / margin-bottom
    • padding
    • box-sizing

  • shape:

    • border
      • border-radius
    • box-shadow

Exercise 01

Make a webpage displays the following content:

<iframe height="400" style="width: 100%;" scrolling="no" title="Nine-square" src="https://codepen.io/truco/embed/NWvbyRN?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen Nine-square by Bill (@truco) on CodePen. </iframe>

layout: image-left image: https://source.unsplash.com/collection/94734566/1920x1080

CSS selectors

  • The selector we have learned: tag-name, id, class
  • The combinations of selectors
    • div img
    • div > img
    • *
    • div + img
    • h1 ~ a
  • pseudo classes
    • a:hover
    • a:visited
    • ...

Exercise 02

A CSS selector practice.

https://flukeout.github.io/


<iframe height="320" style="width: 100%;" scrolling="no" title="CSS Diner" src="https://flukeout.github.io/" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> </iframe>

Thanks for watching

Task

Make a Self Introduction page before the next lesson.

Requirements:

  • Should be file(s) (Codepen is not suggested)
  • The entry point is index.html

Notice: It is recommended to use fake info instead real world information since we will publish it to the Internet in the next lesson.

Before you leave

Please fill this!