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.