• Like
Introduction to Frontend Development - Session 1 - HTML Fundamentals
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Introduction to Frontend Development - Session 1 - HTML Fundamentals


Presentation from the first session of Introduction to Front-end Development course at init Lab http://initlab.org

Presentation from the first session of Introduction to Front-end Development course at init Lab http://initlab.org

Published in Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    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

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 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 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. 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● JavaScriptThe course does not include any programminglanguage for server side operations. (i.e. PHP)Well be working only in the front-end area
  • 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. 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. 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 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. 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;
  • 12. HTML Basics - Doctypes <!DOCTYPE html>
  • 13. HTML Basics - Document structure example
  • 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 takeninto account during the document parsing.
  • 16. Paragraphs elementsUsing paragraph tags<p>paragraph element</p>Non-breaking space&nbsp; and &#160;Line break<br>
  • 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. 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 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. 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. 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. ContactsKalin Chernevt: @kalinchernevu: http://shtrak.eu/kalatae: kalin.chernev(at)gmail.com