Front-End Fundamentals: Building Modern Web Interfaces

Name: Front-End Fundamentals: Building Modern Web Interfaces
Rating: 4.3 (136 reviews)

Quick refresher on basics of HTML, CSS, JavaScript

Created byTech Jedi

Last updated 5/2024

English

What you'll learn

9 sections • 43 lectures • 1h 20m total length

Introduction0:47
Introduction to frontend web development
Importance of frontend web development0:30
Importance or need for a dedicated stream of frontend web development
Skills required for frontend web development2:19
List of skills needed to be a successful frontend developer

Introduction to CSS0:41
Introduction to CSS (Cascaded Style Sheet)
CSS selectors and properties2:13
Various CSS Selectors and how it affects web page rendering
Demo: Elements Selector1:51
Demo on applying styles at element level
Demo: Class Selector2:01
Demo on applying styles for class associated with an element
Demo: Id Selector1:52
Demo on applying styles for id of an element
Different HTML Styles0:52
Different styling applied to HTML elements
Demo: Text Styling4:59
Demo on various text styles and its implication in web page rendering
Demo: Background Styling2:40
Demo on various background styles and its implication in web page rendering
CSS Basics

Introduction to JavaScript0:48
Basics of JavaScript programing
Basic Programming Constructs - Variables, Data-types, Operators1:06
Basics programming constructs like variables, datatypes and operators
Demo: Basic constructs - variables and console log3:45
Demo on usage of basic programming construct like variables and printing logs
Demo: Basic constructs - supported datatypes2:25
Demo on basic constructs like supported datatypes in JavaScript and how to use them
Demo: Basic constructs - supported operators and operations7:03
Demo on basic constructs like supported operators/operations in JavaScript and how to use them
Conditions and loops in JavaScript1:20
Learn about writing control and loop statements in JavaScript
Demo: Sample code for conditions and loops3:41
Demo on conditions and loops in JavaScript
JavaScript Fundamentals

Introduction to the DOM (Document Object Model)0:29
Learn about basics of DOM (Document Object Model) and its relationship with web pages
Modifying HTML elements with JavaScript1:00
Learn about how to access and modify content in HTML page
Demo: Update web page at runtime4:14
Demo on DOM updates
Event handling with JavaScript1:00
Learn about events handling in JavaScript
Demo: Web page event listeners - button click3:16
Demo on listening to web page button click event
DOM Manipulation

Learn fundamentals of frontend web development and essential programming constructs and tools needed for frontend web development.

Course Structure:

Introduction to Front End Web Development
- What is front end web development?
- Importance of front end web development
- Skills required for front end web development
HTML Basics
- Introduction to HTML
- HTML tags and elements
- Creating a basic HTML webpage
CSS Basics
- Introduction to CSS
- CSS selectors and properties
- Styling HTML elements with CSS
Responsive Web Design
- What is responsive web design?
- Media queries and breakpoints
- Creating a responsive webpage
JavaScript Fundamentals
- Introduction to JavaScript
- Variables, data types, and operators
- Control flow and loops in JavaScript
DOM Manipulation
- Introduction to the Document Object Model (DOM)
- Accessing and modifying HTML elements with JavaScript
- Event handling in JavaScript
Front End Frameworks (e.g., React, Angular, Vue)
- Introduction to front end frameworks
- Overview of popular front end frameworks
Web Performance Optimization
- Importance of web performance optimization
- Techniques for optimizing website speed
- Tools for measuring and analyzing web performance
Web Accessibility
- Introduction to web accessibility
- WCAG guidelines and best practices
- Implementing accessibility features in web development

What you will learn?

Requirements

Content team

Freshers and experienced professionals looking for exploring frontend development career