Course preview · 2 min

Self-paced · learn on your own schedule

Frontend Foundations

Name: Frontend Foundations
Price: 423.00 INR
Rating: 5 (100 reviews)

HTML and CSS are essential skills for anyone looking to become a web developer or designer. In this certification training course, you will learn the basics of HTML and CSS, including how to create web pages, design layouts, and style elements.

4.6/5 on Google

4.7/5 from learners 11 learners enrolled

210 videos 79 labs 46 notes 15 tests 50 Q&A Guides

Self-paced — all 15 Modules unlock instantly, no cohort to wait for.

Tools and Technologies Covered

HTML

CSS

JavaScript

Bootstrap

Tailwind

jQuery

VS Code

React

TypeScript

Where this takes your career

Companies hiring Frontend Developers

0-1 yr

Junior Frontend Developer

Learning HTML, CSS, JavaScript and building responsive web pages and interactive user interfaces.

1-3 yr

Frontend Developer

Building responsive interfaces with JavaScript, modern CSS, APIs and reusable frontend components.

3-5 yr

Senior Frontend Developer

Designing scalable interfaces, optimizing performance and developing maintainable frontend solutions.

5+ yr

Frontend Architect / Tech Lead

Leading frontend architecture, technical decisions, performance and large-scale web application development.

Why Frontend Foundation matters?

Build a strong foundation in modern frontend development.

HTML & Web Fundamentals

Learn HTML, semantic structure, forms and essential web development concepts to build modern web pages.

HTML · Web · Forms

In demand

CSS & Responsive Design

Create responsive and visually appealing interfaces using CSS, layouts, styling and modern design practices.

CSS · Flexbox · Responsive

JavaScript Fundamentals

Understand JavaScript basics, variables, functions, DOM manipulation and interactive web development.

JavaScript · DOM · Functions

Modern Frontend Development

Build interactive frontend projects by combining HTML, CSS and JavaScript with clean development practices.

UI · JavaScript · Projects

Who this course is for

Students Starting a frontend development career Final-year students and fresh graduates
Beginners Learning HTML, CSS & JavaScript Aspiring frontend developers
Web learners Building responsive UI skills Learners exploring web development
Career growth Preparing for frontend developer roles Working professionals and career switchers

Curriculum — 15 Modules

Frontend Foundations · Open a module to explore lessons, labs & tests.

210 videos 79 labs 46 notes 15 tests 50 Q&As

Getting Started With HTML

Introduction to HTML 0:02:26

HTML Elements and Attributes

HTML Formatting

Demo: Tags and Formatting 0:06:55

HTML Tables

Introduction to HTML Table 0:04:47

Spanning Rows and Columns 0:04:27

Table: Header, Body and Footer 0:03:52

HTML Lists

HTML Lists : Ordered 0:04:27

Unordered List 0:02:22

Description List 0:02:32

HTML Layouts

HTML Table Based Layout 0:07:40

Div Based Layout 0:04:54

HTML5 Structure Based Layout 0:04:51

HTML5 Forms

HTML5 Forms 0:10:36

HTML5 Validations

HTML5 Validations 0:09:43

HTML5 Data Attributes 0:06:10

HTML5 New Attributes 0:08:14

Media Elements

HTML5 Audio Element 0:04:56

HTML5 Video Element 0:03:45

HTML5 and JavaScript

JavaScript with Html 0:02:07

Inline Script In HTML 0:03:09

Internal Script In HTML 0:03:08

External JavaScript in HTML 0:03:08

HTML5 Web Storage

Introduction to Web Storage 0:03:40

Local Storage 0:04:11

Session Storage 0:04:27

HTML5 Graphics

Canvas Element 0:05:25

SVG Element 0:07:15

CSS Selectors

CSS3 Selectors 00:03:30

Demo: CSS3 Selectors 00:10:29

Pseudo Elements and Classes

Pseudo Elements 00:02:35

Demo: Pseudo Elements 00:02:51

Pesudo Classes 00:01:51

Demo: Pesudo Classes 00:03:37

Stylesheets

Introduction to Stylesheets 00:04:03

Demo: Stylesheets 00:05:24

Fonts and Text

CSS Fonts 00:07:20

CSS Text 00:07:09

CSS Box Model

CSS Box Model 00:04:17

Demo: CSS Box Model 00:07:53

Colors and Backgrounds

CSS Colors 00:07:53

CSS Background 00:07:53

CSS Gradients 00:08:48

CSS Units

Absolute Units 0:06:02

Relative Units 00:04:09

Layouts and Media Queries

Media Queries 00:06:59

CSS Transforms

2D Tranform 00:12:07

3D Tranform 00:07:52

Transitions and Animations

CSS Transitions 00:07:51

CSS Animations 00:06:35

CSS Shadows

CSS Shadows 00:05:48

JavaScript and ECMA Script

Introduction to ECMA Script 0:03:48

JavaScript vs. Other Static Languages 0:03:32

Setting up Dev Environment 0:04:47

JavaScript Advantages And Disadvantages 0:05:52

Data Types and Variables

Data Types 0:04:14

Numbers

Number Methods 0:06:23

Methods for Converting Values to Numbers 0:05:43

Math object 00:11:13

Boolean, Null, Undefined

Understanding Boolean 00:05:22

Understanding Null And Undefined 00:06:29

Operators

JavaScript operators 00:02:14

Operators Precedence 00:07:33

Conditional Statements

If statements 00:03:00

If-else statement 00:02:36

If-else-if ladder 00:04:34

Switch statement 00:05:52

Loops

Do..While Loop 00:03:20

While Loop 00:05:20

For Loop 00:04:39

For..in Loop 00:05:12

Jump Statements

Jump Statements 0:00:43

Break Statements 0:04:46

Continue Statement 0:03:01

Label Statement 0:08:09

Return Statement 0:04:15

Throw Statement 0:03:15

JavaScript Conditional Statements and Loops

JavaScript: Find the Largest Number among the Four Numbers 00:15:00

JavaScript: Check Whether an Alphabet Is Vowel or Consonant 00:15:00

JavaScript: Check Number Is Positive or Negative 00:15:00

JavaScript: Check if a Number Is Even or Odd 00:15:00

JavaScript: Check Character Is Alphabet or Not 00:15:00

JavaScript: Check Whether a Year Is Leap Year or Not 00:20:00

JavaScript: Display the Fibonacci Series 00:20:00

JavaScript: Find the Highest Common Factor (HCF) or Greatest Common Factor (GCD) 00:20:00

JavaScript: Find the Factorial of a Number 00:20:00

JavaScript: Find the Lowest Common Multiple Factor (LCM) 00:20:00

JavaScript: Check whether a Number is Palindrome Or Not 00:20:00

JavaScript: Check whether a Number Is Armstrong Or Not 00:20:00

JavaScript: Check whether a Number Is Prime Or Not 00:20:00

JavaScript: Count the Vowel and Consonants in A Sentence 00:20:00

JavaScript: To Print a table of a number 00:20:00

JavaScript: To Make A Calculator For Addition Subtraction Multiplication and Division Of Two Numbers 00:20:00

JavaScript: Right Triangle Star Pattern 00:20:00

JavaScript: Left Triangle Star Pattern 00:20:00

javaScript: Pyramid Star Pattern 00:20:00

Diamond Star Pattern in JavaScript: Step-by-Step Guide for Beginners 00:20:00

JavaScript: Right Triangle Simple Number Pattern 00:20:00

JavaScript: Right Triangle Repeat Number Pattern 00:20:00

JavaScript: Pyramid Number Pattern (Asc) 00:20:00

JavaScript: Pyramid Number Pattern (Desc) 00:20:00

JavaScript: Pyramid Repeat Number Pattern 00:20:00

JavaScript: Inverted Right Triangle Number Pattern (Asc) 00:20:00

JavaScript: Inverted Right Triangle Number Pattern (Desc) 00:20:00

JavaScript: Right Triangle Number Pattern (Asc) 00:20:00

JavaScript: Right Triangle Number Pattern (Desc) 00:20:00

JavaScript: Diamond Number Pattern 00:20:00

JavaScript: Right Triangle Alphabetic Pattern 00:20:00

JavaScript: Right Triangle Repeat Alphabet Pattern 00:20:00

JavaScript: Pyramid Alphabet Pattern (Asc) 00:20:00

JavaScript: Pyramid Alphabet Pattern (Desc) 00:20:00

JavaScript: Pyramid Repeat Alphabet Pattern 00:20:00

JavaScript: Inverted Right Triangle Alphabet Pattern 00:20:00

JavaScript: Diamond Alphabet Pattern 00:20:00

JavaScript Functions

Named Function 0:10:25

Function Expression 00:00:48

Demo: Function Expression 00:03:53

Arrow Function 0:01:09

Demo: Arrow Function 0:05:13

Working With Functions

Demo: Function Parameters and Arguments 00:03:28

Demo: Rest Parameter and Spread Operator 00:08:02

Demo: Function Binding 00:13:34

Prototypes

Demo: Prototype 00:11:47

Scope

Scope and Global Scope 00:08:15

Block Scope 00:06:58

Function Scope 00:04:26

Lexical/Nested Scope 00:03:52

Closure and Hoisting

Closure 00:07:45

Hoisting 00:04:50

Variable and Function Hoisting 00:04:18

Classes & Objects

Objects 0:09:58

Classes 0:04:17

Prototype & Inheritance

Prototype 0:03:04

Inheritance 0:02:14

Getting Started

Bootstrap Installation 0:06:47

Colours in Bootstrap 0:04:57

Layout & Grid System

BootStrap Layout 0:09:15

Grid System 0:06:40

Column Alignment 0:04:27

Columns 0:03:56

Content & Typography

Introduction to Typography 0:07:29

Working With Typography 0:03:05

Media & Data Display

Images 0:03:14

Tables 0:03:56

Forms & Components

Forms 0:08:43

Component 0:06:31

Flexbox

Demo : Flexbox 00:05:11

Flexbox Direction 00:03:40

Demo : Flexbox Direction 00:00:56

Flexbox: Align Items 00:01:17

Demo : Flexbox - Align Items 00:06:14

Flexbox: Justify Content 00:01:14

Demo : Flexbox - Justify Content 00:04:31

Flexbox : Fill, Grow and Shrink 00:01:04

Demo : Flexbox - Fill, Grow and Shrink 00:05:15

Typography and Styles

Typography 00:01:41

PX, EM and REM Units 00:03:42

Typography : Default Font-Size 00:02:24

Demo : Typography 00:03:05

Text 00:01:27

Demo : Text 00:07:51

Colors : Text Colors, Background Colors 00:01:42

Demo : Colors 00:02:08

Utilities

Borders, Colors and Radius 00:02:05

Sizing : Height and Width 00:01:12

Demo : Sizing - Height and Width 00:04:45

Display 00:01:08

Demo : Display 00:06:25

Spacing : Margin and Padding 00:03:27

Demo : Spacing - Margin and Padding 00:04:42

Images and Lists

Figures 00:02:50

Lists 00:01:33

Demo : Lists 00:03:54

Bootstrap Tables

Tables 00:03:44

Demo : Tables 00:12:19

Buttons and Badges

Buttons, Button Group 00:04:10

Demo : Buttons 00:05:31

Badges 00:01:38

Demo : Badges 00:03:43

Cards and Media Obects

Cards 00:02:50

Demo : Cards 00:08:52

Card Styles 00:01:22

Demo : Card Styles and Layouts 00:07:01

Media Objects 00:01:20

Demo : Media Objects 00:08:51

Forms

Demo : Forms 00:13:10

Nav and Navbar

Nav Menus 00:02:28

Demo : Nav Menus 00:05:20

Navbar 00:02:30

Demo : Navbar 00:18:58

Breadcrumb and Pagination

Breadcrumb 00:01:23

Demo : Breadcrumb 00:02:55

Pagination 00:02:30

Demo : Pagination 00:02:49

Progress bar and Spinners

Progress bar 00:01:37

Demo : Progress bar 00:05:28

Spinners 00:01:12

Demo : Spinners 00:04:36

Introduction & Fundamentals

Tailwind Version History 0:04:20

Tailwind CSS Setup Methods 0:03:46

Get Started with Tailwind CSS 0:12:05

Tailwind PostCSS 0:06:22

Tailwind Play 0:05:50

Tailwind in Context

Tailwind Vs. Bootstrap 0:03:33

Building a Modern Tailwind UI 0:03:11

Core Styling Concepts

Core Utility Classes 0:05:22

Utility Classes Demo 0:07:48

Typography in Tailwind 0:10:25

Layout Techniques

Layouts 0:04:44

Flexbox Layout 0:03:40

Flexbox Demo 0:14:36

Grid Layout 0:02:54

Grid Layout Demo 0:08:15

Components & Interactivity

Forms & UI Components 0:01:43

Forms & UI Components Demo 0:03:57

State Variants 0:02:10

State Variants Demo 0:03:25

Dark Mode Support 0:04:25

Customization & Effects

Tailwind CSS Customization 0:01:34

Tailwind CSS Customization Demo 0:05:01

Animations & Effects 0:01:43

Animations & Effects Demo 0:03:47

Introduction to jQuery

DOM vs. BOM 00:08:03

Selectors and Events

jQuery Selectors 00:09:00

Window.load vs. document.ready 00:05:44

jQuery Events 00:14:36

HTML Manipulation and Traversing

jQuery HTML Manipulation 00:06:34

jQuery Traversing 00:10:25

AJAX

Introduction to AJAX 0:02:43

jQuery-Plugins

Introduction to jQuery Plugins 00:10:31

Demo: jQuery Plugins 00:10:31

jQuery UI

Introduction to jQuery UI 00:11:02

jQuery UI Interaction 00:13:30

Download detailed curriculum

Why learners choose ScholarHat

ScholarHat Self-Paced vs. scattered free tutorials

The videos are free everywhere. What you're actually paying for is the structure, the practice, and the proof that you finished.

15 Guided Modules Not scattered videos

79 Hands-on Labs Not watch-only

15 Skill Tests Certificate on completion

50 Interview Q&As Not on your own

Our Students Review

View All

ScholarHat is certainly a good platform to develop & strengthen your knowledge that's crucial to excelling in your professional. course are well structured to meet the current IT industry requirements. and as per my experience ScholarHat is leader in latest technology training, especially for a working professional like me, and the way of teaching is superb of trainers, they clear all our doubts and make us understand complex course in a simple way.

Rajendra Singh

Developer at IAP Company Pvt. Ltd

(5.00)

It was a tremendous experience with ScholarHat specially in .NET. Staff of ScholarHat are well mannered, friendly nature, they are very Supportive. Trainer always clear every concept when developing real time project. He told all necessary steps to complete project without any problem. He told also that how a project makes faster & how to use latest technology. His concept is clear cut, the way to make us understand is awesome, some of SDKs like, Android SDK, IOS SDK, Windows SDK. Training quality is Excellent which leads to make a great career.

Rohit Singh

Software Developer

(4.50)

My experience with Scholarhat about Mastering at MVC and AngularJS. I am very much impressed with the quality of the training material and the Trainer as well. I consider myself lucky to discovered and be part of Scholarhat. I loved the way Instructor took out extra time for every question made & explained in depth. I recommend everyone to try courses from Scholarhat.

Rajveer Chauhan

Software Developer

(5.00)

Scholarhat is good learning opportunity with instructions giving both hands on training and also reviewing any issues we face while having hands on. I took MVC, Linq, web Api course at here. I truly learned a lot. It is awesome responsive well designed and flexible Education Portal. Once again thanks Scholarhat for the wonderful support and learning.

Ramashankar Mani

Software Developer

(4.50)

I have completed my AngularJS training from Scholarhat. There is No doubt Scholarhat is completely different compare to others, first time in my carrier I have received such kind of training and support. They have really awesome instructors and support persons are technically sound and I would like to appreciate their 24 x 7 support. I never seen such kind of support by other companies in India till now. As per my experience Scholarhat is the BEST provide e-learning courses for all software programs including latest technologies. Thanks #DNT Staff

Saurabh tripathi

Frontend Developer

(5.00)

Frequently asked questions

Q1. What is Self Paced course offered by ScholarHat?

Online Self Paced Courses are designed for self-directed training, allowing participants to begin at their convenience with structured training and review exercises to reinforce learning. You'll learn through videos, PPTs, and Assignments designed to enhance learning outcomes, all at times that are most convenient for you.

Q2. Who are your mentors?

All our mentors are highly qualified and experience professionals. All have at least 8-10 yrs of development experience in various technologies and are trained by ScholarHat to deliver interactive training to the participants.

Q3. How would I get access to the Learning Content?

As soon as you enroll in the course, you will get access to the course content through LMS (The Learning Management System) in the form of a complete set of Videos, PPTs, PDFs, and Assignments. You can start learning right away.

Q4. How do I enroll for the course?

You can enroll in the course by doing payment. Payment can be made using any of the following options.

Visa debit/credit card
Net banking
Through PayPal

Q5. Student discounts?

Yes, Dot Net Tricks provides student discount to learners who cannot afford the fee. Email us from your student account, or attach your student ID.

Q6. Can I share my course with someone else?

In short, no. Check our licensing that you agree to by using ScholarHat LMS. We track this stuff, any abuse of copyright is taken seriously. Thanks for your understanding on this one.

Q7. How do I setup my team?

Please drop us an email with a list of user details like name, email you’d like to enroll and have access, we'll create your team accounts.

Q8. Do you provide technology version upgrade session free?

Yes, we do. As the technology upgrades your content gets updated at no cost.

Q9. Whom do I contact, if I have more queries?

You can give us a CALL at +91 113 303 4100 OR email us at enquiry@dotnettricks.com

Q10. Do you offer certificates of completion?

We do. Once you've finished a course, reach out to us.

Still have some questions? Let's discuss.

We use cookies to make interactions with our websites and services easy and meaningful. Please read our Privacy Policy for more details.

Accept Cookies

.NET Microservices Course

ASP.NET Core Course

C# with .NET

ML.NET Course

Join Live Sessions

.NET AI/ML Architect Bootcamp

Full-Stack .NET AI/ML Developer Bootcamp

Multi-Cloud .NET AI Solution Architect Bootcamp

Join Bootcamp

Frontend Foundations

Tools and Technologies Covered

Where this takes your career

Junior Frontend Developer

Frontend Developer

Senior Frontend Developer

Frontend Architect / Tech Lead

Why Frontend Foundation matters?

HTML & Web Fundamentals

CSS & Responsive Design

JavaScript Fundamentals

Modern Frontend Development

Who this course is for

Curriculum — 15 Modules

ScholarHat Self-Paced vs. scattered free tutorials

Our Students Review

Rajendra Singh

Rohit Singh

Rajveer Chauhan

Ramashankar Mani

Saurabh tripathi

Frequently asked questions

Welcome back!

Register to Upskill

Start Free Trial

Start Free Trial

Start Free Trial

Start Free Trial

Start Free Trial

Start Free Trial

.NET Microservices Course

ASP.NET Core Course

C# with .NET

ML.NET Course

Join Live Sessions

.NET AI/ML Architect Bootcamp

Full-Stack .NET AI/ML Developer Bootcamp

Multi-Cloud .NET AI Solution Architect Bootcamp

Join Bootcamp

Tools and Technologies Covered

Where this takes your career

Junior Frontend Developer

Frontend Developer

Senior Frontend Developer

Frontend Architect / Tech Lead

Why Frontend Foundation matters?

HTML & Web Fundamentals

CSS & Responsive Design

JavaScript Fundamentals

Modern Frontend Development

Who this course is for

Curriculum — 15 Modules

1 Module 1: HTML Fundamentals 10 videos 5 notes 2 free previews

2 Module 2: HTML Advanced Concepts 18 videos 5 notes

3 Module 3: CSS3 Fundamentals 16 videos 10 labs 5 notes 1 tests 4 Q&As 1 free preview

4 Module 4: CSS3 Advanced Concepts 8 videos 9 labs 5 notes 1 tests 5 Q&As

5 Module 5: Getting Started with JavaScript 15 videos 2 notes 1 tests 5 Q&As 3 free previews

6 Module 6: JavaScript Conditional Statements and Loops 14 videos 37 labs 2 notes 1 tests 5 Q&As

7 Module 7: JavaScript Functions, Closure and Prototypes 17 videos 1 notes 1 tests 5 Q&As 1 free preview

8 Module 8: ES6 : Object-Oriented JavaScript 4 videos 11 labs 3 notes 1 tests 6 Q&As

9 Module 9: Bootstrap5 Fundamentals 13 videos 3 Q&As 1 free preview

10 Module 10: Bootstrap Flexbox, Style and Utilities 25 videos 3 notes 1 tests 2 Q&As 1 free preview

11 Module 11: Bootstrap CSS Components: Images, List, Tables, Button and Cards 17 videos 6 notes 1 tests 3 Q&As 2 free previews

12 Module 12: Bootstrap CSS Components: Forms, Navbars, Pagination and Spinners 14 videos 6 notes 2 tests 3 Q&As 1 free preview

13 Module 13: Tailwind CSS 26 videos 2 free previews

14 Module 14: jQuery Fundamentals 8 videos 7 labs 2 notes 2 tests 4 Q&As 2 free previews

15 Module 15: jQuery Advanced Concepts 5 videos 5 labs 1 notes 3 tests 5 Q&As

ScholarHat Self-Paced vs. scattered free tutorials

Our Students Review

Rajendra Singh

Rohit Singh

Rajveer Chauhan

Ramashankar Mani

Saurabh tripathi

Frequently asked questions

Welcome back!

Register to Upskill

Start Free Trial

Start Free Trial

Start Free Trial

Start Free Trial

Start Free Trial

Start Free Trial