Front End Development
Categories: Job Ready Course
About Course
Front-end development focuses on building the visual and interactive elements of a website or web application that users interact with directly. It involves technologies like HTML, CSS, and JavaScript to structure, style, and add functionality to web pages. Developers often use frameworks like React, Vue, or Angular to streamline the process. Key goals include ensuring responsive design, performance optimization, and cross-browser compatibility.
What Will You Learn?
- In front-end development, you'll learn how to create and design the user interface and experience of websites or web applications using HTML, CSS, JavaScript, and related tools and frameworks.
Course Content
Introduction to Front End Development
-
What is Front End development?
00:00 -
Static vs dynamic website
00:00 -
Who is front-end developer?
00:00
HTML
-
Introduction to HTML
00:00 -
Opening and closing tags
00:00 -
HTML page structure
00:00 -
How to create HTML file?
00:00 -
Basic HTML tags
00:00 -
Image tag and attributes
00:00 -
Anchor tag, email tag, tel tag
00:00 -
HTML lists
00:00 -
Ordered and Unordered Lists
00:00 -
Creating website homepage using basic tags
00:00 -
Table tags in HTML
00:00 -
Table attributes in HTML
00:00 -
Designing a calendar using HTML table
00:00 -
HTML Div Tag
00:00 -
HTML form elements
00:00 -
HTML input types
00:00 -
HTML input attributes
00:00
CSS
-
Introduction to Cascading Style Sheet (CSS)
00:00 -
Types of CSS Types of CSS (external, internal, inline)
00:00 -
CSS selector (CSS selector (class, Id, tagName))
00:00 -
Using internal CSS
00:00 -
Basic CSS properties
00:00 -
Border properties
00:00 -
Creating professional webpage using HTML & CSS
00:00 -
CSS Spacing properties (Margin & Padding)
00:00 -
Margin properties
00:00 -
Padding properties
00:00 -
CSS measurement units
00:00 -
CSS box model browser
00:00 -
Background image property
00:00 -
External CSS
00:00 -
Border-radius property
00:00 -
How to comment HTML or CSS code?
00:00 -
Full-width vs fixed-width web design
00:00 -
Setting width in percentage
00:00 -
CSS clear property
00:00 -
Creating full-width section
00:00 -
CSS hover
00:00 -
CSS transition property
00:00 -
CSS position (fixed, relative, sticky) properties
00:00 -
Absolute positioning
00:00 -
CSS display property
00:00 -
CSS overflow properties
00:00 -
CSS Z-index properties
00:00 -
CSS opacity
00:00 -
CSS flexbox
00:00 -
CSS Grid
00:00 -
Pseudo classes and elements
00:00 -
Display properties
00:00 -
Concept of one-page website
00:00 -
CSS #id selector
00:00 -
CSS cursor properties
00:00 -
CSS scroll properties
00:00
CSS3
-
Introduction to CSS3
00:00 -
Box-shadow & text-shadow
00:00 -
Google Fonts & Font Awesome
00:00 -
CSS3 transition
00:00 -
CSS transform: scale
00:00 -
Compatibility and ventor prefixes
00:00 -
Calc function
00:00 -
CSS transform: translate
00:00 -
Column properties
00:00 -
Figma To HTML
00:00 -
CSS3 Animation
00:00 -
CSS3 new features
00:00 -
After & before selector
00:00 -
CSS skew
00:00 -
Multiple background images
00:00 -
CSS Media Queries
00:00 -
Creating responsive layout
00:00 -
Creating section from Figma file
00:00 -
@import mystyle.css
00:00 -
Responsiveness across all devices
00:00 -
3D transforms
00:00 -
Max and min height
00:00 -
Background gradient
00:00 -
CSS transform: rotate
00:00 -
CSS hover
00:00 -
Max and min width
00:00
HTML5
-
Introduction to HTML5
00:00 -
HTML5 semantic & non-semantic elements
00:00 -
Basic HTML5 structure
00:00 -
Structural and semantic tags
00:00 -
Text-level semantic tags
00:00 -
Media and interaction tags
00:00
JavaScript
-
Introduction to JavaScript
00:00 -
JavaScript data types
00:00 -
Scope and lifetime
00:00 -
JavaScript variables
00:00 -
JavaScript arrays
00:00 -
Uses of JavaScript
00:00 -
JavaScript conditional statements
00:00 -
Functions in JavaScript
00:00 -
Window object functions
00:00 -
Ways to embed JS
00:00 -
JavaScript loops
00:00 -
Object in JavaScript
00:00 -
JavaScript promises
00:00 -
JavaScript DOM
00:00 -
Events in JavaScript
00:00 -
Math operations
00:00 -
Show/hide password using JS DOM
00:00 -
Changing image using this function
00:00 -
JavaScript Operators
00:00 -
Product cart system to increase/decrease quantity
00:00 -
Building random code generator
00:00 -
Creating JavaScript calculator
00:00 -
Creating responsive menu
00:00 -
Creating to-do list
00:00 -
Creating password generator
00:00 -
Different types of patterns using nested loop
00:00 -
JavaScript array methods
00:00 -
Weather app using promise with free API
00:00 -
Most useful functions in JS
00:00 -
JavaScript exception handling for of loop and for in loop
00:00 -
Mini e-commerce app using promise with free API
00:00 -
Data swipe using JavaScript DOM
00:00 -
Date object in JavaScript
00:00 -
Local Storage in JS
00:00
jQuery
-
What is library?
00:00 -
What is jQuery?
00:00 -
How to add jQuery to your project?
00:00 -
What is CDN?
00:00 -
Adding jQuery CDN to HTML page
00:00 -
jQuery events
00:00 -
Selectors and HTML functions in jQuery
00:00 -
Functions in jQuery and event handling
00:00 -
jQuery dimension methods
00:00 -
Traversing in jQuery
00:00 -
jQuery Owl carousel
00:00 -
jQuery LightBox
00:00 -
Introduction to Gsap
00:00 -
Introduction to Locomotive
00:00
BootStrap
-
Introduction to Bootstrap
00:00 -
Setting up Bootstrap environment
00:00 -
Bootstrap Breakpoints
00:00 -
Bootstrap containers
00:00 -
Bootstrap grid system
00:00 -
Bootstrap responsive layout
00:00 -
Bootstrap auto column layout
00:00 -
Bootstrap typography and color classes
00:00 -
Bootstrap button, border, and background classes
00:00 -
Bootstrap forms and form control
00:00 -
Bootstrap navbar, collapse, dropdown, off-canvas
00:00 -
Bootstrap carousel and card
00:00 -
Bootstrap accordion
00:00 -
Creating website sections using Bootstrap classes
00:00 -
Bootstrap spacing classes
00:00 -
Bootstrap modals
00:00 -
Bootstrap dropdowns
00:00 -
Bootstrap tabs
00:00 -
Bootstrap collapse
00:00 -
Bootstrap tooltips
00:00 -
Bootstrap popovers
00:00 -
Bootstrap alerts
00:00
Tailwind CSS
-
Introduction to Tailwind CSS
00:00 -
Setting up Tailwind CSS environment
00:00 -
Tailwind CSS Breakpoints and customization
00:00 -
Tailwind CSS Grid layout
00:00 -
Tailwind CSS Flexbox
00:00 -
Alignment in Tailwind CSS
00:00 -
Tailwind CSS Spacing, margin, and padding
00:00 -
Sizing in Tailwind CSS
00:00 -
Typography in Tailwind CSS
00:00 -
Backgrounds in Tailwind CSS
00:00 -
Tailwind CSS Shadow and opacity effects
00:00 -
Tailwind CSS Transforms
00:00 -
Tailwind CSS Animation
00:00 -
Creating website section using Tailwind CSS
00:00
REACT JS
-
Important JavaScript concepts for ReactJS
00:00 -
Key features of ReactJS
00:00 -
Revisiting functions and parameters
00:00 -
Revisiting variables and values
00:00 -
Flow and cycle of React app
00:00 -
Uses and applications of ReactJS
00:00 -
Import and export
00:00 -
Creating React.JS project
00:00 -
Introduction to ReactJS
00:00 -
What is ReactJS?
00:00 -
Benefits of using ReactJS
00:00 -
Arrow functions
00:00 -
List rendering in ReactJS
00:00 -
Adding JS to a page and how ReactJS projects differ
00:00 -
Installing create-react-app
00:00 -
JavaScript destructuring
00:00 -
Bidirectional data transfer in ReactJS
00:00 -
Creating to-do list app
00:00 -
ReactJS components
00:00 -
React component life cycle
00:00 -
Installing Firebase
00:00 -
Fetch external API in React
00:00 -
Adding & fetching data to Firebase
00:00 -
Realtime Database
00:00 -
Creating User Management feature using Firebase
00:00 -
Firebase social login
00:00 -
Context API
00:00 -
Creating e-commerce project
00:00 -
Redux toolkit
00:00 -
NextJS folder structure
00:00 -
Introduction to NextJS
00:00 -
Discussing LMS website development project
00:00 -
React Route DOM
00:00 -
Controlled components in React
00:00 -
Form handling in ReactJS
00:00 -
Introduction to Firebase
00:00 -
Creating show/hide password feature using useState
00:00 -
Creating show/hide modal using useState
00:00 -
Styled components- React package
00:00 -
External styling library
00:00 -
Creating user dashboard using ReactJS
00:00 -
Slick slider in ReactJS
00:00 -
CRUD operations using APIs
00:00 -
Local Storage in To-do list and User dashboard
00:00 -
Creating weather search app
00:00 -
Creating quiz app
00:00
Elevate Your Learning Journey with Cutting-Edge Education Technology.
Company
- Contact
- About
- Tech Blog
- Self-Paced Courses
- Events
Our Programs
- Data Analytics
- Digital Marketing
- Web Development
- Cyber Security
- App Development
- Design
Digital Marketing Courses
Digital Marketing Course | SEO Course | Social Media Marketing Course | Content Writing Course | YouTube Course | Instagram Marketing Course | Google Ads Course | Copywriting Course | Performance Marketing Course
Web Development Courses
Full Stack Developer Course | WordPress Course | MERN Stack Course | Laravel Course | Web Development Course | HTML Course | ReactJS Course | Javascript Course | PHP Course | NodeJS Course | Front-End Development Course | Web Designing Course | CSS Course
More Professional Courses
Cyber Security Course | Tableau Course | Android App Development Course | Mobile App Development Course | Power BI Course
Free Courses
Semrush Course | Google Tag Manager Course | Blogging Course | Photoshop Course | Video Editing Course | AngularJS Course | Shopify Course | Django Course | Email Marketing Course | Affiliate Marketing Course
Interview Questions
HTML Interview Questions | CSS Interview Questions | PHP Interview Questions | JavaScript Interview Questions | Flutter Interview Questions | Data Structure Interview Questions | Java Interview Questions | MySQL Interview Questions | Python Interview Questions | DBMS Interview Questions | Power BI Interview Questions | Angular Interview Questions | ReactJS Interview Questions | C Interview Questions | Django Interview Questions | Email Marketing Interview Questions | Content Writing Interview Questions | NodeJS Interview Questions | SEO Interview Questions | OOPS Interview Questions | SQL Interview Questions | Digital Marketing Interview Questions
Popular Career Resources
Professional Courses After 12th | Courses After Graduation | How to Become SEO Freelancer? | High-Income Skills | Digital Marketing Books | Become Google Ads Expert | Build a Career in Digital Marketing | SEO Career Path | Make Money Online | Become Data Analyst | Become a Flutter Developer | Best Programming Languages to Learn | Become Ethical Hacker | Python Developer Salary | Full Stack Developer Salary | Data Analyst Salary | Free Digital Marketing Projects