Intro to Web Development
🚧 This page is under construction and is considered incomplete. 🚧
Introduction
Web development is the work involved in developing a website for the Internet (World Wide Web) or an intranet (a private network). Web development can range from developing a simple single static page of plain text to complex web applications, electronic businesses, and social network services. A more comprehensive list of tasks to which Web development commonly refers, may include Web engineering, Web design, Web content development, client liaison, client-side/server-side scripting, Web server and network security configuration, and e-commerce development.
Why learn web development?
The Web is one of the fastest-growing communication and technology platforms. In just 25 years, over 5082 million users have started using the internet. Since the commercialization of the Web, Web development has been a growing industry. The growth of this industry has been driven by businesses aiming to use their websites to advertise and sell products and services to customers.
With advancements in programming languages, web browsers like Google Chrome, Firefox, Internet Explorer, and Safari have started to support several features which were previously available only to native application developers. In the past, a significant disadvantage of web development was the unavailability of operating specific features, for example — being able to access a webpage directly from the home screen, work offline or send push notifications.
1. Job Growth
In 2020, there was approximately 1.4 million computing jobs available, which there was only approximately 400,000 qualified developers to fill them. Those interested in acquiring in-demand skills can certainly benefit from having Web development and coding in their resume. It is safe to say there is, and will continue to be, high demand for web developers. You won't have to worry about finding jobs for web developers any time soon.
2. Salary
According to U.S. News & World Report, Web developers made a median salary of $73,760 in 2019, with the best-paid 25% making $102,900 that year, while the lowest-paid 25 percent made $53,520. Salary shouldn't be the only factor when deciding whether or not to learn web development, but it should be taken into consideration. With the average household income in the United States being $75,235 in 2021, average income for web developers looks pretty nice.
3. Flexible Learning Pathways
There are several pathways for becoming a web developer. You can enroll in a computer science degree, teach yourself online, or do a code bootcamp. All are great options and offer differing pros and cons including cost, difficulty, and time commitment. Which path you choose depends on how quickly you want to get out into the workforce. A major benefit of teaching yourself or enrolling in a bootcamp is that you can know how to code, and code well, in 12 - 16 weeks. Either path will be an intense period of learning, but you if you're serious about learning how to code, you can accelerate your career through deliberate practice and study. Teaching yourself to code requires a significant degree of discipling and an ability holding yourself accountable for your learning and job search. With a bootcamp you will have people dedicated to your success in learning and finding a job throughout your bootcamp experience. If you commit to learning the material, daily practice, and building projects, before you know it, you'll find a job as a Web developer!
4. Remote work opportunities
All you need for web development is the internet and a laptop! While not all web development jobs are remote, the technology industry is increasingly offering remote opportunities and flexible schedules for web developers and other digital focused professions.
5. Entry point into other careers and fields related to digital technology.
Web development can be a stepping stone to a career in software engineering, data science, web design, and other fields related to digital technology. Companies that have software products designed for physical systems like automobiles, manufacturing, and medical devices have websites for marketing and use web-based tools for collaboration and communication. Web development also introduces individuals to many transfer skills including computer programming, knowledge of distributed systems, project management skills, and familiarity with software development tools and methodologies.
Core Concepts
Web Browser
A web browser (commonly referred to as a browser) is application software for accessing the World Wide Web. When a user follows the URL of a web page from a particular website, the web browser retrieves the necessary content from the website's web server and then displays the page on the user's device. If you are reading this paragraph, then you are using a web browser right now!
A web browser is not the same thing as a search engine, though the two are often confused. A search engine is a website that provides links to other websites. Connect to a website's server and display its web pages, a user must have a web browser installed.
Web browsers are used on a range of devices, including desktops, laptops, tablets, and smartphones. In 2020, an estimated 4.9 billion people used a browser. The most used browser is Google Chrome, with a 64% global market share on all devices, followed by Safari with 19%.
Hypertext
Hypertext is text displayed on a computer display or other electronic device with links that references other text that the reader can immediately access. Hypertext documents are interconnected by hyperlinks, which are typically activated by mouse click, keypress set, or screen touch. Apart from text, the term "hypertext" is also sometimes used to describe tables, images, and other presentational content formats with integrated hyperlinks. Hypertext is one of the key underlying concepts of the World Wide Web. Web pages are written in programming languages that generate hypertext. As implemented on the Web, hypertext enables the easy-to-use publication of information over the Internet.
Web Server
A web server is computer software and underlying hardware that accepts requests from a web browser and responds with the content of that resource or an error message. The server can also accept and store resources sent from the user agent if configured to do so. This of your favorite block or social media account. When you send a Tweet or a post an update on Facebook, you are sending a request to web server somewhere that handles that task and updates a database to store that information.
HTTP
Hypertext Transfer Protocol (HTTP) is a protocol for communication between computers. HTTP enables the development of distributed, collaborative, hypermedia information systems. It is what enables Web browsers and Web servers to communicate with each other. The protocol serves as the foundation of communication for the World Wide Web. HTTP is what allows hypertext documents to include hyperlinks to other resources that the user can easily access, for example by a mouse click or by tapping the screen in a web browser.
Client-server model
The client–server model is a software architecture that partitions tasks or workloads between the providers of a resource or service, called servers, and service requesters, called clients. Often clients and servers communicate over a computer network on separate hardware, but both client and server may reside in the same system. A server host runs one or more server programs, which share their resources with clients. A client usually does not share any of its resources, but it requests content or service from a server. Clients, therefore, initiate communication sessions with servers, which await incoming requests. Examples of computer applications that use the client–server model are web browsers / World Wide Web, email, and network printing.
HTML
HyperText Markup Language, or HTML is the standard markup language for documents designed to be displayed in a web browser. Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
CSS
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web. CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts.
JavaScript
JavaScript, often abbreviated as JS, is a is high-level programming language, often just-in-time compiled, and multi-paradigm. Alongside HTML and CSS, JavaScript is one of the core technologies of the World Wide Web. Over 97% of websites use it client-side for web page behavior, often incorporating third-party libraries. Most web browsers have a dedicated JavaScript engine to execute the code on the user's device.
Backend (Server-side)
Most large-scale websites use server-side code to dynamically display different data when needed, generally pulled out of a database stored on a server and sent to the client to be displayed via some code (e.g. HTML and JavaScript).
Web browsers communicate with web servers using HTTP. When you click a link on a web page, submit a form, or run a search, an HTTP request is sent from your browser to the target server.
The request includes a URL identifying the affected resource, a method that defines the required action (for example to get, delete, or post the resource), and may include additional information encoded in URL parameters (the field-value pairs sent via a query string), as POST data (data sent by the HTTP POST method), or in associated cookies.
Web servers wait for client request messages, process them when they arrive, and reply to the web browser with an HTTP response message. The response contains a status line indicating whether or not the request succeeded (e.g. "HTTP/1.1 200 OK" for success).
The body of a successful response to a request would contain the requested resource (e.g. a new HTML page, or an image, etc...), which could then be displayed by the web browser.
Static Sites
The diagram above shows a basic web server architecture for a static site (a static site is one that returns the same hard-coded content from the server whenever a particular resource is requested). When a user wants to navigate to a page, the browser sends an HTTP "GET" request specifying its URL.
The server retrieves the requested document from its file system and returns an HTTP response containing the document and a success status (usually 200 OK). If the file cannot be retrieved for some reason, an error status is returned (see client error responses and server error responses).
Dynamic Sites
A dynamic website is one where some of the response content is generated dynamically, only when needed. On a dynamic website HTML pages are normally created by inserting data from a database into placeholders in HTML templates (this is a much more efficient way of storing large amounts of content than using static websites).
A dynamic site can return different data for a URL based on information provided by the user or stored preferences and can perform other operations as part of returning a response (e.g. sending notifications).
Most of the code to support a dynamic website must run on the server. Creating this code is known as server-side programming or backend development.
The diagram below shows a simple architecture for a dynamic website. As in the previous diagram, browsers send HTTP requests to the server, then the server processes the requests and returns appropriate HTTP responses.
Requests for static resources are handled in the same way as for static sites (static resources are any files that don't change —typically: CSS, JavaScript, Images, pre-created PDF files etc).
References
Wikipedia, CSS (2021)
Wikipedia, JavaScript (2021)
Last updated
