Advanced CSS and Sass: Flexbox, Grid, Animations and More!

Current Status

Price

Free

Get Started

Average Review Score:

★★★★★

You must log in and have started this course to submit a review.

Course Content

Lesson Content

0% Complete 0/3 Steps

Section 1: Welcome, Welcome, Welcome!

2. READ BEFORE YOU START!

3. Setting up Our Tools

Lesson Content

0% Complete 0/7 Steps

4. Section Intro

5. Project Overview

6. Building the Header – Part 1

7. Building the Header – Part 2

8. Creating Cool CSS Animations

9. Building a Complex Animated Button – Part 1

10. Building a Complex Animated Button – Part 2

Lesson Content

0% Complete 0/11 Steps

11. Section Intro

12. Three Pillars of Writing Good HTML and CSS (Never Forget Them!)

13. How CSS Works Behind the Scenes: An Overview

14. How CSS is Parsed, Part 1: The Cascade and Specificity

15. Specificity in Practice

16. How CSS is Parsed, Part 2: Value Processing

17. How CSS is Parsed, Part 3: Inheritance

18. Converting px to rem: An Effective Workflow

19. How CSS Renders a Website: The Visual Formatting Model

20. CSS Architecture, Components and BEM

21. Implementing BEM in the Natours Project

Lesson Content

0% Complete 0/8 Steps

22. Section Intro

23. What is Sass?

24. First Steps with Sass: Variables and Nesting

25. First Steps with Sass: Mixins, Extends and Functions

26. A Brief Introduction to the Command Line

27. NPM Packages: Let’s Install Sass Locally

28. NPM Scripts: Let’s Write and Compile Sass Locally

29. The Easiest Way of Automatically Reloading a Page on File Changes

Lesson Content

0% Complete 0/24 Steps

30. Section Intro

31. Converting Our CSS Code to Sass: Variables and Nesting

32. Implementing the 7-1 CSS Architecture with Sass

33. Review: Responsive Design Principles and Layout Types

34. Building a Custom Grid with Floats

35. Building the About Section – Part 1

36. Building the About Section – Part 2

37. Building the About Section – Part 3

38. Building the Features Section

39. Building the Tours Section – Part 1

40. Building the Tours Section – Part 2

41. Building the Tours Section – Part 3

42. Building the Stories Section – Part 1

43. Building the Stories Section – Part 2

44. Building the Stories Section – Part 3

45. Building the Booking Section – Part 1

46. Building the Booking Section – Part 2

47. Building the Booking Section – Part 3

48. Building the Footer

49. Building the Navigation – Part 1

1 of 2

Lesson Content

0% Complete 0/13 Steps

54. Section Intro

55. Mobile-First vs Desktop-First and Breakpoints

56. Let’s Use the Power of Sass Mixins to Write Media Queries

57. Writing Media Queries – Base, Typography and Layout

58. Writing Media Queries – Layout, About and Features Sections

59. Writing Media Queries – Tours, Stories and Booking Sections

60. An Overview of Responsive Images

61. Responsive Images in HTML – Art Direction and Density Switching

62. Responsive Images in HTML – Density and Resolution Switching

63. Responsive Images in CSS

64. Testing for Browser Support with @supports

65. Setting up a Simple Build Process with NPM Scripts

66. Wrapping up the Natours Project: Final Considerations

Lesson Content

0% Complete 0/22 Steps

67. Section Intro

68. Why Flexbox: An Overview of the Philosophy Behind Flexbox

69. A Basic Intro to Flexbox: The Flex Container

70. A Basic Intro to Flexbox: Flex Items

71. A Basic Intro to Flexbox: Adding More Flex Items

72. Project Overview

73. Defining Project Settings and Custom Properties

74. Building the Overall Layout

75. Building the Header – Part 1

76. Building the Header – Part 2

77. Building the Header – Part 3

78. Building the Navigation – Part 1

79. Building the Navigation – Part 2

80. Building the Hotel Overview – Part 1

81. Building the Hotel Overview – Part 2

82. Building the Description Section – Part 1

83. Building the Description Section – Part 2

84. Building the User Reviews Section

85. Building the CTA Section

86. Writing Media Queries – Part 1

1 of 2

Lesson Content

0% Complete 0/16 Steps

89. Section Intro

90. Why CSS Grid: A Whole New Mindset

91. Quick Setup for This Section

92. Creating Our First Grid

93. Getting Familiar with the fr Unit

94. Positioning Grid Items

95. Spanning Grid Items

96. Grid Challenge

97. Grid Challenge: A Basic Solution

98. Naming Grid Lines

99. Naming Grid Areas

100. Implicit Grids vs. Explicit Grids

101. Aligning Grid Items

102. Aligning Tracks

103. Using min-content, max-content and the minmax() function

104. Responsive Layouts with auto-fit and auto-fill

Lesson Content

0% Complete 0/20 Steps

105. Project Overview and Setup

106. Building the Overall Layout – Part 1

107. Building the Overall Layout – Part 2

108. Building the Features Section – Part 1

109. Building the Features Section – Part 2

110. Building the Story Section – Part 1

111. Building the Story Section – Part 2

112. Building the Homes Section – Part 1

113. Building the Homes Section – Part 2

114. Building the Gallery – Part 1

115. Building the Gallery – Part 2

116. Building the Foote

117. Building the Sidebar

118. Building the Header – Part 1

119. Building the Header – Part 2

120. Building the Realtors Section

121. Writing Media Queries – Part 1

122. Writing Media Queries – Part 2

123. Browser Support for CSS Grid

124. Wrapping up the Nexter Project: Final Considerations

Lesson Content

0% Complete 0/2 Steps

125. See You Next Time, CSS Master!

126. My Other Courses + Updates

Current Status

Price

Get Started

Course Content

Course Includes:

Online Platform

Links

Contacts

Unlock Your Potential with Tru Center of Excellence

Important Links

Get Connected

Advanced CSS and Sass: Flexbox, Grid, Animations and More!

Current Status

Price

Get Started

Course Content

Course Includes:

Related Courses

Online Platform

Links

Contacts