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?
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.
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
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:
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.
We at German IT Academy are very eager to see first official release of the third Version of Vue.js 3. Therefore we are watching the developments closely and will be publishing many Posts, Tutorials & Courses on Vue.js 3. It does pay off to be on our Newsletter list (scroll down to subscribe) or check this Vue.js 3 Guide once i a while.
Also, check out the first “awesome-vue3″ repository with an updated and curated list of all resources regarding Vue.js 3.
Currently the vuejs team is working on three projects: the 2.7 Version, Maintenance of current codebase and the Roadmap (mainly the third version of Vue.js).
Major Changes in Vue.js 3
Let’s explore the official plans for third Version of Vue.js. We will also derive a great lot of content from the vue/rfcs, where all the RFCs are developed and discussed (Note: RFC = Request For Comment). We picked some of the most interesting ones and included a basic code example. As the changes become more certain, we will update our Vue.js 3 Guide to have more detailed examples.
Official RFCs December 2019
There is a long explanation of what the Composition API is. Generally, the motivation behind it is the reuse of Logic, better Code Structure and better Type Inference. Here is a basic Example:
Before we dive in to Future of Frontend in 2020. Let’s begin with some basics as we gradually get more forward-looking. We obviously cannot know what technology will dominate in 2020 and what framework will pop up. But we can try at least.
What is frontend?
It is also a common term used by programmers and computer programmers to describe part of the layers that make up a website, computer program or hardware, which are depicted based on how accessible they are to a user. The frontend layer strategically placed on top of the backend includes all software or hardware that is part of a user interface.
Professionals such as web designers usually handle Frontend section of every project and the components are customer facing. Some of these components includes:
Search engine optimization (SEO)
Graphic design and image editing tools
Design and markup languages such as CSS and HTML
Web performance and browser compatibility
Usability and accessibility testing
The consistent demands for frontend career specialist is very high. Some of the key skills of a frontend developer are responsive design, frameworks, debugging, web performance, CSS preprocessing and command line among others.
Consider taking our VueJS Certification or VueJS Online Course. It’s on-demand, easy to understand and has tremendous benefits for you career.
An important area where frontend (client-side programming) is of high relevance is UI, UX. There is a distinct relationship between frontend, UI and UX. They work together seamlessly. The UX design centered on the satisfaction of the user experiences with software. Frontend development is the technical implementation of the software user interface.
UI design is the graphical bridge that connects the UX and frontend. An individual can choose to be a UI, UX, and frontend web developer in which he/she will be responsible for applying interactive and visual design experience. For you to be successful in this field, you must be able to observe users behavior to bring the best out of an application. Your primary aim should be to ensure user-based company goals are been reached satisfactorily. Some of the major importance of frontend development in relationship with UI and UX are:
Optimize navigation: Intuitive navigation will help gain customer trust by ensuring that the visitors find whatever they are seeking from your site. It majorly comprises of a well-planned site layout, clean, and structured impressive graphics.
Visitor retention: This will help increase traffic and conversion. Thus, optimized performance is one of the business benefits of front-end development.
Some other sub areas of its relevance are mobile frontend and web frontend:
Mobile Frontend: This can operate effectively without an active internet.
Web Frontend: This requires active internet for it work properly on your devices.
Generally, frontend development tools are focused on the user interface and user experiences. These has given birth to the following importance:
Creating modern day responsive websites or web app for mobility segment
Building bug free, secured and consistent products for high traffic web zone
Developing quickly reacting features or interactive app tools for online stores
Easy to learn, use and scale technologies, etc
In conclusion, the earlier you learn various frontend skills such as VueJS today – the better. Frontend courses are made easy with the best-qualified teaching procedures at German IT Academy.
Frontend in 2020
As for the prediction of where Frontend will head in 2020 it’s no easy task. Just as VueJS came out of nowhere and allowed more people with lower frontend skills to participate in the development. So can another framework, paradigm or tools do so in 2020.
It is certainly though that Material Design & Bootstrap are going to continue growing like they already do. They will keep evolving and doing the little hard jobs of micro-designing small buttons and tables for us.
Changing Screen Sizes
If the rise of foldable phones continues, the frontend developers will need to adjust to this new environment of suddenly changing screen size and making sure that the app, page, game works transitions seamlessly between both screen sizes.
Performance & Data Focus
With the rise of data lakes and data on itself, Frontend Industry will be coming up with ways to make their Application lighter and more intelligent in showing, grouping and filtering the right information without overloading the hardware, browser, etc.
Artificial Intelligence in Frontend
With AI supported in-app & on website behaviour analysis of end consumers. We will have insight into deep psychology of our brains. What color triggers more excitement, what button animation triggers more dopamine, etc. The Frontend world will definitely become more fine tuned to our psychological “needs” in our to manipulate the end consumer to … consume.
Frontend in VR & AR
It’s totally new field for us. But one can imagine that Frontend will play a crucial role in AR and VR. This area brings a whole new set of challenges with itself. The user does not use a mouse or a keyboard. The user does stare a small screen. There could pop up a Framework like “ReactVR” (e.g. React 360) or something like that. Which would allow you do design 360 User Interfaces. Or something like “VueAR”, which would allow you to create transparent overlay User Interfaces to allow the user to use your app while they are interacting with their environment.
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”
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.
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
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.
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.