Breaking

Thursday, April 15, 2021

Home / Unlabelled / Web Development in 2021: What you need to know

Web Development in 2021: What you need to know

by on

 


Web design or development may not be as difficult as it sounds, for most people; it becomes a problem especially when they do not know where to start, how to start or the very next step to take. So basically this guideline is to help anyone who wants to become a web designer/developer, weather you just started out and have no idea whatsoever as to how coding is done, or you must have learnt some programming language and feel it’s time for you to learn web development, even if you know the basics of web development, just to keep you updated on what technologies are currently in use, this guide will help you.
I’m going to walk you through a step to step guide on where you should start, what technologies you should focus on and at what point you should move on to something new. Let's get started.
Before now, you must have heard of many web programming languages, and sometimes they sound very appealing and you've heard lots of good stuff about them, but the real question is "where do I start?" probably the reason you are viewing this page.
And just like you can't start school from grade ten, you can't build complex web pages out of no where. You need a foundation, and this foundation is centered around client side programming, which of course is the basic to web development practices. Let's get to take a look at it.

CLIENT-SIDE PROGRAMMING

Client-side or frontend programming deals with the user interface with which the user interacts in the web, of course this justifies its name. So, why learn client side programming? The truth is this, no matter the complexity of the Integrated Development Environment (IDE), you’re going to use, you still need to understand client side programming, since you’ll need to know how pages are set out to enable you create features that will allow them function properly with the server (as a backend developer).
For a web designer and a full stack developer, it’s a necessary step to take, we can’t overemphasize how necessary it is, to get this basic knowledge, so let's get started already with the first language in this category.

HTML

HTML, short for Hypertext Markup Language, as you may have already known by now, is a Markup Language which uses markups to describe web page structures. Html uses tags to work with contents and since these tags are not displayed by browsers they become effective rendering content of web pages.
They are many sites out there that teaches html; w3schools is one good example, also there are courses online and lots of e-books and textbooks on the subject matter. A good practice would be; learning as wide as possible, that would mean, not relying on just one source, so that, you will have a comprehensive view as to how it work.
So whatever is your platform for learning you should be able to understand the basics, how elements and attributes are used, how links, images, tables, layout are set in web pages, how to work with canvas, graphics, media and everything that concerns HTML.
Interestingly, Knowaloud  has a collection of tutorials on the real life usage of HTML on the HTML section of the site, so you can always make references to, if need be. Since HTML is a markup language, its pretty easy to learn as there are no complexities. So when you're comfortable with the language we head-on to something new.

CSS

CSS (Cascading Style Sheet) in its simplest definition defines style for web pages. HTML can be compared to a skeleton, so what CSS does is to add flesh to this skeleton by styling it up.
Let's get practical, so you'll understand how they define styles for web pages. Suppose we were to make a simple hotel landing page of the form below;



The following HTML/CSS would be required to achieve this;


Html



<!DOCTYPE html>

<html>
<head>

<link rel="stylesheet" href="hotel.css">

<title>Hotel Landing Page</title>
</head>
<body>

<li><a href="#">Home</a></li>

<div class="dis" ></div>
<nav>
 <ul>

<li><a href="#">Features</a></li>

<li><a href="#">Highlights</a></li>
  <li><a href="#">Events</a></li>

</div>

</ul>
 <div class="menu">
  <span></span>
  <span></span>
  <span></span>

<div class="anim" id="anim-two" ></div>

</nav>
<div class="lef">
 <div class="anim" ></div>

<div class="anim" id="anim-four"></div>

<div class="anim" id="anim-three"></div>
 <div class="anim" id="anim-five"></div>

<div class="trans">

<div class="anim" id="anim-six"></div>
 <div class="anim" id="anim-seven"></div> 
  <div class="move"></div>
 </div>

</html>

<div class="wel">Sky Point</div>
 <p>hotel and Resort</p>
</div>

</body>



CSS



*{


margin:0px;

border:0px;

padding:0px;

}
body{

background-color:#292929;

}
.dis{
height:50px;

background:linear-gradient(rgb(228,96,22),black);

width:1000px;
}
nav{
width:1000px;

background-color:rgba(0,0,225,.3);

height:200px;

}
nav ul{
margin:0px;

display:inline-block;

margin-top:100px;
}
nav ul li{
padding:7px;
}

font-size:50px;

nav ul li a{
display:inline-block;
color:white;

font-weight:bolder;

text-decoration:none;
padding:13px;
line-height:50px;

}

border-radius:5px;
background:linear-gradient(203deg, blue, olive);


nav .menu span, .menu span:before, .menu span:after {

nav .menu{
position:absolute;
top:115px;
right:82px;
}
position:absolute;

content:"";

width:78px;
height:4px;
background-color:white;
}
.menu span:before{
top:-19px;
}

.lef{

.menu span:after{
content:"";
top:19px;
}
nav ul{
position:absolute;
display:block;
}
top:700px;

background-image:url("/storage/0000-0000/download/pexels-photo-573552.jpeg");

width:1000px;
height:1340px;
}
.trans{
position:absolute;
width:1000px;
height:100px;

margin-top:54px;

background-color:#34180c;
top:810px;
opacity:0.9;
}
.move{
width:500px;
height:2px;
background-color:grey;

transform:translateX(250px);

animation:mova 3s linear infinite;
}
@keyframes mova{
25%{
transform:translateX(125px);
}
50%{
}
75%{
transform:translateX(375px);
}
25%{

margin-left:50px;

transform:translateX(500px);
}
}
.anim{
position:absolute;
width:70px;
height:70px;
background-color:teal;
transform:rotate(135deg);
margin-top:850px;
opacity:0.2;

height:40px;

border:4px solid Violet;
}
#anim-two{
margin-left:820px;
margin-top:1150px;
border:4px solid yellow;
background-color:transparent;
}
#anim-three{
width:40px;
margin-left:780px;

margin-top:220px;

margin-top:870px;
background-color:yellow;

}
#anim-four{
margin-left:820px;
margin-top:160px;
border:4px dotted yellow;
background-color:blue;
}
#anim-five{
margin-left:50px;

margin-top:1000px;

border:4px solid red;
background-color:transparent;
}
#anim-six{
margin-left:440px;
margin-top:380px;
border:4px solid white;
background-color:transparent;
}
#anim-seven{
margin-left:420px;

text-shadow:10px 10px 5px olive, 10px 10px 1px black ;

border:4px solid black;
background-color:transparent;
}
.wel{
position:absolute;
font-family:cursive;
font-size:220px;
top:480px;
left:100px;
color:white;
font-weight:bolder;
border-radius:50px;

}
.lef p{

}

position:absolute;
font-size:35px;
color:olive;
text-transform:uppercase;
font-weight:bolder;
top:725px;

left:100px;

Now let's suppose we extracted this CSS file(unlink the file), what do you suggest would happen? You guessed right! Of course we'll have an unordered arrangement of our HTML content as shown below;

This example clearly shows you, how CSS effectively styles a web page. So basically one CSS file can change an entire structure of a web page. CSS placement are of three types; Inline, Internal and External. What I used in the last example was an external placement of CSS. You will learn more about this, when you start a CSS course. I used the last example to define CSS and show how important it is in web development. HTML/CSS are the building block of web development. No matter what your intentions are in web development, you'll need this building block.

VANILLA JAVASCRIPT

There are lots of JavaScript frameworks and libraries, some of the popular ones include; Angular.Js, Aurelia.Js, Jquery, Vue.js, React.Js etc. These are used on the client-side basically to create interactivity.
JavaScript also has a framework which is used on the server-side(Node.Js). We'll discuss these frameworks and libraries later in this guide but let's focus more on vanilla JavaScript. What is JavaScript? JavaScript is a programming language which allows you build interactivity into static web pages. It is important to note that JavaScript has almost nothing to do with the programming language named Java. JavaScript came along when the programming language Java was trending, JavaScript creators thought of following the trend, the reason for the name. I guessed they are stucked in it already.
JavaScript can be used to;
  • Validate forms
  • Detect a user browser and other informations.
  • Access and change any element of an HTML document.
  • Create cookies.
  • Create animation, slideshow, scrollers etc
A whole lot more can be achieved with JavaScript, it also allow several implementations to be carried out on a web page before requests are sent to the web server. This therefore reduce traffic on the webserver which inturn reduces the possibility of the webserver to crash.
So even if you don't want to be a JavaScript developer, you need to understand the basics; data types, functions, conditionals, loops, operators etc. You also need to learn how to handle DOM manipulations and event, JavaScript Object Notation (JSON) etc.
It won't take you too much time to learn especially when you are serious about it, we have series of tutorials on JavaScript, but the best way to learning would always be reading as wide as possible, that would mean checking out other nice sources.

FRONT-END FRAMEWORKS

Using HTML/CSS and basic JavaScript to build websites would require a lot more effort and may result in time wastage, you won't want that as a freelancer, even if you don't work as a freelancer, you'll need to be fast someday! this is where frameworks become effective. They help speed up development time while maintaining quality and consistency across sites as quick and efficient as possible. There are quite a number of frontend frameworks with the popular ones to include;
  • Twitter Bootstrap
  • Materialize CSS
  • Foundation
  • Bulma
  • Skeleton
  • VueJs
  • ReactJs
  • AngularJs
  • AurielaJs
If you're going to learn frontend frameworks or frameworks at all, of course you will! Learn frameworks with lots of support forum, so you can always go for support whenever your stucked, its almost like being necessary.
At this point, you can dynamically build good looking websites having learnt HTML, CSS, JavaScript and maybe a frontend framework, hopefully! You can now freelance as a web designer, if web design is your thing or can proceed learning if you intend to become a full stack web developer. But since this guide is for full stack web development, we'll proceed to the server-side programming, where we'll look into server-side frameworks, databases, side technologies and talk more on deploying a website. So let's proceed.

SERVER SIDE PROGRAMMING LANGUAGE
There are generally two part in any web application;
  • The frontend or client-side.
  • The backend or server-side.
The frontend consist of web pages you see and interact with, in your browser. Those pages are designed by frontend developers. Backend developers creates components and features that are indirectly accessed by a user through frontend applications or system. What is server-side scripting?
Server-side scripting is a technique used in web development which involves employing scripts on a web server which produce a response customized for each user's or client's request to the website. Backend developers are involved in writing these scripts. Backend developers typically work with frontend developers when creating a web application, while a frontend developer focuses on the looks and fill of a website and the user experience, the backend developer focuses on the data that the site presents.
There are many steps to responding to a request from a web browser, each requiring a different type of software. A combination of technologies used by a particular web server (A web server is just a computer running softwares that deliver resources like web pages and images) is known as it's tech stack. Let's consider a typical tech stack.
When a user enters a url, clicks a link or submit a form, their browser connects to the web server. As a web server receives this request for a resource, it needs to respond with that resources. Programming web server to respond with the correct resources is what a back end developer does. Before a web page render resources delivered to a web browser, a web application written by a backend developer, fills that page with data, this data is pulled from database which is a separate program that stores and retrieve data. Backend developers need to understand whatever programming language the web application is written in as well as the database where the data is stored.
So a frontend developer designs web pages and a backend developer sets up those pages customized with the users data. There are many server side programming language out there, each with multiple frameworks to choose from. We'll discuss a few and mention the others but remember; your choose of what to go with, should be based on the language's popularity, ease of use and large support forums. Trust me, you don't want to start learning a language and end up with a problem only to find no support or help, it's frustrating.
Popular programming language and their frameworks;

JavaScript (Nodejs)

Nodejs is a JavaScript framework which can be implemented on multiple computing platform, (that would mean a cross platform) executing JavaScript code on the server side. Nodejs increases productivity and application performance in a significant way, it is versatile, agile and has a good performance.
It is especially suited for applications where you'd like to maintain a persistent connection from the browser back to the server. When using nodejs the server has this kind of speed that nothing feels impossible. You should consider NodeJs when you want to build systems that require speed something like a chat application.

Express

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. With a myriad of HTTP utility methods and middleware at your disposal, creating a robust API is quick and easy.
ExpressJs provides a thin layer of fundamental web application features, without obscuring Node.js features that you know and love. There's also Hapi.js, Adonis, Loopback, Swagger etc. Some of these frameworks were created basically to build restful APIs.

PHYTON

Django

Django is a free and open source framework written in the most popular and easy to learn programming language python. It has a strong community-based approach. You can always utilise libraries of third-party extensions and plugins to customise your app however you wish. When you need to create web applications that security is a top priority then you should consider using django.
Another area in which Django stands out as being ideal for many developers is scalability. When you need an app that can grow in depth and complexity to any scale and is capable of handling as many visitors and/or transactions as possible, Django would be handy.

Flask

This is yet another powerful python framework, you should probably choose Flask, if you're focused on the experience and learning opportunities, or if you want more control about which components to use (such as what databases you want to use and how you want to interact with them).

Cold Fusion Markup Language (CFML)

Cfml is a sever-side scripting language for web development that runs on the JVM (Java Virtual Machine). The JVM is a machine that enables a computer to run Java program as well as programs written in other languages and compile to the instruction set of Java called Java byte code. Cold fusion in just a similar manner as other hypertext preprocessors has an application server which recognizes its markups, processes its code and work out any necessary operation returning the result in HTML to the web browser.
Interestingly it has an appreciable learning curve as its tags are somewhat similar to that of HTML, this becomes an added advantage to developers who knows a lot of html, of course everyone would. So this becomes an advantage to every developer. There are lots of CFML frameworks, though not really popular, Cfwheels, Colfspring etc.

Database

Programming language in web frameworks represent data as object and the ORM library is responsible for converting database records to object. Most databases uses separate language called SQL (structure query language) to retrieve data.
A database is a self-describing logical coherent collection of integrated records or related data with some inherent meaning. The ORM library automatically writes most of the SQL queries to retrieve the needed data. Sometimes the query is so complex that the ORM library can't handle it, the backend developer needs to understand SQL so they can write their own queries. So once the data has been retrieved backend developer need to insert it in the pages that were designed by frontend developers.
It is important that backend developers understand HTML so that they are able to manipulate and work with result returns as requested by a user. They are lots of database management system but all do work in a similar manner, to include;

MySQL

MySQL is an open source relational database management system. What this means is that data are represented in the database in rows and columns. Based on the Structure Query Language (SQL) and as a database one of its goal is to keep data stored, organized and safe for easy access. It is used in web database storing anything from a single record of information to an entire inventory of available product for an online store.
MySQL is popular for use with web applications and is mostly used with PHP although could be used with others. We also have MongoDb suitable with Nodejs, PostgreSQL, MariaDb, SQL server, Oracle and lots more. As I said earlier they all work in a similar way, so its nice to learn one and maybe afterwards tryout another.

DEPLOYING APPLICATIONS
Building an application is great but there's going to be a time you have to make them live on the internet and to do that your going to have to learn about application deployment, this is some of the things you'll run in as a developer seeking to deploy apps.

Php applications are very simple to deploy onto shared hosting account but then you have applications built with node.js, Python, ruby etc . it becomes a bit more complicated, so you will need either a dedicated server which is your own computer either local or from a hosting company or VPS (virtual private server is basically a virtualized server, so it is built on a virtualized machine) and they are usually much cheaper than dedicated servers.

Cloud hosting is another alternative which is much cheaper compared to the former. Using something like DigitalOcean which is fantastic, it actually has premade environment for Python applications and mean stack applications. Then there are services like Heroku, Amazon web services that are built for dynamic applications written in language like ruby, python nodejs. You might also want to look into cloud storage with services like Amazon S3 especially if your using a service like Heroku which does not allow local file uploads, you will need to use some kind of third party services like S3.

By this time you are going to be working with the command line quite a bit and you are going to want to work with SSH and secure sockets, its a very secure way to connect to your server, do update and maintenance. It is a very important part of application deployment and maintenance. So you're going to have to learn all this, trust me it can be very overwhelming. Usually if you work with a team this kind of stuff would probably be handled by someone else but it doesn't hurt for you to have a basic understanding of how all this stuff works. So just know that you don't have to master all this, and this goes to all that I've mentioned in this post. You don need to master every stuff here, I'm just trying to take you through a kind of map or would I say a guide of some of the things that your going to run into and some of the choices you're going to have to make as web developer.
So if you find this guide useful, leave a comment and share.

More Useful Resources





  • Client Side Programming - Geeksforgeeks
  • Frontend Frameworks - Frontendmasters
  • Database - Quackit
    • Author Image

    About Knowaloud
    Sora Blogging Tips is a blogger resources site is a provider of high quality blogger template with premium looking layout and robust design. The main mission of sora blogging tips is to provide the best quality blogger templates.

    Related Posts:
    By at

    No comments:

    Post a Comment

    Subscribe to: Post Comments (Atom)