HTML_CSS_JS Workshop
0 likes31 views
The document serves as an introduction to front-end development, covering HTML, CSS, and JavaScript basics. HTML is presented as the fundamental markup language for creating web pages, while CSS is used for styling and JavaScript for programming page behavior. It also includes best practices for accessibility in HTML and a brief guide on variable declaration and functions in JavaScript.
HTML_CSS_JS Workshop
- 1. Frontend Basics An intro to HTML/CSS & JS! By Brian Zhang
- 2. HTML An intro to HTML CSS An intro to CSS JavaScript An intro to JavaScript Today’s Agenda Coding Demonstration Coding a basic webpage
- 3. HTML What’s HTML? Elements, attributes, and more! Learn more here: www.w3schools.com/html
- 4. 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!
- 5. HTML Basics All HTML documents begin with a <!DOCTYPE html> declaration, followed by <html>, <head>, and <body> elements. An HTML element is defined 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">).
- 6. 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.)
- 7. CSS What’s CSS? Selectors, declarations, and more! Learn more here: www.w3schools.com/css
- 8. 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).
- 9. 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, float, 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.
- 10. The Box Model
- 11. JavaScript What’s JavaScript? Arrow functions, variables, and more! Learn more here: www.w3schools.com/js
- 12. What is Javascript? JavaScript is a programming language that is used to define 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.
- 13. 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
- 14. Data Types Data types define the type of a variable. JavaScript is not strongly-typed language, meaning the same variable can hold different values.
- 15. 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() {}”!
- 16. Now Let’s Code!
- 17. 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.