read on as we demystify web development and prepare you for your first workshop
Many technologies make up the experience we call “The Web.” The following is an overview of the most common ones.
A web browser is a program—such as Google Chrome, Mozilla Firefox, Apple Safari, or Internet Explorer—that retrieves the source code of a website and renders it in a way that you can interact with.
A client is a program that request information from another computer. For example, your web browser acts as a client when it requests a web page from a server.
A server is a computer that responds to requests from a client. Servers are often responsible for storing information permanently: when you create an account on a website, that information is stored on the server.
Most web development is split up into frontend and backend development, so let’s dive a little deeper into these areas.
everything you can touch
To learn how to write HTML and CSS by creating a simple portfolio website, check out Introduction to HTML & CSS.
HTML and CSS store information about a page. HTML contains the content, which could include text, images, videos, and any number of other things. Complementary to this, CSS stores information about how to display the content stored by the HTML. This includes layout, color, fonts, and other information about how our site looks. With just HTML and CSS we can create beautiful, informational web pages that display the same information for everyone who loads them.
To learn how companies like Facebook and AirBnB code their frontends, check out our React Workshop.
everything behind the curtain
The backend is all of the code that runs on the web server.
To learn more and make a simple blog, check out Introduction to Backend Web Development.
A backend is necessary if you want to store information long term, sign people in, or perform complex computations.
Backends can be written in any programming language, but some languages are easier to use than others. In addition, to the language, web developers often use a web framework, which is a collection of code that handles common server tasks and helps organize code.
optimizing the user’s experience
To learn more about design, attend Crafting Well-Designed Sites
When creating a web application, it’s important to remember that in a good design can make or break your site’s success. Design is best described as all of the choices that go into making a website. Design is more than the way a website looks; a good design considers every aspect of a user’s experience. This includes how a user signs up, how information is laid out, and overall every action the user has to take inside your app. The goal of any good design is to be unobtrusive, intuitive, and pleasant.
We group the choices a designer makes about how a piece of software fits into a user’s life under the term User Experience, or UX. Another common term you will hear discussed in relation to UX is the UI, or User Interface. The user interface is what the user sees and actually interacts with. Wireframes, mockups and prototypes are examples of tools which facilitate the development of a good user experience.
Wireframes are like an outline to an essay. They’re non-functional, ugly, and generally use a visual style that will not end up in the app. They do help at visualizing a very rough an idea. Wireframing focuses on the broad ideas of an interface—the functionality and layout—rather than on the specific details.
Making mockups is like filling in your bulleted outline with the most important pieces of text. We say that they can be done with varying degrees of Fidelity. Low fidelity mockups serve roughly the same purpose as wireframes, while high fidelity mockups are pixel-perfect examples of what a developer should be implementing.
Prototypes are like rough drafts. With prototypes, users can actually interact with an interface, though it still may be rough and clunky. Prototypes are valuable because they can identify problems before developers take the time to implement a full design, which can save engineering resources.
the final flourish
To learn how to deploy whatever you created during Web Dev Weekend, attend Deployment: Making Your Site Public
After a website has been designed, and the frontend and backend implemented, it’s time for it to be deployed. Deployment is the process of taking the code a developer has written, and setting it up to run on a server where the whole world can interact with it. It is a very important step, but it can be complicated because software is often not developed in the same environment it is deployed in. Deploying and running a webapp is generally called operations, and it’s an important step in the life cycle of creating a web application.
Attending More Workshops
where to go from here
Thank you for reading this guide, and we hope that you will join us for Web Dev Weekend!
We’ve specifically designed the workshops so that they can be taken in any order, although we recommend taking the deployment workshop after you’ve completed at least one technical workshop (so you have something to deploy).
If you haven’t already, be sure to register! You certainly don’t have to register to attend, but we like knowing how many people to expect and what people will be interested in learning. We can’t wait, and we hope to see you there!
If you have any comments or questions about this guide, please write to hello at scottylabs dot org.