Right after “Where is the best place to learn?” perhaps the most commonly asked question I hear from folks getting into code is “What web development books should I get to learn?” Well, consider this an answer to that question as I’ve curated a list of books that are not only great for getting into front-end development but also freely available.<\/p>\n\n\n\n\n\n\n
This is the bulk of where we’re going to hang out because, well, this is a site mostly<\/em> about CSS!<\/p>\n\n\n Adam Schwartz<\/a> covers six CSS concepts in this book, including the box model, layout, tables, color, typography, and transitions. These are things even stump some seasoned CSSers, some of these concepts might be confusing. Adam has gone to a great length to demystify each.<\/p>\n\n\n\n In addition to the book being a great primer on complex CSS concepts, I love how each of the CSS properties mentioned throughout the book is clickable so you can always click on them to see how each is applied. There are many illustrative examples and recommendations for further reading, should you desire to learn more about each chapter.<\/p>\n\n\n\n I found the chapter on colors very interesting not only because it gets into the best practices for using color accessibly, but also because there’s super practical applications, like when Adam gets into using CSS to support an organization’s branding.<\/p>\n\n\n\n Straight from the introduction:<\/p>\n\n\n\n You won\u2019t find any code in here to help you build better websites. But you will find ideas and approaches. Ideas are more resilient than code. I\u2019ve tried to combine the most resilient ideas from the history of web design into an approach for building the websites of the future.<\/p><\/blockquote>\n\n\n\n What Jeremy does so well is describing soft skills, like planning, outlining, and approaches for writing code. So, rather than dropping in code snippets throughout the book, what you’ll find are details about code strategies, such as progressive enhancement, deciding on what tooling to use, and the challenges of writing future-friendly code.<\/p>\n\n\n\n And for those of you who have not had the pleasure of listening to Jeremy narrate content (like he does in the Web History series<\/a>), there’s an audio file available to download.<\/p>\n\n\n\n It may be written in 2006, but Simon’s coverage of web standards and accessibility is timeless and relevant today. He provides an understanding of interoperability as well as approaches for building web applications, including the early planning phases that often go overlooked.<\/p>\n\n\n\n The book has two broad parts which are further divided into 16 chapters. Part 1 covers CSS topics, like working with text, links, lists, backgrounds, images, tables, and forms. It really doesn’t skimp on the details either.<\/p>\n\n\n\n Part 2 is all about layout, shedding light on usability and layout manipulation, plus a handy case study. The chapters are arranged in such a way that one chapter naturally flows into the next. Each chapter also contains a concluding section that highlights all the important concepts covered in the chapter.<\/p>\n\n\n\n Indeed, the book provides novice developers a solid background in CSS and helps them gradually with more advanced concepts. It will make your CSS journey easier.<\/p>\n\n\n\n CSS and HTML are often taught together, which can be especially helpful when you’re writing your first lines of code and want to know how the two languages interact with one another.<\/p>\n\n\n Shay refers to this book as a One profound thing about this great book is that, Shay built a complete project from scratch throughout the 12 lessons and at the end of each lesson, he provided a summary and links to the current state of that website (so you can compare with yours if you follow along) and the source code at every stage of the lessons.<\/p>\n\n\n\n If you’re a learner who learns by doing, you will find this material very useful and by the time you’re done, you will have developed a multi page functional website.<\/p>\n\n\n\n An advanced sequel of the course is also available free via the same link.<\/p>\n\n\n\n Can you possibly learn everything there is to know about the HTML and CSS in seven days? Probably not, but that’s why this 2017 book by Michael Knapp is focused straight on the fundamentals. Michael delves into a brief history lesson before launching into HTML and CSS structure, logic, and presentation. You’re going to get all up to speed to the point where you should feel pretty confident about putting a basic webpage together, plus a few extras along the way as the book touches on SEO and analytics.<\/p>\n\n\n\n The book is comprised of simple programs that you can run on your computer if you wish to follow along.<\/p>\n\n\n\n The ebook version is available for free on Apple Books, but there is a Kindle version as well if you already have a subscription there.<\/p>\n\n\n\n Did you know that CSS-Tricks has a book on CSS too? It would be silly to leave that off this list because what you get is a collection of classic CSS trickery that’s explained by none other than Chris Coyier. In fact, Chris handpicked all of the examples covered in the book from his many, many (many!) years running this here site from the plentitude of tricks that have crossed his desk.<\/p>\n\n\n\n Each trick solves a particular pain point. For instance, the first “Pin Scrolling to Bottom” trick<\/a>demonstrates how the Code is just as much about how<\/em> we write code and collaborate on projects with others as it is about the actual code we write. The following books are great starting points for everything from planning and project management to communicating and collaborating with others.<\/p>\n\n\n Ellen addresses something in this book that we all have to deal with: collaborating with others. And it’s no small deal \u2014 the book is divided into four parts that go super deep into things we can go to work well with others:<\/p>\n\n\n\n As a content strategist, Ellen has the right kind of experience to help anyone be part of a collaborative project, or get the most from a collaboration.<\/p>\n\n\n\n This free ebook features a seven-step design process that’s meant to help define the workflow for today’s brand of web design.<\/p>\n\n\n\n That includes:<\/p>\n\n\n\n Anyone starting a new design project or in the middle of a design project will find the invaluable insights throughout the book. And what’s most remarkable is how this is written in a way that almost feels as though you are being hand-held through an entire project from concept to completion.<\/p>\n\n\n\n It seems many organizations tackle design differently. But author Mark Boulton documents a thorough design workflow in Designing for the Web<\/em> that de-mystifies many challenges and covers everything you need to know.<\/p>\n\n\n\n What’s unique about this book is that it’s really about work. Sure, there’s a bunch of hugely valuable information on design best practices for things like typography, color, and layout, but what you’re really going to take away from this book is how<\/em> these fit into a design workflow. It teaches you how to research, the technologies we have to implement ideas, and ultimately, how to work with others as well as clients \u2014 perfect fodder for folks including design leads, project managers, freelancers, or anyone who’s involved in the project delivery process.<\/p>\n\n\n\n In this book, the team behind the popular Tower client for Git<\/a> introduce learners to the crux of version control system using Git. Developers who work in teams will particularly find this very useful, as it helps in effectively collaborating with team members building different features of a project even when you’re thousands of miles apart. That said, it’s still really great for anyone who might be shy of the command line and wants to build confidence there.<\/p>\n\n\n\n And since the book is by the maker of an application that interacts with Git, you’re going to get a nice dose of using Tower as a GUI in addition to working directly on the command line.<\/p>\n\n\n\n So, whether it’s committing, branching, merging, pull requests, forking work, or handling merge conflicts, you’re going to get a whole lot from this book.<\/p>\n\n\n\n Learning JavaScript always seems to be en vogue. In fact, Jason Rodriguez wrote about the JavaScript learning landscape in 2018<\/a> and provided a nice list of free books. Not too much has cropped up since then, but here are my thoughts on the following books.<\/p>\n\n\n Eloquent JavaScript<\/em> really lives up to its name. Personally, I consider this one of the best-written JavaScript books I have ever come across. Marjin’s writing style is engaging, especially with how he introduces programming concepts and carries the reader along. In his words, the book is simply about The book is a deep dive into JavaScript spread across three parts and 21 chapters. You’re going to read a bunch about basic programming concepts, such as values, types, operators and functions, to advanced concepts like regular expressions, modules, the DOM, and asynchronous programming. He starts every chapter with a somewhat philosophical quote to prepare the reader for what lies ahead and then dives straight into the topic.<\/p>\n\n\n\n Plus, there’s three projects to help you practice your newfound skills.<\/p>\n\n\n\n JavaScript promises were introduced in 2015 as part of the ES6 specification to handle asynchronous functions in JavaScript. According to MDN<\/a>:<\/p>\n\n\n\n A promise is an object representing the eventual completion or failure of an asynchronous operation<\/p><\/blockquote>\n\n\n\n In this 51-page book, Nicholas explains the concept of Promises over three chapters: Basics, Chaining Promises, and Working with Multiple Promises. Although the link to the book we’re providing<\/a> is the free community version, the full version (available on Amazon<\/a>) has two more chapters on Async Functions and Unhandled Rejection Tracking. Nicholas simplified the concept of Promises with several illustrations and examples. You will learn how to use Nicholas is a veteran JavaScript book author who has been writing about JavaScript for over 15 years. He brings his wealth of experience to bear in this book (just as he has in his work here at CSS-Tricks<\/a>).<\/p>\n\n\n\n This book is presented in four chapters covering more than 30 topics. Here’s how it breaks down:<\/p>\n\n\n\n There’s actually a newer edition of this book<\/a>, but the 2012 edition is the one that’s free<\/a>. Either way, it’s a good opportunity to learn from John Resig; you know, the guy who created<\/em> jQuery.<\/p>\n\n\n\n The techniques covered here include closures, functions, the DOM, object orientation with prototypes, and cross-browser strategies. One nice perk is that each chapter is followed by a brief recap that’s perfect for a reference once you’ve finished the book.<\/p>\n\n\n\n The concept of design pattern refers to a reusable solution to a commonly recurring problem in application development. In this book, Addy Osmani covers the implementation of common design patterns using ES6 and beyond, as well as React-specific design patterns, which can be super handy when working on complex React apps where maintainability is a primary goal.<\/p>\n\n\n\n Some of the patterns covered include Singleton, Proxy, Provider, Prototype and Observer patterns. In some cases, Addy includes pros and cons of using some of these patterns and how they may affect the performance of your application.<\/p>\n\n\n\n While the title might be a bit provocative, what Kyle is implying here is that he writes this book assuming you have no prior JavaScript experience whatsoever.<\/p>\n\n\n\n Kyle begins starts by going through the rudiments of programming as seen through the lens of JavaScript. He then proceeds, in subsequent chapters, to introduce more advanced concepts like scope and closure, the There’s a lot of excellent details and explanations in here, and Kyle makes it super easy to understand by avoiding super technical jargon. There is also many exercises designed to reinforce your learning. This book will definitely get you up to speed with JavaScript. There’s second edition of the book in the works<\/a> that you can track in GitHub.<\/p>\n\n\n\nThe Magic of CSS<\/em> by Adam Schwartz<\/h4>\n\n\n
Resilient Web Design<\/em> by Jeremy Keith<\/h4>\n\n\n
Beginning CSS Web Development: From Novice to Professional<\/em> by Simon Collison<\/h4>\n\n\n
Books on HTML & CSS<\/h3>\n\n\n
Learn to Code HTML & CSS<\/em> by Shay Howe<\/h4>\n\n\n
simple and comprehensive guide dedicated to helping beginners learn HTML and CSS.<\/q> He does this by focusing on common elements of front-end design and development. Some of the lessons covered are Box Model, Positioning, Typography, Background and Gradients, Lists, Media, Forms, and Tables. In the first chapter *Building Your First Web Page, Shay analyzed the contents of a typical website including elements, attributes and setting up the HTML document structure, code validation, selectors and CSS resets. I find the book very instructive especially as it went beyond the surface to address many key concepts with code samples, which you can follow along.<\/p>\n\n\n\n
HTML & CSS: Learn the Fundamentals in 7 Days<\/em> by Michael Knapp<\/h4>\n\n\n
The Greatest CSS Tricks Vol. 1<\/em> by Chris Coyier<\/h4>\n\n\n
overflow-anchor<\/code><\/a> CSS property can be used to create the same chat-like interface of a tool like Slack, where the screen is anchored at the bottom in a way that feels as though the page is scrolling for you as new items are added.<\/p>\n\n\n\nBooks on process<\/h3>\n\n\n
Collaborate: Bring People Together Around Digital Projects<\/em> by Ellen De Vries<\/h4>\n\n\n
The Modern Web Design Process<\/em> by webflow<\/h4>\n\n\n
Designing for the Web<\/em> by Mark Boulton<\/h4>\n\n\n
Learn Version Control with Git<\/em> by Tower<\/h4>\n\n\n
Books on JavaScript<\/h3>\n\n\n
Eloquent JavaScript<\/em> by Marijn Haverbeke<\/h4>\n\n\n
instructing computers and making them do what you want them to do.<\/q><\/p>\n\n\n\n
Understanding JavaScript Promises<\/em> by Nicholas C. Zakas<\/h4>\n\n\n
then()<\/code>, catch()<\/code>, and finally()<\/code> and understand how to chain multiple promises together. Nicholas also covers the assignment of rejection and settlement handlers. You may want to give the book a read to solidify your understanding of the topic.<\/p>\n\n\n\nSpeaking JavaScript<\/em> by Axel Rauschmayer<\/h4>\n\n\n
Secrets of the JavaScript Ninja<\/em> by John Resig and Bear Bibeault<\/h4>\n\n\n
Learning JavaScript Design Patterns by Addy Osmani<\/h4>\n\n\n
You Don’t Know JS<\/em> by Kyle Simpson<\/h4>\n\n\n
this<\/code> keyword, object prototypes, async<\/code>, and performance.<\/p>\n\n\n\n