Breaking

Quiz

LightBlog
Research Quiz

Tuesday, September 29, 2020

What you need to know, before starting out with web development (Updated 2020)


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
  • 25 comments:

    1. I’ve recently started a site, the information you offer on this web site has helped me greatly. Thank you for all of your time & work. sf design agency

      ReplyDelete
    2. With our monetary system at a local absolutely is, I am choosing to make information on filing for jobless bonuses. This inspiration were to illustrate how our jobless machine works, what is the fixed will be taking and rejecting professes, immediately after which add books within my own engagement ring information in what the supreme maneuvers in addition very common goof ups are typically submitting redundancy elements. iphone device template

      ReplyDelete
    3. hi!,I like your writing so much! share we keep up a correspondence extra approximately your post on AOL? I require a specialist on this space to solve my problem. May be that is you! Looking ahead to peer you. design agency san francisco

      ReplyDelete
    4. Get in touch with us and turn your business goals into an incredible design and then into a fully functional website today. web development services in usa

      ReplyDelete
    5. Hi there! This is kind of off topic but I need some advice from an established blog. Is it very hard to set up your own blog? I’m not very techincal but I can figure things out pretty quick. I’m thinking about setting up my own but I’m not sure where to start. Do you have any points or suggestions? Thank you web design san francisco

      ReplyDelete
    6. you possess a great blog here! want to have invite posts on my small blog? website designers san francisco

      ReplyDelete
    7. LCD TVs can really save you from high electricity bills and office space; web designer san francisco

      ReplyDelete
    8. Hiya, I’m really glad I’ve found this info. Today bloggers publish only about gossips and net and this is really annoying. A good website with interesting content, that’s what I need. Thanks for keeping this web site, I will be visiting it. Do you do newsletters? Can not find it. los angeles web agency

      ReplyDelete
    9. You’re probably thinking since this is a studio comedy, everything will be wrapped up in a nice little package. web designer la

      ReplyDelete
    10. The term Uptime in web facilitating alludes to the time where the site is fully operational. It is fundamental in assessing the unwavering quality of the site. web hosting near me

      ReplyDelete
    11. I’m impressed, I have to admit. Truly rarely do I encounter a weblog that’s both educative and entertaining, and let me tell you, you might have hit the nail on the head. Your thought is outstanding; the thing is something inadequate individuals are speaking intelligently about. We are happy we found this at my seek out some thing in regards to this. web designer la

      ReplyDelete
    12. You’re the best, It’s posts like this that keep me coming back and checking this weblog regularly, thanks for the info! web designer la

      ReplyDelete
    13. Social Media permits an advertiser to do only that. Maybe ¼ of the total populace has a place with a social media sight, and the greater part of the significant social media stages are coordinated. smm panel

      ReplyDelete
    14. Hi there! Nice stuff, please do tell me when you finally post something like this! web design company

      ReplyDelete
    15. I totally agree! I came over from google and am looking to subscribe. Where is your RSS feed? web design agency

      ReplyDelete
    16. The simplified media uploader permits you to move documents legitimately from your PC into the WordPress administrator, as opposed to perusing to the record's area. error establishing a database connection

      ReplyDelete
    17. I am very enjoyed for this blog. Its an informative topic. It help me very much to solve some problems. Its opportunity are so fantastic and working style so speedy. Digital Marketing

      ReplyDelete
    18. Great post. I used to be checking constantly this weblog and I am inspired! Extremely useful information specially the ultimate part :) I maintain such info much. I used to be seeking this particular information for a very lengthy time.
      Thank yyou and good luck.
      website design pakistan
      responsive web design
      website design services Pakistan
      responsive web design services in Karachi
      UI UX website design Pakistan
      wireframe design in Karachi
      Best website Design services in Pakistan
      Pakistan Best web design service

      ReplyDelete
    19. What things - text, pictures, information - would you like to place in your pages?Webdesign

      ReplyDelete
    20. In the years past, customers were more hesitant to do their shopping on the web now things have changed extraordinarily.besimple.com/

      ReplyDelete
    21. This article considers the difficulties that specialists face and encourages you settle on the choice concerning if outsourcing is for you. Professional graphic design

      ReplyDelete
    22. Took me time to read all the comments, but I really enjoyed the article. It proved to be Very helpful to me and I am sure to all the commenters here! It’s always nice when you can not only be informed, but also entertained! trafficize

      ReplyDelete
    23. Very informative post ! There is a lot of information here that can help any business get started with a successful social networking campaign ! SEO Guadalajara

      ReplyDelete
    24. That definitely possibly an amazing organize i always in truth definitely relished checking out. It's not necessarily specifically frequent i always add some choice to identify a selected matter. Responsible Design

      ReplyDelete

    Adbox