How to build a landing page with AI

Navigate to <https://dorik.com/>\ \ Click "**Try it Free**" on the homepage.

Sign up for an account and watch the introduction video. \ \ Click "**+ Create New Site With AI**"

Click the "**Name of Your Website**" field and enter '\[Your name\] 100DaysofNoCode Portfolio'.

Click the "**Website/Business Description**" field.\ \ Now enter a description of the website you'd like to build. \ \ In this example, we'll create a portfolio style website for our 100DaysofNoCode journey. We'll just focus on some basic homepage features that we'd like included for now.\ \ Feel free to experiment, but if you'd like a starting point, you can copy and paste this description:\ \ '*Create a minimalistic portfolio style website that enables me to showcase my 100DaysofNoCode journey. The home page should feature a big heading, with a section for an image and some associated text describing my journey. Add a footer section that features social media icons and contact information.*'

Click "**Generate Your Website**"

Dorik will now use its AI power to build your website!\ \ Once the site is ready, you will have the option to edit the elements on the page and an "**AI Quick Style**" menu will appear on the left-hand side of the page.\ \ If the "AI Quick Style" menu doesn't appear automatically, you can find it in the left-hand menu, just above the "Feedback" button.

Now you're going to use Dorik's AI suggested colour pallette switcher to switch things up a little. \ \ Select your preferred set of colours from the menu.\ \ Close this menu and review how the colours have changed on your homepage.

Now you're going to change the font styling on your website. \ \ Re-open the "**AI Quick Style**" menu and select your preferred font pairing.

Now you're going to use Dorik's AI image generator to replace a default image on your homepage. \ \ Find an image you'd like to replace, click the image and then in the right-hand menu that appears, click the "**Generate image with AI"** button that's highlighted in the screenshot below.\ \ In this example below, there's an image displaying code 😱 - that needs replacing for this 100DaysofNoCode challenge!

You're now going to generate a new image using AI.\ \ Click in the "**Type your Image command**" field.\ \ Feel free to describe any image you want. \ \ If you'd like to follow along with this example, you can try:\ \ "*Create a close-up, photorealistic image of a laptop screen featuring an inspiring photo of the sea."*

Click "**Generate**"

An AI-generated image will now appear below your prompt. \ \ If your prompt worked and created an image you like, great! If not, feel free to experiment by tweaking your description and clicking the '**Generate**' button again, until you find something you like. \ \ Hover over the image you want to use and click "**Insert**" to replace your previously selected homepage image.

Now you're going to use Dorik's AI Generated Text functionality to rewrite some of your homepage copy. \ \ Select any text on your homepage, but preferably something you think could use some improvement. \ \ Hover over the text you'd like to change, follow the drop-down menu from the **blue "Generate AI Text" button** and then select your preferred improvement option.\ \ Feel free to experiment here by repeating this step and selecting the different options to see how your copy is edited by AI.

Now you're going to use Dorik's AI-powered "**Regenerate Section**" functionality.\ \ This will allow you to redesign entire sections of the page in just a click!\ \ Find a section of your homepage that you'd like redesigned by ensuring the entire section is selected (it helps to move your cursor to the edge of a section to ensure the section is selected).\ \ Hover over the blue button and click the "**Regenerate Section**" option.

You'll now be invited to tell the AI how you want the section redesigned. \ \ Feel free to experiment here with your own command to describe how you'd like this section redesigned. \ \ If you're not sure and could use some AI assistance, helpfully, the command section is already pre-populated with a suggestion.

Click "**Regenerate Section**"

You'll now see the entire section is regenerated and stays aligned with the style of the rest of your homepage!\ \ Experiment with the "**Regenerate Section**" function and command until you find a design you like.

Take a step back and admire your landing page!

In the top menu, click "**Save**" to save your draft website project.