Want to make creations as awesome as this one?

Transcript

<HTML & CSS>

Changsu (Terry) GoOct. 8, 2023

START >

>

>

What is CSS?

3

What is HTML?

2

What is web development?

1

Introduction to conding by creating a website

<Goals>

>

>

Goals

Elements

00

01

Web Dev

03

04

06

05

CSS

02

Q&A

Resources

HTML

Introduction to Web Development

>

<01>Web Dev

>

start >

>

>

- Jaron Lanier

'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'

>

>

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.

// What is web development?

Imagine the world without Ticktok or Instagram!World is run by Web/Internet!

// Why is web development important?

>

>

>

>

  1. Information Gathering
  2. Structure
  3. Design
  4. Build
  5. Testing
  6. Launch
  7. Maintain

// Overview of website development

>

START >

>

The Basics: HTML (HyperText Markup Language)

<02>HTML

>

>

HyperText Markup LanguageCreates structure of a web pageConsists of a series of elementsBoosted by CSS and JavaScript

// What is HTML?

Tags: starts with "<" and ends with ">"Start Tag: <html>End Tag: </html>Content: comes between Start & End Tags

// Basic HTML tags and elements

>

>

>

>

Three parts: HTML version information,Declarative Header section, BodyThe <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.

// Structure of an HTML document

>

>

// create your first webpage

https://codepen.io/pen/<html> <head> <title>Hello World!</title></head> <body> Here comes Terry! </body></html>

START >

>

>

Understanding HTML Elements

<03>Elements

>

>

Note that HTML tags are not case-sensitive.Empty HTML Elements: <br>, <img>, <input>Attributes are extra code/additional information

// Tags, elements, and attributes

Headings: <h1>, <h2>, ... <h6>Paragraph: <p>List: <ol>, <ul>, <li>Image: <img>Table: <table>, <tr>, <td>Anchor: <a>Bold: <strong>Button: <button>Division: <div>

// Headings, paragraphs, lists, and images, etc.

>

>

>

>

HTML elements can also be placed inside of other elements

// nesting elements

>

>

<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 paragraph text. <a href="https://www.google.com/">link to the Google homepage.</a> This is more text.</p>

<p>This is paragraph text.<br>This is text on a new line.</p>

// demo & practice

<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>

START >

>

>

Styling with CSS (Cascading Style Sheets)

<04>CSS

Cascading Style SheetsStyle sheet language used to describe the look and formatting of HTML document

// What is CSS?

>

>

>

>

Selector: select the elements to be styled by matching patternsProperties: styles used on selected elements

// Selectors and properties

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; }

// Styling text, colors, backgrounds, and layout

>

>

>

>

p{ font-style: italic; }.red { color: red; }#uppercase{ text-transform: uppercase; }

// demo & practice

.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

>

>

I

00

  1. Web Playground: https://codepen.io/pen/
  2. IDE: https://vscode.dev/
  3. HTML Elements Reference: https://www.w3schools.com/tags/default.asp
  4. CSS Reference: https://www.w3schools.com/cssref/index.php
  5. Online Instruction: https://learn.microsoft.com/en-us/training/modules/build-first-html-webpage/
  6. Examples: https://www.w3schools.com/w3css/w3css_templates.asp
  7. Chrome DevTools: https://developer.chrome.com/docs/devtools/overview/
  8. Beutiful Website Examples: https://designmodo.com/css-website-designs/