120-Day CSS Tailwind CSS Study Plan

 

As a front-end developer, I highly approve of this utility-first approach to learning CSS. Tailwind CSS completely changes how you think about styling by moving you away from context-switching between HTML and CSS files, allowing you to build layouts directly in your markup.

Because this is a massive 120-day curriculum, I will break down Phase 1 (Days 1–30) and Phase 2 (Days 31–60) in this response. I’ve added detailed developer goals and specific technical instructions for every single topic.

Phase 1: Foundations (Days 1–30)

The focus here is memorizing Tailwind's naming conventions for the CSS properties you already know.

Day 1: Install Tailwind in a plain HTML project

Define Goal: Understand the build process. Tailwind isn't a traditional stylesheet; it's a PostCSS plugin that scans your HTML and generates only the CSS classes you actually use.

Instructions:

1. Initialize a new project: npm init -y.
   
   
2. Install Tailwind via npm: npm install -D tailwindcss.
   
   
3. Generate the config file: npx tailwindcss init.
   
   
4. Configure your tailwind.config.js to scan your HTML: content: ["./src/**/*.{html,js}"].
   
   
5. Add the Tailwind directives (@tailwind base; @tailwind components; @tailwind utilities;) to your src/input.css file and run the CLI build command to output your compiled CSS.
   
   

Days 2–3: Colors (Text & Background)

Define Goal: Master Tailwind's default color palette and numbering system (50-950), where 50 is the lightest and 950 is the darkest.

Instructions:

• Day 2 (Text): Create an <h1> and apply text-blue-700. Create a <p> tag and apply text-gray-600.
  
  
• Day 3 (Backgrounds): Wrap your text in a <div> and apply bg-green-100. Notice how backgrounds map 1:1 with text colors using the bg- prefix.
  
  

Days 4–7: Typography Hierarchy & Readability

Define Goal: Control the text styling—size, weight, kerning, and line-height—without leaving your HTML.

Instructions:

• Day 4 (Size): Apply text-3xl to a heading and text-sm to a footer note.
  
  
• Day 5 (Weight): Apply font-bold to your heading and font-light to a subtitle.
  
  
• Day 6 (Letter Spacing): Use tracking-wide or tracking-tight on uppercase headings to improve modern UI aesthetics.
  
  
• Day 7 (Line Height): Apply leading-relaxed (line-height: 1.625) to paragraph tags so long blocks of text are readable.
  
  

Days 8–9: The Box Model (Margin & Padding)

Define Goal: Learn Tailwind's spacing scale (where 1 unit = 0.25rem or 4px) to control layout breathing room.

Instructions:

• Day 8 (Margin): Add m-4 (1rem all around) to a card <div>. Use mx-auto on a fixed-width container to center it horizontally.
  
  
• Day 9 (Padding): Add px-6 (left/right 1.5rem) and py-2 (top/bottom 0.5rem) to an <a> tag to form the click area of a button.
  
  

Days 10–12: Borders, Corners, & Shadows

Define Goal: Create UI depth and define boundaries for interactive elements like cards and buttons.

Instructions:

• Day 10 (Borders): Add border border-gray-300 to a container. Notice that border enables a 1px border, and the color class colors it.
  
  
• Day 11 (Radius): Apply rounded-md to a card, and rounded-full to a profile picture <img> to make it a perfect circle.
  
  
• Day 12 (Shadows): Apply shadow-md to your card <div> to lift it off the background.
  
  

Days 13–15: Sizing & Containers

Define Goal: Dictate how much physical space an element occupies using fixed, fluid, and responsive maximums.

Instructions:

• Day 13 (Width): Create a two-column layout manually by giving two divs w-1/2.
  
  
• Day 14 (Height): Use h-screen (100vh) on a <section> to ensure it takes up the exact height of the browser window.
  
  
• Day 15 (Max-Width): Instead of fixed widths, apply max-w-screen-lg mx-auto to a wrapper div to create a centered, responsive website container.
  
  

Days 16–18: Flexbox Core

Define Goal: Utilize the Flexbox model via utility classes to align and distribute items in 1D layouts.

Instructions:

• Day 16 (Flex): Apply flex items-center justify-between to a header to push the logo to the left and nav links to the right.
  
  
• Day 17 (Direction): Apply flex-col to a card to stack an image, title, and button vertically.
  
  
• Day 18 (Wrap): Create a row of badges. Add flex flex-wrap gap-2 so they automatically wrap to the next line on smaller screens.
  
  

Days 19–21: CSS Grid Core

Define Goal: Use Tailwind to build 2D grid systems quickly without complex CSS math.

Instructions:

• Day 19 (Grid & Cols): Add grid grid-cols-2 to a wrapper div to instantly split its children into a 50/50 layout.
  
  
• Day 20 (Gap): Add gap-6 to the grid container to inject gutters between your columns and rows.
  
  
• Day 21 (Rows): Apply grid-rows-3 to a sidebar container to evenly distribute three widgets vertically.
  
  

Days 22–24: Positioning & Overflow

Define Goal: Break elements out of the standard document flow safely and handle excess content.

Instructions:

• Day 22 (Position): Give a parent div relative. Inside it, give a badge absolute top-0 right-0 to pin it to the top right corner.
  
  
• Day 23 (Z-Index): Add z-50 to a sticky header so it slides over the top of z-10 page content.
  
  
• Day 24 (Overflow): Apply overflow-hidden to a card so the square corners of a child image don't bleed out of the rounded-lg parent.
  
  

Days 25–29: State, Visibility, & Interaction

Define Goal: Handle element display states and user mouse interactions using pseudo-class modifiers.

Instructions:

• Day 25-26 (Display/Visibility): Toggle hidden (display: none) vs invisible (visibility: hidden - keeps physical space) on an element.
  
  
• Day 27 (Cursor): Apply cursor-not-allowed to a disabled button.
  
  
• Day 28 (Opacity): Apply opacity-50 to a secondary icon.
  
  
• Day 29 (Hover): Combine utilities. Add bg-blue-500 hover:bg-blue-600 to a button so it darkens on mouseover.
  
  

Day 30: Review Phase 1 Deliverable

Define Goal: Synthesize your core utility knowledge.

Instructions: Build a single-page landing page (Hero, Features Grid, Footer) using only the classes learned above. Do not write a single line of custom CSS.

Phase 2: Configuration, Animation, & Plugins (Days 31–60)

The focus shifts to extending Tailwind to match a specific brand, adding animations, and working with complex UI components.

Days 31–33: Customizing the tailwind.config.js

Define Goal: Escape the default design system. Teach Tailwind your brand's specific colors, fonts, and spacing.

Instructions:

• Day 31 (Colors): In tailwind.config.js, open the theme.extend.colors object. Add a custom key: brand: '#FF5733'. Now you can use text-brand and bg-brand in your HTML.
  
  
• Day 32 (Fonts): Add a Google Font to your HTML. In your config theme.extend.fontFamily, add sans: ['"Inter"', 'sans-serif'].
  
  
• Day 33 (Spacing): Add custom spacing values (e.g., 128: '32rem') to theme.extend.spacing if the default scale isn't large enough.
  
  

Days 34–35: The Container & Hero Section

Define Goal: Standardize layout boundaries and practice building high-impact top-of-page sections.

Instructions:

• Day 34 (Container): In your config, set container: { center: true, padding: '2rem' }. Now, adding .container to a div automatically centers it with built-in padding.
  
  
• Day 35 (Hero): Build a Hero with min-h-[80vh], a background image, a dark overlay (bg-black/50), and centered flex text.
  
  

Days 36–40: Advanced Positioning & Scrolling

Define Goal: Build modern UI behaviors like sticky navs and horizontal swipeable sections.

Instructions:

• Day 36-37 (Fixed & Insets): Create a navbar and apply fixed top-0 left-0 w-full. Ensure the main content has pt-20 (padding-top) so it doesn't hide behind the navbar.
  
  
• Day 38 (Layering): Manage complex z-indexes (dropdowns z-40, modals z-50).
  
  
• Day 39-40 (Scrollable Component): Create a horizontal row of cards. Add flex overflow-x-auto snap-x to the parent to create a mobile-friendly swipeable carousel.
  
  

Days 41–44: Transitions & Dropdowns

Define Goal: Smooth out UI state changes so elements don't just "snap" instantly when hovered or clicked.

Instructions:

• Day 41-43 (Transitions): Add transition-all duration-300 ease-in-out to a button, along with hover:bg-blue-600. Watch the color fade smoothly.
  
  
• Day 44 (Dropdown): Build a menu. Use opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all to make it fade in when the parent is hovered.
  
  

Days 45–49: Transforms & Keyframe Animations

Define Goal: Utilize the GPU for performant visual effects and utilize Tailwind's native keyframes.

Instructions:

• Day 45-46 (Transform): On an image wrapper, add overflow-hidden. On the image itself, add transition-transform hover:scale-110 for a slick zoom effect.
  
  
• Day 47-49 (Animations): Add animate-pulse to skeleton loading screens. In tailwind.config.js, define a custom keyframes rotation for a custom loading spinner component.
  
  

Days 50–54: Form Styling & Advanced States

Define Goal: Override ugly browser-default form elements and handle accessibility states.

Instructions:

• Day 50-51 (Forms): Style an <input> with border rounded px-4 py-2 outline-none.
  
  
• Day 52-53 (Focus/Disabled): Add focus:ring-2 focus:ring-blue-500 to your input. Add disabled:opacity-50 disabled:cursor-not-allowed to the submit button.
  
  
• Day 54 (Validation): Combine focus and colors: focus:invalid:border-red-500 focus:invalid:ring-red-500.
  
  

Days 55–57: Tailwind Plugins

Define Goal: Leverage official Tailwind plugins for complex use cases like markdown styling and video embeds.

Instructions:

• Day 55 (Typography): Run npm i @tailwindcss/typography. Add it to your config's plugins array. Wrap a blog post in <div class="prose"> and watch it automatically style the raw HTML/Markdown.
  
  
• Day 56-57 (Aspect Ratio): Build a gallery. Apply aspect-video (16:9) or aspect-square (1:1) to images/iframes so they scale perfectly responsively without strict heights.
  
  

Days 58–60: Reusable Utilities & Phase 2 Deliverable

Define Goal: Keep your HTML clean by extracting repeating component classes and wrapping up Phase 2.

Instructions:

• Day 58 (Custom Utilities): Use the @layer components directive in your main CSS file to extract .btn { @apply px-4 py-2 bg-blue-500 rounded text-white; }.
  
  
• Day 59 (Card Component): Build a highly polished, reusable card with hover scaling and an aspect-ratio image.
  
  
• Day 60 (Review): Deliver a full Blog Layout combining custom config brand colors, the Typography plugin for the post body, and responsive CSS grids for the sidebar.

Days 61–62: Install Tailwind in a React Project

Define Goal: Integrate Tailwind into a modern JavaScript build tool. (Note: The industry has moved from Create React App to Vite, so we will use Vite for better performance). Instructions:

1. Initialize a new project: npm create vite@latest my-app -- --template react.

2. Navigate into the folder, run npm install, then install Tailwind: npm install -D tailwindcss postcss autoprefixer.

3. Run npx tailwindcss init -p to generate both tailwind.config.cjs and postcss.config.cjs.

4. Configure the content array in your Tailwind config to include "./src/**/*.{js,jsx,ts,tsx}". Add the Tailwind directives to index.css.

5. Open App.jsx, delete the boilerplate, and build a simple <button className="bg-blue-500 text-white px-4 py-2 rounded"> to verify it works.

Days 63–64: Conditional Classes (clsx and tailwind-merge)

Define Goal: Handle dynamic UI states (like active/inactive, success/error) cleanly without writing messy string concatenations in JSX. Instructions:

1. Install utility libraries: npm install clsx tailwind-merge.

2. Create a utility function: const cn = (...inputs) => twMerge(clsx(inputs));.

3. Build a Button component that accepts an intent prop (primary vs secondary).

4. Use the utility to conditionally apply styles: className={cn("px-4 py-2 rounded", intent === 'primary' ? 'bg-blue-500' : 'bg-gray-200')}.

Days 65–66: Dark Mode Configuration

Define Goal: Allow the UI to invert colors based on user system preferences or a manual toggle using Tailwind's dark: modifier. Instructions:

1. In tailwind.config.js, set darkMode: 'class'. This allows you to toggle dark mode manually by appending a .dark class to the <html> element.

2. Build a card with classes like bg-white dark:bg-gray-800 text-black dark:text-white.

3. Create a React state [isDark, setIsDark] linked to a toggle switch button. When true, add the dark class to document.documentElement.

Days 67–68: Advanced Grid Layouts (Dashboard)

Define Goal: Construct complex, asymmetrical application layouts using CSS Grid. Instructions:

1. Build a dashboard shell. Use grid-cols-12 on the main wrapper.

2. Make a Sidebar component span 3 columns (col-span-3) and the Main Content area span 9 columns (col-span-9).

3. Add responsive prefixes so it stacks on mobile: grid-cols-1 md:grid-cols-12 and col-span-1 md:col-span-3.

Days 69–70: Flex Grow/Shrink & Pricing Tables

Define Goal: Master how elements claim available space in a flex container. Instructions:

1. Build a flex container for a Pricing Table with 3 cards.

2. Apply flex-1 to the outer cards so they take equal space.

3. Apply flex-none md:scale-105 to the middle "Pro" tier card to make it pop out visually while the others shrink around it.

Days 71–74: Responsive Images & Object Fit

Define Goal: Prevent images from distorting or breaking out of their containers when the browser resizes. Instructions:

1. Build a Hero Section and an Image Gallery.

2. Ensure every <img> tag has w-full.

3. Use object-cover to ensure the image fills its container (cropping if necessary without stretching), or object-contain to show the whole image with letterboxing.

4. Use h-64 md:h-96 to adjust the container height per device.

Days 75–76: Aspect Ratio for Videos

Define Goal: Maintain strict 16:9 proportions for embedded YouTube/Vimeo iframes regardless of screen width. Instructions:

1. Ensure the @tailwindcss/aspect-ratio plugin is installed (or use the native aspect-video class in modern Tailwind).

2. Wrap an <iframe> in a div with w-full aspect-video.

3. Notice how the video height dynamically calculates based on the browser width without needing JavaScript.

Days 77–78: Scroll Snap & Carousels

Define Goal: Build a native, performant mobile swipe experience. Instructions:

1. Create a row of horizontal cards. Give the parent flex overflow-x-auto snap-x snap-mandatory gap-4.

2. Give each child card snap-center shrink-0 w-80.

3. Test on a mobile device/simulator. The scroll should "snap" perfectly to each card.

Days 79–80: Sticky Positioning

Define Goal: Keep critical navigation or sidebar elements visible while the user scrolls down a long page. Instructions:

1. On your Dashboard or Blog layout, apply sticky top-0 z-50 to the Navbar.

2. Apply sticky top-20 to the Sidebar wrapper.

3. Scroll down the page and watch the sidebar lock into place while the main content continues to scroll.

Days 81–82: Responsive Tables

Define Goal: Handle tabular data that is too wide for mobile screens gracefully without breaking the viewport width. Instructions:

1. Build a pricing comparison <table>.

2. Wrap the table in a <div> and apply overflow-x-auto w-full.

3. Test on mobile view. The page should not scroll horizontally, but the table itself should be swipeable left-to-right.

Days 83–84: Performance Optimization (Purge CSS)

Define Goal: Understand the Tailwind compiler. Ensure your production build is tiny (usually sub-10kb). Instructions:

1. Run npm run build in Vite.

2. Inspect the output dist/assets folder. Find the .css file.

3. Understand that Tailwind automatically purged all the classes you didn't use because of the content array you set up on Day 61.

Days 85–88: Accessibility (A11y) & Focus States

Define Goal: Ensure your application is usable by keyboard navigators and screen readers. Instructions:

1. Add custom focus rings to all interactive elements: focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2.

2. Use the sr-only class to hide labels visually but keep them readable by screen readers (e.g., an icon-only search button needs a <span className="sr-only">Search</span>).

3. Build a modal and ensure ARIA attributes are passed correctly via React props.

Days 89–90: Responsive Nav & Phase 3 Review

Define Goal: Tie React state directly to Tailwind classes to handle mobile interactions. Instructions:

1. Build a Navbar component. Create a React state: const [isOpen, setIsOpen] = useState(false).

2. Create the mobile menu div. Use conditional classes: className={cn("md:hidden", isOpen ? "block" : "hidden")}.

3. Ensure the Phase 3 Deliverable (React Dashboard) incorporates dark mode, sticky sidebars, and accessible form elements.

Phase 4: Mastery, Tokens & Deployment (Days 91–120)

Days 91–92: Design Tokens & Reusable Style Guides

Define Goal: Translate a Figma file's exact design system (tokens) into your Tailwind configuration to strictly enforce brand guidelines. Instructions:

1. Open tailwind.config.js. Completely overwrite (don't extend) the default color palette with a strict brand palette (e.g., primary, secondary, neutral, danger).

2. Overwrite the default breakpoints (sm, md, lg) if the project requires specific container queries (e.g., matching a bootstrap grid system).

Days 93–95: Component Libraries (Tailwind UI / Headless UI)

Define Goal: Accelerate development by utilizing unstyled, accessible UI logic components (Headless UI) and styling them with Tailwind. Instructions:

1. Install @headlessui/react.

2. Build a Dropdown Menu or Modal using Headless UI.

3. Apply Tailwind classes to the headless components. Notice how it handles all the keyboard navigation, focus trapping, and ARIA attributes for you automatically.

Days 96–97: Collaboration & Documentation

Define Goal: Ensure standard practices are documented so other developers don't write bloated utility strings. Instructions:

1. Write a README.md for your project explaining how to use your custom clsx utility for conditional classes.

2. Document custom config values (e.g., "Use text-brand instead of text-blue-500").

Days 98–100: Testing Responsiveness & Lighthouse Audit

Define Goal: Guarantee rendering consistency and pass Google's core web vitals. Instructions:

1. Open your app in Chrome DevTools. Cycle through iPhone, iPad, and 4k Desktop views. Look for overflow issues (horizontal scrolling).

2. Run a Lighthouse Audit (DevTools > Lighthouse).

3. Fix contrast ratio warnings using darker text utilities (e.g., changing text-gray-400 to text-gray-600 on a white background).

Days 101–102: SEO Optimization & Semantic HTML

Define Goal: Ensure your rapid utility styling isn't replacing proper HTML structure. Instructions:

1. Audit your app. Are you using <div className="text-3xl font-bold"> instead of an <h1>? Fix it.

2. Ensure buttons are <button> and links are <a>. Do not use onClick on a <div> just because you can style it like a button.

Days 103–104: Advanced Build Optimization

Define Goal: Finalize the Vite build pipeline for the absolute smallest asset footprint. Instructions:

1. Check your postcss.config.cjs to ensure autoprefixer is enabled (this automatically adds -webkit- prefixes to your CSS).

2. Run a production build and verify the CSS is minified (all whitespace stripped).

Days 105–106: Deployment Basics (Netlify & Vercel)

Define Goal: Implement Continuous Integration/Continuous Deployment (CI/CD). Instructions:

1. Push your React project to a GitHub repository.

2. Sign in to Vercel or Netlify with GitHub.

3. Import the repository. The platform will automatically detect Vite and configure the build settings.

4. Click Deploy. Verify the live URL looks identical to your local host.

Days 107–108: Shared Configs & Monorepos

Define Goal: Maintain styling consistency across multiple applications (e.g., an Admin app and a Client app). Instructions:

1. Create a separate .js file for your Tailwind config (e.g., brand-preset.js).

2. Inside your app's tailwind.config.js, require this file in the presets: [require('./brand-preset.js')] array. This allows you to share design tokens across a monorepo.

Days 109–110: API Integration & Dynamic Styling

Define Goal: Style data that arrives asynchronously without breaking layout while waiting. Instructions:

1. Build a Weather App UI using React useEffect to fetch data from an API (like OpenWeatherMap).

2. Build a loading state using animate-pulse (skeleton loaders) while the data fetches.

3. Dynamically change the background using template literals based on the weather data: className={cn("h-screen w-full", temp > 80 ? 'bg-red-500' : 'bg-blue-500')}.

Days 111–112: Global Context Dark Mode

Define Goal: Persist the user's dark mode preference across page reloads. Instructions:

1. Create a ThemeContext in React.

2. Use localStorage.setItem('theme', 'dark') to save the choice.

3. On application load, read local storage to inject the .dark class into the DOM instantly.

Days 113–114: Advanced Custom Animations

Define Goal: Create highly polished micro-interactions. Instructions:

1. In tailwind.config.js, build a custom keyframe for a "slide-in-up" animation (opacity 0 to 1, transform Y 20px to 0).

2. Add it to theme.extend.animation.

3. Apply animate-slide-in-up to your modal or page transitions.

Days 115–116: Usability Testing & Iteration

Define Goal: Validate touch targets and visual hierarchy. Instructions:

1. Have a colleague test the app on their physical mobile device.

2. If they miss buttons with their thumb, increase padding (e.g., px-4 py-2 to px-6 py-3).

3. If text is hard to read in sunlight, increase the font weight or contrast.

Days 117–118: Component Extraction & Refactoring

Define Goal: Clean up the codebase by identifying repeating UI patterns. Instructions:

1. Find any HTML structure duplicated 3 or more times (e.g., an avatar badge with specific rounded corners, borders, and rings).

2. Extract it into a <Avatar src="{...}"/> React component. Do not use @apply in CSS; rely on React for componentization.

Days 119–120: Final Polish & Project Showcase

Define Goal: Deliver the ultimate full-stack-adjacent frontend application. Instructions:

1. Consolidate your dashboard, dynamic API fetches, and dark mode features into a single, cohesive repository.

2. Ensure Lighthouse scores are 90+ for Performance, Accessibility, and Best Practices.

3. Push the final version to GitHub, trigger the Vercel deployment, and add the live URL to your developer portfolio.

120-Day WordPress + Elementor Front-End Study Plan

 

Phase 1: Foundations (Days 1–30)

Day 1: Install WordPress Locally & Explore File Structure

Define Goal: Set up a local server environment to develop without hosting costs, and understand the core WordPress directory structure so you know where themes, plugins, and core files live.

Instructions:

1. Download and install Local by Flywheel (LocalWP) or XAMPP. LocalWP is the modern developer standard.

 

2. Create a new local site (e.g., elementor-study.local).

 

3. Open your computer's file explorer and navigate to the site's root folder.

 

4. Locate the wp-content folder. This is the only folder you will modify as a front-end developer. Inside, identify the /themes, /plugins, and /uploads directories.

 

Day 2: Install Elementor + Elementor Pro & Navigate the Interface

Define Goal: Activate your visual page builder and familiarize yourself with the Elementor Editor UI, specifically the Widget Panel, the Canvas, and the Navigator tree (which functions like a visual DOM tree).

Instructions:

1. Log into your WordPress admin dashboard (/wp-admin).

 

2. Go to Plugins > Add New, search for "Elementor", install, and activate it.

 

3. Upload and activate your Elementor Pro zip file (if you have the license).

 

4. Create a new Page and click Edit with Elementor.

 

5. Open the Navigator (Cmd/Ctrl + I). Pin it to the side of your screen; you will use this constantly to manage your HTML structure.

 

Day 3: Create First Page with Sections & Columns (Containers)

Define Goal: Understand layout hierarchy. Note: Modern Elementor uses Flexbox Containers instead of Sections/Columns. You will learn to control flex-direction, alignment, and justification.

Instructions:

1. In the Elementor editor, click the + icon to add a new Container.

 

2. Set the Container's direction to "Row" (horizontal) or "Column" (vertical).

 

3. Nest two smaller containers inside the main one to create a 2-column layout.

 

4. Experiment with the "Justify Content" and "Align Items" settings to see how elements position themselves inside the flexbox.

 

Day 4–5: Add Widgets (Heading, Text, Image, Button)

Define Goal: Practice injecting content into your layout structure and manipulating widget-level settings.

Instructions:

1. Drag a Heading widget into your first container. Change the HTML tag to H1 for SEO semantics.

 

2. Drag a Text Editor widget below it for a paragraph.

 

3. Drag an Image widget into your second container. Upload a placeholder image.

 

4. Drag a Button widget below the text. Link it to # (a placeholder anchor).

 

Day 6: Explore Global Settings (Fonts & Colors)

Define Goal: Establish a design system. Setting CSS variables globally prevents you from manually styling individual widgets, ensuring brand consistency and cleaner code.

Instructions:

1. In the Elementor Editor, click the hamburger menu (top left) and select Site Settings.

 

2. Go to Global Colors. Define your Primary, Secondary, Text, and Accent colors.

 

3. Go to Global Fonts. Define your typography hierarchy (H1-H6, body text).

 

4. Apply these globals to your widgets by clicking the "globe" icon next to color/typography settings instead of picking custom values.

 

Day 7–10: Build a 3-Page Static Site (Home, About, Contact)

Define Goal: Synthesize your layout and widget skills to build a complete, linked static website.

Instructions:

1. Draft wireframes on paper for your Home, About, and Contact pages.

 

2. Build the Home page using a hero section, a features section, and a call-to-action.

 

3. Build the About page using image/text alternating containers and an image gallery.

 

4. Build the Contact page with static text (address, email) and a placeholder for a form.

 

5. Publish all three pages and ensure they exist in your WordPress Pages list.

 

Day 11: Learn Theme Builder Overview

Define Goal: Understand the concept of "Templates." Instead of designing a header on every page, you design one header template that WordPress dynamically injects across the site.

Instructions:

1. Go to Templates > Theme Builder in the WordPress dashboard.

 

2. Review the available template types: Header, Footer, Single Post, Archive, etc.

 

3. Understand the concept of Display Conditions (rules that tell WordPress where to inject the template).

 

Day 12–15: Create Custom Header + Footer Templates

Define Goal: Replace the default WordPress theme header/footer with a custom, globally managed Elementor layout.

Instructions:

1. In Theme Builder, add a new Header template.

 

2. Add a Site Logo widget and a Nav Menu widget. Align them using Flexbox (Space Between).

 

3. Publish and set the Display Condition to Entire Site.

 

4. Repeat the process for a Footer template, including copyright text and secondary links.

 

5. Visit your live site to verify the header and footer appear on all 3 of your static pages.

 

Day 16: Explore Responsive Design (Mobile/Tablet)

Define Goal: Learn to write media queries visually. Ensure your DOM structure adapts gracefully to smaller viewport sizes.

Instructions:

1. Open a page in Elementor and click the Responsive Mode icon (bottom bar).

 

2. Switch to Tablet and Mobile views.

 

3. Adjust font sizes and container widths. Look for the viewport icon next to a setting—this means your change only applies to that device size (and smaller).

 

4. Change a row container's flex direction to "Column" on mobile so elements stack vertically.

 

Day 17–20: Practice Styling Sections with Padding & Margins

Define Goal: Master the CSS Box Model (Content, Padding, Border, Margin) within Elementor's UI to create visual breathing room.

Instructions:

1. Open the Advanced tab of any widget or container.

 

2. Unlink the padding/margin values.

 

3. Add internal space (Padding) to Containers so content doesn't touch the edges (e.g., 5% top and bottom padding).

 

4. Add external space (Margin) between separate containers to push them apart.

 

Day 21: Learn WordPress Themes (Parent vs. Child Themes)

Define Goal: Understand the separation of structure (Theme) and design (Elementor). Learn why child themes protect custom code from being overwritten during updates.

Instructions:

1. Install and activate the Hello Elementor theme (a lightweight, bare-bones theme perfect for page builders).

 

2. Read the WordPress Codex documentation on Child Themes.

 

3. Understand that Elementor replaces the visual need for a heavy theme, so a "blank canvas" theme is best for performance.

 

Day 22–25: Create a Child Theme & Modify CSS

Define Goal: Learn to write raw CSS and enqueue styles manually to bypass Elementor's UI when necessary.

Instructions:

1. Create a folder in wp-content/themes named hello-elementor-child.

 

2. Create a style.css file with the required WordPress theme header comment.

 

3. Create a functions.php file and write the PHP script to enqueue the parent theme's styles.

 

4. Activate the Child Theme in WordPress. Write a custom CSS rule in your style.css (e.g., body { background-color: #fafafa; }) and verify it loads.

 

Day 26–28: Explore WordPress Plugins & Install SEO Plugin

Define Goal: Extend WordPress core functionality safely. Understand how SEO meta tags are injected into the <head> of your document.

Instructions:

1. Install and activate an SEO plugin like Yoast SEO or RankMath.

 

2. Go to your Home page, scroll down to the SEO meta box.

 

3. Define the Meta Title and Meta Description.

 

4. Inspect the front end of your site (Right Click > Inspect) and locate your newly injected <title> and <meta name="description"> tags in the <head>.

 

Day 29: Learn WordPress Settings (Permalinks, Reading, Discussion)

Define Goal: Configure the core server-side routing and display settings of your WordPress instance.

Instructions:

1. Go to Settings > Permalinks and change the structure to "Post name" (crucial for clean, readable URLs).

 

2. Go to Settings > Reading and set your Homepage to the static Home page you built, and your Posts page to a new empty "Blog" page.

 

3. Go to Settings > Discussion and disable comments globally if you don't want them.

 

Day 30: Review Phase 1 (Deliverable)

Define Goal: Compile all learned skills into a finalized Phase 1 project.

Instructions:

1. Audit your 3-page site.

 

2. Check that the custom Header and Footer are active.

 

3. Test all buttons and links.

 

4. Resize your browser window to test mobile responsiveness.

 

Phase 2: Intermediate Skills (Days 31–60)

Day 31: Learn Single Post Templates

Define Goal: Grasp dynamic content routing. Build a master layout that automatically populates with data from the WordPress database whenever a new blog post is published.

Instructions:

1. Create 3 dummy blog posts in the WordPress backend with Featured Images and excerpts.

 

2. Go to Theme Builder > Single Post and create a new template.

 

3. Drag in dynamic widgets: Post Title, Post Info (author/date), Featured Image, and Post Content.

 

4. Set Display Conditions to "Include: All Posts". Check your dummy posts to see them using the new layout.

 

Day 32–35: Create Archive Templates

Define Goal: Design the "loop" page (the index) that dynamically queries and lists all your published blog posts.

Instructions:

1. Go to Theme Builder > Archive.

 

2. Drag in the Archive Title widget and the Posts widget.

 

3. Style the Posts widget to display as a 3-column grid, showing the image, title, and excerpt.

 

4. Set Display Conditions to "Include: All Archives".

 

Day 36: Explore Custom Fields with ACF Plugin

Define Goal: Break out of standard WordPress fields (Title/Content) and create custom database fields for specific content types.

Instructions:

1. Install and activate the Advanced Custom Fields (ACF) plugin.

 

2. Create a new Field Group called "Book Reviews".

 

3. Add custom fields: "Author" (Text), "Rating out of 5" (Number), and "Buy Link" (URL).

 

4. Set the Location Rules to show this field group only on standard Posts. Fill out this data in your dummy posts.

 

Day 37–40: Display Custom Fields in Templates

Define Goal: Connect the backend database queries from ACF to your front-end Elementor templates using Dynamic Tags.

Instructions:

1. Open your Single Post Template in Elementor.

 

2. Drag in a Heading widget. Instead of typing text, click the Dynamic Tags icon (the stack of coins) inside the text field.

 

3. Scroll down to "ACF Field" and select the "Author" field you created.

 

4. Repeat for the Rating and Buy Link. Style these elements so they look native to the layout.

 

Day 41: Learn Form Widget & Build Contact Form

Define Goal: Capture user input securely using Elementor Pro's native Form widget.

Instructions:

1. Open your Contact page in Elementor.

 

2. Drag in the Form widget.

 

3. Configure the fields: Name (Text), Email (Email), Subject (Text), and Message (Textarea).

 

4. Mark Name and Email as "Required".

 

Day 42–45: Connect Form to Email & Add Validation

Define Goal: Handle form submission protocols and server-to-email routing.

Instructions:

1. Click on your Form widget and go to the Actions After Submit tab.

 

2. Ensure "Email" is selected.

 

3. Open the Email dropdown. Set the "To" address to your testing email.

 

4. Use Form Field Shortcodes (e.g., [field id="name"]) in the message body to format how the email arrives in your inbox.

 

5. Test the form on the front end to ensure it triggers and delivers.

 

Day 46: Explore Popup Builder (Newsletter Popup)

Define Goal: Learn overlay mechanics and user-triggered conditional rendering.

Instructions:

1. Go to Templates > Popups and create a new popup.

 

2. Design a small container with a heading, text, and a simple Email capture form.

 

3. Click Publish. Set the Condition to "Entire Site".

 

4. Set the Trigger to "On Page Load" (wait 5 seconds) or "On Scroll" (after 50% scrolled).

 

Day 47–50: Add Motion Effects (Scroll Animations)

Define Goal: Implement CSS transitions and transform properties via Elementor's UI to enhance user engagement.

Instructions:

1. Select an Image or Container on your homepage.

 

2. Go to Advanced > Motion Effects.

 

3. Enable Scrolling Effects.

 

4. Apply a subtle "Vertical Scroll" (parallax) or "Fade In Up" entrance animation. Keep it subtle—over-animating causes performance and accessibility issues.

 

Day 51: Learn CSS Customization within Widgets

Define Goal: Override native Elementor wrappers by writing localized CSS targeting specific widgets.

Instructions:

1. Select a widget (e.g., a Heading).

 

2. Go to Advanced > Custom CSS.

 

3. Write a rule using the selector keyword (which scopes the CSS to that specific widget). Example:

selector h2 { text-shadow: 2px 2px 4px rgba(0,0,0,0.2); }

 

Day 52–55: Practice Styling Buttons with CSS

Define Goal: Master pseudo-classes (:hover, :active, :focus) via custom CSS.

Instructions:

1. Add a Button widget to your page.

 

2. In the Custom CSS tab, write a localized hover effect that Elementor doesn't natively support, such as a gradient background animation or a 3D box-shadow push effect.

 

CSS

selector .elementor-button:hover {

  transform: translateY(-3px);

  box-shadow: 0 5px 15px rgba(0,0,0,0.3);

}

Day 56: Explore JavaScript Integration (Toggle Menu)

Define Goal: Inject custom DOM manipulation scripts to handle interactivity that CSS cannot achieve alone.

Instructions:

1. Drag an HTML Widget onto your page.

 

2. Write a simple <script> tag inside.

 

3. Create a basic JavaScript function that listens for a click event on a specific button (using its CSS ID) and toggles a CSS class (like .hidden) on another container.

 

Day 57–59: Display API Data Using the HTML Widget

Define Goal: Understand asynchronous JavaScript (Fetch API) to pull external data into your WordPress site.

Instructions:

1. Find a free public API (like the JSONPlaceholder or a random quote generator).

 

2. In an HTML widget, write a <script> that uses fetch() to call the API.

 

3. Parse the JSON response and append it to a specific <div> inside your HTML widget using document.getElementById().innerHTML.

 

Day 60: Review Phase 2 (Deliverable)

Define Goal: Confirm your mastery of dynamic WordPress routing and basic coding integrations.

Instructions:

1. Audit your site: Ensure the Blog loop works, click into a single post to verify ACF data displays, and test the Contact Form.

 

2. Check your browser console (F12) for any JavaScript errors from your custom scripts.

 

3. Verify that your newsletter popup triggers according to the rules you set.

Phase 3: Advanced Development (Days 61–90)

Day 61: Install WooCommerce & Understand Product Types

Define Goal: Transform WordPress from a standard CMS into an e-commerce platform. Understand the database architecture WooCommerce uses to store products (Custom Post Types) and variants.

Instructions:

1. Install and activate the WooCommerce plugin from the repository.

 

2. Run the setup wizard to configure store location and currency.

 

3. Go to Products > Add New.

 

4. Create one of each product type: Simple Product (a standard item), Variable Product (e.g., a shirt with size/color attributes), and a Digital/Downloadable product.

 

Day 62–65: Create Single Product Templates

Define Goal: Override the default WooCommerce product page layout using Elementor Theme Builder to create a high-converting, brand-specific UI.

Instructions:

1. Go to Templates > Theme Builder > Single Product and create a new template.

 

2. Drag in essential dynamic WooCommerce widgets: Product Title, Product Images (gallery), Product Price, Add to Cart, and Product Description.

 

3. Use Flexbox containers to arrange the image gallery on the left and the purchase data/buttons on the right.

 

4. Set Display Conditions to "Include: Products" and check it on the front end against the dummy products you made.

 

Day 66–70: Build Shop Archive Templates

Define Goal: Design the primary storefront (the shop index) and category pages to cleanly display the product grid.

Instructions:

1. Go to Theme Builder > Products Archive.

 

2. Add the Archive Title widget and the Products widget.

 

3. Configure the Products widget to show 3 or 4 columns. Style the product cards (typography, hover effects on the product image, and "Add to Cart" button styling).

 

4. Set the condition to "Include: All Product Archives".

 

Day 71: Customize Cart + Checkout Flow

Define Goal: Reduce friction in the user journey by styling the cart and checkout pages, which are notoriously clunky in default WooCommerce.

Instructions:

1. Open your default Cart page in Elementor. Delete the standard WooCommerce shortcode.

 

2. Drag in the Elementor Cart widget. Style the typography, table borders, and checkout buttons to match your global design system.

 

3. Repeat this process on the Checkout page using the Elementor Checkout widget. Customize the input fields to match your Phase 2 contact forms.

 

Day 72–75: Add Coupons & Shipping Rules

Define Goal: Configure the server-side business logic that dictates cart totals, taxes, and discounts.

Instructions:

1. Go to Marketing > Coupons. Create a test coupon (e.g., 20% off) and set usage restrictions.

 

2. Go to WooCommerce > Settings > Shipping. Create a Shipping Zone for your country.

 

3. Add shipping methods to that zone (e.g., Flat Rate of $10, and Free Shipping if the order is over $50).

 

4. Test the cart on the front end to verify the logic correctly calculates totals.

 

Day 76: Learn Global Widgets & Save Reusable Sections

Define Goal: Embrace the DRY (Don't Repeat Yourself) principle in UI design. Save components globally so editing them once updates them everywhere.

Instructions:

1. Identify a section you use frequently, like a "Call to Action" banner.

 

2. Right-click the container handle and select Save as Template.

 

3. To create a Global Widget (e.g., a specific stylized button), right-click the widget and select Save as a Global.

 

4. Insert this global widget on multiple pages. Edit it once and watch it propagate across the site.

 

Day 77–80: Practice Exporting/Importing Templates

Define Goal: Learn how to migrate layout structures as JSON files, allowing you to move work between different local environments or servers.

Instructions:

1. Go to Templates > Saved Templates.

 

2. Select several templates (e.g., your Header, Footer, and Single Post) and click Export.

 

3. Delete one of your saved templates.

 

4. Use the Import Templates button at the top of the screen to upload the JSON file and restore it.

 

Day 81: Explore Advanced Responsive & Custom Breakpoints

Define Goal: Go beyond the standard Mobile/Tablet views and introduce widescreen or specific device breakpoints to handle complex fluid typography and flex wrapping.

Instructions:

1. Go to Elementor > Settings > Features and ensure "Additional Custom Breakpoints" is active.

 

2. Open the Editor, go to Site Settings > Layout > Breakpoints.

 

3. Add breakpoints for "Mobile Extra" (landscape) and "Widescreen" (large monitors).

 

4. Audit your single product page across all 5 breakpoints, adjusting flex directions and widths.

 

Day 82–85: Optimize WooCommerce Store for Conversions

Define Goal: Implement UI/UX patterns that drive sales, such as sticky add-to-cart bars, trust badges, and cross-sells.

Instructions:

1. Edit your Single Product template. Add an Elementor Upsell widget beneath the main product details.

 

2. Create a small Container with payment provider icons (Trust Badges) beneath the Add to Cart button.

 

3. Go to WooCommerce product data in the backend and link a few "Cross-sell" products, then verify they render dynamically on the cart page.

 

Day 86: Learn WordPress Security (Install Security Plugin)

Define Goal: Harden your application against brute-force attacks and common vulnerabilities.

Instructions:

1. Install a security plugin like Wordfence or Solid Security.

 

2. Run an initial scan.

 

3. Enable Two-Factor Authentication (2FA) for admin accounts.

 

4. Configure login lockout limits (e.g., ban IP after 5 failed login attempts).

 

Day 87–88: Practice Backups & Updates

Define Goal: Establish a fail-safe disaster recovery plan before doing any major version updates.

Instructions:

1. Install a backup plugin like UpdraftPlus.

 

2. Run a full manual backup of your Database and Files.

 

3. Safely update your WordPress core, Elementor plugins, and theme to their latest versions.

 

4. Restore your database from the backup to prove you know how to recover from a broken state.

 

Day 89: Explore WordPress Performance & Optimize Caching

Define Goal: Improve Time to First Byte (TTFB) and core web vitals by serving static HTML files instead of querying the database on every page load.

Instructions:

1. Install a caching plugin like LiteSpeed Cache or WP Rocket.

 

2. Enable Page Caching and Browser Caching.

 

3. Enable CSS/JS minification (stripping whitespace from code).

 

4. Run your site through Google PageSpeed Insights or GTmetrix and compare the before/after scores.

 

Day 90: Review Phase 3 (Deliverable)

Define Goal: Ensure the complete e-commerce pipeline functions perfectly from entry to checkout.

Instructions:

1. Open an incognito browser window.

 

2. Browse your shop, filter a product, add it to the cart, apply a coupon, and proceed to checkout.

 

3. Verify that all security, caching, and responsive layouts hold up under testing.

 

Phase 4: Mastery & Professional Workflow (Days 91–120)

Day 91: Learn Version Control & Template Revisions

Define Goal: Protect your design iterations. Understand how WordPress stores autosaves and how to roll back mistakes.

Instructions:

1. Open a complex page in Elementor and delete a crucial section. Save the page.

 

2. Click the History icon (bottom toolbar) and go to the Revisions tab.

 

3. Identify the previous save state and click it to revert the DOM structure.

 

4. Understand that revisions bloat the database over time; look into database optimization plugins to clean old revisions.

 

Day 92–95: Explore Git for WordPress Projects

Define Goal: Apply modern software development practices by tracking file changes (Child Theme, custom plugins) in a repository.

Instructions:

1. Initialize a Git repository inside your wp-content folder (ignore core files and uploads via .gitignore).

 

2. Create a GitHub account and push your custom child theme or code snippets to a remote repo.

 

3. Make a CSS change in your child theme, stage the commit, and push it to track your development history.

 

Day 96: Learn Collaboration & Share Templates

Define Goal: Handle asset handoffs in a team environment safely without overwriting other developers' work.

Instructions:

1. Use Elementor's Role Manager (Elementor > Role Manager) to restrict access. Set "Editor" roles to only edit content, not layout structures.

 

2. Export a specific section as a JSON file and mock an exchange by importing it into a completely fresh page to verify styling dependencies remain intact.

 

Day 97–100: Conduct Accessibility Audit (WCAG Compliance)

Define Goal: Ensure the DOM is readable by screen readers and navigable via keyboard, adhering to basic WCAG standards.

Instructions:

1. Navigate your live site using only the "Tab" key. Check if focus states are visible on links and buttons.

 

2. Run a free tool like WAVE or axe DevTools (browser extensions) on your homepage.

 

3. Fix contrast ratio issues, ensure all images have descriptive alt attributes, and verify heading tags strictly follow sequential order (H1 -> H2 -> H3).

 

Day 101: Learn Testing Across Browsers & Devices

Define Goal: Identify rendering inconsistencies across different rendering engines (WebKit, Blink, Gecko).

Instructions:

1. Open your site in Chrome, Firefox, and Safari (or a simulator if you don't own a Mac).

 

2. Look for flexbox alignment issues or broken SVG sizes, which often render differently in Safari.

 

3. Write a browser-specific CSS fallback if necessary.

 

Day 102–105: Optimize SEO with Yoast Plugin

Define Goal: Move beyond basic meta tags and optimize structured data and site architecture for search engine crawlers.

Instructions:

1. Use the Yoast SEO plugin to generate an XML Sitemap.

 

2. Configure Open Graph (OG) tags so that when a product is shared on social media, the correct image and title appear.

 

3. Ensure custom post types (like your WooCommerce products) are correctly indexed in the sitemap settings.

 

Day 106: Explore Hosting & Deploy Site with SSL

Define Goal: Migrate your local development database and files to a live production server.

Instructions:

1. Purchase a basic cloud hosting plan (e.g., Cloudways, SiteGround, or Hostinger).

 

2. Install a migration plugin like All-in-One WP Migration on your local site and export the .wpress package.

 

3. Install a fresh WordPress instance on your live host, upload the package, and restore.

 

4. Provision a free Let's Encrypt SSL certificate in your hosting dashboard and force HTTPS.

 

Day 107–110: Practice Multisite Management

Define Goal: Understand network administration for managing multiple sites under one WordPress installation.

Instructions:

1. Edit your local wp-config.php to enable multisite (define( 'WP_ALLOW_MULTISITE', true );).

 

2. Follow the WordPress network setup instructions to create a sub-directory network.

 

3. Understand how themes and plugins are activated globally on the network versus individually on sub-sites.

 

Day 111: Learn API Integrations (Mailchimp/Zapier)

Define Goal: Connect your WordPress application to third-party SaaS tools via REST APIs and Webhooks.

Instructions:

1. Create a free Mailchimp account and generate an API key.

 

2. Go to Elementor > Settings > Integrations and paste the API key.

 

3. Open your newsletter popup, change the Form Action to "Mailchimp," and map the Email field to your Mailchimp audience list. Submit a test email and verify it appears in Mailchimp.

 

Day 112–115: Build a Portfolio Site with Elementor Pro

Define Goal: Package your skills into a personal brand site that proves your capability as a developer.

Instructions:

1. Create a new WordPress installation (or a sub-site if using multisite).

 

2. Build a custom archive loop to showcase projects as a "Portfolio" Custom Post Type.

 

3. Implement advanced motion effects and strict CSS styling to ensure the site loads blazingly fast and looks highly professional.

 

Day 116–118: Conduct Usability Testing

Define Goal: Gather qualitative data on user friction points.

Instructions:

1. Ask a friend or colleague to complete three tasks on your live e-commerce site (e.g., "Find the contact page," "Buy the red shirt," "Sign up for the newsletter").

 

2. Observe without helping. Take notes on where they hesitate or click the wrong thing.

 

3. Revise your UI based on their behavior.

 

Day 119: Final Polish (Performance & Responsive Fixes)

Define Goal: Perform the final QA (Quality Assurance) sweep before client handoff or portfolio publishing.

Instructions:

1. Clear all caches (server, plugin, CDN).

 

2. Re-run PageSpeed Insights. Compress any newly uploaded images that are too large using a plugin like Smush or WebP Express.

 

3. Check all links for 404 errors.

 

Day 120: Final Project Showcase

Define Goal: Deliver the ultimate full-stack WordPress project that proves your capabilities.

Instructions:

1. Ensure your final deployed site includes: a functioning blog using custom loops, a WooCommerce storefront with a working cart flow, dynamic content via ACF, optimized caching, basic WCAG compliance, and an active SSL.

 

2. Document your build process in a short case study on your portfolio site, detailing the problems you solved and the tech stack you used.