Home > Tutorials > HTML/CSS/JS Tutorials > HTML / CSS / JAVASCRIPT Tutorials
HTML and CSS code developing screenshot. Abstract web site source listing on black background with colored syntax

HTML / CSS / JAVASCRIPT Tutorials

Getting Started with HTML

HTML is the basic language used to create web pages. In fact the majority of what you see right now, on your screen, was created through the use of HTML. The tutorials listed within this section will help you get a grasp on some of the key basics of HTML programming; and then continue on to touch upon some more advanced topics that tie in the use of CSS and Javascript with HTML to create more dynamic content types.

Text Formatting

Learn how to manipulate your websites text content by controlling the text size, color, and font type. Furthermore learn how to place emphasis on certain parts through the help of <b>, <i>, and <u> tags.

HTML Entities

Some characters have a special meaning in HTML, like the less than sign (<) that defines the start of an HTML tag. If we want the browser to actually display these characters we must insert character entities in the HTML source.

Creating Links

HTML uses the <a> (anchor) tag to create a link to another document. An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc. Learn how to make the most of links in HTML.

HTML Image Maps

An image map is a graphic that has more than one hyperlink attached to it. They hyperlink that the viewer will follow when clicking on the image depends on which part of they click on. This tutorial will discuss in depth how to create your own HTML image maps.

Proper Use of Heading, ALT & Title Tags

This HTML tutorial covers 3 extremely useful tags and attributes that most people overlook, or do not take advantage of properly. These are the alt tags, title attributes in links and heading tags.

Do More with Horizontal Lines

The <HR> tag is commonly known – however most people don’t realize there are plenty of built-in parameters that let you control things like the height, width, alignment, and color of your horizontal line!

Easily Style Inline Quotations Using The Forgotten <Q> Tag

The <Q> tag is a tremendously under-used element of HTML – one that has been lurking in the shadows for almost a decade! Learn why this tag was forgotten about – and why now is the perfect time to revive it!

Create Accordions Using The New <DETAILS> & <SUMMARY> Tags in HTML5.1

Learn how to make accordions without ever having to use any jQuery thanks to the brand new <details> and <summary> tags that have been introduced in HTML5.1

Getting Advanced with CSS & JS

The following tutorials will incorporate elements of CSS styling and/or Javascript functionality to showcase the various elements and abilities of each programming language.

Understanding the Difference Between CLASS and ID

Before you dig further into CSS and Javascript it’s important to get a good solid understanding of what CLASS and ID selectors are – and how they work. You will use CLASSES and ID’s in every step of the way as you proceed to more advanced website programming.

Night & Day Detection

If we assume that people’s interests vary according to the time of day, your website might be well served by promoting different kinds of content depending on whether its day or night. For example lets say we have two articles, one about the sun eventually burning out, and one about the Hale-Bopp comet. We can make the main article be the sun in daytime, and the comet at nighttime. In this tutorial we are going to use javascript to achieve this effect.

Square CSS Badges

I was playing around with CSS earlier today and came up with something rather interesting, I call them CSS badges since I’m really not sure what else to call them.The code behind these buttons is actually extremely simple and I have commented it along the way so you could easily see what controls what.

Auto Generate Spam-Safe Email Links Using Javascript

Back in 2007 Greg Burghardt published an article on the now-defunct Geocities featuring an extremely creative way to automatically generate email links while keeping your actual email address hidden from spam bots/crawlers. In fear that this function would get lost I have decided to republish it here on the Rapid Purple blog.

About Michael Boguslavskiy

Michael Boguslavskiy is a full-stack developer & online presence consultant based out of New York City. He's been offering freelance marketing & development services for over a decade. He currently manages Rapid Purple - and online webmaster resources center; and Media Explode - a full service marketing agency.

Check Also

Understanding The Difference Between Class and ID

A good buddy of mine has recently started his own learning process diving into HTML, CSS, ...

Like every other website, this site uses cookies to deliver to analyze our traffic. Cookies may also be utilized by our advertisers and partners. By using this website you agree to the use of said cookies. More Information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings, continuing to navigate past this message, or you click "Accept" below then you are consenting to the use of cookies on the Rapid Purple website.

Close