0
10% OFF WEB DEVELOPMENT

Frontend Basic

Instructor
Sarthak Kumar Panda
Last Update January 16, 2024
4.38 /5
(8)
0 already enrolled

About This Course

In this Front-End Web Development - Complete Guide (Step by Step) [Updated 2023] you will learn complete front-end web development from scratch. As part of the course, You will learn complete HTML5, and CSS3 step by step.

Later you will learn how to use, integrate or add user interactivity with the help of JavaScript. This course also covers the latest JavaScript version which is ECMA Script learn the modern JavaScript techniques with ECMA Script 6 or later.

The next big step would be to learn Bootstrap 5 which is the latest and the most popular CSS framework available. Here you will learn to create 3 Live Projects. In the 1st project, you will learn to create an EMS Web App also known as Employee Management System.

2nd the project we will see how to create a full blog for beginners to Advanced Levels. For the 3rd project, you will create a professional website.

Once you have completed Bootstrap 5 the next topic would be to get started with Angular. In the Angular Topic, you will learn the beginner’s level to integrate angular to any HTML5 and CSS3 App.

Then with the help of React JS, we will see how to build a Scratch Pad App from Beginner to Advanced level. After that you will learn about Create React App tool, used to build React applications. With the help of Bootstrap 5, you will learn to build a Practical web application with React.

As the project, you will learn to create a web application, which will manage the user data via API. In the web application, we allow the users to create new data, Read data and also Delete data from the application itself.

I will be always available in the Q & A section for any help. Please feel free to ask any doubts and queries during the course.

All the best, hope you enjoy the course.

Courses, Offline courses, Marketing Courses, Digital Courses, Online Courses, Digital Marketing Courses, Software training Institute, Training Institute in Bhubaneswar, Top Courses, IT courses, Placement Guaranteed Courses, Programming training Institute, Learn Programming, Bhubaneswar, Java Courses, Java Training, Core Java Courses, Advanced Java Courses, Full stack Web Development Course, Cyber Security Course, Ethical Hacking Course, Python and Java Courses, Websites, Mobile Applications, ERP Software, Digital Branding Training, Internship in Bhubaneswar, IOT courses in Bhubaneswar, IOT Courses, Drone Technology, Drone Courses, Internet of Things, Computer Courses in Bhubaneswar

Curriculum

21 Lessons 3 Month
Introduction
What you will need
Installing VS Code (Code Editor)
Hello World
Document Structure
HTML5 Basics
Headings & Paragraphs
Text Formatting
Links in HTML5
HTML5 Nested Links
HTML5 Lists
Working with Images
Tables in HTML5
Forms in HTML5
Creating a Contact Form
Creating a Login Form
Creating a Registration Form
Grouping Elements
HTML5 Media Tags
IFrames in HTML5
Figure Tag in HTML5
Collapse Elements with Details Tag
Creating The Header
Creating Nav Menu
Creating The Banner
Adding Content to Page
Creating The Sidebar
Building Page Footer
Adding Copyright
Inline CSS
Internal CSS
External CSS
Box Model in CSS
Images in Bootstrap
Targeting Elements in CSS
Designing with Box Model
Building The Container
Building The Website Header
Creating The Nav Bar
Making Drop-Down Menu
Creating Image Slider
Making Content Holder
Creating Sidebar
Making Footer
Creating About-us Page
Creating Services Pages
Adding Nav-Menu
Building The Products Page
Responsive Design (RWD) Explained
Building Contact Page
Animation with CSS3
Introduction to JavaScript
What you should know
Hello World
JavaScript Statements
Placements in JavaScript Part-1
Placements in JavaScript Part-2
Variables in JavaScript
Conditions in JavaScript
Operators in JavaScript
Working with Browser Console
Loops in JavaScript
Functions in JavaScript
Creating Custom Loops with Functions
Working with Arrays
Numbers in JavaScript
Strings in JavaScript
Working with Dates Object
Objects in JavaScript
DOM in JavaScript
Element Node Types
Working with DOM Elements
Changing Contents of DOM
Creating New Elements with JavaScript
Adding Events to DOM Elements
Working with Form Elements
Timers in JavaScript
Debugging in JavaScript
Creating Modern Live Validation Forms
Minify & Validate JavaScript
Using JavaScript Libraries
Working with Modern JavaScript
Making Use Of Use Strict
JavaScript Bad Practices
JavaScript Regular Expressions
Introduction to ES6
What is ES6
Transpiling in ES6
Why use Babel JS
How to use Babel JS
Installing Node JS
Let Syntax in ES6
Using The Const Keyword
Working with Template Strings
Spread Operator in JavaScript ES6
Default Function Parameters in ES6
Working with Object Literals in ES6
Arrow Functions in JavaScript ES6
Arrow Functions with This Scope in ES6
Destructuring in JavaScript ES6
Generators in JavaScript ES6
Working with Class Syntax in JavaScript ES6
Class Inheritance in JavaScript ES6
Introduction to Bootstrap 5
What you will need
Hello World
Bootstrap Document Structure
Breakpoints in Bootstrap 5
Container Types
Grid
Grid Options
Nesting Rows and Columns
Column Vertical Alignment
Column Horizontal Alignment
Column Wrapping and Column Breaks
Reordering and Offsetting Columns
Margin Utilities
Gutters
Horizontal Gutters
Vertical Gutters
Horizontal and Vertical Gutters
Typography
Inline Text Elements
Abbreviations and Blockquotes
Working with Lists
Tables in Bootstrap
Table Alignment, Nesting and Anatomy
Figures in Bootstrap
Forms in Bootstrap
Form Control
Checks and Radios
Range
Input Groups
Floating Labels
Form Layout
Horizontal Forms
Auto Sizing Forms
Inline Forms
Form Validation
Accordions
Alerts
Dismissing Alerts
Badges
Breadcrumb
Positions
Buttons
Button Group
Button Toolbar
Button Group Alteration
Card
Text Colors
Card Sizing
Text Opacity
Card Navigation
Card Images
Card Styles
Carousel
Carousel Timing
Carousel Controls
Carousel Indicators
Carousel Caption
Carousel Fade Effect
Disable Carousel Touch Swiping
Carousel Dark Variant
Close Button
Collapse
Horizontal Collapse
Multiple Targets
Dropdowns
Split Button
Dropdown Sizing
Dark Dropdowns
Dropdown Directions
Dropup and Dropdown Alignment
Menu Items
Menu Alignment
Dropdown Alignment Options
Menu Contents
Dropdown Forms
Dropdown Options
Dropdown Auto Close
List Group
List Group Links and Buttons
List Group Flush
Numbered List
Horizontal List Groups
List Group with Custom Content
Contextual List Group Classes
List Group with Badges
List Group Checkboxes and Radios
List Group JavaScript Tabs
Modals
Static Backdrop
Scrolling Long Content
Vertically Centered
Modal Tooltips and Popovers
Using Grid system in Modal
Varying Modal Content
Toggle Between Modals
Optional Modal Sizes
Navbar
Navigation Links
Navbar Dropdown
Navbar Nested Dropdown
Navbar Forms
Navbar Input Group
Navbar Plain Text
Navbar Colors
Navbar Containers
Navbar Placement
Navbar Scrolling
Off Canvas Navbar
Navs and Tabs
Nav Flex Utilities
Nav Tabs and Pills with Dropdown
Tabs and Pills Behaviors
Offcanvas In-Depth
Offcanvas Scrolling
Offcanvas Placement
Pagination
Placeholders
Popovers In-Depth
Popover Direction
Custom Popovers
Dismiss on next click
Enable Popover on Hover
Progress Bars
Progress bar height and Background
Stripes and Animation
Scrollspy
Spinners
Growing Spinner
Spinner Alignment
Spinner Sizes
Spinner in Buttons
Toasts
Toast Alignment
Tooltips In-Depth
Custom Tooltip
Tooltip Directions
HTML in Tooltip
Tooltip on Disabled Elements
Clearfix
Colors and Background
Colored Links
Ratios
Stacks
Visually Hidden
Positions
Stretched Link
Text Truncate
Vertical Rule
Backgrounds
Background Gradients
Background Opacity
Borders
Border Color
Border Opacity
Border Width
Border Radius
Rounded Border Sizes
Flex Align Self
Flex Align Items
Display Inline and Block
Hiding Elements
Display in Print
Flex
Flex Direction
Flex Justify Content
Flex Fill
Flex Grow and Shrink
Flex Auto Margins
Flex with Align Items
Flex Wrap
Flex Order
Flex Align Content
Flex Media Object
Responsive Float
Interactions
Opacity
Overflow
Position
Position Center Elements
Position Center Elements within Edges
Position Examples
Shadow
Sizing
Spacing
Gap
Text Alignment
Text Wrap
Text Break
Text Transform
Font Size
Font weights and italics
Line Height
Monoscope
Reset Color
Text Decoration
Vertical Alignment
Visibility
Bootstrap Icons

Your Instructors

instructor

Sarthak Kumar Panda

4.75 /5
4 Courses 4 Reviews 73 Students
See more

Student Feedback

Reviews (3)

Write a review

Avatar
₹18000.00 ₹20000.00
10% off
  • Level
    Beginner
  • Duration
    3 Month
  • Lectures
    21 lectures
  • Subject
    Frontend Basic
  • Language
    English , Hindi , Odia

Material Includes

  • Videos
  • Booklets
Go to cart

Course categories

Related Courses

Courses

Mern Stack for Beginners 60-Days

₹30000.00 ₹50000.00
Courses

30-Days Web Development Internship Program

₹3999.6.00 ₹10000.00
Courses

Full Stack Web Development-MERN Stack

₹48000.00 ₹60000.00
Call us 7735 99 7575

Dahaliabag, Cuttack, Near Sadar Police Station,
Pin: 753011

contact@goldenindialyfeskill.com

About

Customer Service

Support

© 2025 Golden India Lyfe Skill Made with by Techzex Software PVT. LTD.

Live Chat Section

Send