Complete Webflow Bootcamp: From Figma Design to Development

Explore how the CSS box model defines page layout by treating each HTML element as a box, using margins, padding, and nesting to shape responsive alignment.

Explore Webflow elements and layouts, drag and drop sections, containers, and nested blocks to build a canvas. Understand the element hierarchy, icons, navigation, and collapsing tools to manage nested structures.

Explore how a div block acts as a dynamic container that expands with its content, grouping headings, paragraphs, and images; adjust its size and margins to shape layouts.

Explore how to use the grid element in Webflow to organize content dynamically and responsively, including creating a 2x2 layout, adjusting gutters, and manual versus automatic placement.

Learn to add images with image element, upload assets, choose formats like png, jpg, and svg, set dimensions, enable high dpi for retina displays, and keep files under four megabytes.

Explore how to integrate Lottie animations into your project by using a JSON file, replacing the assets, and controlling play, loop, reverse, and interactive features for high-quality visuals.

Drag and drop a form block, add labels, inputs, text areas, checkboxes, radios, and a submit button. Configure states, names, and field settings, then publish and view submissions.

Learn how a responsive Webflow navigation bar with logos, links, and menus adapts across breakpoints, featuring a hamburger menu and a prebuilt component.

Learn to implement a lightbox for full-screen media on any device by dragging a lightbox link, assigning media, and connecting multiple lightboxes with a group name.

Configure a slider to display image galleries or slides using the mask, left and right arrow links, and slide nav indicators, and customize animation, duration, and autoplay with slide content.

Learn to build interactive tabbed content in webflow, using the tabs element with a tabs menu and tab content to switch between monthly and yearly pricing panes.

Learn how to create, apply, and manage selectors and classes in Webflow to store and reuse styling, build base and combo classes, and implement global styles for consistent design.

Explore the six display settings—block, flex, grid, inline block, inline, none—and learn when to use each to craft one- and two-dimensional layouts.

Practice your flexbox skills with a 28-level game that challenges you to apply what you've learned. Visit flexboxgame.com to solve levels 1 through 28 and test understanding as you progress.

Explore sizing images and cards with px, percent, ems, rems, and viewport units, plus min/max width and height, overflow, and the cover vs fill fit.

Master the six positioning types—static, relative, absolute, fixed, sticky, and float—and learn how they affect document flow, z-index, and element stacking.

Explore the typography panel, learn to manage fonts, weights, sizes, units, line height, color, and contrast, use swatches and global styles, and apply inheritance from parent blocks for consistent typography.

Apply borders in Webflow to shape elements, adjusting corner radius (including individual corners), border width, color, and style. Create outlines and circles with overflow hidden for precise visuals.

Learn to build a real-world website by setting up a Webflow project, importing a prepared Figma design for a three-page site (home, project, contact), and loading assets and fonts.

Design and implement a Webflow testimonial section with a 1320px max width on a neutral dark background, featuring orbit decorations, and a flex container for heading, description, and client info.

Create a CTA section with an email capture form, featuring a text field with an inline icon and a subscribe button, aligned via flexbox inside a 1320px wide container.

Build a site-wide footer for the home, project, and contact pages, featuring a left logo and address block and a right grid of links, with flexbox and grid layouts.

Learn how to make a website responsive by applying breakpoints, either section by section or breakpoint by breakpoint, starting with the nav bar across tablet and mobile views.

Learn to make a website responsive at tablet breakpoint in Webflow by adjusting navigation, hero layout, typography, logos grid, and section margins using combo classes and display overrides.

Learn how to optimize a website for mobile landscape by adjusting font sizes, hiding cards, restructuring grids, and tightening margins to achieve fluid, responsive design in Webflow.

Learn to build a fully responsive Webflow site for mobile portrait by adjusting font sizes, flexbox direction, margins, padding, and grid layouts across breakpoints.

Explore how to create engaging web interactions in Webflow by using element and page triggers, and build animations with keyframes to synchronize multiple elements for dynamic effects.

Explore the project settings in the general tab, covering subdomain, favicon, localization with time zone and language code, backups, integrations, and collaboration options to publish and manage your site.

Learn to configure navigation links and anchor sections in Webflow. Enable clients to edit content via the editor and publish changes.

Publish your website by connecting a custom domain, choosing a hosting and site plan, updating DNS, and publishing to the selected domain while using the staging domain for preview.

Discover workflow plans, including site and account plans, and how to connect a custom domain to a project. Choose between basic, CMS, and e-commerce options and starter accounts.

Export assets from design tools like Figma or Sketch in png, jpeg, or svg, choosing formats for transparency or vector quality to reduce file size and improve load times. Enable lazy loading on image elements to defer off-screen images, improving page speed and SEO.

Learn to create a pop-up in Webflow with fixed fullscreen overlay, a centered modal form, and close button, along with page load and click interactions using opacity and display none.

Learn to add a lottie animation to a Webflow contact form, import a JSON file, adjust size and centering, and trigger it on submit.

Develop trust by showcasing sample projects in a strong portfolio, then reach out with before-and-after proposals. Post work on social platforms and freelance marketplaces to attract your first client.

Price freelance web work using hourly, flat, and recurring models; balance value and market rates; avoid free projects; set adaptable prices reflecting experience and project scope.

Meet with clients to exchange information and learn how their business works. Prepare questions, compare WordPress and workflow editor options, and educate clients on workflow benefits.

Discover the value of workflow hosting with CMS, editor tools, automatic backups, a CDN, and free SSL, and compare its sixteen dollars a month cost to external hosting.

Learn project handoff options in Webflow: host with workflow billing versus transferring to the client, plus training tips to empower editors and use the editor for content changes.

Congratulations on finishing the course; you’re a web developer ready to build projects. Leave a review to help improve the course and follow the instructor’s Instagram for design and development.