Class project 03 - Grid & Responsive Website

Name: Class project 03 - Grid & Responsive Website
Uploaded: 2022-08-15T00:46:27+00:00
Duration: 1 min 37 s
Description: Join our Grid & Responsive Website class project. Apply your skills to create a grid-based and responsive website layout

Daniel Walter Scott

Download Exercise Files

Getting Started
- 1. Intro to Webflow Tutorial training course FREE
- 2. Getting started with Webflow tutorial FREE
- 3. How to earn your Webflow certificate FREE
- 4. What is Webflow FREE
- 5. Webflow FAQs - How much is webflow
- 6. How to build your first website in webflow
The Brief
- 7. Class project 01 - Create your own Webflow brief
Layout Level 1
- 8. What are Container vs Sections in Webflow
- 9. Quiz question 1
- 10. Quiz question 2
CSS Classes - Level 1
- 11. How to create CSS classes in Webflow
- 12. Quiz question 3
Images Level 1
- 13. How to add images with margin in webflow
- 14. Background images how to overlay text on image webflow
- 15. Quiz question 4
Buttons & Navigation - Level 1
- 16. Buttons with a hover color in Webflow
- 17. Quiz question 5
- 18. Making our own custom nav in Webflow
- 19. Quiz question 6
- 20. How to make a mobile friendly burger menu nav bar in Webflow
- 21. Production Video 1 - Building Support & Next Event Sections
Links
- 22. Hyperlinks & remove underline & color from link in Webflow
- 23. Quiz question 7
- 24. Anchor link to another page section in Webflow
- 25. Quiz question 8
- 26. Class project 02 - Create your club page
CSS Classes - Level 2
- 27. Understanding Webflow Combo Classes FREE
- 28. Quiz question 9
Layout Level 2
- 29. Webflow grid
- 30. Quiz question 10
Responsive Design
- 31. What is responsive design in Webflow
- 32. How to make webflow responsive
- 33. Quiz question 11
- 34. Responsive Grids in Webflow
- 35. Class project 03 - Grid & Responsive Website
Interactions & Animations Level 1
- 36. Webflow button hover animation using Element Trigger
- 37. Fade in on scroll in Webflow
- 38. Quiz question 12
- 39. Class project 04 - Interactions
Publishing Level 1
- 40. Sharing with your design with your client
- 41. How much is webflow hosting site vs workspace
Workflow
- 42. The best Webflow shortcuts & speed tips & tricks
CSS Level 3
- 43. How to change the default styles in Webflow
- 44. Quiz question 13
- 45. Combo vs Global Classes in Webflow
- 46. Class naming conventions in Webflow FREE
- 47. How to use style manager webflow
- 48. Production Video 2 - New Portfolio
- 49. Minimum Height vs ViewPort Heights in Webflow
- 50. Quiz question 14
Connecting with other software
- 51. Convert Figma to Webflow
- 52. Convert XD to Webflow
Fonts
- 53. How to add fonts to webflow
- 54. Quiz question 15
- 55. Production Video 3 - Hero Text
- 56. Line height space after letter spacing in Webflow
- 57. Quiz question 16
- 58. Text & Box Button Shadows in Webflow
Color
- 59. How to create global swatches in Webflow
- 60. What is color contrast ratio in Webflow
- 61. Quiz question 17
- 62. Gradient background in Webflow
Layout Level 3
- 63. Navbar full width container in Webflow FREE
- 64. Webflow layout - Columns vs Flex vs Grid vs None vs Inline
- 65. Webflow layout Flex vs Grid which should I use
- 66. Flex box layout with examples in Webflow
- 67. Equal height cards with button on the bottom in Webflow
- 68. Position absolute & relative explained in Webflow FREE
- 69. Quiz question 18
- 70. Sticky navbar footer webflow position sticky not working
- 71. Quiz question 19
- 72. Class project 05 - Portfolio Homepage
- 73. Class project 05 - Portfolio Homepage - Solution
Units
- 74. How to use Px Rem & Em’s in Webflow
- 75. Quiz question 20
- 76. Quiz question 21
- 77. How to use VH viewport height in Webflow
Navigation
- 78. How to style the navbar component in Webflow
- 79. Adding & connecting pages in Webflow
- 80. Quiz question 22
- 81. How to make an image a link in Webflow
Symbols
- 82. Create a symbol & overrides in Webflow
- 83. Quiz question 23
Forms
- 84. How to make a contact form in Webflow
- 85. How to style a form in Webflow
Images Level 2
- 86. Image types in Webflow SVG vs PNG vs JPG
- 87. What are Hi-DPI & responsive images in Webflow
- 88. How to crop images in Webflow using object fit
- 89. Quiz question 24
- 90. What is lazy load in Webflow
- 91. Quiz question 25
- 92. How to change favicon in webflow
- 93. Quiz question 26
Footer
- 94. Footer stick to bottom in Webflow
- 95. Quiz question 27
Interactions & Animations Level 2
- 96. How to create a page load animation in Webflow FREE
- 97. Image fade in & get bigger on roll over in Webflow
- 98. Parallax background scroll image move in Webflow
SEO Level 1
- 99. Is webflow good for SEO
- 100. Meta description title tags robots & sitemap explained Webflow FREE
- 101. What is Image Alt text in webflow
- 102. Quiz question 28
- 103. SEO Keywords in Headings & URLs in Webflow
Publishing Level 2
- 104. Can you export code self hosted Webflow
- 105. Quiz question 29
- 106. What are read only links in Webflow for
- 107. Style manager & cleaning up classes
- 108. Using your own custom website domain name in Webflow
- 109. Manually connecting your own custom domain name in Webflow
- 110. Testing on your actual mobile phone
- 111. Class project 06 - Portfolio Complete
Dynamic content / CMS / Collections
- 112. What are Static vs Dynamic CMS Collection in Webflow
- 113. Creating a CMS Collection in Webflow
- 114. Adding the CMS collection list via CSV Webflow
- 115. Adding the CMS Collection List to the webpage in Figma
- 116. Quiz question 30
- 117. Reorganizing what is shown from the Webflow collection list
- 118. Quiz question 31
- 119. Styling our collection list with grid & flex in Webflow
- 120. Class project 07 - Kitchen Collection
- 121. Allowing your client to update the website in Webflow editor FREE
- 122. Quiz question 32
- 123. How to create blog using CMS Collection Pages in Webflow
- 124. Quiz question 33
- 125. Linking to a collection page from the homepage in Webflow
- 126. Manually linking to a collection page in Webflow
- 127. How does my client add a blog post in the CMS collection in Webflow
- 128. How to use rich text elements in Webflow
- 129. Styling rich text in a Webflow CMS
- 130. Class project 08 - Blog CMS
Custom Embed Code
- 131. HTML embed code from Calendly, Twitter & Castos
Ecommerce
- 132. Creating an ecommerce store in Webflow FREE
- 133. How to add products to your store in Webflow
- 134. Adding your ecommerce product to a page in Webflow
- 135. Adding a list of your products to the homepage
- 136. Quiz question 34
- 137. Payment settings in Webflow
- 138. What happens after a purchase in a Webflow store
- 139. Customizing the cart settings in Webflow
- 140. Quiz question 35
- 141. How to add variants in Webflow ecommerce product
- 142. Adding Categories for Products CMS Collection with filters
- 143. Importing a CSV to Webflow product ecommerce
- 144. Float & why the cart button won’t go in the Nav in Webflow
- 145. Work along with Dan building the full tea store in Webflow
- 146. Class Project 09 - Ecommerce
- 147. How to request your certificate FREE
What next
- 148. What next after your Webflow Essentials course

Comments

You need to be a member to view comments.

Join today. Cancel any time.

Class project 03 - Grid & Responsive Website

Contents

Comments