Home

Courses

Campus Ambassador

Girls Who Code

Zero To One

Inertia

Sign In

Please fill your contact number to start learning

In-depth HTML, CSS & JS

Grasp how modern website are made and it's fundamental concepts.

Projects & Assesment Tests

Doubts Sessions and Practice Tasks

Creative Web Design & Development, Create Modern Web Experience

Learn to design, code and develop awesome websites and web apps, this course covers everything you need to know about developing modern web interfaces and websites.
Type
Live Course
Time
60 classes
Starting on
2022-11-21

₹ 4500

Details

In this course, you'll learn how to set up your own boilerplate from scratch with all the HTML, CSS and JavaScript. We’ll teach you the right approach to using plain JavaScript in a website. we’ll cover HTML, Basic & Modern CSS, then integrate it with ES6 JavaScript to animate in and animate out your views in a seamless way.

Course Table of contents What will you learn?

63 Sessions

Certificate of completion

Getting started with Basics

4 session

  • Understanding Web Development
  • History of Web | Future of Web
  • Comparison between epic and bad design
  • Approach to learn better

HTML

6 session

  • How to create Structure of Web page with HTML
  • Basic HTML tags
  • Understanding HTML Form
  • Applying images in HTML
  • How to link video to your webpage using video tag in HTML
  • Understanding the difference between Block and Inline HTML elements

Introduction to CSS

5 session

  • What is CSS and how to use it in our HTML page?
  • How to use Style tag in HTML
  • How to style element using Inline CSS
  • How to Create a CSS External Style Sheet
  • Concept of Width and Height in CSS

More on CSS

7 session

  • Basic Properties of CSS
  • Understanding color and background-color property
  • Margin & Padding | Difference between margin and padding
  • How to use Font property in CSS | How to install new Fonts
  • Understanding Image Properties in CSS
  • Understanding Positions Properties in CSS (in-depth)
  • Display | Flex | Flex-box Properties (in-depth)

Project 1

3 session

  • Understanding Project
  • Start building by creating the HTML structure and style it by CSS properties
  • Coding animations using CSS animation

Project 2

3 session

  • Understanding the Complete Project
  • Creating design using HTML & CSS
  • How to handle possible bugs in HTML & CSS

Starting with JavaScript

5 session

  • What is JavaScript? | History of JavaScript | Future of JavaScript
  • Understanding Variables & Constants in JS
  • Basic data types in JS
  • Operators, Loops, Types, Conditionals
  • Learning the basics of the language

Functions and Arrays

7 session

  • Understanding function declaration and function expression
  • Understanding Scope and Hoisting in JS
  • How to create an Array in JS
  • Usage of Array in JS with Example
  • JavaScript Array Methods and Properties
  • JavaScript Objects (In JavaScript, almost "everything" is an object.)
  • Helper Functions in JS

DOM Manipulation

6 session

  • HTML DOM Methods
  • How to access and change the elements of an HTML document using DOM
  • How to change style properties of HTML element using DOM
  • setTimeout() and setInterval() methods
  • Let's Create Bulb using DOM
  • How to move HTML element using DOM

Advance Animation With GSAP

3 session

  • What is GSAP?
  • Creating Animations in a Static Website
  • ScrollTrigger (GSAP's Plugin)

Smooth Scrolling Using Locomotive JS

2 session

  • Applying Locomotive JS in Website
  • Integrating Locomotive With ScrollTrigger

Chrome Dev Tool

4 session

  • Overview of Chrome Dev tool
  • How to find Error and Bugs using Chrome Dev tool
  • How to identify and rectify problems in Chrome Dev tool
  • Some tricks to save your time using Chrome Dev tool

Git & Github

3 session

  • Introduction to Git
  • Basic Git Commands (add, commit, status, pull, push, etc. )
  • How to Upload your Project in GitHub

Major Project

5 session

  • Designing our Final Project
  • Creating the Final Project using HTML & CSS
  • Creating animations and features using JS, GSAP, ScrollTrigger and Locomotive JS
  • Adding auto prefixer in our project
  • Hosting Our Final Project

Sample Live Lecture (it's fun)

so that you know, not every online class is boring.

 you'll definitely love it!  you'll definitely love it!    you'll definitely love it! you'll definitely love it!