- Course Overview
- HTML Documents
- DOCTYPE, Document, DOM, BOM
- HTML - know it
- HTML Documents
- The Head Element
- Head Tags
- Scripts
- Styles
- Links
- Meta tags and SEO
- The Body Element
- HTML Elements
- Semantic/non-semantic elements
- ID/ class/ inline-styles/ attributes
- Block/inline elements
- Displaying Text
- Basic Text
- Text Breaking and Whitespace
- Reference Text
- Semantic Meaning
- Creating List
- Basic Lists
- Modern Lists
- Linking Documents
- Basics of Link
- Link concepts
- Understanding Targets
- Additional Link Attributes
- Data with Tables
- HTML Tables
- Spanning Columns and Rows
- Formatting Tables
- Forms
- Form Inputs
- Form Specific elements(fieldset, dd, dt, label, submit)
- Multimedia Elements
- Image
- Video/Audio
- Global attirbutes
- Storage
- Local Storage
- Session Storage
- IndexdDB
- Cookies
- Web workers
- Know it
- How it works
- Service workers
- Fetch
- Cache
- Offline
- Web Socket
- Know it
- How it works
- Geoloactaion
- Know it
- How it works
- Ellective/If possible
- Canvas
- Web GL
- SVG
- Basics
- Width
- Height
- Padding
- Margin
- CSS Selector
- Basic
- Advanced
- Pseudo
- Scopes
- Specificity
- Inheritance
- Generated content
- Float (left, right, clear, both)
- Box Model
- CSS units
- Positioning
- Display
- Flex Layout
- Basic
- understanding Flexbox
- Flex container
- Flex Items
- Challenges
- Grid Layout
- Basic
- understanding Grid
- Deep dive
- Grid positioning
- Challenges
- Content
- Colors & Gradients
- Fonts
- Text effects
- Effects
- Shadow
- Transition
- Transforms
- Adaptive Design
- Media Query
- CSS Variables
- Ellective/If possible
- Advanced Animations
Prerequisites
- Git
- Basic knowledge of Text editor and Browser
Who should take this course?
Anyone who has started/new with less than 1 year of experience in front-end career
What you can expect out of this course?
You will get a strong understanding about the basics and a very good application directed thinking skill