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

FRONT-END DEVELOPMENT,
PART 1: HTML/CSS
_by Oleksii Prohonnyi

Who am I
Oleksii Prohonnyi
Tech. lead @ Sigma Software
 4+ years in IT
 2 technologies
 13 mentees
 60+ interviews

Front-end development
is the development of those elements
of a website that the customer sees
and interacts with directly.
<wikipedia.org>

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 (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>

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

DEMO
(check http://foodsense.is/ in w3c validators online)

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

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

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

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>

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 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)

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/

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)

"Life is like riding a
bicycle. To keep your
balance, you must
keep moving."
- Albert Einstein

References
 developer.mozilla.org
 w3schools.com
 css-tricks.com
 html5rocks.com
 Presentation sources: github.com

Oleksii Prohonnyi
linkedin.com/in/oprohonnyi
slideshare.net/oprohonnyi

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

More Related Content

What's hot (20)

Viewers also liked (20)

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

More from Oleksii Prohonnyi (20)

Recently uploaded (20)

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