SlideShare a Scribd company logo
FRONT-END DEVELOPMENT,
PART 1: HTML/CSS
_by Oleksii Prohonnyi
Front-end development introduction (HTML, CSS). Part 1
Who am I
Oleksii Prohonnyi
Tech. lead @ Sigma Software
 4+ years in IT
 2 technologies
 13 mentees
 60+ interviews
Front-end development introduction (HTML, CSS). Part 1
FRONT-END
Front-end development
is the development of those elements
of a website that the customer sees
and interacts with directly.
<wikipedia.org>
HTML
Front-end development introduction (HTML, CSS). Part 1
HTML (HyperText Markup Language)
is the standard markup language used
to create web pages. It is written in the
form of HTML elements consisting of
tags enclosed in angle brackets (like
<html> ).
<wikipedia.org>
CSS
Front-end development introduction (HTML, CSS). Part 1
CSS (Cascading Style Sheets)
is a style sheet language used for
describing the look and formatting of a
document written in a markup
language.
<wikipedia.org>
SEMANTIC HTML/CSS
Front-end development introduction (HTML, CSS). Part 1
W3C standards
 Web Design and Applications
 Web of Devices
 Web Architecture
 Semantic Web
 XML Technology
 Web of Services
 Browsers and Authoring Tools
Semantic HTML/CSS
is the use of HTML markup to reinforce the
semantics, or meaning, of the information in
webpages rather than merely to define its
presentation or look. Semantic HTML is
processed by regular web browsers as well
as by many other user agents. CSS is used
to suggest its presentation to human users.
<wikipedia.org>
W3C SEMANTIC
VALIDATION SERVICES
Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1
DEMO
(check http://foodsense.is/ in w3c validators online)
Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1
HTML5
Front-end development introduction (HTML, CSS). Part 1
HTML5 features
 New Doctype
 The Figure Element
 No More Types for Scripts and Links
 To Quote or Not to Quote
 Make your Content Editable
 Custom Inputs (Regular Expressions)
 Placeholders
 The Semantic Header and Footer
 Audio/ Video Support
 The Data Attribute
See more: tutsplus.com
DEMO
(open example from file)
CSS3
Front-end development introduction (HTML, CSS). Part 1
CSS3 features
 CSS Animations and Transitions
 Calculating Values With calc()
 Advanced Selectors
 Generated Content and Counters
 Gradients
 Box Sizing
 Border Images
 Media Queries
 Multiple Backgrounds
 CSS 3D Transforms
See more: tutorialzine.com
DEMO
(open example from file)
MULTI-DEVICE
SUPPORT
Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1
RESPONSIVE DESIGN
Front-end development introduction (HTML, CSS). Part 1
Device dependent styles
 Separate HTML file for each device
 JavaScript (Navigator DOM object analysis) scripting
 @media queries css3 styles
RESPONSIVE DESIGN
SEPARATE HTML FILE
Separate html file approach
 index.html + desktop.css = desktop version
 tablet.html + tablet.css = tablet version
 phone.html + phone.css = phone version
RESPONSIVE DESIGN
JAVASCRIPT
JavaScript approach
 index.html
 desktop.css + tablet.css + phone.css
 main.js (check device)
RESPONSIVE DESIGN
@MEDIA QUERIES
@Media queries
 index.html
 Responsive.css
 <No JavaScript>
Front-end development introduction (HTML, CSS). Part 1
DEMO
(open example from file)
Browser’s CSS compatibility
 "Can I use" provides up-to-date browser support tables
for support of front-end web technologies on desktop
and mobile web browsers.
 http://caniuse.com
CHROME DEV TOOLS
Front-end development introduction (HTML, CSS). Part 1
Chrome Developer Tools
 (DevTools for short), are a set of web authoring and
debugging tools built into Google Chrome. The DevTools
provide web developers deep access into the internals of
the browser and their web application.
 https://developer.chrome.com/devtools
DEMO
(try emulation, html/css debugging, profiling features on
http://foodsense.is/ website)
Front-end development introduction (HTML, CSS). Part 1
DEVELOPMENT TOOLS
Front-end development introduction (HTML, CSS). Part 1
JetBrains WebStorm IDE
 A lightweight yet powerful IDE, perfectly equipped for
complex client-side development and server-side
development with Node.js.
 https://www.jetbrains.com/webstorm/
Front-end development introduction (HTML, CSS). Part 1
Grunt tasks runner
 In one word: automation. The less work you have to do
when performing repetitive tasks like minification,
compilation, unit testing, linting, etc, the easier your job
becomes.
 http://gruntjs.com/
DEMO
(try by yourself WebStorm IDE and grunt task runner)
ONE MORE THING
Front-end development introduction (HTML, CSS). Part 1
"Life is like riding a
bicycle. To keep your
balance, you must
keep moving."
- Albert Einstein
REFERENCES
References
 developer.mozilla.org
 w3schools.com
 css-tricks.com
 html5rocks.com
 Presentation sources: github.com
Front-end development introduction (HTML, CSS). Part 1
Oleksii Prohonnyi
linkedin.com/in/oprohonnyi
slideshare.net/oprohonnyi

More Related Content

What's hot (20)

PDF
Web Development Presentation
TurnToTech
 
ODP
The Full Stack Web Development
Sam Dias
 
PPTX
Web Development
Aditya Raman
 
PPT
Web Application Introduction
shaojung
 
PPTX
Html5 tutorial for beginners
Singsys Pte Ltd
 
PPT
Html presentation
Amber Bhaumik
 
PPTX
Introduction to Web Development
Parvez Mahbub
 
PPT
Web Development using HTML & CSS
Shashank Skills Academy
 
PPTX
Web development using javaScript, React js, Node js, HTML, CSS and SQL
Jayant Surana
 
PPTX
Front-End Web Development
Yash Sati
 
PPT
Web development | Derin Dolen
Derin Dolen
 
PPTX
Full stack web development
Crampete
 
PDF
Nodejs presentation
Arvind Devaraj
 
PPT
Ppt of web development
bethanygfair
 
PPTX
Development of Mobile Application -PPT
Dhivya T
 
PDF
Introduction to web development
Mohammed Safwat
 
PPTX
Difference between-web-designing-and-web-development
Global Media Insight
 
PPTX
HTML
chinesebilli
 
PPTX
Introduction to Web Architecture
Chamnap Chhorn
 
PDF
Web Designing Presentation
RahulSuri30
 
Web Development Presentation
TurnToTech
 
The Full Stack Web Development
Sam Dias
 
Web Development
Aditya Raman
 
Web Application Introduction
shaojung
 
Html5 tutorial for beginners
Singsys Pte Ltd
 
Html presentation
Amber Bhaumik
 
Introduction to Web Development
Parvez Mahbub
 
Web Development using HTML & CSS
Shashank Skills Academy
 
Web development using javaScript, React js, Node js, HTML, CSS and SQL
Jayant Surana
 
Front-End Web Development
Yash Sati
 
Web development | Derin Dolen
Derin Dolen
 
Full stack web development
Crampete
 
Nodejs presentation
Arvind Devaraj
 
Ppt of web development
bethanygfair
 
Development of Mobile Application -PPT
Dhivya T
 
Introduction to web development
Mohammed Safwat
 
Difference between-web-designing-and-web-development
Global Media Insight
 
Introduction to Web Architecture
Chamnap Chhorn
 
Web Designing Presentation
RahulSuri30
 

Viewers also liked (20)

PDF
Modern Front-End Development
mwrather
 
PDF
Understand front end developer
Hsuan Fu Lien
 
PDF
Professional Front End Development
nelsonmenezes
 
PDF
Modern front end development
Tomislav Mesić
 
PDF
Front End Best Practices
Holger Bartel
 
PPTX
HTML CSS and Web Development
Rahul Mishra
 
PPTX
Building a Best-in-Class Economic Development Website
Atlas Integrated
 
PPTX
Website development-Design solution for any business
MT Web Technologies
 
PPT
introduction to web technology
vikram singh
 
PPTX
Web application architecture
Tejaswini Deshpande
 
PDF
Introduction to HTML and CSS
Mario Hernandez
 
PPTX
Css presentation lecture 1
Mudasir Syed
 
KEY
Front end engineering, YUI Gallery, and your future
Luke Smith
 
PPTX
Front-End Intelligence
Judy T Raj
 
PPTX
(Fast) Introduction to HTML & CSS
Dave Kelly
 
PPT
Introduction To Web Design
Ermilo John Gialogo
 
PPTX
Basic concepts for python web development
NexSoftsys
 
PDF
Front-End Frameworks: a quick overview
Diacode
 
PDF
Front End Development in Magento
Eric Landmann
 
PPT
Website with HTML CSS
Things Lab
 
Modern Front-End Development
mwrather
 
Understand front end developer
Hsuan Fu Lien
 
Professional Front End Development
nelsonmenezes
 
Modern front end development
Tomislav Mesić
 
Front End Best Practices
Holger Bartel
 
HTML CSS and Web Development
Rahul Mishra
 
Building a Best-in-Class Economic Development Website
Atlas Integrated
 
Website development-Design solution for any business
MT Web Technologies
 
introduction to web technology
vikram singh
 
Web application architecture
Tejaswini Deshpande
 
Introduction to HTML and CSS
Mario Hernandez
 
Css presentation lecture 1
Mudasir Syed
 
Front end engineering, YUI Gallery, and your future
Luke Smith
 
Front-End Intelligence
Judy T Raj
 
(Fast) Introduction to HTML & CSS
Dave Kelly
 
Introduction To Web Design
Ermilo John Gialogo
 
Basic concepts for python web development
NexSoftsys
 
Front-End Frameworks: a quick overview
Diacode
 
Front End Development in Magento
Eric Landmann
 
Website with HTML CSS
Things Lab
 
Ad

Similar to Front-end development introduction (HTML, CSS). Part 1 (20)

PPSX
web devs ppt.ppsx
AsendraChauhan1
 
PDF
Best Web Development Courses - Classes in Pune | Web Development Classes in ...
Swati Pardeshi
 
PPTX
Best Web Development Courses - Classes in Pune | Web Development Classes in ...
Swati Pardeshi
 
PDF
A Complete Guide to Frontend - UI Developer
nariyaravi
 
PPTX
It ppt.pptx
GurupreetSinghArora1
 
PDF
C language
omprakash810
 
PDF
C language
omprakash810
 
PDF
C language
omprakash810
 
PPTX
C language
omprakash810
 
PPTX
C language
omprakash810
 
PPT
Web designing and publishing computer studies theory lesson
Mukalele Rogers
 
PDF
Web Design & Development Courses in Pune | 3DOT Technologies
abeda786
 
PPTX
ashish ppt webd.pptx
ashishsaini773461
 
PDF
Web Designing Training In Chandigarh
Excellence Academy
 
PDF
3 dot technologies by deepak modi
Deepak Modi
 
PPTX
3 dot technologies by deepak modi
Deepak Modi
 
PDF
Web Dev - 1 PPT.pdf
gdsczhcet
 
PPTX
Web designing and development
SHIVANI CHANDEL
 
PDF
Web Design & Development Courses in Pune| 3DOT Technologies
abeda786
 
PPT
Websites Unlimited - Pay Monthly Websites
websiteunlimited
 
web devs ppt.ppsx
AsendraChauhan1
 
Best Web Development Courses - Classes in Pune | Web Development Classes in ...
Swati Pardeshi
 
Best Web Development Courses - Classes in Pune | Web Development Classes in ...
Swati Pardeshi
 
A Complete Guide to Frontend - UI Developer
nariyaravi
 
C language
omprakash810
 
C language
omprakash810
 
C language
omprakash810
 
C language
omprakash810
 
C language
omprakash810
 
Web designing and publishing computer studies theory lesson
Mukalele Rogers
 
Web Design & Development Courses in Pune | 3DOT Technologies
abeda786
 
ashish ppt webd.pptx
ashishsaini773461
 
Web Designing Training In Chandigarh
Excellence Academy
 
3 dot technologies by deepak modi
Deepak Modi
 
3 dot technologies by deepak modi
Deepak Modi
 
Web Dev - 1 PPT.pdf
gdsczhcet
 
Web designing and development
SHIVANI CHANDEL
 
Web Design & Development Courses in Pune| 3DOT Technologies
abeda786
 
Websites Unlimited - Pay Monthly Websites
websiteunlimited
 
Ad

More from Oleksii Prohonnyi (20)

PPTX
Utility libraries to make your life easier
Oleksii Prohonnyi
 
PPTX
Dive into Angular, part 4: Angular 2.0
Oleksii Prohonnyi
 
PPTX
Dive into Angular, part 5: Experience
Oleksii Prohonnyi
 
PPTX
Dive into Angular, part 3: Performance
Oleksii Prohonnyi
 
PPTX
Dive into Angular, part 2: Architecture
Oleksii Prohonnyi
 
PPTX
Dive into Angular, part 1: Introduction
Oleksii Prohonnyi
 
PPTX
Cycle.js overview
Oleksii Prohonnyi
 
PPTX
Moment.js overview
Oleksii Prohonnyi
 
PPTX
Bower introduction
Oleksii Prohonnyi
 
PPTX
JavaScript Presentation Frameworks and Libraries
Oleksii Prohonnyi
 
PPTX
Introduction to D3.js
Oleksii Prohonnyi
 
PPTX
Conference DotJS 2015 Paris review
Oleksii Prohonnyi
 
PPTX
Asm.js introduction
Oleksii Prohonnyi
 
PPTX
Code review process with JetBrains UpSource
Oleksii Prohonnyi
 
PPTX
D3.JS Tips & Tricks (export to svg, crossfilter, maps etc.)
Oleksii Prohonnyi
 
PPTX
OpenLayer's basics
Oleksii Prohonnyi
 
PPTX
Front-end rich JavaScript application creation (Backbone.js)
Oleksii Prohonnyi
 
PPTX
Как создать сайт за 2 часа? (Wordpress)
Oleksii Prohonnyi
 
PPT
Разработка веб-сайта. Сайт. Зачем он?
Oleksii Prohonnyi
 
PPTX
Google Chrome DevTools features overview
Oleksii Prohonnyi
 
Utility libraries to make your life easier
Oleksii Prohonnyi
 
Dive into Angular, part 4: Angular 2.0
Oleksii Prohonnyi
 
Dive into Angular, part 5: Experience
Oleksii Prohonnyi
 
Dive into Angular, part 3: Performance
Oleksii Prohonnyi
 
Dive into Angular, part 2: Architecture
Oleksii Prohonnyi
 
Dive into Angular, part 1: Introduction
Oleksii Prohonnyi
 
Cycle.js overview
Oleksii Prohonnyi
 
Moment.js overview
Oleksii Prohonnyi
 
Bower introduction
Oleksii Prohonnyi
 
JavaScript Presentation Frameworks and Libraries
Oleksii Prohonnyi
 
Introduction to D3.js
Oleksii Prohonnyi
 
Conference DotJS 2015 Paris review
Oleksii Prohonnyi
 
Asm.js introduction
Oleksii Prohonnyi
 
Code review process with JetBrains UpSource
Oleksii Prohonnyi
 
D3.JS Tips & Tricks (export to svg, crossfilter, maps etc.)
Oleksii Prohonnyi
 
OpenLayer's basics
Oleksii Prohonnyi
 
Front-end rich JavaScript application creation (Backbone.js)
Oleksii Prohonnyi
 
Как создать сайт за 2 часа? (Wordpress)
Oleksii Prohonnyi
 
Разработка веб-сайта. Сайт. Зачем он?
Oleksii Prohonnyi
 
Google Chrome DevTools features overview
Oleksii Prohonnyi
 

Recently uploaded (20)

PPTX
2025 Completing the Pre-SET Plan Form.pptx
mansk2
 
PPTX
F-BLOCK ELEMENTS POWER POINT PRESENTATIONS
mprpgcwa2024
 
PPT
M&A5 Q1 1 differentiate evolving early Philippine conventional and contempora...
ErlizaRosete
 
PPTX
Peer Teaching Observations During School Internship
AjayaMohanty7
 
PPTX
How to Configure Taxes in Company Currency in Odoo 18 Accounting
Celine George
 
PDF
Free eBook ~100 Common English Proverbs (ebook) pdf.pdf
OH TEIK BIN
 
PDF
CAD25 Gbadago and Fafa Presentation Revised-Aston Business School, UK.pdf
Kweku Zurek
 
PPTX
How Physics Enhances Our Quality of Life.pptx
AngeliqueTolentinoDe
 
PDF
Learning Styles Inventory for Senior High School Students
Thelma Villaflores
 
PDF
Nanotechnology and Functional Foods Effective Delivery of Bioactive Ingredien...
rmswlwcxai8321
 
PDF
COM and NET Component Services 1st Edition Juval Löwy
kboqcyuw976
 
PPTX
Aerobic and Anaerobic respiration and CPR.pptx
Olivier Rochester
 
PPTX
Comparing Translational and Rotational Motion.pptx
AngeliqueTolentinoDe
 
PDF
Public Health For The 21st Century 1st Edition Judy Orme Jane Powell
trjnesjnqg7801
 
PPTX
Iván Bornacelly - Presentation of the report - Empowering the workforce in th...
EduSkills OECD
 
DOCX
MUSIC AND ARTS 5 DLL MATATAG LESSON EXEMPLAR QUARTER 1_Q1_W1.docx
DianaValiente5
 
PDF
Wikinomics How Mass Collaboration Changes Everything Don Tapscott
wcsqyzf5909
 
PPTX
Photo chemistry Power Point Presentation
mprpgcwa2024
 
PDF
Romanticism in Love and Sacrifice An Analysis of Oscar Wilde’s The Nightingal...
KaryanaTantri21
 
PPTX
How to Setup Automatic Reordering Rule in Odoo 18 Inventory
Celine George
 
2025 Completing the Pre-SET Plan Form.pptx
mansk2
 
F-BLOCK ELEMENTS POWER POINT PRESENTATIONS
mprpgcwa2024
 
M&A5 Q1 1 differentiate evolving early Philippine conventional and contempora...
ErlizaRosete
 
Peer Teaching Observations During School Internship
AjayaMohanty7
 
How to Configure Taxes in Company Currency in Odoo 18 Accounting
Celine George
 
Free eBook ~100 Common English Proverbs (ebook) pdf.pdf
OH TEIK BIN
 
CAD25 Gbadago and Fafa Presentation Revised-Aston Business School, UK.pdf
Kweku Zurek
 
How Physics Enhances Our Quality of Life.pptx
AngeliqueTolentinoDe
 
Learning Styles Inventory for Senior High School Students
Thelma Villaflores
 
Nanotechnology and Functional Foods Effective Delivery of Bioactive Ingredien...
rmswlwcxai8321
 
COM and NET Component Services 1st Edition Juval Löwy
kboqcyuw976
 
Aerobic and Anaerobic respiration and CPR.pptx
Olivier Rochester
 
Comparing Translational and Rotational Motion.pptx
AngeliqueTolentinoDe
 
Public Health For The 21st Century 1st Edition Judy Orme Jane Powell
trjnesjnqg7801
 
Iván Bornacelly - Presentation of the report - Empowering the workforce in th...
EduSkills OECD
 
MUSIC AND ARTS 5 DLL MATATAG LESSON EXEMPLAR QUARTER 1_Q1_W1.docx
DianaValiente5
 
Wikinomics How Mass Collaboration Changes Everything Don Tapscott
wcsqyzf5909
 
Photo chemistry Power Point Presentation
mprpgcwa2024
 
Romanticism in Love and Sacrifice An Analysis of Oscar Wilde’s The Nightingal...
KaryanaTantri21
 
How to Setup Automatic Reordering Rule in Odoo 18 Inventory
Celine George
 

Front-end development introduction (HTML, CSS). Part 1