HTML & CSS

Slides at: https://goo.gl/2JLRGu https://nushackers.github.io/html-css

Internet

Gateway to the world

What we'll be making today

HTML

Hyper Text Markup Language

Easy way to describe how text should be displayed

When you type: google.com

  • you: hi google's server
  • server: here's the html
  • you: oh I need the css file too
  • server: here's the css

Tags

create HTML elements

Declared with open and closing tags like so: <element>content </element>
Or occassionally with a self-closing tag: <element>
HTML Output 

								
h1

h1

 

								
h2

h2

 

								
h3

h3

 

								
h4

h4

 

								
h5
h5
 

								
h6
h6

Many elements make a person

  1. head : describes
  2. body : content

Many elements make a person webpage


						<!DOCTYPE html>
						<html>
						  <head>
						    Your Awesome Webpage
						  </head>
						  <body>
						    
Hello!

						  </body>
						</html>
HTML for these slides

Hands on

https://thimble.mozilla.org/projects/new

Alternatively,

  1. Create a "index.html" file
  2. Drag file into browser
  3. Edit, save, then reload browser

HTML Output 

								
content division
content division
 

								
paragraph

paragraph

Attributes

give tags meaning

Used in the opening tag
<element attr="thing">content </element>
HTML Output 

								erondu's collection
								

								Photos by
								erondu
								on
								Unsplash
Photos by erondu on Unsplash
HTML Output 

								
    
								  
  • Item 1
    • 
								  
  • Item 2
    • 
								  
  • Item 3
    •
  • Item 1
  • Item 2
  • Item 3
 

								
    
								  
  1. Item 1
    2. 
								  
  2. Item 2
    3. 
								  
  3. Item 3
    4.
  1. Item 1
  2. Item 2
  3. Item 3
HTML Output 

								

								
								  

								  Header content 1
								  Header content 2
								  

								
								
								  

								  Body content 1
								  Body content 2
								  

								
								
								  

								  Footer content 1
								  Footer content 2
Header content 1 Header content 2
Body content 1 Body content 2
Footer content 1 Footer content 2

And many more!

Such as video, article, button, form...
MDN Resource

CSS

Cascading Style Sheets

Easy way to describe how HTML elements should be displayed

Ways to use css

inline-style


						
Hello
Hello

Ways to use css

id


						
						
Hello
Hello

Ways to use css

class


						
						
Hello
Hello

Ways to use css

  • inline-style
  • id
  • class
Use class. They're reusable, easy to read and maintain.

Stylistic css properties

Let's try them out

  • background
  • color
  • font-family
  • font-weight

CSS size units

px
pixels
em
relative to parent's font-size
originally a reference to the width of the capital M
rem
relative to <html>'s font-size
%
percentage with respect to width
fr
fraction with respect to siblings

Sizing css properties

  • width & height
  • padding
  • border
  • margin

CSS Box-model

Important
margin
border
padding
content (width & height)

CSS Box-model

Size of a box (width & height) is accounting for content only.
Modern css uses 
box-sizing: border-box;
as it's easier to calculate

CSS Selectors

Specifying the css elements you want to target
Targetting all th within the class table 

            .table th {
              padding: 1rem;
            }
Targetting the direct tbody within the class table 

            .table > tbody {
              background: red;
            }

CSS Specificity

Think of it as priority of css for elements.
The more specific your selectors, the higher precedence of css
This is less specific than 

            .table th {
              padding: 1rem;
            }
this 

            .table > tbody {
              background: red;
            }

Flexbox

Used for aligning subcontent along a single axis. 

						display: flex;

Flexbox


						display: flex;
						/* by default */
						flex-direction: row;
						/* x-axis in row, y-axis in col */
						align-items: center;
						/* y-axis in row, x-axis in col */
						justify-content: space-around;

Grid

Used for two-dimensional layout. Great for page structures. 

						display: grid;

Grid

Main area
Footer

							.page {
							  display: grid;
							  grid-template-areas: "head head"
									       "nav  main"
									       "nav  foot";
							  grid-template-rows: repeat(1fr, 3);
							  grid-template-columns: 150px 1fr;
							}

							.header {
							  grid-area: head;
							  background-color: #8ca0ff;
							}
						

							.nav {
							  grid-area: nav;
							  background-color: #ffa08c;
							}

							.main {
							  grid-area: main;
							  background-color: #ffff64;
							}

							.footer {
							  grid-area: foot;
							  background-color: #8cffa0;
							}

Bonus trick

  1. right click browser > inspect element
  2. backspace/delete to remove html element

Useful for hiding ads/modals.

Sharing your work

Upload all your files to sites like

then buy a domain from a registrar like

NUSHackers

Feedback