Webflow Masterclass (materials)

Поделиться Курсом / Книгой / и тд.
#1

Basic Site Demo

Here’s my project if you want to play with it or see how I did it:

https://preview.webflow.com/preview/basic-demo?utm_medium=preview_link&utm_source=designer&utm_content=basic-demo&preview=1d096bf0ca37ab4d053544a369b0dad5&mode=preview

Mastering Layout: Display settings

Practice Project:

https://preview.webflow.com/preview/mdl-2-layout?utm_medium=preview_link&utm_source=designer&utm_content=mdl-2-layout&preview=02cfd22cf4dd039ec594b4a7bb4538c3&mode=preview

Mastering Layout: Grid

Practice file:

https://preview.webflow.com/preview/mdl-2-layout-bc96efe54bbf-2883b8f94ddfd?utm_medium=preview_link&utm_source=designer&utm_content=mdl-2-layout-bc96efe54bbf-2883b8f94ddfd&preview=17c428d6b73158f1fd6609cae820a291&mode=preview

Mastering Layout: Flex

Practice file:

https://preview.webflow.com/preview/mdl-2-layout-bc96efe54bbf-9d2befb427136?utm_medium=preview_link&utm_source=designer&utm_content=mdl-2-layout-bc96efe54bbf-9d2befb427136&preview=c7bec75de68cdd1a41732c168277445c&mode=preview

Flexbox game:

Flexbox game Solved

Flexbox game:

https://preview.webflow.com/preview/flexbox-game?preview=d1a26b027c4803817087a91c651e321f&m=1

Mastering Layout: Position

Practice file:

https://preview.webflow.com/preview/mdl-2-layout-bc96efe54bbf58873470ea59c4?utm_medium=preview_link&utm_source=designer&utm_content=mdl-2-layout-bc96efe54bbf58873470ea59c4&preview=402f4af9b2e3d3a3baaadb74fb2a128b&mode=preview

Using Images & Backgrounds

Practice project:

https://preview.webflow.com/preview/mdl-2-layout-6f0df188271d6d677e37f20e7a?utm_medium=preview_link&utm_source=designer&utm_content=mdl-2-layout-6f0df188271d6d677e37f20e7a&preview=a2e658ea6617d95306abf8e909d453c3&mode=preview

Working with Custom Fonts

Linked Mentioned:

Responsiveness Challenge

Practice project:

https://preview.webflow.com/preview/responsive-training?utm_medium=preview_link&utm_source=designer&utm_content=responsive-training&preview=9d1b9a0c2a8b8a9619f17429e57502e5&mode=preview

Responsiveness Challenge - Solved

Challenged Solved:

https://preview.webflow.com/preview/responsive-training-9f1f9a0bfab375985d4?utm_medium=preview_link&utm_source=designer&utm_content=responsive-training-9f1f9a0bfab375985d4&preview=41b9423f2a0e20ccad4e7e560ac281e1&mode=preview

Basic interactions

Practice project:

https://preview.webflow.com/preview/basic-demo?utm_medium=preview_link&utm_source=designer&utm_content=basic-demo&preview=1d096bf0ca37ab4d053544a369b0dad5&mode=preview

Building a real-world client one pager website

Assets for this website are attached.

Here’s my project:

https://preview.webflow.com/preview/rainfall-demo-c8e441?utm_medium=preview_link&utm_source=designer&utm_content=rainfall-demo-c8e441&preview=0094c0e4c6b4822019a92c79c45a1cca&mode=preview

IMPORTANT NOTE - since this is a real website of a real company, please DO NOT share this project as a portfolio piece on your website. Credit for this design and work is to Rainfall’s designer.

Custom Layout challenge - Solved

Here’s my project:

https://preview.webflow.com/preview/custom-layout-challenge?utm_medium=preview_link&utm_source=designer&utm_content=custom-layout-challenge&preview=5f999e31a884f61c8dca94ead3977efd&mode=preview

Using the CMS

If you want to practice, here’s Rainfall’s website without CMS -

https://preview.webflow.com/preview/rainfall-demo-c8e441?utm_medium=preview_link&utm_source=designer&utm_content=rainfall-demo-c8e441&preview=0094c0e4c6b4822019a92c79c45a1cca&mode=preview

and here it is after I’ve added CMS -

https://preview.webflow.com/preview/rainfall-demo-c8e441-04fcf8c0fe5436ee21?utm_medium=preview_link&utm_source=designer&utm_content=rainfall-demo-c8e441-04fcf8c0fe5436ee21&preview=4050b767d4c3ba177e14b4ca7334bb00&mode=preview

Advanced CMS Filtering

Links Mentioned:

Creating E-commerce Websites

Review this page to compare the e-commerce features between platfroms at the moment:

CMS Challenge - Solved

Solved challenge project:

https://preview.webflow.com/preview/cms-challenge?utm_medium=preview_link&utm_source=designer&utm_content=cms-challenge&preview=4aa846dfd016435476cb80bde55b270f&mode=preview

Understanding Triggers & Animations

https://easing.webflow.io/

Creating Popups

Clone Practice project:

Project with Interactions added:

https://preview.webflow.com/preview/flux-interactions-master-ac8c6b168bb73a?utm_medium=preview_link&utm_source=designer&utm_content=flux-interactions-master-ac8c6b168bb73a&preview=2eb0a4e2e20c005586628c9ef3eda320&mode=preview

The Slide-in Effect

Clone Practice project:

Project with Interactions added:

https://preview.webflow.com/preview/flux-interactions-master-6492c51434b09c?utm_medium=preview_link&utm_source=designer&utm_content=flux-interactions-master-6492c51434b09c&preview=6809599b2c3f7a88fad68a2f1268b4e3&mode=preview

3D Rotation on Hover

Clone Practice project:

Project with Interactions added:

https://preview.webflow.com/preview/flux-interactions-master-234b2a1508e85a?utm_medium=preview_link&utm_source=designer&utm_content=flux-interactions-master-234b2a1508e85a&preview=27eda74a3b3814d0d903ef0d261ada23&pageId=5e7b45916e755a140ca8140a&mode=preview

Parallax Effect

Clone Practice project:

Project with Interactions added:

https://preview.webflow.com/preview/flux-interactions-master-73b10f06260dee?utm_medium=preview_link&utm_source=designer&utm_content=flux-interactions-master-73b10f06260dee&preview=7d44bdeb65720fc20faf4ceb650eb345&pageId=5e7b4582f71b59e6d939d90b&mode=preview

Horizontal Scrolling Section

Clone Practice project:

Project with Interactions added:

https://preview.webflow.com/preview/flux-interactions-master-820ade84554c18?utm_medium=preview_link&utm_source=designer&utm_content=flux-interactions-master-820ade84554c18&preview=d6da0806026aeefd33c7d4581cea4003&mode=preview

Lottie Animations

Clone Practice project:

Project with Interactions added:

https://preview.webflow.com/preview/flux-interactions-master-dc4193862f5fb8?utm_medium=preview_link&utm_source=designer&utm_content=flux-interactions-master-dc4193862f5fb8&preview=2334f374f571e82402d1cbcbf067223a&mode=preview

Final challenge - One Pager Portfolio Project

Here’s a reference you can use to build your own project -

https://final-project-snowboarding.webflow.io/

Feel free to change the topic / images / fonts / colors, but try to keep the layout examples and interactions.

Once you’ve finished, please send your SHARE LINK of the project to: bob@flux-academy.com for review.

Before you submit please review:

  1. Did you properly name all your content divs?
  2. Do they make sense so that if someone else was editing the site, would understand what the element is?
  3. Are you centering elements properly with margins, using margin:auto?
  4. Did you publish the website and check the .webflow.io link to see what your website actually looks on desktop and on your mobile phone?
  5. Did you check that you don’t have any horizontal scroll bars on the .webflow.io link?
  6. Are you making sure you are using only 1 H1 per page?
  7. Is your structure clean, is it easy to add additional/new areas from existing areas without having to adjust them?
  8. Are you making sure you style your images so they are proportionate?

Good luck!

Bi-Lingual Websites

Watch full build here: https://www.youtube.com/watch?v=_DPLRKoZoTs

Working With a Style Guide

Clone my style guide:

(note - the style guide it NOT on the homepage, which is empty, it’s on it’s own page)

Privacy & Accessibility Considerations

Services mentioned:

http://iubenda.com/

QA - Testing Your Website

Service mentioned:

The Pre-Launch Checklist: SEO & Final Setups

Print version of the checklist:

Client CMS Training

Services mentioned -

Tesla Cybertruck Website in 100 minutes

You can play around the the page here -

https://preview.webflow.com/preview/tesla-cybertruck-ran?utm_medium=preview_link&utm_source=dashboard&utm_content=tesla-cybertruck-ran&preview=2c73aa3d0a10b984a0d6deffbe32fc4b&mode=preview

2 симпатии