Quick refresher on basics of HTML, CSS, JavaScript
What you will learn
Learn fundamentals of frontend web application development
Quick refresher for HTML, CSS, JavaScript basics
Learn basics DOM manipulation with JavaScript
Quick refresher to web application performance optimization and related tools
Description
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?
- Learn fundamentals of frontend web application development
- Quick refresher for HTML, CSS, JavaScript basics
- Learn basics DOM manipulation with JavaScript
- Quick refresher to web application performance optimization and related tools
Requirements
- Basics knowledge of Internet, World Wide Web, Web Application
- Windows / Linux / Mac OS X Machine with Internet
English
language
Content
Introduction
Introduction
Importance of frontend web development
Skills required for frontend web development
HTML Basics
Introduction to HTML
Demo: Basic HTML file
HTML tags and elements
Demo: Different Heading tag
Demo: Image tag
Demo: Anchor tag
Demo: Paragraph tag
Demo: Comments tag
Creating HTML webpage
CSS Basics
Introduction to CSS
CSS selectors and properties
Demo: Elements Selector
Demo: Class Selector
Demo: Id Selector
Different HTML Styles
Demo: Text Styling
Demo: Background Styling
Responsive Web Design
What is responsive web design?
Media queries and breakpoints
Creating responsive webpage
JavaScript Fundamentals
Introduction to JavaScript
Basic Programming Constructs – Variables, Data-types, Operators
Demo: Basic constructs – variables and console log
Demo: Basic constructs – supported datatypes
Demo: Basic constructs – supported operators and operations
Conditions and loops in JavaScript
Demo: Sample code for conditions and loops
DOM Manipulation
Introduction to the DOM (Document Object Model)
Modifying HTML elements with JavaScript
Demo: Update web page at runtime
Event handling with JavaScript
Demo: Web page event listeners – button click
Frontend development frameworks
Introduction to frontend development frameworks
Popular frameworks
Web Performance Optimization
Importance of web performance optimization
Techniques for optimizing website speed
Tools for web performance analysis
Web Accessibility
Introduction to web accessibility
WCAG guidelines and best practices
Implementing accessibility features in web development