Introduction #

This page focuses on the process, concepts, and tools for building any type of web site or web application. A website has a lot of overlapping functionality and technology as a web application, except it doesn’t focus on high volume of dynamism and user interactivity, which would require a database. This article mentions the two interchangeable. However, if one were precise, this article focuses on websites.

Process from Idea to Product #

Building a website follows many of the principles of building a software application, which includes figuring out what to build ,managing the building, and validating the quality of the final product. In software development this specifica refers to various phases of structured activities such as planning (such as gathering spec requirements), scheduling the work, development, and test. The name for this set of phases is called Software development lifecycle (SDLC). Some of these phases are described below. It can be customary for your team to cycle through these phases repeatedly.

• Requirements Gathering- What’s the purpose of the website?

  It helps to know what you’re building before you begin building.

  Deciding what to build should come from a review of similar websites, as well as discussions with the appropriate stakeholders. For example, if you’re building a website for an organization, you should evaluate websites from similar organizations, and also speak with the organization.

  This is the chance to gather information about the project goals and/or needs, and any must have items. The outcome of this step is a rough list. In the next phase during design, you will further refine the requirements.

• Design / Specifications - What are you going to build it with and how?

  Once you have the general requirements scoped out, it needs to be translated to technical specifications. This includes picking the technologies such the programming language(s), any libraries or frameworks, and so forth. This can also include the stage of creating wireframes, data flow diagrams, and other sketches to describe a roadmap.

• Scheduling - When will it get completed?

  Once you figure out what needs to be built with what technology, you need to figure out when you will complete each feature. It helps to make a list of goals for regular intervals, such as weekly. You should keep in mind of any major events or holidays that might cause disruptions, and include them into your plan.

  Some teams prefer an agile approach, which means getting a quick prototype produced. Then using that to collect user feedback to guide prioritization of features for future

• Building

  This is the execution of the schedule. If you planned well and made the right choices, it will be fairly easy to execute on. One can easily become discouraged during this phase when the project pace doesn’t match the scheduled expectations. It takes a lot of experience to know how to pick the right tool(s) for the job, and estimate tasks accurately, so take all the hiccups in stride as learning experiences.

• Testing - Does it work as expected?

  Once you have built your website, be sure to test it. Make a checklist based on the requirements and/or specifications to compare against the item built. Ensure that the website meets all the requirements.

• Deployment - Delivering the software to the client

  This is the final stage of the project, when you’re ready to deliver the project. With a website this usually means deploying the website to a server.

Concepts of Web Development #

A website is rendered in a web browser through the HTTP Protocol. There’s a lot more one should learn about Internet Protocols, but it’s not required to get an operational understanding of working with websites.

Web Design Principles

The page that is rendered by the web browser is formatted in Hypertext Markup Language or HTML for short. HTML is a set of nested tags that describe how the page should be structured. It’s like an outline with hierarchical layers or if you recall from data structures class, a tree. This tree is officially called the Document Object Model (DOM).

If we use cake decorating as an analogy, HTML is the structure (i.e. the layers of cake), and Cascading Style Sheets (CSS) is the styling on top of the layers. You can be barebones or go all out with CSS to obscure the underlying layers.

Tools #

• Text editor

  You can use any text editor to write these files. Some editors such as VS Code have plugins you can install to help with various web development work.