Figma to WordPress: Learn to Design and Build Website

Create a Figma account and sign up options, then navigate the dashboard to create a design file and learn frames, canvas, rectangles, text, pen tool, and alignment.

Create a mood board in Figma to design your portfolio website, using frames, background color, and placed images to craft a hero section, sections, testimonials, and contact details.

Create a mood board in Figma to capture client requirements, gather design inspiration from Dribbble, Pinterest, and Behance, and prepare a shareable concept for feedback.

Create the testimonials section by adding an image placeholder, text areas for client name and quote, and styling with color and size. Add navigation dots and duplicates for multiple testimonials.

Create and style a contact section in Figma by building a clean layout, adding social media handles, and linking a schedule and email form for visitor contact.

Adjust website layouts by resizing sections, replacing icons with Font Awesome, tweaking colors and spacing, and previewing the landing page prototype to refine the home page design.

learn to set up a free hosting account with Infinity Free, create a subdomain, install WordPress, and manage DNS propagation in the control panel for development purposes.

Learn to install and activate the Astra theme and the Elementor page builder, then add Elementor addons to enable features like testimonials, preparing for future lessons.

Add and style the hero section by editing the header, applying typography, color, and alignment, then build and customize join and secondary buttons with padding and borders.

Learn to configure the home page section in WordPress using Elementor, aligning colors and fonts from a Figma design, adjusting layout, and publishing the static home page.

Apply a hero section design by importing a background image, grouping elements, and adjusting margins, padding, and typography in Elementor to match the Figma design and create responsive button alignment.

Learn how to fix hero image spacing by editing, cropping, and aligning the image with the bottom of the hero for a clean, balanced layout.