Web Developer Fundamentals
Web development is a vast field involving the creation and maintenance of websites and web applications. It encompasses a wide range of skills and technologies, essential for anyone aspiring to be a web developer.
Abbreviations
*[AJAX]: Asynchronous JavaScript and XML
*[API]: Application Programming Interface
*[CLI]: Command Line Interface
*[DNS]: Domain Name Service
*[HTTP]: Hypertext Transfer Protocol
*[VCS]: Version Control System
*[WSL]: Windows Subsystem for Linux
Introduction
You've been using the internet your entire life - chances are you've never really sat down and thought about the mechanics behind how it works. Well, it's not magic, but it's not rocket science either. The internet is built upon a foundation of agreed-upon protocols, the ones we'll be looking at handle data transmission. We'll go over some of the most important principles like HTTP, GET vs. POST, DNS, and the Request/Response Cycle.
This unit will explore how the internet works and the various protocols that enable browsers to send and receive data. We'll walk you through how searching for a URL returns a fully functional web page. This new knowledge is guaranteed to impress strangers at parties, but more importantly, most phone technical phone screens will quiz you on how stuff like the DNS works. Your ability to land an in-person interview will be directly tied to your ability to explain the concepts in this unit to a recruiter, concisely. You'll also learn about AJAX and how to write asynchronous code—which will enable you to write code that continues to execute while waiting to receive the response for a fetch request.
There are fundamental tools that every developer needs to know outside of programming languages: version control and using your Terminal’s command line. Knowing these are as basic and necessary as learning to tie your shoes and dribble before you play a game of basketball. These tools can be a bit tricky at first, so was tying your shoes, but we’ll walk you through it. Soon these commands will be second nature.
The command line allows you to interact directly with your computer through typed commands. For instance, if you wanted to open up iTunes you could click on the icon, like you've been doing all your life. But if you wanted to open an application like a developer, you could type a specific statement into the command line, and it would open. There’s so much you can do with your computer you don’t even realize yet.
If you’ve ever asked yourself how a team of developers collaboratively make changes to the same codebase, the answer is through version control. Git and the platform GitHub are the most widely used form of version control in the world. On GitHub, you can save the code you’ve been working on for your team to access, grab the changes they’ve made this week, and, if anyone breaks anything with an update, simply download an earlier version of your code that works.
You’ll be pushing and pulling, essentially saving and retrieving, code from GitHub through the command line.
Goals
Gain a conceptual understanding of how the internet works,including learning about the protocols that power the web
Learn how to access other people’s publicly available data through APIs
Learn how JavaScript can be used to request and receive data
Learn about AJAX and how to write asynchronous code
Learn how to use the command line in your computer’s Terminal
Learn how to use Git and GitHub for version control
Core Areas of Web Development
HTML (HyperText Markup Language)
Role: The backbone of any website, defining the structure of web content.
Basics: Tags, elements, attributes, and document structure.
CSS (Cascading Style Sheets)
Role: Responsible for styling and layout of web pages.
Basics: Selectors, properties, values, and layout techniques like Flexbox and Grid.
JavaScript
Role: Adds interactivity and dynamic features to web pages.
Basics: Syntax, functions, DOM manipulation, events, and ES6+ features.
Front-End Development
Focus: The visual part of the website that users interact with.
Technologies: HTML, CSS, JavaScript, along with frameworks like React, Angular, Vue.js.
Back-End Development
Focus: Server-side development, dealing with databases, server logic, and application integration.
Technologies: Languages like Python, Java, PHP, Ruby, Node.js; databases like MySQL, PostgreSQL, MongoDB.
Responsive Design
Concept: Designing websites to look and function well on all devices and screen sizes.
Techniques: Media queries, flexible grid layouts, responsive images.
Accessibility
Importance: Ensuring web content is accessible to all users, including those with disabilities.
Standards: Web Content Accessibility Guidelines (WCAG), ARIA roles.
Cross-Browser Compatibility
Challenge: Ensuring websites work consistently across different web browsers.
Tools: CSS normalization, feature detection (Modernizr).
Version Control Systems
Purpose: Track changes in code, collaborate with others.
Tools: Git, GitHub, GitLab, Bitbucket.
Basic Understanding of SEO
Goal: Optimize websites to rank higher in search engine results.
Elements: Keyword research, on-page SEO, link building.
Web Development Tools
IDEs/Code Editors: Visual Studio Code, Sublime Text, Atom.
Developer Tools: Browser dev tools for debugging and optimization.
Conclusion
Web development fundamentals form the foundation of creating and managing effective web solutions. A solid understanding of these core concepts is essential for any web developer, whether focusing on the front-end, back-end, or full-stack development.
Glossary
A definition list or a glossary:
- First Term
This is the definition of the first term.
- Second Term
This is the definition of the second term.