Introduction to Frontend Development - Session 1 - HTML Fundamentals
Post on 14-Jan-2015
671 Views
Preview:
DESCRIPTION
Transcript
Front-end development
Practical HTML, CSS and JavaScript
Session 1: HTML Fundamentals
Novice to professional
Agenda
● What is init Lab
● Scope of the course
● Choosing your text editor
● HTML basics
● Paragraphs, breaks and spaces
● Headings
● HTML tags overview
init Lab
● The first hackerspace in Bulgaria
● The place we'll be during the course
● A place to carry out courses and events
● A place to work on projects
● Meeting hackers' type of people
Follow the upcoming courses
● init Lab website courses section
● Subscribe in box for updates
● Take part in upcoming courses
● Become teacher/presenter yourself!
● HTML
● CSS
● JavaScript
The course does not include any programming language for server side operations. (i.e. PHP)
We'll be working only in the front-end area
Scope of the course
Request / response operations
CLIENT SERVER
PHP, MySQL, and other server-side languages and processes, that generate HTML and CSS
HTTP request
HTTP response
Processed HTML, JavaScript, images, files=> OUTPUT MARKUP
Front-end developers' responsibilities
CLIENT SERVER
PHP, MySQL, and other server-side languages and processes, that generate HTML and CSS
HTTP request
HTTP response
Processed HTML, JavaScript, images, files=> OUTPUT MARKUP
Front-end developers work mainly on the client side, and they are responsible for the styling and interaction of the output HTML
● Sublime Text or TextMate
● Notepad++, Aptana Studio, Komodo, etc.
● Dreamweaver - not recommended● What do you need
○ coloring of the code for easier debugging
○ auto-completion, zen coding, snippets
○ high speed of operation and easy to use interface
○ integrations and plugins marketplace/community
Choosing your text editor
Simple rule for using your editor:
Stick with your editor, and learn it very well!
Try as many editors as you like.
Don't jump from one editor to another.
Choosing your text editor
Sublime Text Editor (2)
Recommended editor
● Very fast and lightweight● Fast, smooth and smart auto-completion● Plugins available to extend functionality● Convenient: shortcuts-only works well● Cross-platform
● The World Wide Web Consortium (W3C) is the
organizations, where internet standards are set;
● Read the Standards page for further details;
● Validator service is available for standardization;
● We are going to write code for HTML5 standards;
HTML Basics - Standards
<!DOCTYPE html>
HTML Basics - Doctypes
HTML Basics - Document structure example
● Forget about making layouts with tables!
● Tables are only for tabular data.
● To become professional front-end developer○ learn to use div elements
○ use id attributes for unique elements per page
○ use class attributes to reuse styles consistently
○ mind which HTML elements are block elements
○ Use "float" or display:inline-block properties
HTML Basics - Containers
<!-- This is a comment example -->
Comments are visible in source, but not taken
into account during the document parsing.
HTML Basics - Comments in HTML
Using paragraph tags<p>paragraph element</p>
Non-breaking space and  
Line break<br>
Paragraphs elements
● Defined with <h1> to <h6> tags● <h1> is the most important heading● Use HTML headings for headings, not
styling● Headings define the document's structure● Headings are vital for search engines
Headings
● HTML elements can have attributes● Provide additional information on elements● Always specified in the opening (start) tag● Are in name/value pairs like: name="value"● Always use quotation marks for the values● Always write in lowercase letters
HTML Attributes
HTML Attributes Reference
Attribute Description
class Specifies one or more class names for an element (refers to a class in a style sheet)
id Specifies a unique id for an element
style Specifies an inline CSS style for an element
title Specifies extra information about an element (displayed as a tool tip)
● Start a basic HTML document● Include headings; at least 1 <h1>● Include several paragraphs● Include spaces and breaks examples● Include some comments in your code
If you're ready, start your homework at class :)
Practice at class
● Learn about links and use them in your page● Learn about images and include such● Learn about list elements: ordered, unordered,
definition, etc. (use if possible)
Optional:● Write content for your website: about, contacts,
1 post for example● Read around W3Schools and prepare questions
for the next lesson
Practice at home
Kalin Chernevt: @kalinchernevu: http://shtrak.eu/kalata e: kalin.chernev(at)gmail.com
Contacts
top related