Dora AI Essentials: Website, UI/UX & Brand Design

Navigate Dora's interface by managing pages, components, and layers, create and rename pages, understand instances for reusable components, and publish your domain.

Navigate the design and data toggles to upload images and videos to the assets database in the CMS, then pull dynamic data from the entities to power your site.

Explore creating and manipulating containers to shape webpages, mastering drag-and-drop, exact width and height, and circle or square forms with border radius and a 1 to 1 ratio.

Learn to add and format text in Dora, use hug constraints and bounding boxes, and group text inside containers within the layering system for flexible page layouts.

Explore how images behave in Dora by uploading an asset and comparing fill modes: cover, contain, and fit height or fit width, showing how scaling affects aspect ratio and cropping.

Explore 3D assets with the Dora tool by uploading models directly here, adjusting width and height, and previewing with built-in camera controls.

Examine Dora's input feature, currently in beta, with an editable input field; for now, use a third-party embed form (such as MailChimp) to collect submissions.

Learn to build dynamic grid and list views by connecting a features data source, binding name, description, and image, and previewing live content in Dora AI.

Explore the embed codes feature to paste a URL or full HTML code, upload SVG assets, or insert 3D assets from Spline.

Explore cloud-backed versioning, key frame panels, and desktop viewport controls with preview and share options to test, collaborate, and publish to a secure live domain.

Explore basic layer details and Dora's constraint system, mastering width, height, opacity, visibility, rotation, and how fill space and hug contents influence dynamic layouts.

Learn the constraint system to create dynamic relationships between elements, align and hug content, and distribute vertical and horizontal spacing for responsive typography, containers, and grouped blocks.

Master typographic hierarchy using a single font family with varied weights and color opacity, explore Dora's fonts like Roboto and Della Gothic One for headlines and body text.

Explore four layer effects—inner shadow, drop shadow, layer blur, and background blur—applied to containers and text fields, animated by scrolling to reveal depth, subtly, with optional stacking.

Learn to build scroll-driven animations in Dora AI using a keyframe timeline, view height anchors, and viewport-fixed elements for dynamic shape and color changes.

Explore keyframe animations with two layered shapes that scroll and resize from 120x120 to 2000x2000, including a fixed blue circle, an expanding second circle, and crossfading text and rotation.

Explore how different animation easings in Dora—linear, ease in, ease out, ease in out, and back variants—affect timing, speed, and when objects reach the finish.

Create a simple portfolio landing page for an actress by building a full-page background image, left-right center alignment, bio, and social links with smooth scroll and fade-in animation.

Build a CA Realty landing banner using keyframes in a DAW, featuring a fixed scrolling hero, knockout PNG background, logo, and centered menu.

Explore integrating 3d assets with typography and fixed elements, then animate a pencil via keyframes and camera controls as you scroll to create a dynamic, publish-ready site.

Create a final class project featuring a kitty 3d model on a pet website, combining camera positioning, keyframe animations, and typography overlays to tell a walking, scrolling story.

Configure page settings to finalize your site before launch, including page titles, urls, descriptions, favicon, social image, and Google Analytics code across head and body.

Connect your Dora website to a custom domain by updating DNS and adding a CNAME, then publish to see instant updates on both domains.

Dora ai essentials wraps up with reflections on teaching the platform, invites learners to explore advanced animations and 3D assets from Blender and Spline, and encourages ongoing design experimentation.