Web Development 1a: Introduction

You’re going to learn the basics of HTML, a straightforward markup language for structuring a hypertext document. HTML has been around for a while, and it’s been through a few changes. It’s absolutely everywhere on the web. We’ll do a walkthrough of a few basic HTML tags, and then we’ll dive into lists, tables, and forms. When we talk about forms, we’ll also talk a bit about HTTP requests and responses. It won’t be long before you start getting comfortable with how HTML works and how it makes web documents well-structured and accessible.

What will you learn in this unit?

• Discuss HTML’s version history and evolution
• Use various HTML tags correctly, depending upon context
• Construct basic HTML lists and tables
• Create a basic HTML form, as well as describe client and server responses when forms are submitted

This is an introduction to Cascading Style Sheets. CSS is the style language of the web. HTML might be the bones, but CSS is the skin, clothes, and accessories that help us decide if we like what we’re looking at or not. CSS is easy to get started with but will become more complicated as we move along.

• Add CSS styles to an HTML document in different ways, according to need
• Create CSS rules using appropriate selectors and properties, with varying levels of specificity
• Understand the basics of the CSS box model, a key idea in CSS
• Style various HTML content and elements: text, lists, tables, forms
• Discuss the pros and cons of HTML/CSS frameworks

Welcome to JavaScript, a fully-fledged and very powerful programming language. Huge applications are built with JavaScript, and it runs natively in your browser, but it can also run on the server or various other devices such as a smartphone. Recent advancements in the JavaScript developer universe have made JavaScript-capable of running many different kinds of applications. This is going to be a whirlwind introduction to a very deep subject. You’ll learn the basics of JavaScript, how to experiment with it, and how to use it to affect a web page. You’ll use it to interact with a user’s data submission, and you’ll get a view of how much potential the JavaScript world offers.

What will you learn in this unit?

• Discuss and create basic JavaScript variables and data structures, such as strings, arrays, and objects
• Use basic JavaScript decision-making and looping statements
• Create JavaScript functions and objects
• Understand how JavaScript interacts with web pages

Up to now, we have been learning about how to create content for the World Wide Web. Now we are going to take explore the underpinnings of the WWW itself. In this unit, we will take a look at the different types of servers and hosting services where websites “live.” We’ll learn how to secure a unique name for your website so that any browser can locate it, and we’ll learn how to make the most of various browsers for various tasks. When we’ve put it all together, you’ll end up with your personal toolkit—the development stack that will let you build any website you can dream up.

What will you learn in this unit?

• Choose a reasonable server for website development and deployment
• Discuss a server’s roles and some of the technical components of server hardware
• Understand the browser’s role in relation to the webserver
• Think about browser and server technologies altogether as a “stack” of development tools and strategies
• Understand emerging trends in web development platforms

Thoughtful planning is crucial to success in any project but especially in web development. You need to start with a good understanding of your clients’ needs and goals and make sure that they correspond to what the site’s users need as well. There are many tools that will help you with the planning and production process. You will learn to make the most of them to develop an information architecture that can be both strong and flexible to meet your clients’ needs. You’ll also learn some tips to make your site even easier to find and use.

What will you learn in this unit?

• Describe the steps of a typical professional website planning process
• Define information architecture and describe the steps involved in the information architecture process
• Discuss and recognize the tools used for information architecture
• Understand and discuss the principles and tools used in web project management
• Know the principles and some technical ideas related to search engine optimization

A good portion of web development is spent handling, organizing, moving, editing, and generally herding files. But handling files well is about keeping certain principles in mind, as well as understanding available tools. As your skills progress, you’ll learn more and more file types and file extensions, and you’ll develop solid practices for naming files and folders. You’ll start to develop strong skills for moving around filesystems while working on the command line or with a graphical user interface, and you’ll start thinking about directories as tree-like structures that put files into specific relationships with each other. You’ll also become accustomed to transferring files or directories of files to a server with a set of tools. Files are central to web dev, and you’re going to become very good at working with them.

What will you learn in this unit?

• Name files appropriately, according to their type and established practices in web development
• Work with directories, subdirectories, parent directories, and paths
• Describe the difference between absolute, relative, and site root-relative paths
• Properly organize a website’s file structure
• Identify the commonly used tools for uploading files to a web server

It’s time to wrap up our introduction to web development with some concepts that round out our survey of the field. Project workflow—while somewhat personal with respect to individual developers’ roles and habits—does require familiarity with a number of frequently encountered ideas. The software development lifecycle is a way of looking at how software is developed through iterations of repeated, consistent steps. We’ll also look at one of the most important individual workflow topics: source code management. Particularly, we’ll take a look at one of the most common SCM tools out there—git—and we’ll see how a project is set up to accommodate SCM. Then, considering that knowledge is being acquired quickly, we’ll take an introductory look at two of the most common tasks in development: setting up a connection to a SQL database and uploading files to a server. Finally, we’ll round out with a brief overview of creating a test plan and introducing the idea of testing workflows, which are daily and continual parts of the web development process in the professional realm. We’ve come a long way during this introduction and, quite candidly, we’ve conducted an overview of the field which isn’t commonly given in other contexts that focus on coding alone or some specific idea. You’re starting to get a real picture of professional web development.

What will you learn in this unit?

• Understand real-world project workflow
• Get started with version control
• Work with the basics of connecting to a database
• Discuss basic file uploading
• Start designing a testing plan

• Internet access
• Word processing software
• Google Drawings (or similar software)
• Google Slides (or similar software)
• Formspree.io
• Github account
• Repl.it account
• JSFiddle account