STORMHACKS 2025�*Slides Reused From LANGARA HACKS 2024

​

HTML/CSS/JS

WORKSHOP

Brian Rahadi

brianrahadi.com

​

PREREQUISITES

• Laptop with internet connection (use SFU Wi-Fi)
• Visual Studio Code
• GitHub Account

​

Don’t hesitate to ask volunteers for help in case you have troubles in any of these steps!

TODAY’S AGENDA

• Introduction to HTML/CSS/JavaScript
• Building website with HTML/CSS/JavaScript
• Basic git commands
• Deploying website with GitHub Pages

DISCLAIMER

This introduction to HTML, CSS, and JavaScript is very short.

• No expectation to be proficient right away
• Key idea is to help you get familiar with the idea of ‘learning by doing’. Short lectures + Heavy hands-on examples.
• Always reach out if you have any questions:
• To me (Brian) for questions about the lecture. Always learning and will try my best to answer.
• To volunteers for installing/ debugging problems

WHY DO WE NEED TO LEARN HTML, CSS, AND JAVASCRIPT?

Many projects already use fancy frameworks that implements thing better and faster

WHY DO WE NEED TO LEARN HTML, CSS, AND JAVASCRIPT?

• Almost all fancy frameworks are just (HTML, CSS, and JavaScript)++
• Understand the basics first, everything else becomes easier to digest later (Transferrable)

INTRODUCTION TO HTML, CSS, AND JAVASCRIPT

HTML - What is the content? (Structural)

CSS - How the content should look like? (Presentational)

JavaScript - How to make the content interactive? (Behavioural)

INTRODUCTION TO HTML, CSS, AND JAVASCRIPT

https://www.frans.co.id/javascript-amp-seo-making-your-bot-experience-as-good-as-your-user-experience.html

INTRODUCTION TO HTML

(HYPERTEXT MARKUP LANGUAGE)

• Standard markup language to display content and structure of website
• HTML document is made of HTML elements (structure) containing texts/ images (contents)
• HTML files end with .html or .htm

https://en.wikipedia.org/wiki/HTML

HTML ELEMENTS

• HTML Elements are made of:
• Element name within angle brackets (opening and closing)
• Attributes inside the opening angle brackets (name=”value”) pairs
• Content between the opening and closing angle brackets

INTRODUCTION TO HTML

HTML ELEMENTS

• HTML Elements are made of element name (required), attributes (optional), and content (optional)

INTRODUCTION TO HTML

INTRODUCTION TO CSS

(CASCADING STYLE SHEETS)

• Standard Style sheet language to describe presentation of markup document (HTML)
• CSS document consists of style rules
• CSS files end with .css

https://en.wikipedia.org/wiki/CSS

CSS Style rule consists of:

• Selector to identify the HTML element(s)
• Declaration in property:value pairs to describe the presentation

https://en.wikipedia.org/wiki/CSS

CSS STYLE RULES

INTRODUCTION TO CSS

• Style rule consists of selector and declaration (property:value)

CSS STYLE RULES

INTRODUCTION TO CSS

INTRODUCTION TO JAVASCRIPT

• Programming language for the World Wide Web
• Will only be used minimally for this workshop to make some parts more interactive

https://worldvectorlogo.com/logo/javascript-1

INTRODUCTION TO HTML, CSS, AND JAVASCRIPT

• This workshop is very short. Only gives a very short tour of what HTML, CSS, and JavaScript are
• You can take CMPT 272 if you want to strengthen your HTML, CSS, and JavaScript fundamentals. (CMPT 276 with Bobby Chan but less focused).
• Alternatively, heavily recommend FreeCodeCamp (https://www.freecodecamp.org/) to focus on HTML, CSS, and JavaScript. It’s an interactive playground, hands-on, and have certificates if this motivates you

RESOURCES

How to Build a Junior Developer Portfolio That Will Get You Hired

Building an Effective Dev Portfolio (Free E-Book)

https://www.joshwcomeau.com/css/custom-css-reset/

​