This document provides an overview and agenda for a front-end development course. The course will cover HTML, CSS, and JavaScript and be held at init Lab, a hackerspace in Bulgaria. Students will learn HTML fundamentals like tags, paragraphs, headings, and attributes. Choosing a text editor like Sublime Text is also discussed. Homework includes starting a basic HTML document with headings and paragraphs using proper formatting.
Introduction to Frontend Development - Session 1 - HTML Fundamentals
1. Front-end development
Novice to professional
Practical HTML, CSS and JavaScript
Session 1: HTML Fundamentals
2. Agenda
● What is init Lab
● Scope of the course
● Choosing your text editor
● HTML basics
● Paragraphs, breaks and spaces
● Headings
● HTML tags overview
3. 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
4. Follow the upcoming courses
● init Lab website courses section
● Subscribe in box for updates
● Take part in upcoming courses
● Become teacher/presenter yourself!
5. Scope of the course
● 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
6. Request / response operations
CLIENT SERVER
HTTP request
HTTP response
Processed HTML, JavaScript, PHP, MySQL, and other server-side
images, files languages and processes, that
=> OUTPUT MARKUP generate HTML and CSS
7. Front-end developers' responsibilities
CLIENT SERVER
HTTP request
HTTP response
Processed HTML, JavaScript, PHP, MySQL, and other server-side
images, files languages and processes, that
=> OUTPUT MARKUP generate HTML and CSS
Front-end developers work mainly on the client side,
and they are responsible for the styling and
interaction of the output HTML
8. Choosing your text editor
● 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
9. 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.
10. Recommended editor
Sublime Text Editor (2)
● Very fast and lightweight
● Fast, smooth and smart auto-completion
● Plugins available to extend functionality
● Convenient: shortcuts-only works well
● Cross-platform
11. HTML Basics - Standards
● 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;
14. HTML Basics - Containers
● 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
15. HTML Basics - Comments in HTML
<!-- This is a comment example -->
Comments are visible in source, but not taken
into account during the document parsing.
17. Headings
● 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
18. HTML Attributes
● 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
19. 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)
20. Practice at class
● 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 :)
21. Practice at home
● 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