What do you want to create?

Hero block 1

A single-column header layout with the option to include images and videos.

A two-column header layout with an image or video.

A single-column header layout with a background image or video.

The simplest layout. Just a single column of content, left to right across the screen.

Two side-by-side columns of content. Either column may contain a mixture of text or images/videos.

Text only in one column and only an image or video in the other.

Three side-by-side columns of content. Can include images, icons and videos.

Four side-by-side columns of content. A good choice for small amounts of text. Can include images, icons and videos.

A two-column email contact form.

A one-column web page footer.

A three-column web page footer.

A four-column web page footer.

You will need to download the following two files:

The custom.css stylesheet you will use to amend the web page design according to your requirements.

The index.html ‘getting started’ web page.

This web page includes some sample semantic HTML mark-up tags and has links to two icon sets: Font Awesome and Line Awesome.

For each website project you want to build:

Create a new project folder and download the 'getting started' index.html web page to it.
Create a sub-folder named 📁 assets/css inside your project folder.
Download the custom.css stylesheet file to your assets/css sub-folder.

Choose the web layout you want to create from the options above, and then use the app's menu options to style your web page.

At the bottom-right of the Lunevedy app screen, you can see two buttons:

HTML: Use this to copy-and-paste the HTML content into your index.html web page.
CSS: Use this to copy-and-paste the CSS styles into your custom.css stylesheet. This CSS button is enabled only if you have added your own CSS styles.

The ‘getting started’ index.html web page will link to several placeholder images and video files to help you design your web layouts.

When creating your website projects, replace these assets with your own images and videos.

Also, remove any links in the <head> of the index.html file to icon sets you are not using.

That’s it. Happy web designing!