Front-end development involves building the elements of a website that users interact with directly. This document provides an overview of HTML, CSS, semantic markup, responsive design, and tools for front-end development. It defines HTML as the standard markup language for web pages and CSS as the style sheet language used to describe document formatting. Semantic HTML uses meaningful markup to reinforce content semantics rather than just presentation. Responsive design approaches like separate files or media queries allow content to adapt to different devices. Development tools like Chrome DevTools, WebStorm IDE, and Grunt help automate tasks.
9. 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>
12. 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>
15. W3C standards
Web Design and Applications
Web of Devices
Web Architecture
Semantic Web
XML Technology
Web of Services
Browsers and Authoring Tools
16. 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>
25. 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
45. 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
48. 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
53. 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/
54.
55. 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/