Introduction to Frontend Development - Session 1 - HTML Fundamentals


Published on

Presentation from the first session of Introduction to Front-end Development course at init Lab

Published in: Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Introduction to Frontend Development - Session 1 - HTML Fundamentals

  1. 1. Front-end development Novice to professional Practical HTML, CSS and JavaScript Session 1: HTML Fundamentals
  2. 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. 3. 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
  4. 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. 5. Scope of the course● HTML● CSS● JavaScriptThe course does not include any programminglanguage for server side operations. (i.e. PHP)Well be working only in the front-end area
  6. 6. Request / response operations CLIENT SERVER HTTP request HTTP responseProcessed HTML, JavaScript, PHP, MySQL, and other server-sideimages, files languages and processes, that=> OUTPUT MARKUP generate HTML and CSS
  7. 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 CSSFront-end developers work mainly on the client side,and they are responsible for the styling andinteraction of the output HTML
  8. 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. 9. 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.
  10. 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. 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;
  12. 12. HTML Basics - Doctypes <!DOCTYPE html>
  13. 13. HTML Basics - Document structure example
  14. 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. 15. HTML Basics - Comments in HTML<!-- This is a comment example -->Comments are visible in source, but not takeninto account during the document parsing.
  16. 16. Paragraphs elementsUsing paragraph tags<p>paragraph element</p>Non-breaking space&nbsp; and  Line break<br>
  17. 17. 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
  18. 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. 19. 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)
  20. 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 codeIf youre ready, start your homework at class :)
  21. 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
  22. 22. ContactsKalin Chernevt: @kalinchernevu: kalin.chernev(at)