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.
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:
- 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.||
|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.||
|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.||
|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.||
|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.||
|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.||
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.