Introduction to Frontend Development - Session 1 - HTML Fundamentals
•
1 like•968 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.
More Related Content
What's hot
What's hot (19)
Viewers also liked
Viewers also liked (10)
Similar to Introduction to Frontend Development - Session 1 - HTML Fundamentals
Similar to Introduction to Frontend Development - Session 1 - HTML Fundamentals (20)
More from Kalin Chernev
More from Kalin Chernev (20)
Recently uploaded
Recently uploaded (20)
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