Front-End Web Development – LIVE Training
-
Introduction
-
HTML 5 – Introduction
-
HTML 5 – Text Formatting in HTML
-
HTML 5 – HTML Essentials
-
HTML 5 – Images in HTML
-
HTML 5 – Multimedia in HTML
-
HTML 5 – Content in HTML
-
HTML 5 – Form Elements in HTMLForm ElementsInput Types in FormsPhone and Password FieldURL and Number FieldDate Time Month Week and MoreRadio ButtonsCheckbox FieldsSearch and Upload FieldsThe Color FieldDropdown Fields in FormsMessage and Range FieldRange Fancy Button Hidden Field and ResetWrapping Form Fields< > Coding Exercise to Create a Simple Login Page
-
HTML 5 – Tables in HTML
-
CSS 3 – Getting Started with CSS 3
-
CSS 3 – Essentials
-
CSS 3 – Understanding Box Model in CSS
-
CSS 3 – Typography in CSS
-
CSS 3 – Layouts in CSS
-
CSS 3 – Flexbox and Grid in CSS
-
Advanced CSS Selections
-
HTML 5 & CSS 3 Project – Building a WebsiteThe Website StructureInstalling Google Fonts for WebsiteStyling The Site HeaderBuilding The Navigation BarCreating a Responsive Image SliderStyling The Content HolderStyling The FooterCreating and Styling Services and Products PageCreating and Styling About PageCreating and Styling Contact Page
-
HTML 5 & CSS 3 – Responsive Web Design
-
Modern JavaScript – Getting Started
-
Modern JavaScript – Variables, Scopes and More
-
Modern JavaScript – Working with Arrays
-
Modern JavaScript – Working with Objects
-
Modern JavaScript – Functions and MethodsFunctions and Methods< > Create Different Types of Functions Coding ExerciseCreating an Element with Modern JavaScript< > Creating Elements Coding Exercise 1The New Arrow FunctionArrow Function Scope and ThisBuilding a Tax Calculator FunctionUsing a Built in JavaScript FunctionCreating a HTML OutputCreating a Web Page with Modern JavaScriptLogical Operators in Modern JavaScriptSwitch Case StatementsThe Loops in Modern JavaScript< > Loops with Objects Coding Exercise 1The map() Array Method< > Using map() Array Method Coding ExerciseLet’s Build a Complex Function
-
Modern JavaScript – String Outputs
-
Modern JavaScript – DOM Document Object Model and Events
-
Modern JavaScript Project – Weather App
-
Modern JavaScript Project – The Note App
-
Bootstrap 5 – Getting Started
-
Bootstrap 5 – LayoutsBreakpoints in Bootstrap 5Container TypesGridGrid OptionsNesting Rows and ColumnsColumn Vertical AlignmentColumn Horizontal AlignmentColumn Wrapping and Column BreaksReordering and Offsetting ColumnsMargin UtilitiesGuttersHorizontal GuttersVertical GuttersHorizontal and Vertical Gutters
-
Bootstrap 5 – Contents
-
Bootstrap 5 – Forms
-
Bootstrap 5 – ComponentsAccordionsAlertsDismissing AlertsBadgesBreadcrumbButtonsButton GroupButton ToolbarButton Group AlterationCardCard SizingCard NavigationCard ImagesCard StylesCarouselCarousel ControlsCarousel IndicatorsCarousel CaptionCarousel Fade EffectCarousel TimingDisable Carousel Touch SwipingCarousel Dark Variant(Bootstrap 5.3 Update) Deprecation of Carousel Dark & The New MethodClose Button(Bootstrap 5.3 Update) Deprecation of “btn-close-white” & The New MethodCollapseHorizontal CollapseMultiple TargetsDropdownsSplit ButtonDropdown SizingDark Dropdowns(Bootstrap 5.3 Update) Deprecation of Dark Dropdowns & The New MethodDropdown DirectionsDropup and Dropdown AlignmentMenu ItemsMenu AlignmentDropdown Alignment OptionsMenu ContentsDropdown FormsDropdown OptionsDropdown Auto CloseList GroupList Group Links and ButtonsList Group FlushNumbered ListHorizontal List GroupsContextual List Group ClassesList Group with BadgesList Group with Custom ContentList Group Checkboxes and RadiosList Group JavaScript TabsModalsStatic BackdropScrolling Long ContentVertically CenteredModal Tooltips and PopoversUsing Grid system in ModalVarying Modal ContentToggle Between ModalsOptional Modal SizesNavbar(Bootstrap 5.3 Update) The All New “bg-body-tertiary”Navigation LinksNavbar DropdownNavbar Nested DropdownNavbar FormsNavbar Input GroupNavbar Plain TextNavbar Colors(Bootstrap 5.3 Update) The Navbar Dark-Mode(Bootstrap 5.3 Update) The New Navbar ColorNavbar ContainersNavbar PlacementNavbar ScrollingOff Canvas NavbarNavs and TabsNav Flex UtilitiesNav Tabs and Pills with DropdownTabs and Pills BehaviorsOffcanvas In-Depth(Bootstrap 5.3 Update) Offcanvas Dark-ModeOffcanvas ScrollingOffcanvas PlacementPaginationPlaceholdersPopovers In-DepthPopover DirectionCustom PopoversDismiss on next clickEnable Popover on HoverProgress BarsProgress bar height and BackgroundStripes and Animation(Bootstrap 5.3 Update) The New Progress Bar(Bootstrap 5.3 Update) Progress Bar Height(Bootstrap 5.3 Update) Labels and Backgrounds in Progress Bars(Bootstrap 5.3 Update) Multiple Stacked Progress Bars(Bootstrap 5.3 Update) Stripped and Animated Progress BarsScrollspy 11:16 SpinnersGrowing SpinnerSpinner AlignmentSpinner SizesSpinner in ButtonsToastsToast AlignmentTooltips In-DepthCustom TooltipTooltip DirectionsHTML in TooltipTooltip on Disabled Elements
-
Bootstrap 5 – Helpers
-
Bootstrap 5 – UtilitiesBackgrounds(Bootstrap 5.3 Update) Additional Background ColorsBackground GradientsBackground OpacityBordersBorder ColorBorder OpacityBorder WidthBorder RadiusRounded Border SizesText ColorsText OpacityDisplay Inline and BlockHiding ElementsDisplay in PrintFlexFlex DirectionFlex Justify ContentFlex Align ItemsFlex Align SelfFlex FillFlex Grow and ShrinkFlex Auto MarginsFlex with Align ItemsFlex WrapFlex OrderFlex Align ContentFlex Media ObjectResponsive FloatInteractions(Bootstrap 5.3 Update) Link Opacity(Bootstrap 5.3 Update) Link Underlines(Bootstrap 5.3 Update) Colored Links(Bootstrap 5.3 Update) Object Fit(Bootstrap 5.3 Update) Responsive Object FitOpacityOverflowPositionPosition Center ElementsPosition Center Elements within EdgesPosition Examples Part 1Position Example Part 2ShadowSizingSpacingGapText AlignmentText WrapText BreakText TransformFont SizeFont weights and italicsLine HeightMonoscopeReset ColorText DecorationVertical AlignmentVisibility(Bootstrap 5.3 Update) The Z-IndexBootstrap Icons
-
Bootstrap 5 Project 1 -EMS APPIntroduction to EMS2.0 ProjectCreating the Login PageCreating Dash Nav and Brand LogoCreating the Navbar TogglerCreating Navbar ItemsCreating Form Fields for NavbarCreating Cards for DashboardCreating Employees List PageCreating Employees Page SidebarCreating Employees List TableCreating Add Employee ModalCreating Add Employee Modal FormCreating Details Modal for Employee ListCreating Edit Details for Employee ListCreating Delete Modal for Employees ListCreating Jobs List PageUpdating the Job List PageCreating Job List TableCreating Add Job ModalCreating Details Modal for JobCreating Edit Details for Job ModalCreating Delete Modal for Job List
-
Bootstrap 5 Project – BLOG2.0 AppBlog Project IntroductionWhat’s Required for Template BuildingCreating The Index FileCreating The Navbar and Brand LogoCreating Navbar TogglerCreating Navbar ItemsCreating The Search FieldCreating The Home BannerCreating The Subscribe ModalCreating Home Posts SectionCreating Blog FooterAdding Custom Effects To NavbarCreating Default Page HeaderCreating Post Loop For Default PageCreating Sidebar Subscribe FormCreating Categories and Archive WidgetsCreating Page and Post Content AreaCreating Comment Form for PostsCreating The Search PageLinking Everything Together
-
Bootstrap 5 Project – Professional WebsiteIntroduction To ProjectSetting Up Project FolderCreating Navbar and BrandCreating Navbar TogglerCreating Nav ItemsCreating Navbar Search FieldCreating Navbar Sign-Up and Login ButtonsCreating The Banner TextAdding Banner ImageCreating Site Feature SetCreating Course Loop HeaderCreating Course Loop FilterCreating Course Loop HeaderCreating Single Course List ItemCreating Duplicates of Course ItemsCreating Home Page ContentAdding Home Content ImageCreating Subscribe AreaCreating Main FooterCreating Footer AddressCreating Link Items For FooterCreating Social IconsCreating Copyright InfoCreating Sticky FooterCreating About Page HeaderCreating About Content SectionCreating The Courses PageCreating Single Course Page And BreadcrumbCreating Course Header Description and Meta DataCreating Course Meta DataAdding Icons To Course Meta DataAdding Course ButtonsCreating Single Course ImageCreating Single Course ContentsCreating FAQ HeaderCreating FAQ ListCreating Post Question FormCreating Blog Page and HeaderCreating Blog Posts ListCreating Blog SidebarCreating Subscribe ModalCreating The Subscribe FormCreating Single Post PageCreating Contact Page HeaderCreating Contact Page CardsCreating Contact ModalLinking Everything Together
-
Angular – Introduction
-
Angular – Getting Started
-
Angular Components and Styles
-
Angular – Interpolation, Binding & PipesString Interpolation in Angular[Assignment] String Interpolation[Solution] String Interpolation SolutionData Binding in AngularNg If and Else Directives in Angular[Assignment] Ng If and Else[Solution] Ng If and ElseEvent Binding in AngularSwitchable Events in AngularModifying Data with Switch in EventsPipes in AngularCreating a Custom Pipe in Angular
-
Angular – Input Decorator, Services, HTTP Clients
-
React – Introduction
-
What is React ?
-
React – Elements
-
React – Components
-
React – State in React Components
-
React – React Asynchronous
-
React – Testing in React
-
React – Working with React Routers
-
React Project
-
React Project – Setting up and Installation
-
React Project – Developing Project
-
React – Setting up Sort and Search Functionality
-
React – Manipulation Data
Learn Front-End Web Development by building a fully functional Note App with Vanilla JavaScript.
-
Setting up a clean and scalable project structure.
-
Creating a responsive user interface using HTML, CSS, and Bootstrap for seamless user experience.
-
Implementing CRUD (Create, Read, Update, Delete) operations for complete app functionality.
-
Adding interactivity and dynamic features using modern JavaScript techniques.
-
Includes step-by-step video tutorials and exercise files for hands-on practice and reference.
-
Gain practical tips and best practices for JavaScript development and project structuring.
-
Enhance your JavaScript skills by building a real-world application.
-
Strengthen your understanding of DOM manipulation and front-end development techniques.
-
Add a professional-grade project to your portfolio to showcase your Front-End Web Development expertise.
(June 2023 – Update) Bootstrap Section Updated to Bootstrap 5.3
-
This course now covers the latest Bootstrap 5.3, keeping your Front-End Web Development skills up to date.
-
Learn the newest features, utilities, and components introduced in Bootstrap 5.3.
Course Overview: Front-End Web Development – Complete Guide (Step by Step) [Updated 2024]
This comprehensive course teaches Front-End Web Development from scratch, designed for beginners and those looking to refine their skills.
What You’ll Learn:
-
HTML5 & CSS3
Master the foundations of Front-End Web Development by learning to structure and style websites. Build responsive designs and layouts for modern devices. -
JavaScript & ES6+
Add interactivity and dynamic features to websites using modern JavaScript techniques (ECMAScript 6 and later). Learn JavaScript step-by-step, from basics to advanced topics. -
Bootstrap 5
Harness the power of Bootstrap 5, the most popular CSS framework, to design responsive, mobile-first websites.Work on three live projects, including:
-
EMS Web App: Build an Employee Management System with Bootstrap 5.
-
Blog App: Create a fully functional blog platform for all levels.
-
Professional Website: Design and develop a high-quality, professional-grade website.
-
-
Angular
Get started with Angular by integrating it into HTML5 and CSS3 applications. Learn components, data binding, and routing to build dynamic, single-page web applications. -
React & Bootstrap
Master React with the Create React App tool. Build a practical React web application that manages user data via an API. Learn how to implement CRUD functionality (Create, Read, Update, Delete) within your React app.
Why Take This Course?
-
Comprehensive Curriculum: Covers everything you need to know about Front-End Web Development, from basics to advanced frameworks.
-
Hands-On Projects: Gain practical experience with real-world projects in HTML5, CSS3, JavaScript, Bootstrap, Angular, and React.
-
Step-by-Step Tutorials: Detailed and beginner-friendly explanations for every topic, making it easy to follow along.
-
Portfolio-Ready Projects: Build professional applications to showcase your skills.
-
Expert Support: Access to the Q&A section for personalized help and guidance.
Enroll now and take the first step toward mastering Front-End Web Development. Whether you’re a beginner or looking to upgrade, this course is going to equip you with the knowledge and hands-on experience to create stunning, interactive websites.