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.
CSSequals 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.
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.
Before we start with another VueJS Tutorial, let me promote our VueJS Course with a Certificate right at the beginning. You’ll see more interactive and deeper Content about VueJS. At the end you’ll also receive a VueJS Certificate from German IT Academy. That’s it.
Problem / Task
While coding a solution for the following tasks, make sure to make use of every single v-directive at least once: v-text, v-html, v-once and v-model. Also, do not forget to use conditional and iterative v-directives, if needed.
In CustomizeDonut, create 4-step input process, in which a user has to perform one data-selection in each step. Use v-model as much as you can. The steps should have individual h1 titles and individual Button Values.
Select Donut by name (see Sample Data)
Select Batter Type
Select Topping Type
Last step: Show the summary and a dummy button „Order Donut“
Hint
Here is a sample Object of a Donut. Few things stand out: We have a type and a name. We have a list of „batters“ and „topping“, which contain object with further details.
To have a multi-step process, you have to track the status of the current process. You can do it with an object. Or simpler yet, a variable that will store the step number that the user is currently performing.
Solution
Here is the solution we came up with for this VueJS Tutorial. Please that is no definite solution, except that the v-directive are used correctly. We smashed the solution into one Vue Component, that way we make it simpler to understand by not having the code in 3-4 different files.
Here is quite a lot happening, let’s go trough it.
First we have created a very simple step process by having a step data property and showing conditional HTML content based on that property; we achieve this with v-if and v-else-if v-directives.
Our data property stepConfig tells our App what title, what button text and what the button-action should be. Notice that we use a function for stepConfig.nextStep; this is because we use the v-directive v-on on our button. This directive needs a function as a parameter. @click=“stepConfig[step].nextStep“
Our computed properties help us extract or filter the correct batters and topping for the donut selected by the user.
In order to store user Input we created an object userInput and we mapped the keys „userInput.donutId“, „userInput.batterId“ and „userInput.toppingId“ with v-model to the select.options HTML Tags. This way our App has always the most recent user input saved in this Object.
If you want to learn more about VueJS and become a VueJS Certified Developer, please take a look at our VueJS Course + Certificate.
Here is a visual version of our solution. Please note, we know VueJS, but we suck at Design.
Welcome to another VueJS Tutorial. Let’s explore a very important topic in VueJS: the relationship between your Vue-Components. It’s crucial because everything is importing everything from everywhere anytime…or something like this.
For those who are new to VueJS Tutorial / VueJS Practice: we create a fictional problem / task for you to solve. To go through it and try and code a solution that would solve the issue. Then you compare it with the solution provided by German IT Academy.
Problem / Task
We need
create DataSourceList.vue that reads from state ‚datasources‘ in vuex store.
For every Entry in the ‚datasources‘ list, embed a a DataSourceItem.vue in the DataSourceList.vue.
DataSourceItem Component receives the props ‚id‘ from the Parent. With that id the Child fetches all the data from ‚datasources‘ in vuex store and displays them.
DataSourceItem Component receives a slot from the Parent and displays the content in a random place.
Hint
When importing a Vue-Component, do not forget to also import it inside the Parent Instance
As reminder, props are those data values that you pass to a child as a HTML Tag Attribute (:propName=data) and slot is the data between the HTML Opening and Closing tag.
We have the list as a state variable. We have to getters: one for every DataSource and one getter that will return only the Entry with the specified id.
The DataSourceItem.vue receives the id as a props. With that id the Component will retrieve the DataSource from Vuex Store. It’ll use the Vuex getter that we’ll define below.
<template>
<div class="home">
<img
alt="German IT Academy"
width="200"
src="https://i0.wp.com/code.git-academy.com/wp-content/uploads/2019/10/400dpiLogo.jpg?zoom=1.100000023841858&fit=2077%2C1175&ssl=1">
<div v-for="datasource in datasources" :key="datasource.id">
<DataSourceItem :id="datasource.id"/>
</div>
</div>
</template>
<script>
// @ is an alias to /src
import DataSourceItem from '@/components/DataSourceItem.vue'
export default {
name: 'DataSourceList',
components: {
DataSourceItem
},
computed: {
datasources: {
get(){
return this.$store.getters['getAllDataSources']
}
},
}
}
</script>
German IT Academy hopes you learned something new with this VueJS Tutorial. You can learn more about VueJS with our VueJS Course and get VueJS certified.
The visual version of the solution looks like this.
Wecome to the third VueJS Practice from German IT Academy. In this module we are going to make sure that we understand the properties and the life cycle of a Vue-Component (or instance).
Problem
Create a Component ProductDetail.vue with
a product object with random values for keys (id, price, name)
a text input-field „quantity“ with default value „0“
a text output calculating the total Costs (product price * quantity)
The Component must have following behavior:
Before the Component has been mounted, a text output „Specify Quantity.“ appears .
Data property „quantity“ is automatically updated with the input-field quantity.
After Quantity has been updated, a text output „Quantity updated.“ appears.
Hint
For the text above all Content: think about a data property that will be changed on certain Component life cycles.
Regarding the quantity and input-field: Do you remember what v-model is good for?
For the behavior part: the words „before“ and „after“ should be ringing a bell in your head. Take a look at the life cycle diagram of VueJS Components/Instances.
Solution
Let’s jump right into the code. Read it and see if you understand everything. If not, see the explanation after the code.
Starting with unimportant: styles are just css styles. The {{notification}} in <template> can be either „Please specify quantity“ or „Quantity updated!“. The value of this data property changes with the life cycle hooks beforeMount() and updated(). The computed totalValue is an automatic way recalculate a value as soon as a data property (in our case quantity) changes. And then there are the data properties like products with dummy data. The input-field is mapped with quantity data property thanks to v-model.
This is how our result looks like. Simplistic and solves the Task/Problem at hand.
We hope you liked our VueJS Practice and learned something new. If you want to get a deeper insight into how VueJS works, consider enrolling in our VueJS Certificate Junior Course.
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.
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.
The technical storage or access is strictly necessary for the legitimate purpose of enabling the use of a specific service explicitly requested by the subscriber or user, or for the sole purpose of carrying out the transmission of a communication over an electronic communications network.
Preferences
The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.
Statistics
The technical storage or access that is used exclusively for statistical purposes.The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
Marketing
The technical storage or access is required to create user profiles to send advertising, or to track the user on a website or across several websites for similar marketing purposes.
