Front–end web development is a rapidly–growing field of computer programming that focuses on building the user interfaces of websites and web applications. It is the process of creating the look, feel, and functionality of a website or web application. This course provides an introduction to the skills and concepts necessary to create and maintain websites and web applications.
The course begins with an introduction to the fundamentals of front–end web development. It covers the basics of HTML and CSS, the two main languages used to create the structure and style of web pages. It also introduces students to JavaScript, the scripting language used to create interactive webpages. In addition, the course covers the use of frameworks and libraries, such as jQuery, to create more complex webpages.
The course then moves on to more advanced topics, such as using HTML5, CSS3, and JavaScript to create responsive and mobile–friendly websites. It also covers technologies such as AJAX and JSON, which are used to create interactive webpages. Furthermore, the course covers the use of version control systems, such as Git, and web development tools, such as Chrome Developer Tools.
The course also covers the use of popular front–end frameworks, such as Bootstrap and Foundation, to create websites and web applications. In addition, the course covers the use of popular JavaScript libraries, such as React and Angular, to create interactive webpages. Finally, the course introduces students to best practices for creating secure and maintainable webpages.
Throughout the course, students will work on a variety of projects that allow them to apply the concepts and techniques that they have learned. These projects will be created using a variety of technologies and will involve creating webpages, web applications, and web services. In addition, students will learn about the process of deploying webpages and web applications to the internet.
By the end of the course, students will have a thorough understanding of the fundamentals of front–end web development. They will be able to create and maintain websites and web applications using HTML, CSS, JavaScript, and other related technologies. In addition, they will have developed the skills and knowledge necessary to create secure and maintainable webpages.
This course is designed for anyone interested in learning the basics of front–end web development. No prior experience is required. All of the materials used in this course are free and open source. Upon completing the course, students will be able to apply the knowledge and skills that they have acquired to create their own websites and web applications.
- All you need is a PC / Laptop
- Decent internet connectivity
- You will learn complete front-end web development from scratch
- You will learn to build Modern websites Angular & React JS
- You will learn to build Bootstrap 5 Web Applications
- You will learn HTML5 & CSS3 from scratch, & build a full working website
- You will learn Complete JavaScript + ECMA Script 6 (ES6) from scratch
- You will build front-end Reactive Web applications with CRUD
- Introduction to HTML5 & CSS3
- Introduction to HTML5 & CSS3
- What you will need
- Installing VS Code / Visual Studio Code
- Hello, World!
- Tags in HTML5
- Document structure in HTML5
- HTML5 Basics
- Headings and Paragraphs
- Text Formatting
- links in HTML5
- Nested links in HTML5
- Lists in HTML5
- Working with Images
- Tables in HTML5
- HTML5 Forms
- Forms in HTML5
- Creating a Contact Form
- Creating a Login Form
- Creating a Registration Form
- HTML5 media
- Grouping Elements
- HTML5 Media Tags
- IFrames in HTML5
- Figure Tag in HTML5
- Collapse Elements with Details Tag
- HTML5 Website Structure
- Creating The Header
- Creating Nav Menu
- Creating The Banner
- Adding Content to Page
- Creating The Sidebar
- Building Page Footer
- Adding Copyright
- CSS & CSS3 Essentials
- Inline CSS
- Internal CSS
- External CSS
- Box Model in CSS
- Targeting Elements in CSS
- Designing with Box Model
- Website Project HTML5 & CSS3
- 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
- Building The Products Page
- Building Contact Page
- Adding Nav-Menu
- Responsive Design (RWD) Explained
- Animation with CSS3
- Introduction to JavaScript
- Introduction to JavaScript
- What you should know
- Hello, World!
- JavaScript Statements
- Placements in JavaScript (Part 1)
- Placements in JavaScript (Part 2)
- JavaScript Fundamentals
- Variables in JavaScript
- Conditions in JavaScript
- Operators in JavaScript
- Working with Browser Console
- Loops in JavaScript
- Functions in JavaScript
- Creating Custom Loops with Functions
- Data Types in JavaScript
- Working with Arrays
- Numbers in JavaScript
- Strings in JavaScript
- Working with Dates Object
- Objects in JavaScript
- DOM – Document Object Model
- 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
- JavaScript Advanced
- 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
- JavaScript Conclusion
- Introduction ECMA Script 6+
- Introduction to JavaScript ES6+
- What you should know
- What is (ES6) ECMA Script 6
- Transpiling in ES6
- Why use Babel JS
- How to use Babel JS
- Installing Node JS
- JavaScript ES6 Fundamentals
- 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
- JavaScript ES6 Conclusion
- Getting Started with Bootstrap 5
- Introduction to Bootstrap 5
- What you will need
- Hello World
- Bootstrap 5 document structure
- Section 1: Quiz
- Layouts in Bootstrap 5
- Breakpoints in Bootstrap 5
- Containers
- 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
- Section 2: Quiz
- Contents in Bootstrap 5
- Typography
- Inline Text Elements
- Abbreviations and Blockquotes
- Working with Lists
- Images in Bootstrap
- Tables in Bootstrap
- Table Alignment, Nesting and Anatomy
- Figures in Bootstrap
- Section 3: Quiz
- Forms in Bootstrap 5
- Forms in Bootstrap
- Form Control
- Checks and Radios
- Range
- Input Groups
- Floating Labels
- Form Layout
- Horizontal Forms
- Auto Sizing Forms
- Inline Forms
- Form Validation
- Section 4: Quiz
- Components in Bootstrap 5
- Accordions
- Alerts
- Dismissing Alerts
- Badges
- Breadcrumb
- Buttons
- Button Group
- Button Toolbar
- Button Group Alteration
- Card
- Card Sizing
- Card Navigation
- Card Images
- Card Styles
- Carousel
- Carousel Controls
- Carousel Indicators
- Carousel Caption
- Carousel Fade Effect
- Carousel Timing
- Disable Carousel Touch Swiping
- Carousel Dark Variant
- Close Button
- Collapse
- Horizontal Collapse
- Multiple Targets
- Dropdowns
- Split Button
- Dropdown Sizing
- Dark Dropdowns
- Dropdown Directions
- Drop up 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
- Contextual List Group Classes
- List Group with Badges
- List Group with Custom Content
- 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
- Section 5: Quiz
- Helpers in Bootstrap 5
- Clearfix
- Colors and Background
- Colored Links
- Ratios
- Positions
- Stacks
- Visually Hidden
- Stretched Link
- Text Truncate
- Vertical Rule
- Section 6: Quiz
- Utilities in Bootstrap 5
- Backgrounds
- Text Colors
- Text Opacity
- Display Inline and Block
- Hiding Elements
- Display In Print
- Flex
- Flex Direction
- Flex Justify Content
- Flex Align Items
- Flex Align Self
- 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 Part 1
- Position Example Part 2
- 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
- Section 7: Quiz
- Project 1: EMS web app with Bootstrap 5
- Introduction to EMS2.0 Application project
- Creating the Login Page
- Creating Dash Nav and Brand Logo
- Creating the Navbar Toggler
- Creating Navbar Items
- Creating Form Fields for Navbar
- Creating Cards for Dashboard
- Creating Employees List Page
- Creating Employees Page Sidebar
- Creating Employees List Table
- Creating Add Employee Modal
- Creating Add Employee Modal Form
- Creating Details Modal for Employee List
- Creating Edit Details for Employee List
- Creating Delete Modal for Employees List
- Creating Jobs List Page
- Updating the Job List Page
- Creating Job List Table
- Creating Add Job Modal
- Creating Details Modal for Job
- Creating Edit Details for Job Modal
- Creating Delete Modal for Job List
- Project 2: Blog App with Bootstrap 5
- Blog project introduction
- What’s required for Template Building
- Creating the index file
- Creating the Navbar and brand logo
- Creating Navbar Toggler
- Creating Navbar Items
- Creating the search field
- Creating the home banner
- Creating the subscribe modal
- Creating Home Posts Section
- Creating Blog Footer
- Adding Custom Effects to Navbar
- Creating Default Page Header
- Creating Post Loop for Default Page
- Creating Sidebar Subscribe Form
- Creating Categories and Archive Widgets
- Creating Page and Post Content Area
- Creating Comment Form for Posts
- Creating the Search Page
- Linking Everything Together
- Project 3: Real-World Education Project
- Introduction to project
- Setting up Project Folder
- Creating Navbar and Brand
- Creating Navbar Toggler
- Creating Nav Items
- Creating Navbar Search Field
- Creating Navbar Sign-up and Login Buttons
- Creating the Banner Text
- Adding Banner Image
- Creating Site Feature Set
- Creating Course Loop Header
- Creating Course Loop Filter
- Creating Course Loop List Header
- Creating Single Course List Item
- Creating Duplicates of Course Items
- Creating Home Page Content
- Adding Home Content Image
- Creating Subscribe Area
- Creating Main Footer
- Creating Footer Address
- Creating Link Items for Footer
- Creating Social Icons
- Creating Copyright Info
- Creating Sticky Footer
- Creating About Page Header
- Creating About Content Section
- Creating the courses page
- Creating Single Course page and Breadcrumb
- Creating Course Header Description and Metadata
- Creating Course Metadata
- Adding Icons to Course Metadata
- Adding Course Buttons
- Creating Single Course Image
- Creating Single Course Contents
- Creating FAQ Header
- Creating FAQ List
- Creating Post Question Form
- Creating Blog Page and Header
- Creating Blog Posts List
- Creating Blog Sidebar
- Creating Subscribe Modal
- Creating the subscribe form
- Creating Single Post Page
- Creating Contact Page Header
- Creating Contact Page Cards
- Creating Contact Modal
- Linking Everything Together
- Introduction to Angular
- Introduction to Angular
- What you should know
- What you need to get started
- Installing Node JS for Angular
- Installing Angular
- Installing Cmder for Angular
- Angular 9+ Fundamentals
- Setting up Angular Project
- Install VS Code for Angular
- Creating the “Hello World” Project in Angular
- Angular App Directory Structure
- Creating New Components in Angular
- Creating Styles for Angular Components
- Adding Bootstrap & jQuery to Angular Project
- Interpolation in Angular
- Data Binding in Angular
- Ng If Else Directives in Angular
- Event Binding in Angular
- Pipes in Angular
- Input Decorator in Angular
- Creating Services in Angular
- HTTP Client Module in Angular
- Conclusion
- React Introduction
- Introduction to React JS
- Installing browser tools
- Installing Node JS for React
- Installing VS Code for React
- Hello World in React JS
- React JS Fundamentals
- What is a Component in React JS
- Create First React Component
- Stateless Component in React JS
- Props in React JS
- Events in React JS
- State in React JS
- Adding State to Note Component
- Refs in React JS
- Sticky Notes Project in React JS
- Creating Board With Props in React JS
- Adding Child Elements to Board
- Updating & Deleting Notes
- Adding Notes
- Keys in React JS
- Mounting Components
- Setting Default Styles
- Updating Components
- Making React Components Draggable
- Setup & Install Create React App
- Building Scratch Pad With React JS
- Conclusion For React JS
- Create React App – Getting Started
- Introduction to Create React App
- Prerequisites
- Create React App – What is React
- What is React
- Install React Tools on Chrome
- Install React Tools on Firefox
- Create React App – React Element
- Install Create-React-App
- Project Generation
- Creating React Elements
- Using JSX to Refactor Elements
- Create React App – Components in React
- Creating React Components
- Creating Different Components
- Component Properties
- Working with Lists
- Adding Keys to List Items
- Display Images in React
- Working with Fragments
- Create React App – State in React Component
- Conditional Rendering
- Destructureing Arrays and Objects
- Working with useState Hook
- Working with useEffect
- Incorporating useReducer with React
- Create React App – React Asynchronous
- Using Hooks to Fetch Data
- Displaying Data from API with React
- Handling Loading States
- Create React App – Testing React
- Testing Platform using Create React App
- Using Jest to Test Small Functions
- Testing Library in React
- Testing Hooks with React Testing Library
- Create React App – Working with React Routers
- Installing and Setting up React Routers
- React Routers Configuration
- Linking Components Together
- React Project – Introduction
- Introduction to React Project
- React Project – Setting-up & Installation
- Installing Requirements
- Create React App Installation
- Clean up React Application
- Using External Components
- Installing Bootstrap CSS in React
- Customizing Bootstrap Components in React
- React Project – Developing project
- Building your first Component
- Sub Component Hooks
- Adding Appointments into our Project
- Creating JSON Data for Demo Users
- Importing JSON Data into React Part-1
- React Project – Setting-up Sort & Search Funtionality
- Sending Data to the Component
- Conditional Classes and useState Hooks
- React Project – Manipulating Data
- Working with useEffect and useCallback
- Deleting Data
- Searching Data with Filters
- Working with Sort
- Applying the Sort Algorithm
- Adding New Appointments
