Web development is really the art and craft of building any website, typically with a focus on the "back-end" and code.
When we talk about web development in the context of designing a coffee website or just in general, we're referring to those aspects of creating a website that don't really include design (at least not directly).
Web Developers create websites using a variety of tools and programming languages, with an eye towards building functionality (navigation, features, online apps and tools) first and foremost.
Website builders / content management systems (CMS) make maintenance of a website less reliant on knowledge of programming languages and web development in general, but even with the most streamlined CMS in place there's almost always a need for some development work for more advanced customization.
Because website *functionality* is largerly the domain of web development, when we evaluate coffee websites we view aspects relating to page speed and the overall integrity of the website (meaning things don't "break" when using the website) through the lens of development.
Types of Web Development
Web Development can be be thought of across three different categories:
Front End, Back-End, and Full-Stack. We'll briefly explain what each category means here.
Front-End
Front-end development focuses on the customer facing portion of the website. Basically anything visual you've thought of or designed requires front-end development to make it a reality on your website.
Front-end development continues to grow in complexity, as more and more websites offer increased functionality while still being easy to maintain. Websites accomplish this through more sophisticated implementation of JavaScript and other code.
Back-End
Back-End development consists of everything that's required to make the website functional. eCommerce websites, for instance, will need a database of products and a way of publishing those products on the website. Back-end development focuses on the code, APIs, servers, and databases that are needed to make this happen.
But even non-eCommerce websites rely on databases to publish changes and content, so back-end work is always a part of any website that's being buit and maintained.
Full-Stack
Full-stack development refers to both front and back-end.
This term is mostly used by web developers (and people looking to hire web developers) to communicate that they have knowledge in both aspects of web development.
If you're ever looking for a website developer, one who can honestly claim to be "full-stack" will likely command a high price.
Front-End Development: CSS, JavaScript, HTML
We won't get too deep in the weeds but it's useful to understand some of the commonly used "building blocks" employed to build and develop websites.
Basically most websites leverage a combination of HTML, JavaScript, and CSS when built. These are all types of programming languages / code that are used by internet browsers to "render" (put together + show) a website.
HTML
HTML stands for "Hyper Text Markup Language" and is the more foundational code used to develop a website. HTML can be thought of as the bones of the website, and specifically builds out and defines the structure of a website so browsers understand how to present it.
HTML defines the structure as a series of "elements". Each HTML element functions as a label to identify parts of the website like the title, the header, the links etc..
CSS
CSS stands for Cascading Style Sheets and is commonly thought of as the "window dressing" or the "clothing" of a website. It helps to design and define the visual elements, like the colours, the fonts, and the dimensions of many of the visual elements.
JavaScript
JavaScript is a coding language that is used develop interactivity and funtionality of a website. Anything the website does in response to user behavior is often built in with JavaScript. So the impact of clicking a button, or hovering over, or adjusting your preferences on a website etc is typically the result of the JavaScript implementation. Note, CSS can be used for some interactions but JavaScript is more robust and employed for more complicated functions.
Back-End Development: SQL, PHP / PYTHON
SQL
SQL stand for Structured Query Language and is a programming language used to pull information from databases and manipulate the data as needed.
In the context of websites, this part of development knowledge is used to build and manipulate databases that are used for "dynamic" content. In other words, if something on the website changes based on user interaction etc. and something non-boiler plate needs to be retrieved and shown to the visitor (like specific customer information after they log in to a website) than SQL will facilitate this.
PHP, Python, etc..
PHP stands for "Hypertext Preprocessor" (this is what's called a "recursive acronym").
Python is just.. Python (named after Monty Python).
Both of these are programming languages are mainly used for what's called "server-side" scripting. Client-side scripting (HTML, CSS, JavaScript) build the website within the browser while server-side scripting runs on the web server and usually handles functions relating to how content is stored and managed on the server.
According to WeTechs currently Python is used in the server-side programming of 79.1% of websites.
Like many server-side scripts, these languages are generally used to collect form data (like is someone signs up to your newsletter) and write out complicated directions to servers and databases that are needed for website functions and features.
What's the difference between Web Development and Web Design?
Simply put, Web Design is the definition of the look and functionality of a website. A Web Designer will map out the wireframes, color palettes, font selections, and other visual elements of a website before any code is written or anything is actually built. So as a discipline website design is more focused on the "what".
Web development is the process of determining "how" all these elements will be brought to life through a combination of back-end (databases and servers) development and front-end end development (HTML, CSS, JavaScript etc..).
It's useful to think of Web Development in these terms. Because the "how" will have big implications on the quality of the website ultimately.
For instance a website designer could create a beautiful and ambitious template and design for a website, with tons of interactive videos and complex interactive animations.
Often the more complex the visual elements are, the harder the Web Developer will need to work. This is because the web developer, concerned primarily with the "how", willl need to balance other concerns.
Those concerns include the impact on how fast the page loads, what the risks are of the page breaking (if complicated code and many types of interactivity are required), impact to back-end resources and server response time etc..
Another important consideration is what impact the design has on maintaining the website. Even with a content management system (CMS) employed, adding more complicated design can adversly impact the usability and speed of the back-end of the website, resulting in long processing times to publish or organize content on the website.
The impact of web development can be less obvious than design, but it's an important consideration not only when it comes to evaluating how other coffee websites and work and taking inspiration - but when considering your own website.
If you use a CMS or something like Shopify, as mentioned elsewhere, you'll ultimately choose what's called a "template" or "theme". That approach means much less need for web development work, but since those themes rely on the same frameworks and programming languages the way they are built will ultimately impact th quality of the website.
Some basic understanding of Web development is useful in analyzing websites or deciding how your own will be built, as the implications will extend to the speed and, ultimately, usability of any website.