DEV Community

Miranda
Miranda

Posted on

5 Best Free Books for Front-End Developers

Free books for front-end developers are in abundance. You can become a self-taught front-end web developer at no cost, but scouting the resources to get started isn't always easy.

I took the guesswork out of the search for free front-end development books by compiling a list of stellar and highly-regarded resources in the front-end development community.

In this review, "books" are defined loosely as resources you can read in chronological order without direct interaction. While some of these resources are free from a website, this definition suggests you can theoretically print out these resources and read them from your nightstand.

Read on to discover the best programming books for front-end web developers.

5 Free Books

With these free programming books, you can create a curriculum for yourself to learn front-end web development from total beginnings to advanced users and beyond. I have chosen resources that focus on different areas of front-end development, such as HTML & CSS, Javascript, and even getting that tech job.

These books are arranged in recommended reading order.

Free Book #1: HTML & CSS is Hard

HTML & CSS is Hardis a free beautifully-designed and explained deep-dive into HTML and CSS. The diagrams are clean, modern, and intuitive. The writing style is to-the-point, conversational, and easy to follow. It's truly a stunning free resource that any beginning front-end developer should read.

The guide explains itself best:

This 14-chapter tutorial is one of the friendliest HTML and CSS guides on the Internet. We'll walk you through everything from selecting a good text editor (which is surprisingly important) to building full-fledged, professional-quality web pages from scratch.

The guide is also toting itself as "the only introduction to HTML and CSS that you'll ever need."

So what is contained in this guide? Quite a lot.

Below I include roughly everything this guide teaches. While much of what is there is basic and for true beginners, some sections are valuable enough to review for anyone. For example, I haven't hosted local web fonts in ages, so it's worth revisiting for me.

The guide explains...

  • What HTML, CSS, and Javascript are and how they work together.

  • Text editors and ways to use them.

  • Creating, navigating, and building file systems.

  • Structure of an HTML file.

  • Titles, paragraphs, headings, unordered lists, ordered lists, emphasis, strong, line breaks, and horizontal rulers.

  • Anchors, links, link targets, and the difference between absolute, relative, and root-relative links.

  • Images, various image formats, image dimensions, and alt text.

  • Setting document language and character sets.

  • HTML entities such as reserved characters, quotes, and UTF-8.

  • Stylesheet setup and linking.

  • CSS comments.

  • Setting multiple properties to an element and selecting different elements.

  • Units of measurement such as pixels and ems.

  • Styles for lists.

  • Reusing stylesheets site-wide.

  • Styles for underline, text alignment, font weight, and font style.

  • How CSS cascades: page styles vs inline vs multiple stylesheets.

  • The box model: inline elements vs block elements, box alignment, changing block behavior, and block spacing.

  • Class selectors and how to re-use style with them.

  • Divs and div containers.

  • Pseudo classes and hover state.

  • ID selectors and URL fragments.

  • CSS specificity

  • Floats and layout behavior for various layout types.

  • Flexbox

  • Element positioning with relative, absolute, and fixed.

  • Positioning elements for menus, dropdowns, and animations.

  • CSS media queries, mobile-first development, and disabling the viewport.

  • Making images responsive for various screens including retina.

  • Semantic HTML with article, section, nav, header, footers, asides, and more.

  • HTML forms and its various form fields.

  • Web typography: web fonts, font hosting, and text styles.


For the four other free books:
Read More ❤️️❤️️❤️️

Latest comments (1)

Collapse
 
princealarming profile image
Prince-Alarming

Thank you Miranda for this article(and the website).