HTML & CSS Workshop

Workshop Overview

Duration: 2.5 to 4 hrs
Level: Beginner

Author: BRG

Key Takeaways from Workshop

By having hands-on (instructor or self-paced), you will gain following knowledge:

Widely used HTML tags

Semantic Web page using HTML5

Foundations of CSS (selectors, typography, colors, units etc)

Basics usage of Developer Tools

Basics of advanced CSS like flexbox, transitions, transforms and animations

Learn to make web page responsive - media queries

NOTE: The workshop will be conducted strictly based on the syllabus so that most of the topics could be covered in time. It is upto the instructor to respond to 'OUT of SYLLABUS' type queries of the student.

Prerequisites

Laptop or desktop with working computer knowledge

Enthusiasm to learn

A web browser (Chrome is preferred)

CodePen account (good to have)

Schedule

	Setup	Setting up the machine for the workshop.
00:00	1. Introduction	What is HTML/HTML5 and why it is important? What happen when you enter the url in browser.
00:10	2. HTML Elements	What kind of HTML elements make the web page? What is inline and block level elements? What are different ways of representing data in Web page? How to format text in Web page?
00:40	3. Basic Styling	What are different ways of selecting elements in CSS? How to change the size of elements? What do you mean by inline-block elements? How to use the Developer Tools to update the CSS?
01:30	4. Semantic Web Page	How to make the web page semantic? What kind of benefits does semantic web page have?
01:45	5. Break	Break
01:55	6. Inputs from User	How to get inputs from users in Web page?
02:20	7. Advanced styling	How to add different more advanced styling to web page? How to add transitions to elements? How to animate elements?
03:00	8. Making responsive web page	How to make our web page responsive which looks nice in all devices?
03:30	Finish

The actual schedule may vary slightly depending on the topics and exercises chosen by the instructor.