Scribd
Upload
12 views9 pages

Week 1.1

This document introduces a web development course covering HTML, CSS, and JavaScript. It outlines the practical skills, career opportunities, and creative problem-solving benefits of learning web development, as well as the roles of front-end, back-end, and full-stack developers. Additionally, it provides basic examples of HTML, CSS, and JavaScript to illustrate their use in web development.

Uploaded by

khateranazari815
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views9 pages

Week 1.1

This document introduces a web development course covering HTML, CSS, and JavaScript. It outlines the practical skills, career opportunities, and creative problem-solving benefits of learning web development, as well as the roles of front-end, back-end, and full-stack developers. Additionally, it provides basic examples of HTML, CSS, and JavaScript to illustrate their use in web development.

Uploaded by

khateranazari815
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

WELCOME :)

week 1
session 1
Introduction to web
development with
HTML, CSS, and
JavaScript
Why you should learn this course?

● Practical Skills: Learn HTML, CSS, and JavaScript to build responsive, user-friendly websites.
● Career Opportunities: Gain in-demand web development skills for roles in front-end, UI/UX,
and full-stack.
● Creative Problem-Solving: Develop solutions while bringing ideas to life through web design.

What you will learn this course?


● The fundamentals of the programing for the Web
● Roles of Front-end, Back-end, and Full- stack developers.
● Languages and tools used by web developers.
Different roles of Web developers

Full- Stack Developers

Front-end Developers Back- End Developers

Front-End Focus: Work on the Server-Side Logic: Manages the


client-side, handling what users see and functionality and logic behind the
interact with. website or app.
Specialize in Tools: Use HTML, CSS, Security & Authentication: Handles
JavaScript, and related frameworks to secure processes before sending data to
build the front-end. the client.
Introduction to
HTML Simple Example
<!DOCTYPE html> <html
● HTML Defined: Stands for Hypertext <!DOCTYPE
lang="en"> html>
<head> <meta
Markup Language, the core language of the <html lang="en">
charset="UTF-8"> <title>Intro to
<head>
HTML</title> </head> <body>
web.
<meta charset="UTF-8">
<h1>Hello Future Web
● Structure Web Pages: HTML is the <title>Intro to HTML</title>
Developers!</h1> <p>Welcome to
foundation for organizing content on the web. </head>
coding with TechBiz</p> </body>
● Easy to Learn: Simple syntax makes HTML <body>
</html>
<h1>Hello Future Web Developers!</h1>
beginner-friendly.
● Universal Language: Every website uses <p>Welcome to coding with TechBiz</p>
HTML to display content.
● HTML Elements: Content is organized with </body>
</html>
tags (e.g., paragraphs, lists) that browsers
render.
Introduction to
Simple Example
CSS <!DOCTYPE html> <html
<!DOCTYPE
lang="en">html>
<head> <meta
● What is CSS?: CSS (Cascading Style <htmlcharset="UTF-8">
lang="en"> <title>Intro to
Sheets) is used to style and design web <head>
HTML</title> </head> <body>
pages. <meta charset="UTF-8">
<h1>Hello Future Web
<title>Intro to CSS</title>
Developers!</h1> <p>Welcome to
● Visual Control: It controls layout, colors, <style>
coding with TechBiz</p> </body>
fonts, and overall appearance of HTML body { font-family: Arial; text-align:
</html>
content. center; }
● Responsive Design: CSS allows websites h1 { color: #333; }
</style>
to adapt to different screen sizes and </head>
devices. <body>
● Easy to Use: Simple syntax lets you <h1>Welcome to CSS!</h1>
</body>
quickly apply styles to multiple elements
</html>
Introduction to
JavaScript Simple Example
<!DOCTYPE
<!DOCTYPE html>html> <html
lang="en">
<html lang="en"> <head> <meta
● What is JavaScript?: A programming charset="UTF-8"> <title>Intro to
<head>
language that makes web pages interactive HTML</title>
<meta </head> <body>
charset="UTF-8">
and dynamic. <h1>HellotoFuture
<title>Intro Web
JavaScript</title>
Developers!</h1> <p>Welcome to
<script>
● Real-Time Changes: Allows you to update
coding with =TechBiz</p>
const name prompt("What's</body>
your
content, styles, and layout on the page without </html>
name?");
reloading. alert("Hello " + name + "! Welcome to
● User Interaction: Lets websites respond to JavaScript!");
actions like clicks and form submissions. </script>
</head>
● Essential for Web: A key language used in
<body>
almost every modern website, both for <h1>Welcome to JavaScript!</h1>
front-end and back-end development. </body>
</html>
Download VS.Code

● https://code.visualstudi
o.com/download
THANK
YOU!

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy