Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HSHacks Intro to HTML/CSS/JS Workshop

Avatar for husein3twelve husein3twelve
December 17, 2024
0
14

HSHacks Intro to HTML/CSS/JS Workshop

**Hosted By: Husein Kareem**

In this workshop, you’ll learn the basics of **HTML, CSS,** and **JS/jQuery** to build a **custom website!**

Here’s what the final product looks like:

![sf-demo.gif](https://prod-files-secure.s3.us-west-2.amazonaws.com/907ccfe0-83bf-4a96-a198-d0285ebd5be2/133f75a4-18b2-433c-ad5d-da619bfe4fc3/sf-demo.gif)

🕙 This workshop will take one hour.

💻 This workshop requires **no prior coding experience.**

🖐️ Ask questions and customize your website as you code!

https://herseyhacks.notion.site/HSHacks-Intro-to-HTML-CSS-JS-Workshop-03cae45deee644cb9fe68db95a1e2017

Avatar for husein3twelve

husein3twelve

December 17, 2024
Tweet

More Decks by husein3twelve

See All by husein3twelve
Uncharted Learning Vokal Presentation
Avatar for husein3twelve husein3twelve
0
74

Featured

See All Featured
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.4k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
302
21k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
43
7.5k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
272
27k
Making Projects Easy
Avatar for Brett Harned brettharned
117
6.4k
Docker and Python
Avatar for Tania Allard trallard
45
3.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
13k
Visualization
Avatar for Eitan Lees eitanlees
148
16k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
30
9.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
910
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
45
7.6k

Transcript

  1. HSHacks Workshop Intro to HTML, CSS, JS

  2. Replit.com

  3. Front-End Development Front-end development is like crafting the user's digital

    experience. It involves coding the visual and interactive parts of websites or apps using languages like HTML, CSS, and JavaScript. It's all about making things look great and function smoothly for users to enjoy.

  4. HTML, or HyperText Markup Language, forms the backbone of web

    development, providing the structure and content for web pages. Document Structure: An HTML document typically consists of several main sections: • <!DOCTYPE html>: Declares the document type and version of HTML being used. • <html>: The root element that wraps all content on the webpage. • <head>: Contains metadata about the document, such as its title, character encoding, and links to external resources like CSS and JavaScript files. • <body>: Contains the main content of the webpage, including text, images, links, and other elements. HTML Overview

  5. HTML continue • Elements, Tags, and Attributes. • Common html

    tags: ◦ <h1>, <h2>, <h3>, etc.: Define headings of different levels ◦ <p>Defines a paragraph</p> ◦ <a>: Defines a hyperlink ◦ <img>: Defines an image ◦ <div>: Defines a division or section

  6. CSS Overview CSS, or Cascading Style Sheets, is a language

    used to describe the presentation of HTML elements on a webpage. It allows you to control the layout, colors, fonts, and other visual aspects of a webpage.

  7. CSS continue • Selectors are used to target HTML elements,

    inside Declaration Blocks Properties and Values define the visual characteristics of elements. • External, Internal, and Inline Styles: CSS can be applied to HTML documents in three ways: ◦ External: CSS is stored in a separate file and linked to the HTML document using the <link> element. ◦ Internal: CSS is placed within a <style> element in the HTML document's <head> section. ◦ Inline: CSS is applied directly to individual HTML elements using the style attribute.

  8. Inspect Page Source The inspect source tool is incredibly helpful

    for developers and designers. It allows you to delve into the structure, styles, and scripts of a webpage in real-time. With it, you can debug issues, test changes instantly, and learn from others' code. It's like peeking behind the curtain of the web, empowering you to understand and manipulate elements effortlessly.

  9. JS + jQuery Basics JavaScript is a versatile programming language

    primarily used for creating dynamic and interactive content on webpages. jQuery is a fast, small, and feature-rich JavaScript library that simplifies HTML document traversing, event handling, animating, and AJAX interactions for rapid web development.

  10. Helpful Resources - HTML Tag Reference → https://www.w3schools.com/tags/ - CSS

    Tutorial → https://www.w3schools.com/css/default.asp - Google.com - ChatGPT - jQuery Tutorial → https://www.w3schools.com/jquery/default.asp - Learn JavaScript on Codecademy → https://www.codecademy.com/catalog/language/javascript

  11. Thanks! Contact us: Vizuals LLC 2045 W Grand Ave Ste

    B # 14381, Chicago, IL, 60612-1577, US [email protected] vizuals.io