Intro to Web Development

So you'd like to make a website. Perhaps you've thought better of all the bloat that permeates the modern web, or you'd just like to have more control over your internet presence than a Twitter or a LinkedIn can provide.

Tesserae is my attempt at teaching you how to build a website, letting you focus on the concepts (like changing your text's color, or adding MP3s) rather than the technical goop that can trip you up on other sites. Tesserae tells you only what you need to know for now, and then gives you links to second opinions and other materials to go off of in case you'd like to dig deeper.

Tesserae's mission

In short, Tesserae will teach you how to produce a website using the rawest and fastest of materials, namely, hand-written HTML and CSS. With these, you have near full-control over your site's layout, content, and appearance. More accurately, Tesserae will teach you:

How to get text, images, audio, video, and downloadable files onto your site.
How to link to other pages, either on your own site or on the rest of the web.
How to customize the look of your site using CSS, everything from how it's laid out to fonts, colors, margins, backgrounds, and virtually any other visual customization you can think of.
How to make your site easy for computers and search engines to read through.
How to make your site mobile-friendly, so it looks nice on even the smallest phones.
How to get your site standards-compliant, to make things easier on you and your visitors.

Tesserae will not teach you the following:

Web app development. Web apps use a variety of advanced technologies (such as JavaScript, PHP, SQL, Ruby, or Perl) in addition to HTML and CSS to provide advanced functionality on par with any other program you'd run on your computer. You likely use web apps day-to-day—social media sites like Facebook, Twitter, YouTube, and Instagram are all examples of web apps, as are office packages like Word Online and Google Docs. These are hugely complicated and out of the scope of Tesserae.
WordPress, blogs, and CMSes. WordPress is, generally, blogging software. You might've heard it referred to as a content management system, as it runs underneath the site and delivers its pages, images, and media. Either way, WordPress themes are out of Tesserae's scope and too broad of a topic to delve into. Many other websites are dedicated to WordPress development if you'd like to use that for your site.
CSS frameworks such as Bootstrap. CSS frameworks help to give experienced site designers a head start on designing and prototyping a site's layout. The most famous of the lot is Bootstrap—you've seen it in use on sites like Indeed, Reuters, NBA.com, Lyft, Fox News, and just about any site with a big stock photo stretched across your screen. They're all different, and they (usually) go against our premise of light, minimalist site design. (I'd be a hypocrite if I swore them off completely—Tesserae's built with one, mini.css.)
Asset creation, like creating graphics and sound for your site. If you can view it on a computer, you can get it onto a website. Photos and art will do. So will MP3s. Videos can be hosted on a website. Programs, source code, your own thoughts, all that—you can add it to your site, but Tesserae won't tell you how to actually make these things. You'll have to provide all the content yourself.

What's covered on Tesserae

This is a brief rundown of what every section on Tesserae covers, and what you should expect to know coming out of them. Don't worry if this all seems daunting; Tesserae's written so you can skip around, and you don't need to know everything all at once.

Section Name	Description	Topics Featured
Before You Begin	This section aims to introduce Tesserae, explain a few basic concepts, and build up your toolkit so you can start building sites.	What a text editor is, and why Web browsers, and the important differences between them Web-related file extensions How best to use Tesserae as we get into the weeds of web design
HTML Basics	This section finally gets you on board with making a very simple site, easing you into the syntax and showing you how elements on a page work together.	Elements, tags, and attributes How to emphasize text Giving pages structure with paragraphs and headings Links, both on your site and offsite Lists, both bulleted and numbered Images and file formats
Advanced HTML	Once you've gotten the hang of building basic sites, it's time to expand a little and work on theory, explaining why certain things in HTML work as they do and demonstrating some more fancy things you can do to a page.	Tables Pre-formatted text, blockquotes, and code samples IDs, classes, and internal page links Parent and child elements HTML5 audio and video `<meta>` and OpenGraph Image maps, for making different sections of an image clickable Machine-readable HTML Using HTML semantically
CSS Basics	CSS is how you give your pages layout, color, and visual interest. This section walks you through some basic styling you might want on a web page.	The basic syntax of rulesets, selectors, and declarations Units of measurement used to set sizes, heights, widths, and margins Setting text and background colors Fonts, custom ones, and text sizes Floating, centering, and moving things around on a page The "box model" and how it pertains to margins and padding
Advanced CSS	This is the most advanced section currently on Tesserae. This is where we really get into building "responsive" layouts that change to fit the screen, loading different stylesheets for different devices, and going more in-depth on selectors and pseudo-classes.	Advanced positioning Media queries, for detecting screen size and device type Pseudo-classes, child selectors, and combinators Viewport units and calculating spacing and sizing dynamically Flexbox, which can reorder and resize elements on a page on the fly Grid, for building complex, two-dimensional layouts
Extras	These pages are more suited towards giving you extra food for thought or fun tools to play with. They also discuss more webmaster-specific topics for optimizing your site's performance and keeping unwanted eyes from wandering.	Readability and making your site easier on the eyes HTML and CSS validation, and why you should check for errors Index pages, and customizing directory listings Filler text (lorem ipsum) for layout prototyping Favicons and app icons `.htaccess`, for optimizing and safeguarding your site

What you should know before starting Tesserae

It does take some technical know-how to make a website, admittedly, but less than you might think. If you're even somewhat tech-savvy, or you work on a computer regularly, you can make a website with Tesserae.

Can you copy-and-paste from a web browser to a text editor on your computer?
Do you understand file sizes, and how smaller is better on the internet?
Do you know what a URL is? Do you know what a file path is?
Do you know what file extensions are?
Do you know what a web host is, and what its purpose is?

There's only so basic I can go with this, but if you can handle files, juggle links, and read carefully, you'll be right at home with Tesserae.

In any case, good ol' stubbornness is an asset here. The web can be a confusing, arbitrary, and occasionally limited place. You'll get strange errors as you proceed. Things might not work at first, or at second. You'll have to learn syntax. There is a bit of a time investment with web development, but I can assure you—if you stick with it, you'll be part of a dying breed of those who can sit down and build a website by hand. You won't be held up by tools or reliant on anything but the outer limits of the web.

And that, if I may be a little biased, is valuable indeed.