facebook twitter
Webucator's Free Adobe Dreamweaver Tutorial

Lesson: A Quick Overview of Web Development

Welcome to our free Adobe Dreamweaver tutorial. This tutorial is based on Webucator's Introduction to Dreamweaver Creative Cloud (CC) Training course.

Web development involves a combination of client-side programming and server-side programming.

Lesson Goals

  • Learn about client-side web development languages.
  • Learn about server-side web development languages.

Languages of Web Development

Before you get started writing HTML code, it's important to understand that there are many languages that make up the ecosystem of web development. Let's first consider what happens when you visit a website. When you type in a URL in the location bar of your browser (e.g., https://www.runners-home.com), the browser makes a request from the web server for a web page. If you don't specify the name of the file you want (e.g., contact.html or about.html), the web server will send a default page, which is most likely called index.html, index.php, index.cfm, or something similar. The web server returns that web page to the browser for display. The web page may include references to other files:

  • Images to display on the page.
  • Style sheets to add formatting to the page.
  • Scripts to add interactivity to the page.

The browser will download these referenced files as well. To get a better feel for this, do the following in Google Chrome:

  1. As illustrated below, click on the three-vertical-dot icon in the upper right of Google Chrome: Open Chrome Developer Tools
  2. Then select More tools.
  3. Then select Developer tools. This will open Chrome's Developer tools.
  4. In Developer tools, select the Network tab: Select Network Tab
  5. If Developer tools isn't docked on the bottom of the browser, move it to the bottom to make it easier to see the Network tab information: Button to Dock Developer Tools at bottom Developer tools should now be at the bottom of the browser: Developer Tools docked at bottom of Google Chrome
  6. Now in the location bar of your browser, enter https://www.runners-home.com: Enter URL in location bar After the page loads, take a look at the Network tab. You should see something like this: Developer tools network tab showing loaded files
    1. www.runners-home.com – Although it doesn't specify the page, this represents the main page you requested: the HTML page (usually called index).
    2. toggle.js – A JavaScript page used for adding interactivity to the HTML page. Notice in the fourth column that the initiator for this page is (index). That means that the HTML code instructed the browser to download this page.
    3. Style sheets ending with .css – CSS pages used for adding style and formatting to the HTML page. Like the JavaScript page these pages were also requested by the HTML code.
    4. Images ending with .png and .jpg – Images to display on the page. The image was also requested by the HTML code.
    5. Font files ending with .woff2 – Web fonts for adding custom fonts to your web page.
    6. Though not shown in the screenshot above, you may also see favicon.ico – An icon used to identify the website on the browser tab: favicon location shown Note that favicon.ico only gets delivered when pages are sent from a web server. When you open files in a browser directly from your file system, the favicon will not show up.

Client-side Programming

Client-side programming involves writing code that is interpreted by a browser, such as Google Chrome or Safari, whether it be on your desktop or mobile device. The most common languages and technologies used in client-side programming are HTML, JavaScript, and Cascading Style Sheets (CSS).

HTML

HyperText Markup Language (HTML) is the language behind most web pages. The language is made up of elements that describe the structure of the content on a web page.

Cascading Style Sheets

Cascading Style Sheets (CSS) are used in HTML pages to format and lay out the content. CSS rules defining color, size, positioning, and other display aspects of elements are mixed within the HTML code or in linked external style sheets.

JavaScript

JavaScript is used to make HTML pages more dynamic and interactive. It can be used to validate forms, pop up new windows, create audio and video controls, and create dynamic effects such as drop-down menus and modal dialogs.

Ajax

The term Ajax was originally a pseudo-acronym for "Asynchronous JavaScript And XML" but is now used much more broadly to cover all methods of communicating with a server using JavaScript.

The main purpose of Ajax is to provide a simple and standard means for a web page to communicate with the server without a complete page refresh.

JavaScript Frameworks

JavaScript frameworks are frameworks written in JavaScript that create a different approach to web application design. Popular frameworks include Angular, React, Vue.js, and jQuery. You should learn JavaScript before beginning to work with a JavaScript framework.

Server-side Programming

Server-side programming involves writing code that connects web pages with databases, XML pages, email servers, file systems, and other systems and software accessible from the web server. The most common server-side languages and programming frameworks are Java Enterprise Edition, ASP.NET, Python, PHP, ColdFusion, and Node.js.

PHP

PHP is open source. It is the language behind WordPress and has long been a popular alternative to proprietary languages such as ColdFusion and ASP.NET. PHP is lightweight and relatively simple to learn.

Java EE

Java EE is used in large web projects. With its power and robustness comes a steep learning curve.

ASP.NET

Microsoft's ASP.NET is not a language, but a framework for writing websites and software. ASP.NET pages can be written in many languages, but the most popular are C# (pronounced C-sharp) and Visual Basic .NET (VB.NET).

ColdFusion

ColdFusion, created by Allaire (now owned by Adobe), is arguably the simplest of all server-side languages. It is tag-based, which makes it look a lot like HTML and easier for client-side programmers to understand than some of the other choices.

Node.js

Node.js is a JavaScript framework that runs on the server, allowing developers to use JavaScript for server-side scripting as well as client-side scripting.

Python

Python has been a popular open source programming language for a long time. There are many web frameworks based on Python, the most popular of which is Django.