<HTML & CSS>
Changsu (Terry) Go Oct. 8, 2023
START >
>
>
<Goals>
Introduction to conding by creating a website
What is web development?
What is HTML?
What is CSS?
>
>
01
00
02
03
Web Dev
Elements
Goals
HTML
04
05
06
CSS
Q&A
Resources
>
>
<01> Web Dev
Introduction to Web Development
start >
>
>
'Create a website that expresses something about who you are that won’t fit into the template available to you on a social networking site'
- Jaron Lanier
>
>
// What is web development?
The process of conceptualizing, designing, building, and maintaining websites and web applications. It can range from developing a simple single static page of plain text to complex web applications, electronic businesses, and social network services.
>
>
// Why is web development important?
Imagine the world without Ticktok or Instagram! World is run by Web/Internet!
>
>
// Overview of website development
- Information Gathering
- Structure
- Design
- Build
- Testing
- Launch
- Maintain
>
>
<02> HTML
The Basics: HTML (HyperText Markup Language)
START >
>
>
// What is HTML?
HyperText Markup LanguageCreates structure of a web page Consists of a series of elements Boosted by CSS and JavaScript
>
>
// Basic HTML tags and elements
Tags: starts with "<" and ends with ">"Start Tag: <html> End Tag: </html> Content: comes between Start & End Tags
>
>
// Structure of an HTML document
Three parts: HTML version information, Declarative Header section, Body The <html> element must begin and end the document. The <head> tags must appear before the <body> tags. The <title> tags must be within the <head> tags.
>
>
// create your first webpage
https://codepen.io/pen/ <html> <head> <title>Hello World!</title> </head> <body> Here comes Terry! </body> </html>
>
>
<03> Elements
Understanding HTML Elements
START >
>
>
// Tags, elements, and attributes
Note that HTML tags are not case-sensitive. Empty HTML Elements: <br>, <img>, <input> Attributes are extra code/additional information
>
>
// Headings, paragraphs, lists, and images, etc.
Headings: <h1>, <h2>, ... <h6> Paragraph: <p> List: <ol>, <ul>, <li> Image: <img> Table: <table>, <tr>, <td> Anchor: <a> Bold: <strong> Button: <button> Division: <div>
>
>
// nesting elements
HTML elements can also be placed inside of other elements
>
>
// demo & practice
<h2>This is a page heading</h2> <p>This is a paragraph. Here's an ordered list:</p> <ol> <li>item one</li> <li>item two</li> <li>item three</li> </ol>
<p>This is a paragraph with some <strong>bolded text</strong> and some <em>emphasized text</em> inside it.</p> <p>This is a paragraph with a <a href="https://www.google.com/">Google</a>.</p> <p>This is a paragraph with a button! <button>Click Me</button> (It doesn't do anything, sorry.)</p>
<p>This is paragraph text.<br>This is text on a new line.</p>
<p>This is paragraph text. <a href="https://www.google.com/">link to the Google homepage.</a> This is more text.</p>
>
>
<04> CSS
Styling with CSS (Cascading Style Sheets)
START >
>
>
// What is CSS?
Cascading Style Sheets Style sheet language used to describe the look and formatting of HTML document
>
>
// Selectors and properties
Selector: select the elements to be styled by matching patterns Properties: styles used on selected elements
>
>
// Styling text, colors, backgrounds, and layout
p{ font-style: italic; } .red { color: red; } #uppercase{ text-transform: uppercase; } .flex-container { display: flex; flex-flow: row wrap; list-style: none; } .flex-item { background: tomato; padding: 5px; width: 200px; height: 150px; color: white; }
>
>
// demo & practice
p{ font-style: italic; } .red { color: red; } #uppercase{ text-transform: uppercase; }
.flex-item { background: tomato; padding: 5px; width: 200px; height: 150px; margin-top: 10px; line-height: 150px; color: white; font-weight: bold; font-size: 3em; text-align: center; }
<p> This is a paragraph </p> <p class="red"> This is a red text </p> <h4 id="uppercase"> This is an uppercase text </p> <ul class="flex-container"> <li class="flex-item">1</li> <li class="flex-item">2</li> <li class="flex-item">3</li> <li class="flex-item">4</li> </ul>
.flex-container { display: flex; flex-flow: row wrap; justify-content: space-around; padding: 0; margin: 0; list-style: none;}
>
>
<Q&A>
>
>
¡congratulations!
>
>
>
//Resources
- Web Playground: https://codepen.io/pen/
- IDE: https://vscode.dev/
- HTML Elements Reference: https://www.w3schools.com/tags/default.asp
- CSS Reference: https://www.w3schools.com/cssref/index.php
- Online Instruction: https://learn.microsoft.com/en-us/training/modules/build-first-html-webpage/
- Examples: https://www.w3schools.com/w3css/w3css_templates.asp
- Chrome DevTools: https://developer.chrome.com/docs/devtools/overview/
- Beutiful Website Examples: https://designmodo.com/css-website-designs/
00
Intro to Web Dev
Terry Go
Created on October 2, 2023
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Essential Learning Unit
View
Akihabara Learning Unit
View
Genial learning unit
View
History Learning Unit
View
Primary Unit Plan
View
Vibrant Learning Unit
View
Art learning unit
Explore all templates
Transcript
<HTML & CSS>
Changsu (Terry) Go Oct. 8, 2023
START >
>
>
<Goals>
Introduction to conding by creating a website
What is web development?
What is HTML?
What is CSS?
>
>
01
00
02
03
Web Dev
Elements
Goals
HTML
04
05
06
CSS
Q&A
Resources
>
>
<01> Web Dev
Introduction to Web Development
start >
>
>
'Create a website that expresses something about who you are that won’t fit into the template available to you on a social networking site'
- Jaron Lanier
>
>
// What is web development?
The process of conceptualizing, designing, building, and maintaining websites and web applications. It can range from developing a simple single static page of plain text to complex web applications, electronic businesses, and social network services.
>
>
// Why is web development important?
Imagine the world without Ticktok or Instagram! World is run by Web/Internet!
>
>
// Overview of website development
>
>
<02> HTML
The Basics: HTML (HyperText Markup Language)
START >
>
>
// What is HTML?
HyperText Markup LanguageCreates structure of a web page Consists of a series of elements Boosted by CSS and JavaScript
>
>
// Basic HTML tags and elements
Tags: starts with "<" and ends with ">"Start Tag: <html> End Tag: </html> Content: comes between Start & End Tags
>
>
// Structure of an HTML document
Three parts: HTML version information, Declarative Header section, Body The <html> element must begin and end the document. The <head> tags must appear before the <body> tags. The <title> tags must be within the <head> tags.
>
>
// create your first webpage
https://codepen.io/pen/ <html> <head> <title>Hello World!</title> </head> <body> Here comes Terry! </body> </html>
>
>
<03> Elements
Understanding HTML Elements
START >
>
>
// Tags, elements, and attributes
Note that HTML tags are not case-sensitive. Empty HTML Elements: <br>, <img>, <input> Attributes are extra code/additional information
>
>
// Headings, paragraphs, lists, and images, etc.
Headings: <h1>, <h2>, ... <h6> Paragraph: <p> List: <ol>, <ul>, <li> Image: <img> Table: <table>, <tr>, <td> Anchor: <a> Bold: <strong> Button: <button> Division: <div>
>
>
// nesting elements
HTML elements can also be placed inside of other elements
>
>
// demo & practice
<h2>This is a page heading</h2> <p>This is a paragraph. Here's an ordered list:</p> <ol> <li>item one</li> <li>item two</li> <li>item three</li> </ol>
<p>This is a paragraph with some <strong>bolded text</strong> and some <em>emphasized text</em> inside it.</p> <p>This is a paragraph with a <a href="https://www.google.com/">Google</a>.</p> <p>This is a paragraph with a button! <button>Click Me</button> (It doesn't do anything, sorry.)</p>
<p>This is paragraph text.<br>This is text on a new line.</p>
<p>This is paragraph text. <a href="https://www.google.com/">link to the Google homepage.</a> This is more text.</p>
>
>
<04> CSS
Styling with CSS (Cascading Style Sheets)
START >
>
>
// What is CSS?
Cascading Style Sheets Style sheet language used to describe the look and formatting of HTML document
>
>
// Selectors and properties
Selector: select the elements to be styled by matching patterns Properties: styles used on selected elements
>
>
// Styling text, colors, backgrounds, and layout
p{ font-style: italic; } .red { color: red; } #uppercase{ text-transform: uppercase; } .flex-container { display: flex; flex-flow: row wrap; list-style: none; } .flex-item { background: tomato; padding: 5px; width: 200px; height: 150px; color: white; }
>
>
// demo & practice
p{ font-style: italic; } .red { color: red; } #uppercase{ text-transform: uppercase; }
.flex-item { background: tomato; padding: 5px; width: 200px; height: 150px; margin-top: 10px; line-height: 150px; color: white; font-weight: bold; font-size: 3em; text-align: center; }
<p> This is a paragraph </p> <p class="red"> This is a red text </p> <h4 id="uppercase"> This is an uppercase text </p> <ul class="flex-container"> <li class="flex-item">1</li> <li class="flex-item">2</li> <li class="flex-item">3</li> <li class="flex-item">4</li> </ul>
.flex-container { display: flex; flex-flow: row wrap; justify-content: space-around; padding: 0; margin: 0; list-style: none;}
>
>
<Q&A>
>
>
¡congratulations!
>
>
>
//Resources
00