HTML_CSS_JS Workshop

Frontend Basics
An intro to HTML/CSS & JS!
By Brian Zhang

HTML
An intro to HTML
CSS
An intro to CSS
JavaScript
An intro to JavaScript
Today’s Agenda
Coding
Demonstration
Coding a basic webpage

HTML
What’s HTML?
Elements, attributes, and more!
Learn more here: www.w3schools.com/html

What is HTML?
HTML (HyperText Markup Language) is a
standard markup language used to create
documents that will be displayed on a browser.
An HTML document is composed of a series of
elements.
Every HTML document uses a DOM model.
It’s the most fundamental language for web
development!

HTML Basics
All HTML documents begin with a <!DOCTYPE
html> declaration, followed by <html>, <head>,
and <body> elements.
An HTML element is deﬁned by a start tag,
content, and an end tag.
( e.g. <tagname> Content… </tagname>).
Basic HTML elements include headings (<h1>,
<h2>, etc.), paragraphs (<p>) and lists (<ul>, <li>).
Some HTML elements have attributes, such as
links (<a href=”#”>), images (<img src="cat.jpg">),
and forms (<input type="text">).

Best Practices
Ideally, an HTML document should be
accessible.
Examples include:
1. Adding alt text to images (e.g. <img
src="cat.jpg" alt=”image of a cat”>)
2. Adding metadata (e.g. <meta
charset="UTF-8"> in <head>)
3. Using semantic elements (e.g. <header>,
<main>, <footer> etc.)

CSS
What’s CSS?
Selectors, declarations, and more!
Learn more here: www.w3schools.com/css

What is CSS?
CSS (Cascading Style Sheets) is a style sheet
language meant to describe how elements
within an HTML document are displayed.
An CSS file contains selectors with
declarations that defines an HTML element’s
display.
CSS lessens the workload, and one CSS file is
applicable to multiple HTML files.
CSS is often always stored as external
stylesheets (i.e. .css files).

CSS Basics
A CSS rule consists of a selector and
declaration.
(e.g. h1 {font-size: 2em; })
A selector can be either an id (e.g.
#main-container) or a class (e.g. .container)
There are many CSS properties, which control
properties such as element size (e.g width,
height, max-height, etc), display & positioning
(e.g. display, ﬂoat, position, etc) and colours &
backgrounds (e.g. color, background-color,
background-image, etc.).
When working with borders, padding, and
margin, CSS follows a box model.

JavaScript
What’s JavaScript?
Arrow functions, variables, and more!
Learn more here: www.w3schools.com/js

What is Javascript?
JavaScript is a programming language that is used
to deﬁne a web page’s behaviour.
JavaScript can change HTML content.
(e.g. document.getElementById("demo").innerHTML
= "Hello JavaScript";).
JavaScript is:
● Meant to program the behaviour of web apps
● Designed to be easy to learn
● One of the world’s most popular programming
languages
In this workshop, we’ll only learn just enough for
the live demonstration.

Variables
Variables are containers for storing data.
A variable is declared with:
- const if you would like the data to be
immutable.
- var if you would like the data to be mutable
and function-scoped
- Nowadays, you don’t usually use var!
- let if you would like the data to be mutable
and block-scoped

Data Types
Data types deﬁne the type of a variable.
JavaScript is not strongly-typed language, meaning the same
variable can hold diﬀerent values.

Functions
A function—like in other programming languages—is a piece of code that
is executed when something calls it.
Arrow functions provide closure to the environment around it. It allows us
to shorten function syntax, writing “const hello = () => {}” rather than “const
hello = function() {}”!

Additional Resources
● www.w3schools.com/js
● www.w3schools.com/css
● www.w3schools.com/html
Thanks for Coming!
This presentation template was created by Slidesgo, including
icons by Flaticon, infographics & images by Freepik.

HTML_CSS_JS Workshop

More Related Content

Similar to HTML_CSS_JS Workshop

More from GDSC UofT Mississauga

Recently uploaded

HTML_CSS_JS Workshop