WEBHOUR Syllabus

Course Overview

This course will focus on helping students understand how the web works, help them acquire the fundamental and thorough knowledge of the 3 foundational languages that power each and every website and learn the design patterns used by the industry. This is a 2 month Course and at the end of this course each of student will have a fully functional Web App which could be added to their portfolio’s.

Teachers

• Jai Kathuria @jaikathuria
• Sagar Choudhary @sagarchoudhary96
• Kanishka Makhija @kanishkamakhija
• Kunal Kalra @kunal121
• Gunavina Mehta @gunavina
• Anamika Manhas @anamika-manhas
• Sahil Lamba @lambasahil
• Saksham Narula @Sakshamnarula

Course Outline

The course is divided into 2 parts:

Part 1: HTML, Mockup Designing and Github (2 sessions)

• Basic HTML Fundamentals and Introduction to HTML5
• Mockup: How to think about the UI and UX of a Web App.
• How to use Git and Github.

Part 2: Responsive Web Designing (3 sessions)

• Getting started with CSS, Why Responsive.
• BOX model, Grid Based Frameworks
• Bootstrap, Materialize and their components

WorkFlow

Intro ( Sept 18, 2017 ):

1. Course Overview
2. Environment Setup
   • Brackets
   • Git
3. GitHub Profile setup.
4. Intro to GitHub Classroom: - Starting with first assignment.
5. Requesting GitHub Student Developer Pack

Class 1 ( Sept 19, 2017 ):

1. Creating and Running .html files
2. Basic about markup languages.
3. HTML Structure - DOCTYPE - Markup Tags
   • Head
   • Body
   • Heading
   • Paragraph
   • Table
   • Lists
   • Meta Tags
   • Semantic Tags - Attributes
   • src ( for adding images )
   • style - Paths
   • Absolute
   • Relative - Different Type of Tags
   • Inline
   • Block
4. Assignment (Document2Web)

Class 2 ( Sept 20, 2017 ):

1. Linking in Web Pages
   • Internal Linking
   • External Linking
2. Form
   • Input Tags
   • Form Method
3. Meta Tags

Class 3 ( Sept 21, 2017 ):

1. What are Repositories
2. Initialize local Repo using command line git.
3. Creating First Commit
4. Intro to GitHub
5. Linking Local Repo to Remote Github Repo
6. Making changes to files and pushing changes to GitHub.

Class 4 ( Sept 26, 2017 ):

1. Working together on same Repo
2. Handling Conflicts
3. Branching
4. Creating PRs

Class 5 ( Sept 27, 2017 ):

1. Writing Readme's ( MD Format )
2. What is CSS?
3. How CSS effect HTML?
4. All about CSS

• CSS syntax

• Selectors introduction

  • Simple selectors
  • Element name selector
  • Class selectors
  • Id selector
  • Universal selector
  • Attribute selectors
  • Pseudo-classes and pseudo-elements
  • Combinators and multiple selectors

• CSS values and units

• Cascade inheritance

5. What is DOM?
6. How CSS actually works?
7. How to apply CSS to our HTML?

Class 6 ( Sept 28, 2017 ):

1. Assignment Tribute Page

Class 7 ( Oct 03, 2017 ):

1. Registration for Hacktoberfest
2. Resolving issues in Tribute Page Assignment.

Class 8 ( Oct 04, 2017 ):

1. Box Model
2. What is Responsiveness ?
3. Why Responsive ?

Class 9 ( Oct 05, 2017 ):

1. How to make a Web Page Responsive ? - Setting up Viewport - Relative Units - Best Practices

Class 10 ( Oct 26, 2017 )

1. Grid Based Layout
2. Bootstrap and other Frameworks