Class naming conventions in Webflow

Course contents
SECTION: 4
CSS Classes - Level 1 17:02
SECTION: 9
Layout Level 2 19:55
SECTION: 15
Connecting with other software 12:03
SECTION: 29
Custom Embed Code 10:15

Questions

1
You are not following this thread
3
You are not following this thread
1
You are not following this thread
15
You are not following this thread

Course info

114 lessons / 17 hours 35 quiz questions 10 projects Certificate of achievement

Overview

Hi, my name is Dan Scott and together, you and I are going to learn Webflow.

You can get Webflow by clicking here.

Webflow will enable you to create responsive, accessible websites using intuitive design techniques without the need for complex coding.

This course is aimed at people who are new to Webflow and to web design in general.
We will start by creating a simple single page site, learning basic layout techniques and using simple animations. 

Webflow software is visual and does not require you to learn coding. You will learn how to ensure your website is consistent across desktop, laptop and mobile devices. We learn about CSS Classes for layout and font styling and also the importance of Class naming conventions.

If you have already tried using Webflow and are now wondering whether you should be using grids, flex, columns or divs and why…do not fear. By the end of this course you will know which to use and why!
We will learn how to build your own portfolio website and we will incorporate some exciting animations too. 

Together we will learn to create and style forms and incorporate those into your website.
Some of you may have already started to use Figma or Adobe XD. I will show you how you can convert the files you have created and incorporate them into a Webflow site. 

Previous experience using Figma or Adobe XD is not essential when using Webflow. 

We will learn about Sticky Navs, SEO’s, Symbols, REM’s, Floats, Gradients and Fonts.

We will create a CMS website and a blog and will learn how to hand over responsibility for these to clients or colleagues, hand over the site so that someone other than you can then login and manage all of the content themselves.

We will look at , create and style an E-Commerce Site, creating and styling Shopping Carts, Order Forms and Shopping Gateways. We will learn how to sell both digital and physical products and services. 

If some of the terminology such as Global, Flex, Grid, Nav all sounds too hard - remember we will start from scratch and work through techniques step by step. This course is aimed at anybody who wants to build websites using Webflow. 

You may only need to design a single website for yourself, you may want to become a fulltime web designer, you might be a freelancer already and wanting to expand the type of work you are able to offer your clients. This course is for you! 

I set assignments throughout this course which will enable you to practice your skills and to use what you create within your very own portfolio. 

You are about to go from Website Zero to Webflow Hero! 
Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

How to earn your certificate

Work your way towards your certificate for this course by following these simple steps.

  • Watch the course videos
  • Complete the Class Projects - look out for the videos marked with
  • Upload your class projects into the My Projects area in your account
  • Complete and pass the Knowledge Quiz (Merit level courses only)
  • Complete the Distinction Certificate Project (Distinction level courses only) - look out for the video marked with
  • Upload your Distinction project to the My Projects area in your account
  • Request your certificate when you've completed the requirements for the certificate level you're working towards

Good luck!

Pass certificates

We're awarding 'Pass' level certificates for this course.

You can work your way towards your 'Pass' certificate by following these simple steps.

  • Watch the course videos
  • Complete the Class Projects - look out for the videos marked with
  • Upload your class projects into the My Projects area in your account
  • Don't forget to request your certificate when all your projects are complete

Good luck!

Merit certificates

We're awarding 'Merit' level certificates for this course.

You can work your way towards your 'Merit' certificate by following these simple steps.

  • Watch the course videos
  • Complete the Class Projects - look out for the videos marked with
  • Upload your class projects into the My Projects area in your account
  • Complete and pass the Knowledge Quiz
  • Don't forget to request your certificate when you have passed the quiz and completed all your projects

Good luck!

Distinction certificates

We're awarding 'Distinction' level certificates for this course.

You can work your way towards your 'Distinction' certificate by following these simple steps.

  • Watch the course videos
  • Complete the Class Projects - look out for the videos marked with
  • Upload your class projects into the My Projects area in your account
  • Complete and pass the Knowledge Quiz
  • Complete the Distinction Certificate Project - look out for the video marked with
  • Upload your Distinction project to the My Projects area in your account
  • Don't forget to request your certificate when you have passed the quiz and completed all your projects

Good luck!

Downloads & Exercise files

Transcript

Hi everyone, if you are like...

"Oh man, those columns, I don't want columns...

just give me some plain old basic guides"...

yeah, like these guys, just simple ones...

you can drag out, move around, and just do what you want with.

So if you want to not do columns that's totally fine...

there's no rules you have to do columns...

especially if you're doing...

kind of a self-directed project, or it's a little bit more arts-ey...

there's no like, not a huge big structured website...

that needs all this rigid control with columns, you need some guides...

this is the happy medium, let me show you how to make them.

Actually, spoiler alert, you just drag them off from the edge here, there you go.

Why is this video so long, because there's some tips and tricks...

and other things, but that's how you get them.

All right, let me show you how. Okay, to make some guides...

I've made a blank page just to get started, it's an iPhone 13...

we are going to-- first of all you need to be on your Move tool -

won't work if you're on other tools. - or Selection tool...

the little arrow at the top, be on that one...

and you might have already stumbled across it...

they just appeared one day in XD, watch this...

if you hover kind of like just outside the page, there they are there...

click, hold, hold, hold, hold, drag it on, you've made a guide...

yeah, that's it, you can run from the top...

drag drag, drag in, one from the top, I'm hitting undo to get rid of them...

if they still won't appear you might be...

under View, under Guides, and you might have gone to--

in my case I can see them, so I can go to--

let's actually drag one on, so I can say...

somebody, you might have accidentally used...

the shortcut for Hide All Guides, so then they're not working...

no guides, so you go into here...

and just check that it says, the right one...

show, hide, you get the idea.

So make sure you can see them...

let's be a little bit more specific...

let's say you want to get rid of them, how do you get rid of them?

Click on them and hit 'Del', it does not work...

you click, hold, and just drag them back into this area over here...

oh look, a little icon, trash can, there you go...

that's how to get rid of them.

Let's be a little bit more precise...

so let's say you want to put like a 24 pixel border around...

so I'm going to click and drag it out...

and you can see, I can be very accurate and go 24, perfect...

I can do it there too.

If you've got like a touch pad...

and you're trying to do your design work on...

I do all the time when I'm traveling...

you can't be that accurate, so what you can do is...

you might be-- it's just easy sometimes...

to grab the Square tool, drag out something...

type it in there, 24, whoop...

24, and if you hit 'Tab'...

you can go down from width to height, 24.

That's not essential, just a handy trick...

grab the Selection tool, drag into the corner, and then go...

watch this, if I zoom in a little bit it'll snap to my square, you get the idea.

drag, snap...

top one, snap...

grab that guy, cut him, down here...

paste that guy, get him in the corner, it's just a quick way.

Now you can't drag them from the bottom or the top...

so there's a little bit of...

fun scrolling going on...

remember, hold 'space bar', click, hold, and drag...

or use whatever method you'll be using so far in this course.

You've got this far, you've worked out a way of moving around...

I hold the 'space bar' down, you can-- yeah.

There's a little bit of that going on, like move it down, drag up a little bit...

then that guy, sorry buddy, you're gone, don't need you anymore...

'Command 0', too far out, select it...

'Command 3', or 'Ctrl 3', select on that Artboard, look at that, we've got guides.

So if you don't want to use the grids, like we did in the last one...

or the columns, you just want a few little guides, then, here you go...

drag them out...

delete them, drag them back, you can just turn them off...

because sometimes they're handy to get started...

and then you want to turn them off...

go to 'View', ' Guides', and you've got 'Hide All Guides'...

you can lock them as well, because they are removable, right?

You can click on them and drag them...

you might decide that-- please stop doing that...

go to 'View', and just lock them for the time being.

If you've got another project, and you need to copy the guides across...

you probably saw it there, let's go to, you...

you can see, my guides haven't come across...

they do come across if you obviously duplicate the Artboard...

remember, holding down 'Option' on a Mac, 'Alt' on a PC...

I just want to copy these across.

So you can select on the Artboard you want to take them from...

go to 'View', 'Guides', 'Copy Guides', click on this one...

you, 'Guides', 'Paste Guides'...

so yeah, Guides, there you go.

You might turn them off just because this is a pain in the butt...

you accidentally keep dragging things out...

from the top and the bottom, and there you go...

all right, that is Guides in Adobe XD.

  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • Cookie policy
  • © Bring your Own Laptop Ltd 2026