Scribd
Upload
3 views

Data Structures

The document provides an overview of front-end development, detailing core technologies such as HTML, CSS, and JavaScript, along with their evolution. It also discusses popular frameworks like Bootstrap and ReactJS, essential skills for front-end developers, and version control using Git. The content is structured to educate readers on the foundational aspects and tools used in front-end development.

Uploaded by

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

Data Structures

The document provides an overview of front-end development, detailing core technologies such as HTML, CSS, and JavaScript, along with their evolution. It also discusses popular frameworks like Bootstrap and ReactJS, essential skills for front-end developers, and version control using Git. The content is structured to educate readers on the foundational aspects and tools used in front-end development.

Uploaded by

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

Front-End

Developme
nt

By :
Aliyeva Khanim, Aliyeva Samaya
Javadzadeh Fatima, Gurbanova Laman
What is Front-
End
Development?
C ONTENT
01 02 03
HTML CSS JAVASCRIPT

04 05 06
FRAMEWORKS VERSION DEVELOPER
CONTROL SKILLS
0
1
Core
Front-End
Technologie
s
Core Front-End Technologies

Organizes content into headings,


HTML
paragraphs, lists, etc.

Controls layout, colors, fonts, and


CSS responsiveness..

Manages user input, animations, and


JS
dynamic content updates.
Example of HTML
1.HTML 1.0 (1993) - The first version of HTML,
designed for basic text and links.
2.HTML 2.0 (1995) - Standardized early web
features like forms and tables.
3.HTML 3.2 (1997) - Introduced scripting support
and visual formatting.
4.HTML 4.01 (1999) - Focused on separating
content (HTML) from style (CSS).
5. HTML5 (2014) - Added semantic tags,
multimedia support, and modern web
capabilities.
Example of CSS
1.CSS 1 (1996) - The first version, providing
basic styling like fonts, colors, and text
alignment.
2.CSS 2 (1998) - Introduced positioning, z-
index, and media types for screen and print.
3.CSS 2.1 (2011) - An updated version of CSS
2 with bug fixes and improved browser support.
4.CSS3 (1999–present) - Modularized
development with features like transitions,
animations, flexbox, grid, and media queries for
responsive design.
Example of JavaScript
1.JavaScript (1995) - Created to add
interactivity to web pages.
2.ECMAScript 3 (1999) - Introduced regular
expressions and error handling.
3.ECMAScript 5 (2009) - Added strict mode
and JSON support.
4.ECMAScript 6 (2015) - Major update with
let, const, classes, and promises.
5.ECMAScript 8 (2017) - Introduced
async/await for asynchronous programming.
01
HTML Basics
Tags & Elements
Tags and
Elements: <html>
<head>

HTML <body>
<div>

<img>
02
CSS Basics
Class,id, borders,margin, etc.
CSS Basics

Selector Box Flexbox


s Model & Grid

Margin, Flex, display, inline,


Class, id etc.
padding,border block etc.
Layout :
03
JS Basics
Variables, functions, events etc.
JavaScript Basics

DOM
Syntax Manipula Events
-tion

Variables ,
Modifying elements Clicks, press, scrolls
functions, etc.
0
2 Libraries
&
Frameworks
Bootstrap
•Bootstrap is a popular front-end framework
developed by Twitter in 2011 for building
responsive and mobile-first websites.
•It provides pre-designed components like
buttons, modals, and navigation bars, which
are easy to customize.
•The framework includes a grid system that
simplifies creating flexible, responsive layouts.
•Bootstrap uses CSS and JavaScript and
supports integration with libraries like jQuery
and Popper.js.
•It’s widely adopted for its simplicity and
speed, especially for prototyping and small
projects.
React JS
•ReactJS, developed by Facebook in 2013, is a
JavaScript library for building user interfaces.
•It focuses on a component-based architecture,
where UI elements are reusable and
independent.
•React uses a virtual DOM, which improves
performance by updating only the necessary
parts of the real DOM.
•React supports one-way data flow, making
debugging easier and data more predictable.
•It powers many major applications, such as
Facebook, Instagram, and Netflix.
0
3 Front-End
Developer
Skills
Here are
some skills:
•Design Thinking

•Collaboration

•Testing

•Web Performance

• Optimization

•Cross-Browser Compatibility
0
4
Version
control
GIT
Common Git
Commands
Command Description
git init Initializes a new Git repository
git clone <url> Clones an existing repository
git add <file> Stages changes for the next commit
Commits staged changes with a
git commit -m "msg"
message
git push Pushes changes to a remote repository
Fetches and merges changes from a
git pull
remote repo
Displays the status of changes in the
git status
working area
git branch Lists, creates, or deletes branches
git checkout <branch> Switches to a different branch
Git Features
• Branching: Allows you to work on
different features simultaneously.

• Merging: Combines changes from


multiple branches.

• Distributed: Every developer has a full


history of the project.
Front-End
Project
HTML
Part:
CSS Part:
JavaScript Part:
Thanks
for your
attention!
CREDITS: This presentation template was created
by Slidesgo, including icons by Flaticon, and
infographics & images by Freepik

You might also like