Part 3 - Client-side

We can think of web development as two main branches of development: client-side (frontend) and server-side (backend), with HTTP being the network protocol that glues them together. On the front end, HTML is foundational - we don't have web pages without HTML. Part 1 of this book covered the core technology - HTML, HTTP, and server side development. Part 2 refined our approach on the backend. We went from writing extremely basic and limited web servers to using Express, Pug Templates, Databases. We implemented state managements (cookies, sessions) and authentication.

Now it's time to jump over to the other side. Client side. Our web pages don't have any style yet - and we're going to change that with CSS. Our web pages are completely static, and we are going to learn to change that with client side JavaScript. Along the way, we'll see modern CSS frameworks, learn responsive design and how to target multiple devices. We'll take a look a modern JavaScript frameworks (Vue) and architecture patters (Single Page Applications) along with HTMX and the HATEOS movement.

Over the next two chapters, we are going to cover the basics of CSS - Cascading Style Sheets. A word of caution: CSS is a large, and incredibly powerful language for styling. CSS has grown in sophistication over the past decade, and this book will not attempt to cover all of what we can do with CSS. To truly master front end CSS development, you will want to learn CSS in more depth than what we cover here. The next two chapters introduce you to CSS, and give you everything you need to start making reasonable and professional looking web applications. CSS features like transitions, animations and functions will take you even further - allowing you to achieve almost every visual style and effect you've seen on the web purely through CSS (and not JavaScript). Those features are outside the scope of this book though. There will be links throughout the text to the Mozilla Developer Network, which is more extensive. It's smart, if you are new to front end development, to learn the basics of CSS first - and not to get terribly bogged down in the more advanced parts. What we cover here will be sufficient, and once you've seen the full picture of front end development, you can double back and check out the more advanced topics!