Introduction to Web Design and Development

Introduction to Web Design and Development

Web design is the visual aesthetics and the page layout of a website. It goes hand-in-hand with web development in the creation of a static website or dynamic website.

What is Web Designing?

Web design is basically the look and feel of the website how it looks in simple words its the aesthetics of the site.

The web design process starts with a visual concept, which you could sketch by hand or with software like Photoshop. Then, you use HTML and CSS to build the website. HTML and CSS are the codes for writing web pages. HTML is the car structure and CSS is the appearance of the car and the interior design and engine of the car.

If you’re a good web designer, you’ll also pay attention to concepts like responsive design, aesthetics, usability, and accessibility when building your site.

What is Web Development?

As the design is the look and feel of a website the development process deals with the brains of the site. What will be the functionalities that the web site will be providing and all the back end stuff like the logic building is handled in the web development process.

The steps are in the following sequence:

  1. Web Design
  2. Web Development

And I am going to cover some basics of both steps and after that, we can take a look in more depth on each individual component.

Also Read: The 5 Best Linux Distros For Beginners in 2019

The Basics: Markup Languages and Style Sheets

  • Basic languages like HTML and cascading style sheets (CSS) are the building blocks of most sites—the structure, organization, and the look and HTML5 is the latest version, with advantages like more cross-platform compatibility and fewer errors. XML and JavaScript Object Notation (JSON) are data exchange formats.
  • HTML (HTML5)
  • CSS
  • XML
  • JSON


Other languages are used specifically for client-side scripting—namely, JavaScript.These scripts are embedded in the HTML markup and transform your website from a static page to a hard-working interactive application.

The client-side code runs in the browser—it’s temporarily downloaded from the server to the browser so it can run independently of the Client-side scripts have a number of frameworks to support developers and add extra functionality.

What your site gets from these scripts is a fast, seamless, desktop experience, with less load on the server. To keep pace with these more advanced dynamic websites, there are also CSS preprocessors and front-end frameworks which make it easier to style your websites and keep pace with the ever-evolving world of web design.

Browser-based, front-end languages include:

  • JavaScript
  • ActionScript
  • VBScript
  • Silverlight (for gaming)

Popular client-side frameworks and libraries include:

  • jQuery
  • AngularJS, Angular 2
  • Aurelia
  • Ember
  • Polymer
  • React
  • Underscore
  • Vue

Popular CSS pre-processors and front-end frameworks include:

  • LESS
  • Sass
  • Bootstrap
  • Foundation
  • Gumby
  • Material UI
  • MaterializeCSS
  • Pure
  • Semantic UI
  • Susy
  • CoffeeScript, a compile-to-JavaScript language and TypeScript, a Microsoft JavaScript superset


All sites are hosted on a powerful computer called a Without getting too technical, the server-side code lives on your server and has direct access to your database. By running on the server, it serves as go-between architecture, transferring data to the browser, minimizing the browser’s workload (and necessary client-side scripting), and making your site more secure.

Each language has a number of frameworks to support developers in writing code—some with add-ons, extras, and built-in APIs and other software that make building a top-to-bottom application fast and

Server-Side Scripting Languages:

 C#
 C, C++ languages
 Java language
 Scala language
 ColdFusion language
 Ruby programming language
 Perl & Perl 5
 Python
 JavaScript via Node.js
 Erlang
 SQL, a language for database queries

Popular server-side frameworks and libraries include

 ASP.NET framework
 Node.js
 The Ruby on Rails framework
 The Django framework (Python)
 Laravel, CakePHP