Let's make a landing website

Before word...

The Fullstack Wizard is a multiple parts series where I aim to teach you some tricks and give you a little bit of insight into full-stack web development.

Since this is the first post in the series we will discuss some general notions and I'll make clear to you what technologies are used, what we'll be doing, and what's the end-goal. OK, without any further ado let's dive into our today's main topic.

What is a full-stack developer and what are we going to work on

In simple words, a full-stack developer is someone that takes care of all the aspects related to software development from designing the app, to writing the logic behind the app to creating and connecting the database, etc. In a way, a full-stack developer is someone that can create an application from A to Z all by himself.

In this series, we are going to play full-stack developers and are going to create our own web application. The theme that I chose is "project management platform". Please, feel free to use any theme you want and create your application. This is strongly advised since I'm not going to explain all the code here, only the interesting bits, and instead give you a link to access the full project for further reading.

Alright so at this point, a full-stack developer like yourself should know what app he/she wants to develop.

Choosing the right tools

I'll share a secret with you. There are no right tools. You can search the internet all day long and you'll find thousands of people giving their two cents on various technologies and how well they work with other technologies, but the truth is almost anything works with anything. So if you always wanted to use some frontend framework, but didn't know what's the best backend framework to pair it with, stop worrying and use whatever you like.

That being said, I'll now give you a list of tools that I choose for this project and I'll give you a short explanation on why I chose them:

• Frontend framework: Vue.js
  I went with Vue because it's light on resources and allows me to develop faster than other frameworks I've tried.
• CSS Preprocessor: Less
  A preprocessor is great because it allows you to define CSS variables and functions. I went with Less because, again, it's light and I had fewer problems with it than other preprocessors like Sass.
• CSS Framework: UIkit
  I know that Bootstrap is by far the most popular among other developers, but the robustness of UIkit is something to behold. I chose UIkit because it has a ton of features, great documentation and it has the most useful modern stuff like sidebar navigation baked in.
• Backend Framework: Laravel
  The Laravel documentation is one of the best I've ever seen and it's one damn powerful framework being able to do whatever you want on the server. There is nothing I was unable to do in the past using Laravel.
• Database: PostgreSQL
  I know that MongoDB is all the rage nowadays but a relational database like PostgreSQL has its advantages of being able to enforce useful schema rules. Also in recent tests, PostgreSQL was shown to be faster than the likes of MongoDB.

Feel free to use whatever tools you like. Now, before we go even further, a full-stack developer should choose the tools he likes best to do his job.

Creating a landing website

A landing website is the first thing a new user is going to see when he's going to find your project so it should make a nice impression, give the new user some info on your project and provide him with a way to access your project.

For this website, I'll be using my frontend tools, namely Vue.js, Less, and UIkit. Let's see how we can get our hands on those tools.

First we'll need to grab Nodejs. On Linux distributions this task is simple, just run:

# On Ubuntu
sudo apt install nodejs

# On Fedora
sudo dnf install nodejs

On Windows, you can just download the installer from the website, make sure it's the LTS version, or if you want to experience some form of package management I'd recommend you take a look at Scoop. With scoop installed you can just open a PowerShell terminal and run:

# Git is a dependency for scoop
scoop install git

scoop install nodejs-lts

To install and use Vue and the rest we'll also need a node package manager. You can use npm if you are familiar with it, but I'll go with Yarn. To install yarn we can use:

# Ubuntu
sudo apt install yarn

# Fedora
sudo dnf install nodejs-yarn

# Windows
scoop install yarn

OK, you are doing wonderful, Mister/Miss Fullstack developer.

One last step is to grab our actual tools so let's do just that using yarn:

# Everybody
yarn global add @vue/cli

# Note: If Linux users have problems here, try running the above command with sudo

This will grab the latest version of Vue.js and will give us access to the command line program called vue which will help us create our project.

Creating the project for the landing site

First, find a place where you want to store your project, for me, that's in my Projects directory in the home folder. Then we need to open a terminal and navigate to that directory using the cd command. For example, since my Projects directory is in home, I would type:

# Everybody
cd Projects

Now we are going to create our project with:

# Everybody
vue create landing-site

# Note: You can name your project however you want

You will see the following dialog appear:

Please press the down arrow and enter to choose "Manually select features".

Check the features that I did by navigating to them with the arrows and using the Space key. After you did this, press Enter to continue.

Answer with n to the next question and press enter.

Now you choose your CSS pre-processor. I'll go ahead and choose Less.

In the next dialog I chose error prevention only:

Then Lint on save and save configs in package.json. Also, I answered with n when asked to save this as a preset for other projects.

It will take a couple of seconds to download everything and create your project so sit tight.

After it's done type cd landing-site or whatever name you used for your project and let's go ahead and install UIkit as this is the last missing piece from our toolbox.

# Everybody
yarn add -D webpack
yarn add -D uikit

Wait a minute... What's this webpack?

Webpack is a tool that will help us put all the different files from uikit, vuejs, etc. together. It will also be able to import images and other assets into our final project. In other words, it will compile our project into Html, CSS, and js files and will import our assets into them. Great, right?

Seeing your project in the browser

This is the last thing on our agenda for today. Let's see the fruits of our hard work.

# Everybody
yarn serve

Something similar will appear on your terminal

Copy whichever link you like and paste it in your browser. Tadaaa!!! There's your landing site made with vuejs. Though it's ugly and it's not yours, we'll get there in the next episode of Fullstack Wizard.

---

Until then, take care, stay tuned, and share your thoughts with me in the comments section. I'll see you around, dear full-stack developers.