German IT Academy

How to build modern Websites in 2020?

by Andrey Bulezyuk | Feb 22, 2020 | Frontend

It’s 2020 and you want to learn how to create beautiful and modern websites in 2020? This Article will serve as a guide on what you should be looking into, in order to learn to build fast and beautiful websites. We’ll also mention some keyword for technologies with potential, which you can look into.

What is a Website in 2020?

A question that simple shouldn’t be asked in 2020, right? But the lines between Apps, Websites and Software is fading. Here is a good example: certain websites you visit on the phone, you can ‚add to homescreen‘. This adds an icon of the website and makes it available even when you offline. (Here is good starting point if you want to learn more about this technology: Progressive Web Apps).

So what is it now? An App or a website? How can you access a website that is offline?

For the sake of simplicity we’ll say that everything is accessed via a browser, is a website. (Except for PDF files, Video files, etc.)

What was Webdesign?

The header is in past tense. Webdesign is loosing it’s value in some sense. The rise of many JavaScript Frameworks made it easy for everyone to create good looking and fast websites. This eliminates the need to hire a web designer to sketch your site from scratch.

Certain plugins go even a step further and give you finished and multi-functional User Interface Elements (for example a Button). You can read more on such frameworks here: Top 3 UI Frameworks.

So, where you start?

If you are starting your developer journey in 2020, you should feel blessed. You’ll receive advanced programming language and tons and tons of tutorials and cheap (but not always good) courses. Following lines assume that you want to know how to become a Frontend developer.

We’ll also assume that you don’t want to become a Frontend developer just for the sake of becoming of Frontend developer. The motivation behind this is mainly to earn money. Then comes fun and enjoyment. We do not distinguish whether you make money via a wage or freelance work.

In the end it all comes down to fulfilling the demand (for in Frontend development) with your supply of this skill.
– Me

Web Dev Basics

Every Website on the these two most basic technologies: HTML5 and CSS.

HTML5 equals to Hyper Text Markup Language 5. It’s the standard markup language for virtually every Website. HTML elements are the most basic elements of an HTML page.

CSS equals to Cascading Style Sheets. CSS takes the UI Elements that were created by HTML and adds some style to them – making our website beautiful and modern.

Modern Websites for Beginners

With the goal of making money and having fun as a newcomer to Frontend Development in mind, i introduce to you a very popular and easy to learn JavaScript Framework: Vue.js 2. There are many JS Frameworks that exist along Vue.js. The reason why Vue.js is so popular among Beginners, is that it is easy to learn. And while it’s easy to learn, it doesn’t compromise the important characteristics like scaling, performance, tests, automation, and so on. In short: it’s just perfect.

How to learn it? Well, some people prefer skimming through the docs and learn via trial&error. Others prefer a more focused and directed learning with Courses.

How to learn Vue.js 2

We at German IT Academy put our soul into our courses and hope that you learn a lot in a short period of time while having fun. Without further ado, we present you our Vue.js 2 Online Course:

Vue.js 2

This is a ✅ Vue.js 2 Online Course in which you’ll learn to develop easy to use and very fast frontend websites. The Topic of the Course is VueJS 2 – one of the most popular javascript frontend frameworks. Below you’ll find more information on what the product consists of, what topics the VueJS 2 Course covers and what you can expect from German IT Academy.

29,00 €

Watch Now!

This Vue.js 2 Course is an Online on-demand Course. Meaning you can watch it whenever you want, on whatever device you want. This Course has reading materials, it has Videos, it has Questions and you get to practice with real code on your Computer.

You’ll start with installing some basic Software that you need to develop a website. We’ll guide you through this process. If something doesn’t work out, you can call us and ask. You end this course with the skill of creating fast and modern Websites.

Your Journey as a Frontend Developer starts with this Vue.js 2 Course
– Me again

If you have any questions about the course, don’t hesitate to email or call us (+49 163 7152337) – we speak Russian, German & English.

VueJS Practice – #2 Routing

by Andrey Bulezyuk | Nov 8, 2019 | Frontend

Learning by doing – VueJS Practice part 2. Let’s take a look at how a possible school-like question on your VueJS Test would look like. And how you would go about solving it. Btw if you want to dive deep into VueJS 2, take a look at our VueJS Certificate Course.

Problem

You need to create routes for the Vue-Components that we created in the previous VueJS Practice. Create a vue-route (use Vue-Router) for each of the following Components:

AssetsDetail.vue and AssetsList.vue
ProductsDetail.vue and ProductsList.vue
UsersDetail.vue and UsersList.vue

Routes for „*Detail.vue“ Components must have a url parameter „id“. Router for „*List.vue“ Components must have a url parameter „page“. Also, create a Vue Component called „navigation/TopMenu.vue“ where you generate a list of router-links to the previously created routes; use a programmatic approach.

Hint

Vue-Router is the obvious choice for a simple routing task like this.
Regarding URL Parameters you cheat by reading about Dynamic Routing at Vue-Router Official Docs.

VueJS Practice – Solution

To define your router with Vue-Router, you need to write your routings to router.js. Here is how our prototype looks like.

import AssetsDetail from './components/assets/AssetsDetail.vue'
import AssetsList from './components/assets/AssetsList.vue'
import UsersDetail from './components/assets/UsersDetail.vue'
import UsersList from './components/assets/UsersList.vue'
import ProductsDetail from './components/assets/ProductsDetail.vue'
import ProductsList from './components/assets/ProductsList.vue'


export default new VueRouter({
    mode: 'history',
    routes: [{
            path: '/asset/:id',
            name: 'AssetsDetail',
            component: AssetsDetail
        },{
            path: '/asset/list/:page',
            name: 'AssetsList',
            component: AssetsList
        },{
            path: '/user/:id',
            name: 'UsersDetail',
            component: UsersDetail
        },{
            path: '/user/list/:page',
            name: 'UsersList',
            component: UsersList
        },{
            path: '/product/:id',
            name: 'ProductsDetail',
            component: ProductsDetail
        },{
            path: '/product/list/:page',
            name: 'ProductsList',
            component: ProductsList
        }
    ]
})

The TopMenu.vue Component has two benefits. First, it helps you debug your router.js while you are creating your routes configuration. Second, you can import the TopMenu to the most Upper VueComponent. This ways, if a route changes, your will have adjust the TopMenu.vue only, and the whole App will be updated. This is what i came up with for the Menu.

<template>
  <div id="menu">
    <ul>
      <li v-for="(key, item) in menu" :key="key">
        <router-link :to="item.url">{{ item.name }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "TopMenu",
  data() {
    return {
      menu: [
        {name: "List of Assets", url: "/asset/list/1"},
        {name: "First Asset", url: "/asset/1"},
        {name: "List of Users", url: "/user/list/1"},
        {name: "First User", url: "/user/1"},
        {name: "List of Products", url: "/product/list/1"},
        {name: "First Product", url: "/product/1"},
      ]
    }
  }
}
</script>

That’s it for our VueJS Practice. If you want more, take a look at our more detailed VueJS Certificate Course.