Advanced CSS & SASS: Framework, Flexbox, Grid, Animations

سرفصل های دوره

Create your own CSS Framework with reusable components using SASS. Advanced & Modern CSS Flexbox, Grid & Animations

1 - Introduction

1 - Introduction

2 - Setting up the Developer Environment

3 - Developer environment Resources.html

4 - Web Browser Code Editor

2 - Starter Project Reverse Engineering

5 - Introduction

6 - CSS.zip

6 - Project Starter Files.html

6 - background-img.zip

6 - index.html

7 - Laying Plans

8 - Menu Bar

9 - Main

10 - Footer

11 - Responsiveness on Mobile Platforms

12 - Sass Basic Setup

13 - Partials and Config

13 - -config.zip

14 - Partial file Variables

14 - -var.zip

15 - Partial file for the Navigation

15 - -nav.zip

16 - Partial file for the Main

16 - -main.zip

17 - Partial file for the Footer

17 - -footer.zip

18 - Partial file for Responsiveness

18 - -responsive.zip

19 - Conclusion

3 - SASS Explained

20 - EX-Syntax.html

20 - SASS Syntax Starter Files.html

21 - EX-Syntax.html

21 - SASS Syntax

21 - -ExSyntax.zip

22 - Ex-Variables.html

22 - SASS Variables Starter Files.html

22 - -ExVariables.zip

23 - SASS Variables

23 - -ExVariables.zip

24 - SASS Default Value

25 - SASS Scope

26 - SASS Shadowing

27 - SASS Flow Control

27 - -ExFlowControl.zip

28 - SASS Advance Variable Functions

29 - Ex-DateType.html

29 - SASS Deta Types

29 - -ExDateTypes.zip

30 - SASS Data Types Numbers

31 - SASS Data Types Strings

32 - SASS Data Types Colors

33 - SASS Data Types Lists

34 - SASS Data Types Maps

35 - SASS Data Types Boolean

36 - SASS Data Types Null

37 - SASS Operators

38 - EX-Functions.html

38 - SASS Functions

38 - -ExFunctions.zip

39 - Ex-Mixin.html

39 - SASS Mixin

39 - -ExMixins.zip

40 - Ex-Mixin.html

40 - SASS Flow Control

40 - -ExFlowControl.zip

41 - SASS Flow Control if and else

42 - SASS Flow Control each

43 - SASS Flow Control for

44 - SASS Flow Control while

4 - Responsive design media

45 - Desktop Tablet Mobile

45 - Ex-PageSections.html

45 - style.zip

5 - Flex Box in CSS and SASS

46 - Intro

47 - FlexBox.html

47 - Starter Files

47 - style.zip

48 - Display Flex Flex Direction

49 - Flex Wrap

50 - Justify Content

51 - Align Items

52 - Align Content

53 - Flex Order

54 - Flex Grow

55 - Flex Shrink

6 - Project Food Blog Template Using Flex Box

56 - Intro

57 - Starter Files

57 - about.zip

57 - appetizer-bowl-chili-close-up-286283.zip

57 - baking-cheese-cooking-crust-315755.zip

57 - close-up-photo-of-sushi-3297803.zip

57 - cooked-food-704569.zip

57 - fudge-cake-with-sugar-1579926.zip

57 - index.html

58 - Basic Configuration

58 - style.zip

58 - -config.zip

59 - Navigation

59 - -nav.zip

60 - Main

60 - -main.zip

61 - About

61 - -about.zip

62 - Footer

62 - -footer.zip

63 - Responsiveness

63 - -responsive.zip

7 - Display Grid in CSS and SASS

64 - Intro

65 - CSS-Grid-Final.zip

65 - Grid.html

65 - Starter Files

66 - Display Grid Grid Template Column Row

67 - Grid Template Area

68 - Grid Template

69 - Grid Gap

70 - Align Items

71 - Justify Items

72 - Justify Content

73 - Align Content

74 - Grid Auto Columns Rows

75 - Grid Auto Flow

76 - Children Properties

8 - Project Photo Template using CSS Grid

77 - Photo Template Intro

78 - Photo Template Starter Files

78 - aerial-photo-of-cityscape-at-night-2362004.zip

78 - back-view-photo-woman-in-white-dress-standing-on-green-grass-3218135.zip

78 - beige-concrete-building-3126553.zip

78 - black-and-red-butterfly-on-persons-hand-3979732.zip

78 - gray-high-rise-building-1769369.zip

78 - high-rise-building-1829191.zip

78 - index.html

78 - lighted-tower-beside-building-2304895.zip

78 - nature-photography-of-waterfall-3633626.zip

78 - person-standing-on-wrecked-plane-919606.zip

78 - selective-focus-photo-of-a-short-coated-white-and-black-3009441.zip

78 - trees-on-mountain-3551227.zip

78 - white-and-red-cherry-blossom-flowers-3979186.zip

79 - Photo Template Config Partial

79 - style.zip

79 - -config.zip

80 - Photo Template Text Component

80 - -components.zip

81 - Photo Template Grid Layout

82 - Photo Template Navigation

82 - -nav.zip

83 - Photo Template Header

83 - -header.zip

84 - Photo Template Main

84 - -main.zip

85 - Photo Template Aside

85 - -aside.zip

86 - Photo Template Section

86 - -sections.zip

87 - Photo Template Form

87 - -form.zip

88 - Photo Template Footer

88 - -footer.zip

89 - Photo Template Responsiveness

89 - -responsive.zip

9 - CSS Transitions Rotations

90 - Introduction to the section

91 - Starter Files

91 - Transitions.html

91 - style.zip

92 - CSS What is a transition

93 - CSS Transition TimingFunction Property

94 - CSS transitiondelay

95 - CSS Transition Transform

96 - CSS Transition Shorthand

10 - CSS Animations

97 - Introduction to the section

98 - Animations.html

98 - Starter Files

98 - style.zip

99 - keyframes

100 - Animations using Colors

101 - Animations Directions

102 - Animation Speed Curve

103 - Animations Fill Mode

104 - Animations Short Hand

11 - Test Your CSS Might

1 - Basic CSS.html

12 - Project Animated Buttons

105 - Project Overview

106 - AnimatedButtons.html

106 - Project Starter Files

107 - Animated Buttons using CSS

108 - Animated Buttons using SASS

13 - Components First Components

109 - Intro

110 - Components.html

110 - Components Starter Files

111 - Component Variables

111 - -01-Comp-Variables.zip

112 - Component Typography

112 - -02-Comp-Typography.zip

14 - Project Simple CV Template

113 - Introduction

114 - Starter Files

114 - index.html

114 - profile.zip

115 - Config and File Structure

116 - Main Area

117 - Aside Area

118 - Aside Area Skills

119 - Aside Area Languages

120 - Section Area

121 - Footer Area and Switch Colors

122 - Responsiveness

15 - Create Sass Button Components

123 - Intro

124 - Buttons Partial Component

124 - -03-Comp-Buttons.zip

125 - Main Buttons Class

126 - Background Colors Class

127 - Outline Colors Class

128 - Buttons Dimension Class

129 - Checkbox and Radio Buttons

130 - Neon Buttons

16 - Create Sass Cards Components

131 - Starter Files

131 - -04-Comp-Cards.zip

132 - Simple Cards

133 - Image Cards

134 - Background and Outline Colored Cards

17 - Project Marketing Template using Buttons and Cards

135 - Introduction

136 - Starter Files

136 - architectural-design-architecture-blue-sky-buildings-442577.zip

136 - group-of-people-in-dress-suits-776615.zip

136 - index.html

136 - photo-of-man-standing-in-front-of-people-3182829.zip

136 - woman-in-white-crew-neck-t-shirt-holding-black-smartphone-3987027.zip

136 - woman-wearing-black-sweatshirt-using-silver-macbook-1181230.zip

137 - Config and File Structure

137 - style.zip

137 - -config.zip

137 - -mixin.zip

138 - Header Section

138 - -header.zip

139 - Main Section

139 - -main.zip

140 - Plans Section

140 - -plans.zip

141 - Pricing Section

141 - -pricing.zip

142 - About Section

142 - -about.zip

143 - Footer Section

143 - -footer.zip

144 - Responsiveness

144 - -responsive.zip

18 - Creating Sass Navigation Components

145 - Intro

146 - Comp-Nav.html

146 - Starter Files

146 - menyhart-media-logo-2.zip

146 - -05-Comp-Nav.zip

147 - Setup and Config

148 - Simple Navigation Bar

149 - Simple Navigation Bar with background color

150 - Navigation with Logo

151 - Navigation with Menu Button

152 - Navigation with Logo and Menu Button

153 - Navigation Items Position Switcher

154 - Navigation Positioning Top Right Bottom Left

19 - Project Simple CV Template With Navigation

155 - Intro

156 - Basic Setup

157 - Navigation Responsive Repositioning

158 - Navigation Color Switcher

20 - Project Profile Template

159 - Intro

160 - Starter Files

160 - index.html

160 - profile.zip

161 - Basic config and file structure

161 - COMPONENTS.zip

161 - style.zip

161 - -config.zip

161 - -library.zip

161 - -mixin.zip

162 - Navigation Section

162 - -nav.zip

163 - Header section

163 - -header.zip

164 - Skills section

164 - -skills.zip

165 - Statements section

165 - -statements.zip

166 - Service section

166 - -services.zip

167 - Photo section

167 - -photos.zip

168 - Footer section

168 - -footer.zip

169 - Contact section

169 - -contact.zip

170 - Responsive section

170 - -responsive.zip

21 - Creating Sass Form Components

171 - Intro

172 - Forms.html

172 - Starter Files

172 - -06-Comp-Forms.zip

173 - Simple Form

174 - Form Grid Layout

22 - Project Hotel Template with Animations

175 - Intro

176 - Starter Files

176 - berlin.zip

176 - dubai.zip

176 - header.zip

176 - index.html

176 - milano.zip

176 - paris.zip

176 - rome.zip

176 - room-1.zip

176 - room-2.zip

176 - room-3.zip

176 - room-4.zip

176 - room-5.zip

176 - room-6.zip

176 - toronto.zip

177 - Environment Setup and File Structure

178 - Basic config and Sections

179 - Navigation

180 - Header

181 - Rooms

182 - Hotels

183 - Contact and Subscription

184 - Footer

185 - Responsive

23 - Project Parallax Template with Animations

186 - Intro

187 - Starter Files

187 - about.zip

187 - footer.zip

187 - header.zip

187 - index.html

187 - service-1.zip

187 - service-2.zip

187 - service-3.zip

188 - Environment Setup and File Structure

188 - style.zip

189 - Basic Config Sections Settings

189 - style.zip

189 - -config.zip

189 - -library.zip

189 - -mixin.zip

190 - Navigation

190 - -nav.zip

191 - Header Section

191 - -header.zip

192 - About Section Parallax Effect

192 - -about.zip

192 - -parallax.zip

193 - Service Section

193 - -sections.zip

194 - Contact Footer Section

194 - -contact.zip

194 - -footer.zip

195 - Responsive Parallax Effect

195 - -responsive.zip

24 - Project Your portfolio

196 - Intro

197 - Starter Files

197 - dist.zip

198 - Main Page

198 - -main.zip

199 - Navigation

199 - -nav.zip

200 - Main Page Responsive

200 - -responsive.zip

201 - Portfolio Page Part1

201 - -portfolio.zip

202 - Portfolio Page Part2

25 - Extras

26 - Bonus

203 - Whats Next.html

63,400 تومان

خرید اشتراک افزودن به سبد خرید

خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

تولید کننده: Udemy-Training