Introduction to Frontend Development - Session 1 - HTML Fundamentals
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 well 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!
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
Choosing your text editorSimple rule for using your editor:Stick with your editor, and learn it very well!Try as many editors as you like.Dont jump from one editor to another.
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
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;
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
HTML Basics - Comments in HTML<!-- This is a comment example -->Comments are visible in source, but not takeninto account during the document parsing.
Paragraphs elementsUsing paragraph tags<p>paragraph element</p>Non-breaking space and Line break<br>
Headings● Defined with <h1> to <h6> tags● <h1> is the most important heading● Use HTML headings for headings, not styling● Headings define the documents structure● Headings are vital for search engines
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
HTML Attributes ReferenceAttribute Descriptionclass Specifies one or more class names for an element (refers to a class in a style sheet)id Specifies a unique id for an elementstyle Specifies an inline CSS style for an elementtitle Specifies extra information about an element (displayed as a tool tip)
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 codeIf youre ready, start your homework at class :)
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