The full CSS + Divi package

$270.00

The super package that will take you from absolute beginner to superstar CSS coder including extensive mobile responsiveness. Everything you need to make superstyled clean websites is here.

sample lesson

Description

Description

Is this you?

  • You are constantly bugged by little design aspects that you just can’t seem to control.
  • You are at the mercy of asking others online on how to put together elements on a webpage.
  • You are constantly looking for plugin solutions every step of the way, and usually it doesn’t exist.
  • You waste a lot of time trying to tweak and fix the layout because the builder doesn’t do what you need it to do.

If you want to save your build time, and take your web designs to the next level, this course is definitely for you.

Target Level

  • You have no idea how to write/edit CSS, but you want to, so you can make your designs come to life.
  • You can look through CSS and sort of understand what’s going on, but can’t write your own confidently.
  • You have to add !important to everything because it doesn’t always work, and now they keep hijacking each other.
  • You keep adding suggestions from everyone, and now you have a mess of CSS, and it’s not impossible to fix.

Quick hack-ey solutions won’t get you far. Once you understand proper CSS, it’s just practice from that point on, and you can really get creative.

Learn to code your own layouts properly.

Curriculum

01 How it works
  • 01 Child Themes and Development Setup
  • 02 CSS Syntax
  • 03 CSS Selectors
  • 04 Specificity
02 Basic Properties and Values
  • 01 Units and Values
  • 02 Boxes and Blocks
  • 03 Typography
  • 04 Spacing and Sizing
03 Advanced - Beyond the Grid
  • 01 Positioning and Z-index
  • 02 Transform
  • 03 Flex
  • 04 Pseudo Elements and Classes
  • 05 Styling SVG Files
  • 06 Media Queries
04 Using It With Divi
  • 01 The Divi HTML Structure
  • 02 Selecting the Selector
  • 03 Writing Sustainable CSS
05 Practical Building
  • 01 Starting With the Design Proof
  • 02 Building the Sections
  • 03 Styling Everything 1 - Desktop
  • 04 Styling Everything 2 - Responsive
  • 05 Conclusion and Downloads

You will learn how to…

  • Make your own custom child themes that you can install on every build.
  • Style everything. Seriously, everything.
  • Have the confidence to design web pages to your full potential.
  • Style elements with responsiveness in mind.
  • Reduce time spent experimenting.
  • And more!

What’s Included?

  • Over 14 hours of video explaining every little detail on how to code your own custom CSS for Divi.
  • All the HTML and CSS files used in the lessons.
  • The Adobe XD file that was used to make the design proof – You can edit it to make your own.
  • The child theme that was made in the lessons with the json file
  • A year of access, and get your questions answered and problems solved by me directly if you need help.

What about updates?

Of course there are going to be updates to Divi and WordPress, and that could sometimes mean changes to some files and some modules’ behaviors. In that case, there will be a new video added to the course for you to check. Also, new videos can sometimes be added if there are a lot of people asking similar questions.So, no worries, anything concerning updates will be added.This includes Divi updates, WordPress updates, and anything/everything else that happens to come along.
Note: HOWEVER, the course teaches how to write CSS so things don’t break. So you’ll most likely be fine. (I haven’t had an update debacle ever.. yet.)

Such good value!

Consider this..

  • How much time will you be saving once you learn how to style and fix styling?
  • How much time will you be saving from Googling and trying it out and Googling again if it doesn’t work?
  • How much time will you be saving by finding CSS solutions online and actually understanding it and be able to adapt it easily?
  • Consider how much you charge a client, and consider how much time you will be saving.

Pretty easy choice, eh?

Divi 4 update + ACF

If you’re already enrolled, check out the update tutorial for Divi 4 theme builder with ACF.

Learn how to make complex and dynamic layouts with ACF

The new Divi 4 + ACF tutorial

The new extra tutorial is about 20 min long, and it covers how to add custom fields to a category and using them in the category archive pages. Currently it’s impossible to do this with just the theme builder, so you’ve gotta use ACF to pull the category and category description and the hero image dynamically.

For anyone putting together a website, and has a creative vision to fulfill, learning CSS is

Almost Inevitable

People are saying...

Make Divi More Responsive

Sample Lesson

Is this you?

  • You find yourself duplicating a section to make a separate mobile layout (and now you can’t use # anchor links)
  • You get frustrated with wonky text sizes, image sizes, image backgrounds, spacing, margins, and.. yeah.. ugh.
  • You are at the mercy of Divi’s responsiveness, and sometimes it’s not what you want.
  • You want to use the default menu on desktop, but you like the slide in menu for mobile.

If you are frustrated with settling for convoluted methods of building responsive websites because you weren’t confident in CSS to do it, then this course is for you.

Target Level

  • You can look through CSS and change some stuff… was it font-color? ugh
  • You can type up a couple of lines of CSS, but it doesn’t always show on the frontend.
  • You have to add !important to everything, and they keep hijacking each other.
  • You keep adding suggestions from everyone, and now you have a mess of CSS.

What you need is a proper introduction to CSS (I promise I won’t overwhelm) and some guidance in how to write it. Once you get the main idea, it’s just practice from that point on.

You care about mobile, but you need the skillz

Curriculum

01 Introduction
  • It’s not just stacking
02 CSS
  • 01 The Basics (CSS Crash Course)
  • 02 Media Queries
03 Text
  • 01 Responsive Text Sizes
  • 02 Line Breaks
  • 03 Alignments
04 Flex
  • 01 Introduction
  • 02 When to Flex
  • 03 Changing Layouts
  • 04 Contact Forms
  • 05 Buttons
  • 06 Call to Actions
  • 07 Banners
  • 08 Blurbs
  • 09 Person
  • 10 Portfolio Grids
  • 11 Woocommerce
05 Building
  • 01 Introduction
  • 02 Building Responsively
  • 03 Header
  • 04 Footer
06 Conclusion
  • 01 Extra Tips on Mobile
  • 02 Conclusion, Downloads

You will learn to…

  • Use CSS properly for expert building (this applies to some parts on desktop too).
  • Arrange grids to be multiple columns on mobile for Woocommerce products and/or portfolio items.
  • Use the default menu on desktop and slide in menu on mobile.
  • Make your own headers and footers that look great on mobile.
  • Make a button for driving directions to the destination on mobile.
  • Make new layouts that use the mobile screen more efficiently.
  • Rearrange elements and control the stack like a boss.
  • Center elements easily on desktop and mobile.
  • And more!

What’s Included?

  • All the videos (over 8 hours) explaining every detail on how to code your own custom Divi responsive layouts.
  • A child theme specifically made to include responsive sections to ensure easy and responsive builds.
  • A child theme cheat sheet – A PDF file of the instructions on how to use the child theme easily.
  • Access to both direct comments on the lessons and a course-specific forum where you can ask questions, share results, and read other people’s solutions.

What about updates?

Of course there are going to be updates to Divi and WordPress, and that could sometimes mean changes to some files and some modules’ behaviors. In that case, there will be a new video added to the course for you to check. Also, new videos can sometimes be added if there are a lot of people asking similar questions.So, no worries, anything concerning updates will be added.This includes Divi updates, WordPress updates, and anything/everything else that happens to come along.

What child theme?

You’ll be getting a child theme that:

  • is unlimited in its usage, so no worries about licensing. If you took the course, it’s yours.
  • is updated whenever there’s a major update to its dependencies (WP, Divi)
  • has two stylesheet files properly enqueued for Divi, one for extra responsive behavior, and one for your own edits.
  • allows the Divi builder on all post types
  • includes extra snippets you might find useful – svg support, no more Open Sans default, extra Divi library shortcodes

With mobile browsing accounting for more than half of the world’s internet usage (source), you could say this course is

Almost Inevitable

Start making awesome websites

$270.00Add to cart

Notice

Hi! Please consider signing up for my newsletter for... two emails (at most) a month of news, updates, and special offers, including child themes and more courses. Sound interesting? The signup form is right here!

You will also get a discount coupon in your inbox as soon as you sign up!

Update

– Child Theme v1.0.2: Child theme files edited and updated for Divi 3.3.1

Photo Credits
Water photo by Bagas VG on Unsplash | iPhones photo on Pexels | Stack of Phones on Pexels | Devices in white photo by eleven x on Unsplash | Devices photo by Vadim Sherbakov on Unsplash

Photo Credits

Beach photo by Ibrahim Shabil on Unsplash

Watercolor wireframe photo by Hal Gatewood on Unsplash

All the car photos are from This collection

Paintbrush photo by RhondaK Native Florida Folk Artist on Unsplash

Laptop photo by Safar Safarov on Unsplash

Laptop and water bottle photo by Paul Esch-Laurent on Unsplash

Keyboard photo by Jannis Brandt on Unsplash

Reviews (0)

Reviews

There are no reviews yet.

Only logged in customers who have purchased this product may leave a review.