Creative Web Design & Development, Create Modern Web Experiences

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.

63 Sessions

Certificate of completion

Getting

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

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

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

3 session

• Understanding Project

  

• Start building by creating the HTML structure and style it by CSS properties

  

• Coding animations using CSS animation

  

Project

3 session

• Understanding the Complete Project

  

• Creating design using HTML & CSS

  

• How to handle possible bugs in HTML & CSS

  

Starting

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

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

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

3 session

• What is GSAP?

  

• Creating Animations in a Static Website

  

• ScrollTrigger (GSAP's Plugin)

  

Smooth

2 session

• Applying Locomotive JS in Website

  

• Integrating Locomotive With ScrollTrigger

  

Chrome

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

3 session

• Introduction to Git

  

• Basic Git Commands (add, commit, status, pull, push, etc. )

  

• How to Upload your Project in GitHub

  

Major

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