Edukolkata

Complete web design training

Creative and Best Web Designing Course in Kolkata with an Advanced Training Structure
Apply Online
View Our:Training Fees

COURSE DESCRIPTION

If you want to be a software developer that doesn't mean that you must have a technical background. Web designing is another most important aspect of creating a stunning website. If you are a fresher and you don't know which one you want to be, Designer or Developer? Then here is the answer for you. Suppose when a car made where someone is making the engine and someone is putting an aesthetic design into it. If you want to give a stunning look into it then our web designing course is for you. In this course, you will learn HTML5, CSS3, SASS (syntactically awesome style sheets), and many advanced technologies by our experienced faculties. As the design is required in almost every site or app, the job percentage is very impressive. So If you have a non-technical background or you don't like programming then our Web Designing Course is the best choice for you. So If you are looking for a Best Web Design course in Kolkata then apply now for a great learning experience with a super cost-effective price.

Things to know:

The prime focus of Edukolkata is to provide you an industry-level IT training and that's why our whole training process is based on simultaneous theory and practice classes. Here are a few things you should know before the course begins:

  • Training Mode: Online and Live
  • Practical session on each topic
  • Personal URL for Virtual CV
  • Weekend class available
  • Free three hours demo class
  • Live Project URL

Enquire now


Duration 120 Hours
Minimum Eligibility: Any
₹
Course Fee: 5800
apply now
Sprint 1 Sprint 2 Sprint 3 Sprint 4 Sprint 5
Lecture 1.1 Preview ( 5 )
Getting Started
Lecture 2.1 Preview ( 20 )
Practicing the Basics
Lecture 3.1 Preview ( 7 )
Working with jQuery & CSS
Lecture 4.1 Preview ( 5 )
Create Forms Using Bootstrap
Lecture 5.1 Preview ( 14 )
Making our Website Responsive
Lecture 1.2 Preview ( 11 )
Diving Into the Basics of CSS
Lecture 2.2 Preview ( 13 )
Positioning Elements with CSS
Lecture 3.2 Preview ( 7 )
Bootstrap 4 Basics
Lecture 4.2 Preview ( 4 )
Cards and List Groups
Lecture 5.2 Preview ( 9 )
Adding & Styling Forms
Lecture 1.3 Preview ( 22 )
Advanced Concept of CSS
Lecture 2.3 Preview ( 13 )
Background Images & Images
Lecture 3.3 Preview ( 5 )
Getting Started With Bootstrap 4
Lecture 4.3 Preview ( 5 )
Other Bootstrap Components
Lecture 5.3 Preview ( 16 )
Working with Text and Fonts
Lecture 1.4 Preview ( 8 )
More on CSS Selectors
Lecture 2.4 Preview ( 12 )
Sizes & Units
Lecture 3.4 Preview ( 6 )
Super Useful Bootstrap Utilities
Lecture 4.4 Preview ( 7 )
Some Bootstrap JavaScript Plugin
Lecture 5.4 Preview ( 12 )
Understanding Flexbox
Lecture 1.5 Preview ( 20 )
Practicing the Basics
Lecture 2.5 Preview ( 7 )
Working with jQuery & CSS
Lecture 3.5 Preview ( 5 )
Create Forms Using Bootstrap
Course Fees
One Time Payment for single admission:
₹ 12000 52% Off 5800/-
You can also join with us a group of 3 students and get additional discounts on the total course fee:
₹5800 x 3 =  17400 Extra 5% Off 16500/-
  • Each student in same group will get extra ₹300 /- discount

  • Getting Started

    • What is CSS?
    • Choose Your Track
    • Course Prerequisites
    • Recommended Tools
    • Where to Find the Source Code

  • Diving Into the Basics of CSS

    • Module Introduction
    • Understanding the Course Project Setup
    • Adding CSS to our Project with Inline Styles
    • Understanding the Style Tag & Creating a .css File
    • Applying Additional Styles & Importing Google Fonts
    • Understanding Selectors
    • Understanding Inline Internal External CSS
    • Understanding Inheritance
    • Understanding Combinators
    • Selectors & Combinators
    • Practice The Basics

  • Advanced Concept of CSS

    • Introducing the CSS Box Model
    • Understanding the Box Model
    • Understanding Margin Collapsing and Removing Default Margins
    • Deep Dive on "Margin Collapsing"
    • Applying Shorthands in Practice
    • Deep knowledge on Height & Width Properties
    • Understanding Box Sizing
    • Adding the Header to our Project
    • Understanding the Display Property
    • display: none vs visibility: hidden
    • Applying the Display Property & Styling our Navigation Bar
    • Understanding an Unexpected "inline-block" Behaviour
    • Working with Vertical Alignment
    • Styling Anchor Tags
    • Pseudo Classes & Pseudo Elements
    • Grouping Rules
    • Working with Fonts and Borders
    • Styling a CTA-Button
    • Adding a Background Image to our Project
    • Things to Remember
    • Practice Advanced CSS
    • Wrap Up

  • More on CSS Selectors

    • Module Introduction
    • Using Multiple CSS Classes & Combined Selectors
    • Classes or IDs?
    • Understanding "!important"
    • Selecting the Opposite with :not()
    • CSS & Browser Support
    • Why not use Important
    • Rounding up the Basics

  • Practicing the Basics

    • Module Introduction
    • Adding Style to our Plans
    • Working on the Recommended Plan
    • Styling the Badge with "border-radius"
    • Styling our List
    • Working on the Title and the Price of our Packages
    • Improving our Action Button
    • Understanding Outlines
    • Presenting the Core Features to the User
    • Styling the Headline of the Core Features Section
    • Preparing the Content of the Key Feature Area
    • Adding the Footer
    • What we Achieved so Far
    • Adding the Packages Page
    • Your Challenge
    • Styling the Links
    • Styling our Package Boxes
    • Adding "float" to our Package
    • Fixing the Hover Effect
    • Adding the Final Touches

  • Positioning Elements with CSS

    • Why Positioning will Improve our Website
    • Understanding Positioning
    • Working with the "fixed" Value
    • Creating a Fixed Navigation Bar
    • Using "position" to Add a Background Image
    • Understanding the Z-Index
    • Adding a Badge to our Package
    • Styling & Positioning our Badge with Fixed Position Syle
    • Diving Deeper into Relative Positioning
    • Working with "overflow" and Relative Positioning
    • Introducing "sticky" Positioning
    • Understanding the Stacking Context
    • Practice Positioning

  • Background Images & Images

    • Module Introduction
    • Understanding "background-size"
    • Working with "background-position"
    • The Background Shorthand
    • Applying "background" Origin, Clip & Attachment
    • Using the "background" in Project
    • Styling Images
    • Working on the Image Layout
    • Use of Linear Gradients
    • Applying Radial Gradients
    • Stacking Multiple Backgrounds
    • Understanding Filters
    • Basics of SVGs

  • Sizes & Units

    • Where Units Matter
    • Available Sizes & Units
    • Understating Fixed Positioning with %
    • Understating Absolute Positioning with %
    • Understating Relative Positioning with %
    • Fixing the Height 100% Issue
    • Defining the Font Size in the Root Element
    • Using "min-width/height" & "max-width/height"
    • Understanding with "rem" & "em"
    • Understanding the Viewport Units
    • Choosing the Right Unit
    • Using "auto" to Center Elements

  • Working with jQuery & CSS

    • Jquery Introduction
    • Selecting & Manipulating Styles with jquery JavaScript
    • Understanding Event Listener
    • Time to Practice - Adding Styles with jquery
    • Adding a Side Navigation Bar
    • Manipulating Element Classes
    • Understanding Property Notations

  • Bootstrap 4 Basics

    • Colors
    • Buttons
    • Colors and Buttons Quiz
    • Typography
    • Jumbotrons
    • Exercise Intro
    • Exercise Solution

  • Getting Started With Bootstrap 4

    • GET THE CODE FOR THIS COURSE!
    • The Bootstrap 4 Documentation
    • Including Bootstrap 4
    • Your First Exercise: Intro
    • Your First Exercise: Solution

  • Super Useful Bootstrap Utilities

    • Bootstrap 4 Breakpoints
    • The Display Utility
    • Borders and Shadows
    • Margin and Padding
    • Exercise Intro
    • Exercise Solution

  • Create Forms Using Bootstrap

    • Form Controls
    • Checkboxes/Form Checks
    • Custom Inputs
    • Input Groups and Icons
    • Inline Forms

  • Cards and List Groups

    • List Groups
    • Cards Basics
    • Cards With Images
    • Cards Layout

  • Other Bootstrap Components

    • Badges
    • Breadcrumbs
    • Button Groups
    • Pagination
    • Progress Bars

  • Some Bootstrap JavaScript Plugin

    • Alerts
    • Tooltips
    • Popovers
    • Dropdowns
    • Collapse and Accordions
    • Modals
    • Carousels

  • Making our Website Responsive

    • Why our Project Should Become Responsive
    • Understanding Hardware Pixels vs. Software Pixels
    • Comparing the Viewport Metatag (HTML) and Media Queries (CSS)
    • Understanding the "viewport" Metatag
    • Adding our First Media Queries
    • Things to Keep in Mind when Working with Media Queries
    • Finding the Right Breaking Points
    • Creating the Mobile First Design for our Plans
    • Making the Plans Responsive
    • Creating a Responsive Design with Media Queries
    • Working with Logical Operators
    • Improving the Customers Page
    • Cleaning Up the Navigation Bar
    • Positioning our Footer Correctly

  • Adding & Styling Forms

    • Adding the Unstyled Form
    • Page Initialization
    • Advanced Attribute Selectors
    • Working on the General Layout
    • Restyling the Form Elements
    • Styling the Checkbox
    • Providing Validation Feedback
    • Styling the Signup Button
    • Fixing a Broken Link

  • Working with Text and Fonts

    • Module Introduction
    • Comparing Generic Families & Font Families
    • Understanding the Browser Settings
    • Using the Default Font Families
    • Understanding the "font-family" Syntax
    • Working with Locally Saved Fonts
    • Working with Google Fonts
    • Understanding Font Faces & font-style
    • Importing our Custom Fonts
    • Understanding Font Formats
    • Diving into Font Properties
    • Adding "letter-spacing"
    • Changing the Line Height
    • Applying "text-decoration" & "text-shadow"
    • Understanding the "font" Shorthand
    • Loading Performance & "font-display"

  • Understanding Flexbox

    • What is Flexbox
    • Creating a Flex Container
    • Using flex-direction & flex-wrap
    • Working with align-items & justify-content
    • What is align-content?
    • Improving the Navigation Bar with Flexbox
    • Improving the Footer
    • Flexbox and the Z-Index
    • Using the "order" Property for a Flex Item
    • Understanding flex-grow
    • Applying "flex-shrink"
    • Comparing "flex-basis" vs "width" & "height"

  • Use of CSS Transforms

    • Rotating Elements and setting transform-origin
    • Using Rotate and Translate
    • Working with "skew" and "scale"
    • Applying Transformation Shorthands
    • Moving Elements along the Z-Axis with "translateZ"
    • Rotating the Container with "transform style"
    • Flipping Elements & backface-visibility

  • Transitions & Animations

    • Understanding and Applying Transitions
    • CSS "transition" Property Deep Dive
    • Working with Timing Functions
    • Transitions & "display"
    • Time to Practice - CSS Transitions
    • Using CSS Animations
    • CSS "animation" Property Deep Dive
    • Adding Multiple Keyframes
    • Adding Animations to our Customers Page
    • Time to Practice - CSS Animations
    • Using JavaScript Animation Event Listeners

  • Introducing Sass (Syntactically Awesome Style Sheets) - Basics

    • What is Sass & Scss?
    • Installing Sass
    • Nesting Selectors
    • Adding Nested Properties
    • Understanding Variables
    • Storing Lists & Maps in Variables
    • Adding Simple Arithmetics
Other Course Details
Total Classes:
60
Placement Support:
No
Certificate Available:
No
No of students in batch:
10
Additional Information:
Yes
Additional Information:
*The avobe information may change without any prior notice.

There are many ways to learnHow to Apply

apply now