In this modern era, web development is becoming more sophisticated. There are many web publishing tools providing handy interface for the general public to create a web page without any scripting skills. However, web technology is ever-changing. Most of the tools take time to update the functionalities in order to meet with the new trend of the web. Have you thought of learning some basic web development skills? Why?

Learning web development can let you:

• Understanding the feasibility of web tech: If you're in the field of marketing, you should know a well-designed site can bring a supreme experience or positive impression to your customers. When you understand the web tech, you won't be fooled by some developers who may prepare you with an old-fashioned site or those who alwayrs reject your novel ideas.
• Writing HTML emails: Plain text emails are dull and boring. Writing HTML emails can integrate appropriate design concepts and thus be looking attractive to the audience.
• Strengthening your resume or blog: You may need a blogging / publishing tools if you're new to web development, but learning some HTML and CSS can customize your blog to be unique and distinctive.

Here in Dexterux, you can go through 15 chapters of core web development skills if you're new to web development.

Basic Web Structure

In frontend web development, it consists of 3 core aspects:

• HTML: markup language for the content of a web page, including the page info, textual content, and page structure.
• CSS: style sheet language for the presentational layout, format and visual effect of the web page elements.
• JavaScript: programming language with syntax based on the ECMAScript standard, for the dynamic logical layer of the web. It can provide interactivity between web pages, users, stored info and external web pages or even server data.

Fontend vs Backend

• Frontend Development: the web editing on the client side, which is directly being processed by the browser. The 3 core aspects (HTML, CSS, JavaScript) are the important source files for the browsers to read and present as a web page. This basic tutorial would focus on the frontend development.
• Backend Development: the development on mostly server side, which may involve database management, server administration, server-based computation, etc.

Where to write codes?

Because web page are simply rendered from the 3 types of scripts, these scripts are simply text files. You can just open a Notepad to the write an HTML file, save it as a .html file, and open it in browsers like Firefox or Edge, that's it.

However, Notepad is not an ideal development environment. It doesn't have features like highlighting syntax, so it is hard to organize the source code well and make the source code easily readable.
Syntax is just like the grammar of a language and you have to follow some syntatic rules where browsers could understand and process the text files as a web page.

Alternatively, you can download a free and open-source software Notepad++, which is a better code editor. OneDrive is a cloud storage platform which support code editing on the web.

IDE (Integrated Development Environment)

In this tutorial, I recommend you download an IDE for learning. Since we're going to navigate different source files, a text editor cannot provide a local server for us to simulate the real situation when the website is being browsed.

Microsoft Visual Studio is my personally recommended software for you to download. "Visual Studio 2017 Community" is free for students, open-source contributors, and small teams (You may need to read through the Term of Service by yourself). It is an IDE not limited to web development, but also Windows Desktop and iOS, Android, and Windows apps, where it may be useful when you are interested in these areas afterwards.

Start Now!

Now, let's create a new website. A site is structured as a folder, so you may now create a new folder in your computer first. This folder is a collection of HTML files (.html), style sheets (.css), scripts (.js), and many other assets like images.
After creating the folder, you may create a plain text file "index.html". This file would be the launching webpage of your website. You can edit this file in Notepad++ or any IDE you prefer. Because you haven't written anything on this file, if you open the file in browsers like Edge or Firefox, it will display a blank page.

In Visual Studio, you may follow these steps to create the HTML file:

1. Create a blank folder in File Explorer
2. Open Visual Studio, click File ▸ Open ▸ Web Site...
3. Select the newly created folder, then Open
4. A blank VS Website Development Environment is prepared, where in Solution Explorer you may find your folder name.
5. Click File ▸ New ▸ File...
6. Select HTML Page, rename it as "index.html", then click "Add"
7. "index.html" is opened on Visual Studio, and you may edit now
8. Click Debug ▸ Start Debugging... (F5) or the Green Arrow on the toolbar with a browser name, you may see your launching webpage as a blank page.
9. Before you leave, Visual Studio would ask you whether to save "[your folder name].sln". You'd need to save it, and next time when you open Visual Studio,you can click File ▸ Recent Project and Solutions, and you'll find your website automatically.

Website Folders and URIs

The new folder you have created will be where your website is. If you have debugged it, you may launch it on "http://localhost:XXXX" through a local server provided by IDE. If you have a domain and publish the files through FTP, this folder would be the same on your domain like "http://www.[your_domain_name].com". The way to create a domain and host your website on the Internet would be introduced on the last chapter of this tutorial.

Take localhost as an example. If you create a new folder named "img", the location would be "http://localhost:XXXX/img/".
It's important to understand the URIs (Uniform Resource Identifier) of each of your documents and resources, since they will be linked each other to display well to your visitors.

• Absolute URI: The full path of your resource, like "http://localhost:XXXX/img/icon.png" or "http://localhost:XXX/food/search.html". It should include your domain and all the folder paths with the file name as well.
• URI Reference - Same Folder: If you want to look for a file that's on the same folder of the working webpage, you may just specify the file name or the folder path under the working foler.
  If you're working on "http://localhost:XXXX/category/index.html", URI: "drinks/juice.html" would stands for "http://localhost:XXXX/category/drinks/juice.html"
• URI Reference - Root Folder: If you want to look for a file that's not on the same folder of the displaying webpage, you may just specify the path without using the domain name, but to prefixed with "/".
  If you're working on "http://localhost:XXXX/category/index.html", URI: "/img/hotdog.jpg" would refer to "http://localhost:XXXX/img/hotdog.jpg"

How to learn web development?

Some of you may have ever thought of taking a course to learn web development. From my point of view, that's no need to spend such money. Web technology is ever changing. What you have to keep in mind is your self-learning skills. Learning web development just like learning other programming, you have to learn yourself. You have to be open-minded to receive new knowledge and adapt to changes in a fast pace.

There are a lot of materials available on the web. Mozilla Development Network (MDN) is a free and great place for you to have a reference on all the necessary technologies. For example, if you have ever heard of CSS Filter, and you can just search "CSS Filter mdn" in a search engine, get into the reference on MDN and you'll find the details on how to use CSS Filters with relevant examples.

Here in Dexterux, I'll provide an easy roadmap for beginners to start your road on web development. On the upcoming 14 chapters, you'll go through the basics on HTML, CSS and JavaScript.
Guides from personal websites are often easier to read for beginners than MDN or official documentations, but many of them are outdated where they may be written in 90s or early 00s. Latest blogs are often fragmented with latest technologies sharing individually. I'll let you touch the basics as well as the latest technologies in the upcoming chapters.
I hope you can spend around a month to have a try, and learn web technology yourself.