This lesson is exclusive to members

Previous Next

Webflow Essentials Training

Class project 01 - Create your own Webflow brief

Daniel Walter Scott

Download Exercise Files

Contents

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

Comments

Powered by instructorHQ v4
Terms of use Privacy policy
© Bring your Own Laptop Ltd 2023