Building a Wedding Website in 5 Minutes from Scratch by@webdeveloper123

Building a Wedding Website in 5 Minutes from Scratch

WIX will become our ultimate drawing kit for our wedding website. We'll pull our guest list from a free API that has some users inside. We use the Velo API to build our own piece of digital art. This is how we used to build animations only a decade ago. We need to create a 'Hero Unit' to grab attention and showcase key content. We can create a similar section with the Best Friends section. We will replace the placeholder placeholder that we will replace soon. We won't use Velo to create our own website.
image
Ella R. Woodard Hacker Noon profile picture

Ella R. Woodard

Tropical zodiac: Aquarius, Favorite color: Green, Vehicle: Subaru

They say digital design is like paint that never dries. Today, we're going to create our own piece of digital art. And WIX will become our ultimate drawing kit. But while paintings take years to get finished, our wedding website will be up and running in a few moments. Let's get into it.

Look, I'm starting from scratch! A clean slate for crisp design.

image

Stage 1

First things first - we are starting with building a Hero Unit to grab attention and showcase key content. For that, I'm uploading a couple of fancy wedding images.

image

Then we need to resize and update the sub-heading on our first block.

image

To add an aesthetic appeal to our website, let's upload the flowers image with a transparent background. Looks sweet, right?

image
image

After that, I am proceeding with the next slides. Again, I resize the box, choose the font, adjust the font size, and change other text settings to my taste.

image

Don't forget to center all messages. Otherwise, it won't look as sweet with the animation.

As my next step, I am creating the links that will let the user switch from one website section to another. For that, I'm making necessary adjustments in the site menu.

image
image

Now let's go over to the main menu setup.

image

At this stage, I'm playing with the main menu settings to fine-tune the look-and-feel to my preferences.

image

Bingo, the first part of the website is visible online to the delight of potential visitors.

image

Stage 2

At this point, the header doesn't look its sharpest, so we need to play more. Let's spruce up the second section by tailoring the text settings and such.

image
image
image

Stage 3

Here goes the fun part with rounded images. Oops, I couldn't find how to round an image from the builder side. I hope you can forgive me.

image

Ok, now on to the next block - the one with a summer field background. Mind that it should look good while scrolling.

image

Now I'm placing the first button as demonstrated on the screenshot and adjust its design.

image
image

Here, I'm just watching and admiring the result.

image

After that, I am switching to building a block with a couple's story. I am changing the design and resizing the box as usual. You can take a look at the screenshots below.

image
image
image
image

Finally, I am setting up the 'Best moments' slideshow with awesome animations to better communicate the emotions.

image
image

NEXT PART

Now let's unfold the next stage. I want to see some more fonts on this page, so I'm uploading them into Font Manager. Convenient, isn't it? Especially for picky users like me. I decided to extend the font coverage with some Playfair Font.

image
image

After that, I'm moving to the next block.

image

Here, I'm changing the layouts and columns as you can see on the screenshot.

image

Hooray, I found how to round the images with the built-in functionality. It took me just 2 hours to get there.

image

Next, I'm cloning a friend. (wish it were that easy in real life)

image

Looks geeewd now.

image

And even better now.

image

Now let's get to grips with the bridesmaids part.

image

The editor helped me create the Major jquery method. And I even didn't use stackoverflow for that!

image

Just think, this is how we used to build animations only a decade ago. Also, a big thank you to Mozilla and Google for killing IE browsers.

image
image

It's also useful to see some help when you are typing. I always keep forgetting what we have there.

image

At last, our tabs are working in a fancy way.

image

But this is a static website. So let's get real mature and enliven things a bit. For that, I'm enabling the Dev Mode, updating some blocks, and adding some logic into it.

Previously, I have made the Best Friends section. We can create a similar section.

image

Let's put a few text blocks with a placeholder that we will replace soon.

image

Don't forget about the aesthetic aspect. Each block should look sharp and remind you about our huge upcoming event.

image

Velo wouldn't enable itself - so click a butttttoooonnnn and become a MASTER OF DEVELOPMENT.

image

We'll pull our guest list from a free API that has some users inside: dummyapi.io.

Yes, I'm suggesting you find out more about Velo API, because these guys have done an excellent job. Besides, the documentation is pretty cool.

Here I'm doing my first velo-code-lines... feeling so young and excited ❤️

image

It's important to add the #id field because we'll use it in our selectors pretty soon.

Now, I'm copy-pasting the guests. This is how I usually throw a huge offline party.

image
image

This magic line will help us to get some data from an API.

image

`getJSON("[https://dummyapi.io/data/api/user?limit=5](https://dummyapi.io/data/api/user?limit=5)", { headers: { 'app-id': '60436c90593c82659855844c' }} });`
image

yes, it's a basic code, nothing hard.

Ok, I can't show this code to you. Don't come after me!

image
image

Let's create a loop and make it work. If you did some C++ at college - then share this article.

image

Let's try and see if our code works. For that, I'm enabling Preview.

I was able to take a screenshot of how slowly it's updating :) Looks like Wix has speedlimit rules! Should we call the police? 😂

Also, it's great that you can see an error report.

image

For some reason, the last clone didn't want to be replaced. Probably I made some mistakes when I was setting an ID for it.

Let's populate the names of our guests as well.

image

This is what I run on a preview

image

As you can see on the screenshot, it works just fine. I scored 0 errors (yes, I skipped the part when I had to debug 5 lines of my code)

image

I decided to invite more people to our party. Nothing hard, just copy-pasting elements and updating their selectors.

So, do you like the results? You can construct a similar website with your own hands. There's nothing hard. The interface looks user-friendly and intuitive to me.

image

If you think, you can craft a better website, go ahead and prove it to me. I'm sure I'm unbeatable! Oh, my secret for success? Attention to details. Because everything matters.

image

We can also enable the contact form, but I don't feel like doing it.

image

This article is part of a writing contest hosted by Hacker Noon in partnership with Wix. Learn how to enter here and take a shot at winning $1000 every month, from March 1st, 2021 to May 31st, 2021

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.