Learning Web Development

Web Design 0 Comments

Web development is a comprehensive term describing the tasks involved in developing a website that can be accessed worldwide or via the intranet on a private network. Creating a large website if you are a beginner is not an easy task, so you have to start by learning from a small website.

Once you get a small website, then you can move on to bigger and more complicated websites. There are several steps required in developing a website. Below are detailed procedures for learning web development.

Understanding How The Web Works
Understanding the basic terminologies of the web will speed up the process of learning web development. Two important terms involved in a web situation are client and server; a client makes a request to a server through a web browser.

A server responds to the client’s requests and sends results to the browser. The process involves a HTTP call, (Hyper Text Transfer Protocol). HTTP is the foundation that enables communication over the web. For data to be transferred between the client and the server, it has to be divided into packets. A packet, according to the Internet is a unit of data transferred between a client and a server.

Setting Up Your Development Environment.
After understanding how the web works, it’s time to set up the development environment. You start by installing basic web development programs. You need three things: a text editor, a local server for running the code, and a web browser to see the changes. There are plenty of text editors you can choose from; Dreamweaver, notepad, notepad++, Netbeans, PhpStorm, or others.

For a beginner, notepad ++ is the best choice so that you learn by typing your code completely. For your local server, you can install Xampp, or Wamp if you are using Windows. There’s also Lampp and Mampp for Linux and Mac OS respectively. These local servers perform the tasks of a real web server; they store your files and data, and they serve the client’s requests to the browser. For the browser, you should choose from the modern browsers available like Mozilla, Chrome, Torch, Safari, and Microsoft Edge.

Planning Your Website
You should ask yourself these questions to guide your planning plan. How do you want your site to look? What information are you planning to share? What are the fonts and colors you want to incorporate? Answering these questions can help you plan before starting the coding process.

Sketch your designs as they would look on a browser. You also need to select your asset–these are images, font and theme color. You can browse for images from the internet and save them for later use, take them with your camera, or even develop your image assets using Photoshop or your favorite image editor. For fonts, Google fonts offers a free font generator; you can check out their website and save the code for later use.

The Basics Of HTML
HTML is an abbreviation for HyperText Markup Language. It’s the language used to structure the appearance of a web page. The structure considers what you will have on your website. These include paragraphs, subheadings, images, list points, etc. HTML instructs the web browser on how to display these elements by embedding them in a set of tags. An example of a tag to display a paragraph is

your sentences here

, a heading for a page can be displayed with

Heading text

The Basics Of CSS
CSS stands for Cascading Style Sheet. It’s the code used to improve the aesthetics of a website, for example, styling to make it look appealing. It tells the browser what color to show for a given text, sets the background image for a web page, places texts on different parts of the page, and controls hyperlink appearance, etc. For example, you can set the color of all paragraph elements to blue using this CSS code: p {color:blue;} . The structure of CSS is comprised of three elements: selector, property, property value.

The Basics Of JavaScript
JavaScript is used to add interactive features to the web page dynamically. For example, how forms should behave, how data should be submitted to the server, animations, games, etc.

The Basics Of PHP
PHP is an abbreviation for PHP Hyper Text Pre-processor. It’s a server-side programming language. It handles the requests made to the server and returns responses to the client. It’s the language used to communicate with the database and return the data back to the client.

Where To Save Your Files
After writing the code for your web pages, you need to save the files in a location in server so that they can be viewed on a browser. This can be referred to as publishing your website. For testing, you can save the files in your local server, in a folder called htdocs. Then fire up the server from the Xampp control panel. If you navigate to the URL http://localhost/ on your browser, you should be able to see your first basic web page. From there you are in a position to keep improving your knowledge and develop a bigger website.

Sources- https://teamtreehouse.com/tracks/web-design

http://webdesign.tutsplus.com/articles/how-designers-and-developers-can-collaborate-using-sketch-and-zeplin–cms-26421

Leave a Reply

Your email address will not be published. Required fields are marked *