Create modern Web sites using HTML5 and CSS3. Before you start. This tutorial assumes some basic experience with HTML, CSS, and.
- 290+ Free Responsive Html5 Templates and Themes. This is a collection of wonderful templates. 265+ Free Html5 Css3 Templates and Themes.
- Selection of Awwwards winning CSS3 websites. CSS3 is a powerful tool for web designers to enhance the appearance. HTML5; Clean; Animation; CSS3; Responsive.
- HTML5 and CSS3 Responsive Web Design Cookbook. HTML5 and CSS3 Responsive Web Design Cookbook is full of how-to.
The buzz around responsive websites has been going.
Java. Script. It assumes that you are aware of what an HTML element or. HTML markup, the. Web page, and so on. In terms of CSS, you are. ID- based selectors. CSS property, and how to include CSS in your Web pages.
I wasn't expecting to find so many high quality websites that use HTML5 and CSS3 so I have to. 26 Awesome Sites Using HTML5 and CSS3.
Finally, it is assumed that you. Java. Script, such as what a variable. Java. Script code in your Web pages. If you feel that you need to brush. Resources section for some useful.
HTML, CSS, and Java. Script development.
About this tutorial. Over the past ten years or so, concepts such as Web 2. Rich Internet. Applications (RIAs), and the Semantic Web have all pushed HTML, CSS, and. Java. Script to and beyond their limits, often relying on plug- ins such. Adobe. The Adobe Flex. Microsoft. With HTML5, however, the markup language. D drawing API, and a host of new.
APIs, all provided with the intent of proving. HTML, CSS, and Java. Script can provide a rich front end to your. Web sites and applications. HTML5 is widely regarded as one of the most important new technologies. March of this year. For many years, the Web has relied on external.
Web browser, particularly in terms of 2. D drawing, animation, and.
The latest versions of the HTML and CSS specification aim. Java. Script. required (or removing the need for Java. Script entirely, in some cases). The code presented. Any. features that are currently browser- specific will be clearly. To ensure that you can experience all of.
Web browsers on your system when developing. HTML5 and CSS3 applications: You do not need any specific software to write HTML and CSS code; any.
Notepad, vi, emacs, and so on.) In. Web server. or upload the files to a Web hosting service. Back to top. New features in HTML5.
In this section, you will discover some of the great new features that. HTML5 has to offer. You will first learn about the new semantic. Web. page: headers, footers, navigation bars, side bars, and so forth. Next. you will learn about the important new < canvas> element.
D drawing Java. Script APIs that you can use to create shapes. Following this, you will see. Web's current dependency on Flash as a. Next, you will be introduced to the. APIs and offline applications support that will further.
Web applications in line with their desktop counterparts in. Internet. This section is wrapped up with a brief overview of the. APIs that are proposed in the.
HTML5 specification. Semantic elements. The HTML5 specification includes a series of new semantic elements that. Web page, such as a header, footer, navigation, and so on. In previous. versions of HTML, you would typically use < div> elements.
ID or class attributes to differentiate. The problem with this is that this has no.
IDs are to be used, making it extremely difficult. HTML5. should help alleviate these issues, making it easier for Web browsers. It is worth pointing out that continuing to use. HTML5 is perfectly valid, but in order to future- proof. On the other side of the coin, it is also suggested that you.
A footer does not have to be. This is a container for the primary navigation links on a Web. This element is not intended for use with all groups of. If you. have a < footer> element that contains navigation. The < article> element is used to define an. Such items are. typically syndicated using RSS feeds.< section> This element represents a section of a document or application.
For. example, the section you are reading now could be surrounded by a. HTML5. The header for the section you are reading now would.
An example of this might be advertising blocks. This. tutorial, for example, has the title .
The element has. been standardized and included in the HTML5 specification, along with. D drawing APIs that can be used to create shapes, text.
Many believe that the < canvas> element is one of the most. HTML5 as it facilitates the production of graphs. Adobe Flash. The < canvas> element itself is quite basic, defining the. ID for the object.
The developer must then. Java. Script APIs to actually draw objects on the. Web page has finished rendering.
These APIs. allow the developer to draw shapes and lines; apply color, opacity, and. The APIs also allow the < canvas> to be. Web applications on. You will see an example of the < canvas>. HTML5/CSS3 Web site later in this.
Playing < audio>. In recent years, the popularity of video sharing sites such as You. Tube. and content delivery platforms like Hulu has seen a huge explosion in. Web for multimedia streaming. Unfortunately, the Web.
Flash Video (. flv) file format and the Adobe Flash platform. HTML5, however, includes support for two new elements.
Web. developers to include multimedia content without relying on the user. Several browsers. Mozilla Firefox, Apple Safari, and Google Chrome, have begun.
In addition, a set of. Java. Script APIs has been provided to allow developers to. A key. advantage to native multimedia playback is that it theoretically. CPU resources, which can lead to energy savings. A key issue with these new multimedia elements, however, is the file. Mozilla and Opera want to use the open source Theora video.
Web browser. On the other hand, Apple. Google are not happy with the quality of Theora, particularly for. HD) content on the likes of You. Tube. The MP3 and AAC formats are restricted by patents. Vorbis format is not. The problem with Vorbis audio is. There are many decisions to be made about HTML5 < video>.
In the meantime, you can try to support all. Flash video as a fallback. Let's hope that a final decision. Again, you will see the < video> element in action later. Local storage and offline. Web developers have traditionally used cookies to store information on. Web page to read this.
While cookies are very useful for. Web browsers are. Web server or more than. KB of data per cookie (including both name and value). In addition. they are sent to the Web server with every HTTP request, which is a.
HTML5 provides a solution for these problems with the Local Storage. APIs, which are covered in a separate specification to the main HTML5.
This set of APIs allows developers to store information on. In addition, the information is. HTTP request. The specification. Web sites from. reading or changing data stored by other Web sites. Most browsers store Web pages in local cache, allowing them to be. This works fine for static pages.
Gmail, Facebook, or Twitter. HTML5 provides. support for offline applications, where the browser downloads all the. Internet. Web form enhancements. If you have created Web applications before, you are more than likely. HTML's set of form controls, some of which are. In HTML 4, the. following input types were supported: buttoncheckboxfilehiddenimagepasswordresetradiosubmittext.
In addition, there are some other elements that are used in forms such. These form. controls provide plenty of function for basic form fields such as.
But, the Web as a platform has grown far beyond the stage where. HTML forms are used to submit contact forms—now they are used to. As a result, Web. In order to tap into these types of controls, developers needed to use. Java. Script library that provided UI components, or else. Adobe Flex, Microsoft.
Silverlight, or Java. FX. HTML5 aims to fill some of the gaps left by its. At the moment, support for these new form fields is quite limited. The. Mobile Safari browser on the i. Phone makes use of some of these new. Also, Opera provides some new widgets for many of these. The most widely available type of.
Opera, Safari, and Google Chrome. In addition to these new input types, HTML5 also supports two major new. The first of these is autofocus, which tells. Java. Script code to do so. The. second enhancement is the placeholder attribute, which allows the. An example of this would be a.
The placeholder attribute allows the developer to. An example of this is shown in. Figure 1. Figure 1. The placeholder. attribute in action. As Figure 1 shows, the placeholder text for e- mail address and.
This screenshot also shows an example of a range input. Safari browser. This.
Web page discussed later in this. Other new features.
HTML5 includes so many new features; it's impossible to cover them all. This section provides a brief overview of some of. Web worker. This allows Java. Script code to be set to run in a background. The chief benefit that Web workers offer developers. Geolocation. HTML5 includes a geolocation API that allows a Web application to. GPS on a cellphone).
If you do not have a device that. Phone or an Android 2. Firefox and download a plug- in that.
Drag and Drop. Another interesting feature is the inclusion of a drag and drop. API. Up until now, implementation of drag and drop without. Java. Script or the use. Java. Script library such as script.
Cross- document messaging. This allows documents in different windows (and iframes, for that. This feature. could prove very useful for the development of widgets and. Web. page's server (similar to Facebook applications). And more. Other new features introduced by HTML5 include MIME types and.
Web applications can be. Java. Script framework. Web. developers' lives easier. Back to top. New features in CSS3. This section introduces you to the new features that can be found in. CSS level 3 specifications—including new CSS.
It also shows many of the effects that CSS3. GIF, JPG, or PNG. Such effects. include drop shadows on text and boxes, rounded corners on borders, and. Many of these. features (such as opacity and rounded corners) are relatively. Web browsers. Next, you will learn about the new multicolumn. CSS3. These layouts are a throwback. Another feature. that will be discussed is the issue of including non- standard Web.
Finally, some of the other new CSS3. HSL (Hue, Saturation. Lightness) and RGBA (Red, Green, Blue, and Alpha) color models.
New selectors. A CSS selector refers to the manner in which HTML element(s) are styled. For example, to put a border around all. Or you can use the pseudo- class. With CSS3, even more new.
Create fluid layouts with HTML5 and CSS3. When I first started making websites at the end of the 1.
More often than not, sectioning up screen real estate was done with percentages. For example, a left navigation column might be 2. There weren't the vast differences in browser viewports we see today, so these layouts scaled well across the limited range of viewports. Nobody much cared that sentences looked a little different on one screen compared to another. However, as CSS- based designs took over, it enabled web- based designs to more closely mimic print. With that transition, for many (including myself), proportionally based layouts dwindled for many years in favor of their rigid, pixel- based counterparts. But like all things, proportional designs have come back around.
The Mini, permed hair (I wish!) and flared jeans have all made their comebacks over the years. Now, it's time for proportional layouts to make a re- appearance. Software: Text editor, browser. Project time: 1- 2 hours. Skills: Learn why proportional layouts are necessary for responsive design, convert pixel- based element widths to proportional percentages, convert pixel- based typography sizes to their em- based equivalent, understand how to find the context for any element. Support file. 01.
Fixed layouts aren't future- proof. As I mentioned, since the 'table layout' days, I've had little call to use proportional layouts. Typically, I've been asked to code HTML and CSS that best matches a design composite that almost always measures 9. If the layout was ever built with a proportional width (say, 9. Web pages with fixed, pixel- based dimensions were the easiest way to match the fixed, pixel- based dimensions of the composite. Even in more recent times, when using media queries to produce a tweaked version of a layout specific to a certain popular device such as an i.
Pad or i. Phone, the dimensions could still be pixel- based, as the viewport was known. However, while developers might enjoy the possibility of re- charging a client each time they need a site tweaked for today's newest gizmo, it's not exactly a future- proof way of building web pages. As more and more varied viewports are being introduced, we need some way of provisioning for the unknown. Why proportional layouts are essential for responsive designs. Whilst media queries are powerful, we are now aware of some limitations. Any fixed- width design, using only media queries to adapt for different viewports, will merely 'snap' from one set of CSS media query rules to the next with no linear progression between the two.
Instead, we want to create a design that flexes and looks good on all viewports, not just particular ones specified in a media query. I'll cut to the chase: we need to switch our fixed, pixel- based layouts to fluid, proportional ones.
This will enable elements to scale relative to the viewport until one media query or another modifies the styling. Proportional layouts and media queries.
Ethan Marcotte wrote the definitive article on Responsive Web Design at A List Apart. Whilst the tools he used (fluid layout and images, and media queries) were not new, the application and embodiment of the ideas into a single coherent methodology was. For many working in web design, his article was the genesis of new possibilities – new ways to create web pages that offered the best of both worlds: a way to have a fluid flexible design based on a proportional layout, whilst being able to limit how far elements could flex with media queries.
Putting them together forms the core of a responsive design, creating something truly greater than the sum of its parts. Amending a design from a fixed to a proportional layout.
For the foreseeable future, any design composite you receive or create is likely to have fixed dimensions. Currently we measure (in pixels) the element sizes, margins, and so on within the graphics files from Photoshop, Fireworks, and so on. We then punch these dimensions directly into our CSS. The same goes for text sizes. We click on a text element in our image editor of choice, note the font size, and then enter the value (again, often measured in pixels) into the relevant CSS rule. So how do we convert our fixed dimensions into proportional ones? A formula to remember.
It's possible I'm coming off as too much of an Ethan Marcotte fanboy, but at this point it's essential that I provide another large tip of the hat (it should probably be a bow, maybe even a kneel) to him. In Dan Cederholm's excellent book, Handcrafted CSS, Mr. Marcotte contributed a chapter covering fluid grids. In it, he provided a simple and consistent formula for converting fixed width pixels into proportional percentages: target ? Fear not, when creating a responsive design, this formula soon becomes your new best friend. Rather than talk any more theory, let's put it to work converting the fixed- dimension design for the fictional movie website And The Winner Isn't..
Embracing Fluid Layouts. At the minute, the basic markup structure of the site looks like this: < div id=.
I've omitted many of the styling rules so we can concentrate on structure: #wrapper . Let's work from the outermost element and change them to proportional percentages using the target .
You can see by the CSS above that it's set with automatic margin and a width of 9. As the outermost div, how do we define what percentage of the viewport width it should be? Setting a context for proportional elements. We need something to 'hold' and become the context for all the proportional elements (content, sidebar, footer, and so on) we intend to contain within our design. We therefore need to set a proportional value for the width that the #wrapper should be in relation to the viewport size. For now, let's knock off a nought and roll with 9.
Here's the amended rule for #wrapper: #wrapper ! Changing from fixed to proportional gets a little more complicated as we move inwards. Let's look at the header section first. Consider the formula again: target . Our #header div (the target) sits within the #wrapper div (the context).
Therefore, we take our #header (the target) width of 9. We can turn this into a percentage by moving the decimal place two digits to the right and we now have a percentage width for the header of 9.
Let's add that to our CSS: #header . As the context is still the same (9. Our #content is currently 6. Move the decimal place and we have a result of 7. Our sidebar is currently 2. I don't want the thickness of the right- hand border to expand or contract, so that will stay at 2 px. Because of that, I need to subtract its thickness from the width of the sidebar, then perform the same calculation.
Divide the target (now 2. Shift the decimal and we have a result of 2. After amending all the pixel widths to percentages, the relevant CSS looks like this: #wrapper . Can't we just round the numbers? Let's take some time out from the layout to consider the issue of decimal precision. Some critics of responsive design techniques (for example, see this article by James Pearce) argue that entering numbers such as .
You may wonder yourself why they aren't simply rounded to something more sensible. The counter- argument is that unrounded values are a more accurate answer to the question being asked. Providing a browser with the most accurate answer should make it more able to display that answer in the most accurate manner.
As a related aside, if you stayed awake through more than a couple math classes, you will have heard of the Golden Ratio. The mathematical ratio, used in almost every discipline, is expressed as approximately 1: 1. Not a neat number by any means, but quite an important one. If the Golden Ratio can suffer such precise measurements, I'm inclined to believe our web designs can too. Right, back to our fluid layout. Converting the other layout elements.
Now, let's go ahead and replace all the 1. As all the 1. 0 px widths have the same 9. However, the navigation area isn't behaving.
If I bring the viewport size in just a little, the links start to span two lines: Notice the problem with the site navigation? Furthermore, if I expand my viewport, the margin between the links doesn't increase proportionally. Let's take a look at the CSS associated with the navigation and try and figure out why: #navigation . Let's go ahead and fix that with our trusty formula. As the #navigation div is based on 9. So we'll amend the code as follows: #navigation ul li a !
Let's just check all is okay in the browser.. The result of our change to the link layout: fixing one problem has created another. Oh wait: that isn't exactly what we were gunning for.
Okay, the links aren't spanning two lines but we don't have the correct proportional margin value, clearly. The navigation links look like one big word, and not one I can find in my dictionary.. Always remember the context. Considering our formula again (target . Our problem here is the context. Here's the relevant markup: < div id=. They are the context for our proportional margin.
Looking at the CSS for the < li> tags, we can see there are no width values set: #navigation ul li . We could add an explicit width to the < li> tags, but that would either have to be fixed- width pixels or a percentage of the containing element (the navigation div) – neither of which allows any flexibility for the text that ultimately sits within them. We could instead amend the CSS for the < li> tags, changing inline- block to inline: #navigation ul li . However, I'm a fan of inline- block as it gives greater control over the margins and padding for modern browsers, so instead I'm going to leave the < li> tags as inline- blocks (and perhaps add an override style for IE 6 and IE 7 later) and instead move my percentage- based margin rule from the < a> tag (which has no explicit context) to the containing < li> block instead. Here's what the amended rules now look like: #navigation ul li .