These free mini-courses will give you a strong foundation in web development. Track your progress and access advanced courses on HTML/CSS, Ruby and JavaScript for free inside our student portal.
Scroll down...
In this demo we'll walk you through the most commonly used HTML elements. We'll also show you some of the new HTML5 features that make writing HTML today more effective than it was with previous versions of HTML.
The project repo for this demo can be found here.
Once you have the repo cloned or forked you can fire up a local server in the project directory with $ ruby -run -e httpd . -p 3000
and then open it in your browser at http://localhost:3000
. Click around the links and have a look around the code!
When you open up the demo repo you'll notice that there is an index.html
file. This is the file that the server will load by default when you navigate to the root route http://localhost:3000
. It contains the navbar so we can navigate to other files in the demo. The first of these files we'll take a look at is basics.html
.
If you open basics.html
and navigate to the same page in your browser you'll see some examples of different types of HTML elements. Let's have a look at these.
Now navigate to lists.html
in your text editor and browser. Looking at what the browser renders and comparing that with the markup in lists.html
you can see lists are straight foward and do pretty much exactly what you'd expect. One interesting feature of lists to note is that when you nest lists the browser will take care to assign different bullet styles to the various levels of nested lists.
Forms are a fairly broad topic that will be built upon as you dive deeper into their connection with client and server-side data. However, the markup for them is simple to get started with. There are a bunch of input types to pick from but we'll start by covering some of the most common types.
Open tables.html
and navigate to the tables page in your browser. Notice that the same table appears twice in the page and markup. However it is slightly different in both appearance and code. Let's look at the differences.
After seeing some of HTML's most commonly used elements in action you should feel a lot more comfortable using these in your own markup. A little bit of explanation goes a long way to get used to where and how to use these elements. HTML elements, their features and specifics will quickly become second nature to you as we build on top of them.