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.
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 Child Themes and Development Setup
- 02 CSS Syntax
- 03 CSS Selectors
- 04 Specificity
- 01 Units and Values
- 02 Boxes and Blocks
- 03 Typography
- 04 Spacing and Sizing
- 01 Positioning and Z-index
- 02 Transform
- 03 Flex
- 04 Pseudo Elements and Classes
- 05 Styling SVG Files
- 06 Media Queries
- 01 The Divi HTML Structure
- 02 Selecting the Selector
- 03 Writing Sustainable CSS
- 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 LessonIs 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
- It’s not just stacking
- 01 The Basics (CSS Crash Course)
- 02 Media Queries
- 01 Responsive Text Sizes
- 02 Line Breaks
- 03 Alignments
- 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
- 01 Introduction
- 02 Building Responsively
- 03 Header
- 04 Footer
- 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
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)
Only logged in customers who have purchased this product may leave a review.
Reviews
There are no reviews yet.