Learn HTML5 and CSS3

HTML5 and CSS3 are not new, it’s been a few years since we heard the two words. However, it seems that in 2013 HTML5 and CSS3 will be increasingly used. It’s also because the W3C has declared that HTML5 features are complete.

HTML5 and CSS3
HTML5 and CSS3

HTML5 and CSS3 are the future of websites, in the future HTML5 and CSS3 will be more widely used. So there’s no harm in us starting to study it from now on. Many people have used HMTL5 but that doesn’t mean we’re too late to learn it from now on.

This post will not explain at length, but we just want to urge friends in Indonesia to start and don’t hesitate to use HTML5 and CSS3 on the website you create. Because the browser already supports, the resources and tutorials are numerous.

For those of you who want to know more about HTML5 and CSS3, maybe the following site can increase your knowledge about HTML5 and CSS3.


Tutorial-Webdesign.com will also try as much as possible to write some interesting things about HTML5 and CSS3

We also invite you all to write what you learn on this site, share it with others, from community to community.

Some sites that might be able to further increase your knowledge about HTML5 and CSS3

10 Free Responsive Web Templates

We will show a Free / Free Responsive Template in this article, hopefully it will be useful to speed up the work of friends.

Responsive web design is currently being talked about a lot by web designers and web developers around the world. Several large-scale websites have also started migrating their websites to be responsive, so that they can be opened on almost all devices, especially mobile phones. tablet computers and personal computers.

Many designers deliberately create HTML and CSS templates to be used by others for free to help speed up website creation, here we show some free templates that can be used to create websites or to learn from what other programmers have made.

Learning CSS Day 1 “Fundamentals”

I will share the knowledge I have learned about CSS, this may be the method that I think is suitable for beginners if you want to learn about CSS. I think CSS is a well-organized set of “BOXES”, That’s It.

If your willingness to learn is below 80%, I suggest you leave this article, because it takes enough seriousness.

Day 1 we will learn about something basic about CSS, namely “Box – Modeling”.

box modeling css
Box-Modeling structure in CSS

Take a look at the picture above, there is a position of MARGIN – BORDER – PADDING – CONTENT.

Item: The term I define, Item consists of Padding and Content,
Margins: Out of the box/Item, such as the void out of the box/Item,
Border: Out of box/Item, but like sticking with Padding and Content (Item’s edge),
Padding: Inside the box/Item, like a vacuum inside the box/Item,
Content: In the box/Item, this is just the contents, such as TEXT, IMAGE/IMAGE, VIDEO, or whatever you enter.
You can see it turns out that a text object, image, or video that you enter in the HTML code is coated with several PROPERTIES as I have explained.

Enough for theory, let’s get practice .

follow this steps, to make a box from a very scratch.

1) create a folder named “hari1” , inside it create an empty file called “index.html” ,

2) open the index.html file using “Notepad”, we will create a box-model using this HTML file.

3) create a basic outline in the “index.html” file as below and a css file with the name style.css.


4) Now that we’ve created the basic outline, let’s create a “container” for “Item” /box-model


5) Try running the file in a browser. Then nothing will be seen.

6) Now let’s create properties on the boxModel such as height, width, and color, write them in the style.css file.

/* create a selector “class=’boxModel'” , in the div tag / width: 50px; /width properties/ height: 50px; / high properties / background: red; / background properties */

7) after that try to run it, it looks like below

box model 1
boxModel already visible

as we learned earlier that an “Item” has Margin, Border, Padding, and Content. The red color here covers the part of the “Item”(Padding + Content) only.

the question,
Why isn’t the square sticking to the top and left corner of the screen? and like there’s an empty space there?

The answer is easy, there is a margin.
but whose margin? “boxModel”?

Of course not, because we didn’t set the “boxModel” margin value before, meaning the “Body” margin is set by default from the browser settings.

8) Let’s prove that Margin really exists, how do we remove the margin by setting its value to 0.

/* create selector body / margins:0; / set margin value to 0/ } .boxModel{ / create a selector “class=’boxModel'” , in the div tag / width: 50px; /width properties/ height: 50px; / high properties / background: red; / background properties */

try running it again, then it looks like this.

box model 2
lost margin

and that margin is really there, it’s just not visible.

9) Now let’s set the margins on the boxModel.

/* create selector body / margins:0; / set margin value to 0/ } .boxModel{ margins:50px; / set margin value */

/* create a selector “class=’boxModel'” , in the div tag / width: 50px; /width properties/ height: 50px; / high properties / background: red; / background properties */

then run again, then the margins on the boxModel will be visible.

box model 3
margin boxModel set to 50px

10) Next, let’s make the Border reveal its shape.

/* create selector body / margins:0; / set margin value to 0/ } .boxModel{ border: 5px solid black; / set the border properties value, border has 3 parameters(bold, style, color)*/

margins:50px; /* set margin value */

/* create a selector “class=’boxModel'” , in the div tag / width: 50px; /width properties/ height: 50px; / high properties / background: red; / background properties */

please run again, then it will look like this.

box model 4
the border shows its shape

11) Now let’s differentiate between Padding and Content. By giving the boxModel text and setting the padding value.

In conclusion,

Margin, Border, Padding, and Content are one unit of a box-model that you create using CSS, so don’t forget any of its properties, or you’ll get into trouble when creating a template or anything related to CSS.

Disable Links With CSS

In this paper we will only experiment with css by disabling a link, there are cases where sometimes in a condition we have to disable/disable a link, for example in an administrator page, when the admin is logged in people can edit an article (active link), but when the login is an operator, the link for editing should be deactivated, but not removed so that the difference can be seen.


Usually we use javascript to turn off the link (but if the browser’s javascript is disabled then this is useless) or conditioned in the program code so that the link is not printed. But that way the link still looks active and can be clicked.

This time we will try to make links not clickable, even if javascript is turned off.

We only need a class and then it is set in css so that the link cannot be clicked, or seems to be inactive.

Create the HTML structure as follows.

It can be seen on the 2nd link that goes to flickr given the class .disabled

And for the css as follows

  • {
    margins: 0;
    padding: 0;

body {
padding: 3em 2em;
font-size: 1em;
line-height: 1;
a {
text-decoration: none;
body {
text-align: center;
h1, p {
margin:20px 0;
.knob {
display: inline-block;
padding: 10px 12px;
color: #fff;
text-decoration: none;
background: #3B5998;
border-radius: 3px;

.button:hover {

.disabled {
pointer-events: none;
Noteworthy there is the class .disabled where there is pointer-events:none which will disable the link, and opacity:0.5 which will make the button appear blurry and inactive.

Prevent Web Article Theft With CSS

Preventing people from selecting the text on the website is sometimes very necessary, especially in this era of the Internet, there are so many people who carelessly take and quote or copy/paste other people’s writings without permission.
For this reason, prevention is needed, if people used to do prevention by using Javascript, or by image raplacement (ie by converting text into image format), or other ways.

An ounce of prevention is worth a pound of cure

In this article, Tutorial-webdesign.com will try to prevent or at least make it difficult for others to select the text on our website with CSS. Previously we discussed about disabling a link with css, now we will disable the selection function of the content/text on the website.

The following is an example of using HTML and CSS tags to prevent selection of web page text.

Creating Black and White Images With CSS Filters

Making color images black and white with CSS3 is our discussion this time.

In the past we had to use Photoshop to give a photo grayscale (black and white) effect to an image, but now with the sophistication of css3 features we don’t need to be tired of editing it in Photoshop, just with a few lines of css code we can make color photos black and white.

A few months ago tutorial-webdesign.com also discussed in the article Creating Instagram Effects with CSS3 filters, but until now it doesn’t support Firefox, but this time we will try to make a grayscale effect that can be run in Firefox.

Okay, let’s just practice making.

Prepare a file with the name grayscale.html with the following structure

For the css code like this

filters: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url(“data:image/svg+xml;utf8,#grayscale”); /* Firefox 3.5+ / } .grayscale:hover{ filter: grayscale(0%); -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: url(“data:image/svg+xml;utf8,#grayscale”); / Firefox 3.5+ */

In the css above we create a grayscale effect (black and white), but when the mouse hovers the image returns to color.
Then the result is as follows

Creating Fixed Menu When Scrolling With CSS3, Jquery & HTML5

This time tutorial-webdesign.com will try to make a menu whose position is always on top (fixed) after the web page is scrolled, not just above, the menu that was previously integrated with this website page will change color as well. The point here we will learn how to remove and add classes to the html tag when the menu is scrolled with the help of jquery.
Slightly different from what we made earlier in the tutorial Creating a Fixed Position and Responsive Menu where we don’t need javascript for that, because we put the menu directly at the top of the website page with CSS

To change the shape of the menu like that, of course we need Javascript to get the event when the mouse is scrolled, this time we use Jquery to practice deleting and then adding a class with another name when the website is scrolled.

Okay, let’s just make the HTML structure, here we try to use HTML5 tags for practice.

HTML Structure

The code above is our HTML structure in brief, the details will be described below each of the contents of each section.
The header section is generally filled with the title and description of the website (tagline).

Fixed Menu

In this section is our menu, it’s simple, it’s just a div in which there is a menu list (ul > li)

Note that there is the class name of the div, which is named normal. This is useful for giving the main style before scrolling.

Section / Website content
This section contains the contents of the website that we created, there are several sections and we give each section according to the ID of each menu (about, services, portfolio and contact)

Scroll me please…









CSS Styles
After we are done with the HTML structure that will be created, it’s time for us to start beautifying the appearance by using CSS, there is no special css that we need because this is only for demo purposes.

Initial CSS
this is used for global or whole, actually it is not complete, usually for global we need to normalize, css reset or something else to make it better, but this is only for demo.

Create a Paper Stack Effect With CSS3

Creating a Paper Stack Effect with CSS3 has many uses, it’s not wrong to learn because this technique is quite used in the web design world, for example a few months ago I once got a project to create a website for a short article writing contest, and asked for the layout. Like paper, however, designers have to make sense to make it as similar to paper as possible, there are many ways, but this simple one is their choice because it is considered simpler and easier to read.

At that time I also made the project with the trick of Limiting Text Input With Jquery so that articles could only be written as much as 500 characters, from there many things can be learned and can be written in several tricks. One of them is the display of the paper effect with this css3.

HTML Structure
OK, let’s get started with the necessary HTML structure, create an HTML file and name it paper-effect.html.


Create the html structure as usual, and in the body we simply create a div with the paper class.

To beautify us using CSS, here what we need to learn is CSS Box Shadow because to create the stack effect it actually uses several shadow effects with different distances, here we make the demo shadow farther and farther, so that it forms like paper piled up.

The format for writing box shadow css is as follows:

The Most Complete Web Development Learning Place

There are lots of places to learn the basics of making websites on the Internet, as evidence we can find millions of search results with the keyword “web tutorial” on Google.

Search results for the word tutorial web
Search results for the word tutorial web

“If you want to be good at making websites, then learn from the website”

Maybe the words above are appropriate for us to say because it is on the Internet that we can be smart and clever in all things, especially those related to website creation. By learning from the Internet, we no longer need expensive courses in the real world, sometimes we don’t even need to buy a website programming book (because there are many books that take references from the Internet), even learning from the internet can make us smarter than just learning 2 to 3 times. 4 hours a week at university/campus.

However, not all websites that we find in the Google search results that present the knowledge in making the website in full. Some people (friends, teachers, mentors) suggest beginners to learn from w3schools.com. This is undeniable because w3school is very complete, but sometimes we also need other references as a place to learn, maybe because we are bored with w3schools or because w3school is too mainstream (if the slang children say today) :p. Or because w3school has been criticized for some of its mistakes some time ago, please check at w3fools.com.

In this article, we will provide a list of websites that in terms of function and purpose resemble w3schools.com, which is a place to learn websites for beginners (you could say the first step in learning website creation). But with a slightly different taste 🙂

In our opinion, this is the most complete website to explore the basics of website creation. Especially html and css, because it is W3 who creates and manages HTML and CSS.

Source collection site for HTML projects, including tutorials, cheat sheet tags, how to use graphics, and tips on other web technologies such as XML.

HTML tutorials, latest browser analysis, shareware and plug-ins.

Tizag is a website designed for beginners, and invites you to start learning web programming.

Web Development and Design Tutorials, Tips and Reviews

A place to learn HTML from basic to advanced level, with references and links.

From the name we can tell that this is a place to learn html, but we can also learn css quite completely here.

This website discusses HTML & CSS in full, even HTML5, CSS3, JS and PERL are also available.

Other Websites Similar to W3Schools

Editing Web Views with Google Chrome

You can also use Google Chrome to edit your web appearance (mock up). But before we continue this tutorial, you should have mastered both of the following:

HTML Basics
CSS Layout Basics
If you have not mastered these two things, you should first read about css & html from the following websites or here.

Web Layout changes that can be done with the help of Google Chome actually involve editing CSS and HTML live, so that the changes are immediately visible on the screen. You can change the base color, shift or change the size (length and width) of a TAG.

The steps to start the Layout change are as follows:

Open websites with Google Chrome
Specify the Section you will Edit.
Right click to bring up the popup menu
Click Inspect element
The following display appears:
The display above consists of 3 main parts, namely the web display, HTML source code and CSS Style. You can try to do editing in HTML source or in CSS Style. For CSS styles will be seen in the line where the editing is done.
CSS changes in Google Chrome are only to see the changes live, without changing the original file. If Editing is OK, you can make changes to the original file.
good luck