Class Projects - Webflow Essentials

DANIEL WALTER SCOTT

Sign up to webflow: byol.com/wf

LINKS

Class project 01 - Create your own Webflow brief

● Visit: www.randomprojectgenerator.com
● Click the Webflow Essentials Option.
● Enter your town/village/state and hit the ‘generate my project’ button.
● Download your brief onto your computer/phone. We’ll reference this later.
● Deliverables:
○ Take a screenshot of your brief & upload it to the Assignments/Projects/Comments
section of this website.
○ Optional: Let me know on social media that you’ve started the course using the hashtag
#startingWebflowEss Also let me know how you’re feeling about starting this course.
Excited/Bored/Nervous/Overwhelmed/Enlightened?
■ Instagram: @bringyourownlaptop
■ Twitter: @danlovesadobe
■ Facebook group here
■ LinkedIn group here

Class project 02 - Create your club page

● Using your brief, get your club's website up to where we are in the course.
● Include the following functionality:
○ Your choice of colors, images & fonts.
○ 4 Sections: Nav, Hero, Sponsor, Next Event
○ Images
○ Background Image
○ Heading 1,2,3
○ Navigation
○ Button with hover class
○ Hyperlink linking to Google Maps or something else.
○ Anchor links (page slide navigation)
● Deliverables:
○ Take a screenshot of your previewed website & upload it to the
Assignments/Projects/Comments section of this website.
 ○
○ Share this on social media as well.
■ Instagram: @bringyourownlaptop
■ Twitter: @danlovesadobe
■ Facebook group here
■ LinkedIn group here

Class project 03 - Grid & Responsive Website

● Grid: Add your past events grid to your site.
● Responsive: Make all of your elements (including the grid) look good on all 4 breakpoints.
● Deliverables:
○ Take a screenshot of your 4 breakpoints showing at least the hero and nav bar.
○ Upload them to the Assignments/Projects/Comments section of this website.

○
 ○ Share this on social media as well.
■ Instagram: @bringyourownlaptop
■ Twitter: @danlovesadobe
■ Facebook group here
■ LinkedIn group here

Class project 04 - Interactions

● Create 2+ interactions.
○ One for a button.
○ One as the page scrolls.
● Deliverables:
○ Record a video of your 2 interactions and upload a link in the
Assignments/Projects/Comments section of this website.
■ Note: if you can’t record a video - take a screenshot & upload it instead.

Class project 05 - Portfolio Homepage

● To get your portfolio, using your own name, colors & fonts to the level shown in the screenshot
below.
● Make the website work on all the breakpoints (Desktop, Tablet & Mobile)
● Make sure to practice these ideas:
○ Global classes
○ Good naming conventions
○ Minimum heights
○ Maximum widths
○ Adding a Google font
○ Line height & letter spacing
○ Shadows
○ Global swatches
○ Gradient background (Optional)
○ Full width section or nav
○ Grid & Flex usage
● Requirements:
○ Nav
■ Logo/Name
● Either a styled ‘Text Block’ or a logo you have designed in another
software.
■ Button
■ Cheat: Put these inside a div first before flex boxing it.
 ○ Hero box
■ Heading
■ Button
■ Image
○ Thumbnails
■ Image
■ Skill label
■ Title
■ View Button - on the right.
■ Plus Button - Over image.
○ Challenges
■ Headshot in a circle
● Deliverables:
○ Take a screenshot of your 4 breakpoints showing as much of the design as possible.
○ Upload them to the Assignments/Projects/Comments section of this website.

○
○ Share this on social media as well.
■ Instagram: @bringyourownlaptop
■ Twitter: @danlovesadobe
■ Facebook group here
■ LinkedIn group here

Class project 06 - Portfolio Complete

● You can use your own images, or images from Unsplash.com
● Finish 3 pages for your portfolio.
○ Homepage
○ Contact Page
○ 1 Portfolio details page.
● Requirements:
○ REMS for typography
○ Buttons to content pages
 ○ Symbols for Nav, Card & Footer
○ Form on the contact page
○ One cropped image using CSS (object fit)
○ Favicon
○ Sticky Footer
○ At least one homepage animation
■ Share the staging link e.g. https://dans-portfolio-72728.webflow.io
○ Meta title & description on the homepage
○ Make sure all pages work on mobile
● Deliverables:
○ Take a screenshot of your 3 homepage pages showing as much of the design as
possible.
○ Share the staging link as well
○ Upload them to the Assignments/Projects/Comments section of this website.
○ Share this on social media as well.
■ Instagram: @bringyourownlaptop
■ Twitter: @danlovesadobe
■ Facebook group here
■ LinkedIn group here

Class project 07 - Kitchen Collection

● Add and style a collection.
● There is a CSV & Images in the Exercise Files > Blog > Living Room Collection/
● Requirements:
○ Add all the data.
○ Add the images to the list.
○ Make the URL a button.
● Deliverables:
○ Take a screenshot of your layout and upload them to the
Assignments/Projects/Comments section of this website.
○ Share this on social media as well.
■ Instagram: @bringyourownlaptop
■ Twitter: @danlovesadobe
■ Facebook group here
■ LinkedIn group here

Class project 08 - Blog CMS

● Redesign an existing blog.
 ● Requirements:
○ Create a blog collection
○ Homepage
■ Nav
■ Hero section
■ Summary Cards (Collection List)
● These are to link to the main blog post.
○ Blog Page
■ Minimum 3 blog posts.
○ Remember:
■ Be clear that it’s a re-interpretation of an existing blog and not your own.
■ Include the original author and a link to the article.
■ Project Settings > Publishing > SEO > Disable Indexing
■ Explore the Editor interface.
● Deliverables:
○ Take a screenshot of your homepage and blog page layout. Then upload them to the
Assignments/Projects/Comments section of this website.
○ Share this on social media as well.
■ Instagram: @bringyourownlaptop
■ Twitter: @danlovesadobe
■ Facebook group here
■ LinkedIn group here

Class project 08 - Ecommerce

● Create at least one of the Scott Tea pages. All 3 if you are up for it.
● Use your own company/project.
● Requirements:
○ You must have 3 products with at least one variant.
○ The ‘Cart’ button.
○ The ‘Add to Cart’ button.
○ Must work on all breakpoints.
○ Customize your cart menu.
● Deliverables:
○ Take a screenshot of your page in all the different breakpoints.
○ Take a screenshot of your customized cart.
○ Then upload them to the Assignments/Projects/Comments section of this website.
○ Share this on social media as well.
■ Instagram: @bringyourownlaptop
■ Twitter: @danlovesadobe
■ Facebook group here
■ LinkedIn group here
LINKS
● Domain name DNS: https://university.webflow.com/lesson/connect-your-domain-to-webflow
● Signup to webflow: https://byol.com/wf
● Signup to SEMRush: https://byol.com/sem