★ HTML & CSS ★

Lesson List


HTML: Basic Syntax

HTML: Forms ✎

HTML: Tables ✎

HTML: Embedding Media ✎


CSS: Basic Syntax

CSS: In-Line vs External Styles

CSS: Margins and Padding ✎

CSS: Backgrounds ✎

CSS: Buttons & Borders ✎

CSS: Resizing for Smaller Screens

CSS: Navigation Bars Using Lists ✎

CSS: Page Columns ✎

I am not technically a professional, so what I plan to teach you is everything I learned over the course of at least 8 years. I am mostly self-taught, but I also paid for and completed college- and industry-level curriculum.

If you would like a representation of my skills, this whole website was coded by yours truly.

Many of the lessons are project-based, denoted by "✎". Each one draws from real exercises I did on my own and through college and professional courses. By doing it yourself, you will gain a better understanding of how everything works together.

Where should you begin?


If you have zero experience, you should go over the basic syntax of HTML. It differs greatly from the way CSS is structured, so I highly recommend learning the bones of web-coding first to get an idea of what each of a web-page's elements are.

For those who have a general idea of what they're doing, but they are having a hard time figuring out how to make things look nice, then the CSS lessons would be a good place to start.

If you have a good amount of web-coding under your belt, these guides may not be right for you.

What text editor do you need?


Notepad is a program that comes free on Windows computers (I don't use a Mac, so I can't tell you what to use there). It is very limited, at least the one that came on my desktop.

Atom is a free text editor that had been available for a while, but it appears to have been sunset. Downloads are still up for it, but it will likely never recieve updates.

I personally use (and love) Sublime Text. The version I use is Sublime Text 3, but there have been more recent versions released. They have a free evaluation period (trial) for the program, but there's no enforced time limit for it. I personally paid for a license because I ended up using it so much that I wanted to support the development. The license is a one-time purchase.

Despite Adobe DreamWeaver being somewhat of an industry standard and having a real-time preview of what you are coding, I hated working with it in college. The preview almost never accurately reflected what the actual web-page looked like when I opened the HTML file in an actual web-browser. Something was always off, and it was a pain to compensate for. Apart from the expensive subscription fee, the frustrations I had with actually using it were enough for me to not recommend it.