Scribd
Upload
2 views

HTML_CSS_JS_Booklet

This document is a beginner's guide to HTML, CSS, and JavaScript, outlining the basics of each language and providing essential tags and syntax. It includes practice exercises for creating simple web pages, styling them, and adding interactivity with JavaScript. Additionally, it features a mini project to build a personal portfolio website and includes flashcards and a cheat sheet for quick reference.

Uploaded by

joeyghschoolboy
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

HTML_CSS_JS_Booklet

This document is a beginner's guide to HTML, CSS, and JavaScript, outlining the basics of each language and providing essential tags and syntax. It includes practice exercises for creating simple web pages, styling them, and adding interactivity with JavaScript. Additionally, it features a mini project to build a personal portfolio website and includes flashcards and a cheat sheet for quick reference.

Uploaded by

joeyghschoolboy
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Complete Beginner's Guide to HTML, CSS, and JavaScript

HTML Basics

HTML (HyperText Markup Language) is the standard language used to create web pages.

Here are some essential tags:

- <html>: Root of the HTML document

- <head>: Contains metadata and links to CSS or JS files

- <title>: Sets the title of the web page

- <body>: Contains the content of the web page

- <h1> to <h6>: Headings

- <p>: Paragraph

- <a href="">: Anchor/link

- <img src="" alt="">: Image tag

- <ul>, <ol>, <li>: Lists

- <table>, <tr>, <td>: Table structure

Practice Exercise:

1. Create a simple HTML page with a heading, paragraph, image, and a link.

2. Make a list of your three favorite websites using <ul> and <li>.

CSS Basics

CSS (Cascading Style Sheets) is used to style HTML content.

Basic syntax:

selector {

property: value;

Examples:

- body { background-color: lightblue; }

- h1 { color: navy; }

- p { font-size: 16px; }

Practice Exercise:
Complete Beginner's Guide to HTML, CSS, and JavaScript

1. Change the background color of your HTML page.

2. Style your heading with a new color and center it.

JavaScript Basics

JavaScript is a programming language used to add interactivity to websites.

Key Concepts:

- Variables: let, const, var

- Functions: function myFunc() {}

- Events: onclick, onmouseover

- DOM: document.getElementById("demo").innerHTML = "Hello!";

Practice Exercise:

1. Create a button that shows an alert when clicked.

2. Change the text of a paragraph using JavaScript.

Sample Code:

<button onclick="alert('Hello!')">Click Me</button>

<p id="demo">Old Text</p>

<script>

document.getElementById("demo").innerHTML = "New Text";

</script>

Mini Project: Personal Portfolio Website

Use HTML, CSS, and JavaScript to create a simple personal portfolio.

Sections to include:

- About Me

- My Skills

- My Projects

- Contact Info

Try using CSS Grid or Flexbox for layout and JavaScript for interactive elements like form validation or dark
Complete Beginner's Guide to HTML, CSS, and JavaScript

mode.

Flashcards

Q: What does HTML stand for?

A: HyperText Markup Language

Q: How do you change text color in CSS?

A: Use the 'color' property. Example: h1 { color: red; }

Q: How do you write a function in JavaScript?

A: function myFunction() { }

Q: What does the DOM stand for?

A: Document Object Model

Cheat Sheet

HTML:

- <h1> to <h6>: Headings

- <a href="">: Link

- <img src="">: Image

CSS:

- selector { property: value; }

- color, background-color, font-size

JavaScript:

- let x = 5;

- function greet() { alert("Hi"); }

- document.getElementById("id")

You might also like