Introduction to Frontend Development - Session 1 - HTML Fundamentals
1 like•974 views
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;
- 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 taken into account during the document parsing.
- 16. Paragraphs elements Using paragraph tags <p>paragraph element</p> Non-breaking space and   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 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
- 22. Contacts Kalin Chernev t: @kalinchernev u: http://shtrak.eu/kalata e: kalin.chernev(at)gmail.com