Want to create interactive content? It’s easy in Genially!
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:
Transcript
START >
Changsu (Terry) Go Oct. 8, 2023
<HTML & CSS>
<Goals>
Introduction to conding by creating a website
What is web development?
What is HTML?
What is CSS?
>
>
HTML
Resources
Q&A
02
CSS
05
06
04
03
Web Dev
01
00
Elements
Goals
>
>
start >
>
<01> Web Dev
>
Introduction to Web Development
'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.
>
>
https://codepen.io/pen/ <html> <head> <title>Hello World!</title> </head> <body> Here comes Terry! </body> </html>
// create your first webpage
>
>
<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
>
>
<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>
// demo & practice
<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>
<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>
>
>
<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; }
.flex-container { display: flex; flex-flow: row wrap; justify-content: space-around; padding: 0; margin: 0; list-style: none;}
<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-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; }
// demo & practice
p{ font-style: italic; } .red { color: red; } #uppercase{ text-transform: uppercase; }
>
>
<Q&A>
>
>
¡congratulations!
>
>
>
- 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
>
>
//Resources