Clearly, you are not the first person to construct a website. Rather than reinvent the wheel, you can lift, borrow, or copy ideas and even scraps of code from other websites for use in your websites. In some cases, these scraps have been organized into frameworks and libraries that provide code universes that make it easy to implement common features in HTML pages. In some ways, this is similar to creating persistent includes in BBEdit, and then reusing them over and over, instead of writing the same code from scratch each time.
Code libraries are typically lower-level functions that have been organized and optimized, with easier access for you, the coder. The most famous one, jQuery, is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. There are others as well, such as MooTools and Prototype.
jQuery and JavaScript are so powerful that you can use them to build web pages on the fly, but that is outside of the scope of this tutorial.
Because JavaScript is so powerful and jQuery makes JavaScript’s power so easily accessible, there is a temptation to use them even when PHP is available, which I think is a mistake. In my humble opinion, if PHP is available on your hosting server, use it to construct the static page components, using jQuery and JavaScript to deal with user interactions and appearance issues that would be agonizing to deal with in HTML or PHP.
Think of it this way: You could use jQuery to write the contents of a web page’s <head> … </head> section, but if anything happened that caused jQuery not to load, your page would not have any styling, etc. This would be bad.
If you were born with the design gene, you may not need anything more than a blank CSS file (and maybe a copy of Normalize.css) to make your magic. If you are design-deficient, there are CSS frameworks out there to help you construct a web design that isn’t overtly awful. Here are a few that come to mind:
With each of these, you include a link to the CSS file (and sometimes a link to the JavaScript file), and you get all kinds of stylistic and utility goodies, such as responsive images and navigation schemes. Best of all, even if the out-of-the-box version isn’t exactly what you are looking for, you can add your own touches to customize the final appearance, either through a separate CSS file that you load after the framework CSS, or through changing the base LESS or SASS file(s) that serve as the basis for the framework you are using. A separate CSS file is best for minor changes, while getting into the LESS or SASS files gives you a tremendous level of control. For more information, see the CodeKit section below.
Bootstrap appears at the top of the list above for two reasons. First, it is one of the most popular — if not the most popular. Second, Bootstrap code validates with BBEdit. The others either do not validate, or do not offer as much out of the box
as Bootstrap, or have less accessible documentation. They may be cool, but for me, the cool factor is outweighed by the ability to check my site’s syntax without stumbling over a bunch of exceptions, so Bootstrap is the way to go. Blueprint, which is what Bare Bones Software uses as a basis for its site, is runner-up because doesn’t have as many built-in styles and features as Bootstrap, but it does validate.
You can get an overview of Bootstrap here, get the Bootstrap source files and documentation here, or get links to the Bootstrap CDN here.
Font Awesome and Google Fonts.