# Tutorial: Building a Webpage with No Code

**URL:** <https://forums.realmacsoftware.com/t/tutorial-building-a-webpage-with-no-code/44722>\
**Category:** RapidWeaver Elements\
**Created:** [September 23, 2024, 11:17am UTC](https://forums.realmacsoftware.com/t/tutorial-building-a-webpage-with-no-code/44722 "2024-09-23T11:17:29Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [September 23, 2024, 11:17am UTC](https://forums.realmacsoftware.com/t/tutorial-building-a-webpage-with-no-code/44722/1 "2024-09-23T11:17:29Z")

</div>

Hello Again,

In this weeks tutorial I’m going back to basics. I’m “borrowing” a page design from Squarespace and showing you how you could go about recreating it in Elements, but let’s keep this between ourselves and don’t tell Squarespace 🤫

This tutorial is a fairly long one (45mins) as I take my time with it and talk through various options and settings. If you’ve not seen Elements before or are getting started with the private beta, you might find this tutorial very useful.

It’s worth noting, the site I build in this tutorial can be built with the base license of Elements that costs just $59 😱🤯😃

[![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/9/c/9cf3dd58e967f4553be3051c4e59bf6730a1ed46.jpeg "No Code Web Design with Elements for macOS") ](https://www.youtube.com/watch?v=H-cobm7Csvs)

**Get the Project**  
[Download the Fitness Demo project](elementsapp://downloadDocument/kiYQZQjuiBcN) built in today’s demo. This is an Elements link and will open up directly in your copy of Elements. (Scroll effects requires Beta 12, due sept 24th).

**Feedback**  
Let me know what you thought of the tutorial, was it helpful? what else would you like to see covered? Let me know in the comments below.

Cheers,  
Dan & Team Realmac

---

<div class="post-metadata">

**Author:** ![trinube](https://avatars.discourse-cdn.com/v4/letter/t/df788c/32.png) [@trinube](https://forums.realmacsoftware.com/u/trinube)\
**Post date:** [September 23, 2024, 11:23am UTC](https://forums.realmacsoftware.com/t/tutorial-building-a-webpage-with-no-code/44722/2 "2024-09-23T11:23:35Z")

</div>

This popped up on my YouTube feed about 45 minutes ago. I highly recommend it to anyone with the beta.

It covers some of the things I’ve been unsure of since the first beta dropped (when to use containers vs grids vs flexes etc) and it does so by replicating a SquareSpace page showing how easy it is to get very professional looking results without much trouble. Of course Dan makes it look easy but it’s a very good example of what can be done.

I’ve had a tumultuous month where I’ve been helping a company shut down but I’m really hoping to get some time devoted specifically to the later betas now things are settling down.

Great work Dan.

---

<div class="post-metadata">

**Author:** ![WeaverPixel](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/weaverpixel/32/25453_2.png) [@WeaverPixel](https://forums.realmacsoftware.com/u/WeaverPixel)\
**Post date:** [September 23, 2024, 9:25pm UTC](https://forums.realmacsoftware.com/t/tutorial-building-a-webpage-with-no-code/44722/3 "2024-09-23T21:25:55Z")

</div>

I am always amazed about the Globals. That is really very powerfull to keep the websites consistent and saves a lot of time.

---

<div class="post-metadata">

**Author:** ![Godber](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/godber/32/26521_2.png) [@Godber](https://forums.realmacsoftware.com/u/Godber)\
**Post date:** [September 24, 2024, 6:21am UTC](https://forums.realmacsoftware.com/t/tutorial-building-a-webpage-with-no-code/44722/4 "2024-09-24T06:21:58Z")

</div>

I did notice at one point you were having a slight problem centering the slider on 0 is there going to be a way to enter manually with the keyboard for us with shakey hands

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [September 24, 2024, 7:30am UTC](https://forums.realmacsoftware.com/t/tutorial-building-a-webpage-with-no-code/44722/5 "2024-09-24T07:30:29Z")

</div>

> [@Godber](#):
>
> slight problem centering the slider on 0 is there going to be a way to enter manually with the keyboard for us with shakey hands

Yes, exactly. It’s on our list to change!

---

<div class="post-metadata">

**Author:** ![Berthold](https://avatars.discourse-cdn.com/v4/letter/b/b2d939/32.png) [@Berthold](https://forums.realmacsoftware.com/u/Berthold)\
**Post date:** [September 24, 2024, 3:08pm UTC](https://forums.realmacsoftware.com/t/tutorial-building-a-webpage-with-no-code/44722/6 "2024-09-24T15:08:19Z")

</div>

Hi Dan,

Thanks for the detailed explanations. Unfortunately, globals work differently for me. The font size is not changed from base to sm. See [video](https://tr-freun.de/files/Elements_Globals.m4v).  
The page can be copied and the global works. But when I drag the global onto the page, the font size is not changed.

What am I doing wrong?

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [September 24, 2024, 4:07pm UTC](https://forums.realmacsoftware.com/t/tutorial-building-a-webpage-with-no-code/44722/7 "2024-09-24T16:07:11Z")

</div>

Hi @Berthold,

Can you upload your document to Elements Cloud and share the Link here?  
I’ll take a look and see what’s going on!

---

<div class="post-metadata">

**Author:** ![Berthold](https://avatars.discourse-cdn.com/v4/letter/b/b2d939/32.png) [@Berthold](https://forums.realmacsoftware.com/u/Berthold)\
**Post date:** [September 25, 2024, 4:59am UTC](https://forums.realmacsoftware.com/t/tutorial-building-a-webpage-with-no-code/44722/8 "2024-09-25T04:59:42Z")

</div>

Hi Dan,

here is the [Link](elementsapp://downloadDocument/qxPnZ7t9Vstc).

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [September 25, 2024, 7:12am UTC](https://forums.realmacsoftware.com/t/tutorial-building-a-webpage-with-no-code/44722/9 "2024-09-25T07:12:31Z")

</div>

Ah-ha! It’s because you had used the override feature, not the breakpoint feature.

Here’s a video showing you how to make it work. Hopefully you can see what’s going and it all makes sense.

If you need me to go into more detail, just let me know and I’ll record a video with audio to explain things when I’m in the office later!

---

<div class="post-metadata">

**Author:** ![Berthold](https://avatars.discourse-cdn.com/v4/letter/b/b2d939/32.png) [@Berthold](https://forums.realmacsoftware.com/u/Berthold)\
**Post date:** [September 25, 2024, 9:43am UTC](https://forums.realmacsoftware.com/t/tutorial-building-a-webpage-with-no-code/44722/10 "2024-09-25T09:43:26Z")

</div>

Hi Dan,

Many thanks for the quick help. Now everything works as it should.
