Front-End - BringU2Realtime
Course Overview: This course is designed to equip you with essential front-end development skills using HTML, CSS, and JavaScript. You’ll learn how to create responsive, user-friendly web interfaces and interactive experiences, from basic web page structures to dynamic content and styling.
What You’ll Learn:
- HTML: Understand the fundamentals of web page structure, and learn how to create semantic, well-organized content.
- CSS: Master styling techniques to build visually appealing, responsive designs that work across different devices.
- JavaScript: Explore JavaScript to make your web pages interactive, dynamic, and more engaging for users.
- Real-Time Projects: Build hands-on projects that combine HTML, CSS, and JavaScript to develop fully functional web pages and applications.
Who Should Enroll: This course is ideal for anyone interested in learning front-end web development, whether you’re a beginner or looking to enhance your web design and coding skills.
HTML Syllabus:
Introduction
- What is HTML
- HTML Basics
- Web Design
HTML Basics
- Paragraph
- Heading
- Comments
- Table
- List
- Random List
- Ordered List
- Description List
- Pre Tag
- Horizontal Line
- Line Break
Head Elements
- Head
- Title
- Style
- Meta Elements
- Favicon
Inline Elements
- Block & Inline
- Links
- Bold
- Italic
- Images
- Superscript & subscript
- Formatting
HTML Form
- Form
- Form Elements
- Input
- Form Action
Semantic HTML
- Semantic Html
- Div
- Aside
- Section
- Footer
- Main
- Figure
- Accessibility
HTML, CSS & JS
- Class
- Id
- Layout
- Web design
- Html & javascript
Graphics & Media
- Video
- Audio
- Svg
- Canvas
Why HTML
- Why HTML
Other Topics
- Iframes
- Entities
- Quotations
- Emojis
- Symbols
- File paths
CSS Syllabus:
Introduction
- Introduction
- Include in a Webpage
- Syntax
- Essential Concepts
Selectors
- Selectors
- Pseudo Class Selector
- Pseudo Element Selector
- ! important
- Units: em, px, rem etc.
Font
- Font
- Font Family
- Font Size
- Font Weight
- Font Stretch
- Text Colour
- Use Custom Fonts in CSS
Formatting
- Text Decoration
- Text Transform
- Text Spacing
- Text Shadow
- Text Align
- Text Align Last
- Vertical Align
- Direction
Background
- Background
- Background Color
- Background Image
- Background Repeat
- Background Attachment
- Background Size
- Background Clip
- Background Origin
- Background Position
- Opacity/Transparency
Gradients
- Gradients (Linear Gradient)
- Radial Gradient
Border
- Borders
- Border Style
- Border Width
- Border Color
- Border Shorthand
- Border Image
- Border Radius
Box Model
- Height/Width
- Box Model
- Box Sizing
- Padding
- Margin
- Outline
- Box Shadow
Display - Position
- Display
- Position
- z-index
- Overflow
Float layout
- float
- clear float
- Creating Layout Using float
- calc() Function
Flexbox
- Flex (Flexbox)
- Flex Container
- Flex items
- Creating Responsive Layouts using Flexbox
Gird
- Grid
- Grid Container
- Grid Item
- Create an image gallery using Grid
Styling elements
- Buttons Styling
- Forms Styling
- Tables Styling
- Lists Styling
- Icons Styling
- Img Styling
- Links
Responsive design
- Responsive Web Design
- Media Query: @media
- Mobile First Design
JavaScript Syllabus:
Introduction
- Getting Started With JS
- JS Variables and Constants
- JS console.log()
- JS Data Types
- JS Operators
- JS Comments
- JS Type Conversions
Flow Control
- Comparison and Logical Operators
- JS if...else Statement
- JS for Loop
- JS while Loop
- JS break Statement
- JS continue Statement
- JS switch Statement
JS Functions
- JS Functions and Expressions
- JS Variable Scope
- JS Hoisting
- JS Recursion
JS Objects
- JS Objects
- JS Methods
- JS Constructor Function
- JS Getters and Setters
- JS Prototype
JS Types
- JS Arrays
- JS Multidimensional Arrays
- JS Strings
- JS for...in Loop
- JS Numbers
- JS Symbols
Exceptions and Modules
- JS try...catch...finally
- JS throw Statement
- JS Modules
JS ES6
- JS ES6
- JS Arrow Function
- JS Default Parameters
- JS Template Literals
- JS Spread Operator
- JS Map
- JS Set
- JS Destructuring Assignment
- JS Classes
- JS Inheritance
- JS for...of Loop
- JS Proxies
JS Asynchronous
- JS setTimeout()
- JS CallBack
- JS Promises
- JS async/await
- JS setInterval()
JS Miscellaneous
- JS JSON
- JS Date and Time
- JS Closures
- JS this
- JS 'use strict'
- JS Iterators and Iterables
- JS Generators
- JS Regex
- JS Browser Debugging
- Uses of JS
Skills or Tools You will learn
HTML Basics | CSS Styling | Responsive Design | JavaScript Fundamentals | DOM Manipulation | Event Handling | CSS Flexbox & Grid | JavaScript ES6+ Features | Eclipse | Chrome DevTools | Git | GitHub