[SUTD GDSC] Intro to HTML and CSS

Intro to HTML & CSS
Joash Tan
@bakkwatan
Build your first website!
Download the source code
before we begin to save time
https://tinyurl.com/26myhj9c

• Self learnt HTML, CSS, JS (TS) & React
(Native)
• Data Analyst
• ESD
• Dislike bakkwa, high calories
• and backend
About me
22 years old

Download the source code
https://tinyurl.com/26myhj9c

Content
1 hour
HTML
Introduction to HTML
HTML styling
HTML Tags
Introduction to CSS
CSS styles
Q & A
CSS
10 minutes
Introduction
0 minutes
Break
15 minutes

What is HTML?
• HyperText Markup Language
• Wix, squarespace, Shopify…
• More customization and understand how
website works
• <Tags/>
• Editors: Atom, VSCode, Notepad++, Notepad…

<!DOCTYPE html>

<html>

<head>

<title>I am learning HTML!</title>
</head>

<body>
Hello world
</body>
</html>
INDEX.HTML

<head>

<meta charset="UTF-8"/>

<meta name="description" content="My Awesome Website"/>

<meta name=“viewport" content=“width=device-width, initial-scale=1.0"/>

<title>I am learning HTML!</title>
</head>
https://www.w3schools.com/tags/tag_meta.asp
<meta/>

<body>

<h1>My website</h1>
<h2>Subheader for my website</h2>
<h6>Subsubheader for my website</h6>
</body>
<h1>Enter Title here</h1>

<body>
<h1>My website</h1>

<p>This is my paragraph</p>

<p>This is my <i>paragraph</i> for my subheader</p>
<p>This is my <b><i>paragraph</i></b> paragraph for my subheader</p>
</body>
<p>Enter <b>paragraph</b> here</p>

<h1>My website</h1>
<p>This is my <b><i>paragraph</i></b> paragraph for my
subheader</p>
<h1>My website</h1>
<p>This is my <b><i>paragraph</i></b> paragraph for my
subheader</p>

<h1>My website</h1>

<p>H<sub>2</sub>O</p>

<p>x<sup>2</sup></p>
<p>I love O<sub>2</sub></p>

<h1 style="background-color: yellow; color: green;">My website</h1>
<p style="color: blue;">H<sub>2</sub>O</p>
<p style="color: #777777;">x<sup>2</sup></p>
https://www.w3schools.com/cssref/css_colors.php
https://www.w3schools.com/html/html_colors.asp
<p style=“type: cool;”>Sunglasses</p>

<header>

<nav>
</nav>
</header>

<main>

<article>

<section>
h1
h2
h2
h3
</section>
</article>
</main>

<footer>
</footer>
<body>structure of html</body>

<p>Hey you! click this <a href="https://www.youtube.com/"
target="_blank">link</a> to watch my youtube video!</p>
<p>Hey you! click <a href="static/page_2.html">this</a> to go to 2nd page</p>
<a href=“#”>Link me!</a>

<video src="assets/video.mkv" controls width="800"
poster="assets/cat.jpg"></video>
https://www.w3schools.com/html/html5_video.asp
<video src=“source” controls></video>

<ol type="I"> 
make me a sandwich
<li>2 slices of bread bread</li>
<li>hams
<ul>
<li>1 turkey</li>
<li>1 chicken</li>
</ul>
</li>
<li>1 cheese</li>
<li>mayonnaise</li>
</ol>
<list>grocery list</list>

<div style="border: 1px solid black;">
this is a div
</div>

<span style="border: 1px solid blue;">
this is a span
</span>
<div>Contents of my tupperware</div>

<form>

<input type="text" value="example username" placeholder="enter your
username"/>
<input type="password" placeholder="enter your password"/>
<textarea rows="10" cols="50">
Enter your paragraph
</textarea>
</form>
<input/>

Have a good break.
Cause I need one too.
- Joash Tan

What is CSS?
• Cascading StyleSheet
• Sibling of HTML
• Classes and id
• Different styles (color, backgroundColor, etc.)

<body style="color: green; font-size: 30px;">
<header>
<h1 style="color: blue; text-decoration: underline;">CSS TUTORIAL</h1>
</header>
<main>
<p style="border: 1px solid black; width: 100px;">Let us style this
paragraph!</p>
</main>
</body>
.styling{} .border{}

<body style="color: green;">
<header>
<h1>CSS TUTORIAL</h1>
</header>
<main>
<p>Let us style this paragraph!</p>
</main>
</body>
https://www.w3schools.com/colors/colors_picker.asp
.color{} (NOT colour!)

<main>
<p style="border: 1px solid black; margin-top: 50px; padding-
bottom: 30px;">Let us style this paragraph!</p>
</main>
.margins{} .paddings{}

<ul style="float: left; background-color: aqua; padding: 20px;">
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
<main>
<p>Floats are helpful in positioning images/navigation lists etc.</p>
</main>
.floats{}

<ul style="background-color: aqua; padding: 20px;">
<li style="display: inline;">home</li>
<li style="display: inline;">about</li>
<li style="display: inline;">contact</li>
<li style="display: none;">blog</li>
</ul>
<main>
<p>Display is helpful in manipulating html elements</p>
</main>
.display{}

<div style="position: relative; top: 20px; left: 30px;
width: 100px; height: 100px; background-color: blue">
</div>
<div style="width: 150px;height: 150px; background-color:
red;">
</div>
.position{}

<h1 style="text-shadow: 2px 2px 2px green; position: relative;
top: 120px;">a cat</h1>
<img style="box-shadow: 5px 5px 5px blue; opacity: 0.4; border-
radius: 50%;" src="assets/cat.jpg" alt="a cat"/>
.shadow{} .border-radius{}

<p style="font-family: 'Courier', Times, serif; font-size: 1em; font-weight:
bold; font-style: italic;">
This is my main paragraph. I am going to try and write as long of a paragraph
because I want to show different attributes and how you can style this
paragraph. This is important because it is important because it is important
because it is important because it is important because it is important.
</p>
.fonts{}

<head>
<style>
body {
color: blue;
}
h1 {
color: red;
}
</style>
</head>
<body>
<h1>This is a h1</h1>
<p>This is a paragraph.</p>
</body>
.styletag{}

<head>
<link rel="stylesheet“ href="./style.css" />
</head>
<body>
</body>
.stylesheet{}
/*Create a new stylesheet, it can be named anything as long as it ends in .css*/

<!--html->
<div class="container">
<h1 id="first_container_h1">This is a h1</h1>
</div>
<div class="container make_green">
<h1 id="second_container_h2">This is a h1</h1>
</div>
.class{} #id{}
/* css */
.container {
text-align: center;
}
#first_container_h1 {
color: blue;
background-color: yellow;
}
/* this line makes my container turn green */
.make_green {
color: green;
}
/* Can have multiple classes but only 1 id. Generally, use id
to pick out that 1-3 specific element. It’s not important if
you look only in terms of CSS but when it comes to inclusion
of other languages like JS, this is an important rule of
thumb as id is used for identification. */

<!--html->
<h1 id="first_container_h1">This is a h1</h1>
</div>
<div class="container2 make_green">
<h1 id="second_container_h2">This is a h1</h1>
</div>
.classSelectors{}
/* css */
* {
background-color: aqua;
}
.container, .container2 {
text-align: center;
}
#first_container_h1 {
color: blue;
background-color: yellow;
}
.make_green {
color: black;
border: 1px solid white;
}
/* this line makes my container turn green when I hover over
the element */
.make_green:hover {
color: green;
border: 1px solid black;
}

<!--html->
<div class="flex_container">
<h1>1</h1>
</div>
<h1>2</h1>
</div>
<h1>3</h1>
</div>
<h1>4</h1>
</div>
<h1>5</h1>
</div>
</div>
.flexbox{}
/* css */
.flex_container {
background-color: burlywood;
height: 100vh;
display: flex;
flex-direction: row;
justify-content: center; /*horizontal centering*/
align-items: center; /*vertically centering*/
}
.container {
width: 100px;
height: 100px;
margin: 10px;
background-color: pink;
border: 3px solid black;
}

Additional info

https://codepen.io/
https://www.w3schools.com/html/default.asp
https://www.w3schools.com/css/default.asp
/*Reach out to me*/
joash_tan@mymail.sutd.edu.sg
www.linkedin.com/in/bakkwatan

[SUTD GDSC] Intro to HTML and CSS

Recommended

More Related Content

Similar to [SUTD GDSC] Intro to HTML and CSS (20)

Recently uploaded (20)

[SUTD GDSC] Intro to HTML and CSS