The only HTML-CSS-Sass-Bootstrap course you’ll ever need to become a hands-on developer!
When you start this course (even if you have ZERO knowledge about HTML/CSS/Sass/Bootstrap) – you’ll be given proper guidance and taught step by step in order to understand and completely grasp the topics.
Understanding the fundamentals of HTML and CSS is the foundation of becoming a smart and confident developer who is ready to take on any challenge head-on!
The lectures are methodical, logical and of course practical. It is indeed a progressive course, as we will add more practical assignments and projects from time to time along with version updates.
Learn from the best!
Being in the industry for 2 decades - we know what it takes to get your career off on the right foot. That's why we have designed and crafted interactive courses that are the best reference material around, and they're an absolute must-have for any developer looking to get ahead.
The course is crafted by the best in the business - loaded with hands-on reference material & interview questions from Fortune 10/100/500 clients world-wide, which has helped over 10,000 consultants in securing their dream job or even advance in their career in Front-End/Full-Stack/Web & Mobile technologies industry.
Learn. Practice. Grow.
If you want to learn HTML, CSS, Sass, and Bootstrap in the simplest and in a methodical way – this course is crafted just for you as this is the only material you will ever need to master this subject!
Curriculum
- HTML Page structure (5:10)
- The paragraph tag (3:57)
- Tags, Empty tags & Elements (4:40)
- Attributes (3:26)
- < div > & < span > (3:34)
- H1 to H6 (2:53)
- The unordered list tag - < ul > (3:50)
- The Ordered list tag (4:57)
- Anchor tag (4:18)
- Anchor tag - Advanced concept (#) (3:12)
- < img > tag (5:22)
- Relative path Vs. Absolute path (5:42)
- The input tag - text, numeric & email (5:30)
- input - checkbox & radio (4:33)
- The select tag (4:45)
- HTML vs XHTML (6:20)
- Semantic Tags - address, footer, section, header (5:56)
- Concept Of Accessibility In Web Applications (2:54)
- ARIA - attribute (2:35)
- Meta Tag (SEO friendly tags) (4:24)
- Installing Google Analytics (4:27)
- CSS introduction (1:24)
- Inline Styling and basic CSS syntax (3:44)
- Internal Styling with style tag (3:35)
- External Styling - link tag (3:22)
- Element selector (2:31)
- Class selector (3:29)
- Element.class selector (2:15)
- ID selector (2:30)
- Group selector (1:17)
- Universal selector (2:47)
- CSS Specificity (6:27)
- Universal Selector and CSS Reset (3:15)
- Combinators introduction (1:24)
- Descendent selector/combinator (space) (3:49)
- Child selector (>) (3:35)
- Adjacent selector (+) (3:46)
- Attribute selector - element[attribute] (4:08)
- Attribute spaced selector (~) (3:37)
- Attribute selector (^) - prefixed value (3:07)
- Attribute selector ($) - suffixed value (2:07)
- Attribute contains selector (*) (3:56)
- Attribute hyphenated selector (|) (3:10)
- Introduction to pseudo class (1:43)
- Linguistic pseudo-classes (5:08)
- Location pseudo-classes (9:51)
- :hover - User action pseudo classes part 1 (5:23)
- :active - User action pseudo classes part 2 (2:52)
- :focus - User action pseudo classes part 3 (5:46)
- :focus-within - User action pseudo classes part 4 (5:57)
- :enabled/disabled - Input pseudo classes (4:14)
- readonly/contenteditable attributes (4:46)
- :read-only/read-write - Input pseudo classes (2:32)
- :placeholder-shown - Input pseudo class (1:51)
- :valid/:invalid & :required - Input pseudo class (9:12)
- HTML/CSS Live Preview Extension (1:35)
- :nth-child() selector - Tree structural pseudo class (9:35)
- :nth-child() selector - complex arguments (6:10)
- Pseudo Element (pseudo class vs. element) (1:34)
- ::first-line - pseudo element part 1 (3:30)
- ::first-letter - pseudo element part 2 (4:08)
- ::before/::after - pseudo element part 3 (7:38)
- ::before/::after - pseudo element part 4 (4:04)
- CSS Unit Introduction (1:33)
- Absolute Units :- px (2:04)
- Absolute Units :- pt (2:36)
- Absolute Units :- cm (2:01)
- Absolute Units :- mm (2:39)
- Absolute Units :- in (1:38)
- Absolute Units :- pica - pc (1:41)
- Relative Units :- em (6:01)
- Relative Units :- rem (4:49)
- Relative Units :- % - percentage unit (4:12)
- Relative Units :- ex - x height (2:41)
- Relative Units :- ch - character (2:55)
- Relative Units :- vw (4:02)
- Relative Units :- vh (3:17)
- Relative Units :- vmin/vmax (4:57)
- Angle measurement units - deg, grad, rad & turn (2:54)
- Time measurement units - ms/s (1:53)
- Introduction (1:24)
- Box-model (4:52)
- Applying Border in CSS (3:49)
- Applying Padding in CSS (6:17)
- Applying Margin in CSS (4:57)
- Collapsing and Negative Margins (4:19)
- Understanding Float (5:40)
- Clearing Floats (4:27)
- Container-Float Collapsing (4:33)
- Clearfix - Modern way to clear floats (3:38)
- Creating multiple columns floated layout (4:02)
- Display Property (5:42)
- Fix, Fluid & Responsive layout (4:49)
- Understanding Grids (8:35)
- Spanning Rows and Columns in Grid (7:06)
- Introduction to CSS Flexbox (4:08)
- Flex Container Properties (10:19)
- Flex Item Properties (10:08)
- Calculation of flex-grow (3:07)
- @media query - Introduction (5:38)
- Assignment - implementation of @media query (2:52)
- media type - all (4:36)
- media type - screen (2:05)
- media type - print (3:14)
- Creating a basic responsive form using media query with Breakpoint (4:27)
- Introduction to CSS Transform (2:10)
- Move elements with translate() method (6:39)
- rotate() Method (4:02)
- Assignment - rotate() Method (3:24)
- Resizing elements using the scale() function (4:28)
- Transforming Elements Using skew() Function (2:15)
- Assignment - Skew() on Text (1:41)
- matrix() - The all in one method (6:22)
- 3D Card Flip Design Using transform Method (5:53)
- CSS Animation Introduction (1:58)
- @keyframes rule (4:47)
- Assignment - Creating A Bouncing Ball Animation (1:55)
- animation-name & animation-duration - The First Step (2:27)
- animation-delay (2:16)
- Controlling Iterations with animation-iteration-count property (5:28)
- Assignment - Controlling Iterations (1:59)
- Changing Animation Direction with animation-direction property (3:08)
- Defining Speed Curve with animation-timing-function property (3:45)
- Assignment - Creating Background Animation (4:04)
- animation-fill-mode property (4:32)
- Assignment - Sunset Animation (3:41)
- Introduction (2:12)
- Configuring Bootstrap (4:38)
- Containers (2:24)
- Utilities/Helper Classes (3:41)
- Jumbotron (Not!) in Bootstrap 5 (2:15)
- Buttons (3:27)
- Grouped Buttons & Spinners (2:30)
- Grid System Layout (4:00)
- Login Form with Bootstrap (6:13)
- Pagination With Bootstrap (8:11)
- Modal (6:00)
- Modal Assignment For Email Registration (3:26)
- Breadcrumb (4:31)
- Navigation bar (4:11)
- Basic Menu - Top Navigation Bar (5:38)
- Adding Split Menu Items (2:02)
- Responsive Menu (13:19)
- Vertical Accordion (7:21)
- Horizontal Accordion (4:27)
- CSS Hamburger Sidebar Menu (11:34)
- Subscribe Form (3:25)
- Vertical Carousel with SCSS (6:34)
- Responsive Card Layout - CSS (7:58)
- Responsive Shopping Cart (7:54)
- CSS Parallax (4:00)
- Responsive footer with bootstrap (5:40)
30 Day Money Back Guarantee - No Questions Asked!
Confidence in our course quality is unwavering, so much so that we guarantee your satisfaction. If, within the initial 30 days, you find the course doesn't meet your expectations, we'll grant you a full refund.
Your satisfaction is our commitment.
🙋Frequently Asked Questions
🕒 When does the course kick off and conclude?
Your journey starts right now and extends indefinitely! This self-paced online course respects your schedule – commence and conclude at your convenience.
⏰ How long can I enjoy course access?
Prepare for a lifetime of access! Once you enroll, the course content is at your fingertips for as long as you desire. Access it seamlessly across all your devices.
❓ What if the course doesn't meet my expectations?
Your satisfaction is paramount. Should the course fall short of your expectations, reach out within the initial 30 days, and we'll gladly grant you a full refund. Your contentment is our priority.