Click here to Skip to main content
11,417,390 members (53,132 online)

Learn HTML5 and CSS3

We've put together a series of articles from the community to lead you, step-by-step, into the wonderful world of HTML and CSS. Each article covers a single topic, with the goal of taking you from being an absolute beginner all the way to basic mastery of the latest HTML5 and CSS3 technologies.

Table of Contents

  1. Writing Your First Code
  2. Building on the Basics
  3. Styling Your First Web Page
  4. Laying Out Your First Web Page
  5. Getting Fancy with HTML5 & CSS3
  6. Building Formidable Forms with HTML5
  7. Coding Canvas
  8. Starting with SVG
  9. Enabling the App Cache
  10. Exploring HTML5 WebStorage
  11. HTML5 API Grab Bag
  12. Open Topics

1. Writing Your First Code

  • A walkthrough intended to make you feel comfortable writing HTML and CSS on your own by the end of it.
  • How HTML was developed
  • Defining HTML and CSS
  • How browsers work with HTML and CSS
  • How to set up your development environment
  • Building a basic Hello World web page
  • Deconstructing the web page and identifying all the parts

See Also

2. Building on the Basics

  • An explanation of attributes
  • Images and different kinds of hyperlinks.
  • Ordered lists and unordered lists, ordered list attributes
  • Tables, thead, rowspan colspan
  • Emphasis Elements (Bold, Underline, Italics, etc.)
  • Edit elements - cite and datetime
  • Using Comments
  • Tips for Structuring Code and Making it Readable
  • Browser Support

See Also

3. Styling Your First Web Page

  • Web Page without Style and web pages with simple style
  • CSS Selectors - element selector, id selector, class selector, chaining selectors
  • CSS Placements - internal/external/inline stylesheets
  • CSS Properties - backgrounds, text, fonts

See Also

4. Laying Out Your First Web Page

  • The Box Model (Margin, Border, Padding and Content)
  • Dimension, Display, Positioning, Floating, Align
  • Borders
  • CSS Lists and Tables
  • Div and Span

See Also

5. Getting Fancy with HTML5 & CSS3

  • Working with HTML5 Audio and Video tags
  • CSS3 Text Effects (Outline, Shadow, Wrap, etc.)
  • CSS3 Transitions
  • CSS3 2D and 3D Transforms
  • CSS3 Animations

See Also

6. Formidable Forms with HTML5

See Also

7. Coding Canvas

  • What is canvas?
  • Creating a canvas
  • Canvas Coordinates and Paths
  • Javascript Timer methods
  • Canvas Gradients, Images
  • Translate, Rotate and Scale methods
  • Font property and FillText method
  • Finishing "Balloon Bob" as a Canvas example
  • Assignment - Develop the game "Bobby Carter"

See Also

8. Starting with SVG

What is SVG?

  • Raster Graphics
  • Vector Graphics
  • How and why do you use SVG?

Learn how to use SVG

  • Professional Tools For Creating SVG's
  • SVG Document Structure
  • Basic Shapes of SVG
  • Paths in SVG
  • Styling the SVG
  • Filter effects in SVG
  • Gradients in SVG

Advantages of SVG
SVG examples

See Also

9. Enabling the App Cache

  • What is Application Cache?
  • Why would you use App Cache? Where is it useful?
  • The basics of creating a cache manifest
  • The Manifest File (CACHE MANIFEST, NETWORK, FALLBACK)
  • Updating the cache
  • Other tips and best practices

See Also

10. Web Storage Wizardry

  • HTML5 Web Storage
  • Session Storage
  • Local Storage
  • Building Session Storage
  • Building Local Storage
  • Best Practices
  • Web Storage Event

See Also

11. HTML5 API Grab Bag

  • HTML5 Geolocation
  • HTML5 Drag and Drop
  • Drag and Drop Events
  • DataTransfer Object
  • Drag and Drop Prizes
  • HTML5 Server-Sent Events

12. Open Topics on HTML5 and CSS

  • Web Sockets 
  • Server Sent Events (SSE)
  • SSE vs Web Sockets
  • Web Workers
  • Web Messaging
  • File API
  • Web Notifications
  • Micro Data
  • Indexed DB

See Also

Latest Discussions

by Member 11649315
Tried finding an answer on stackoverflow but can't. All answers were with awk and sed which I'm not allowed to use! So once again, I ask you to help me.Basically I need to write a script that prints out the history of all used commands in the linux terminal. The commands are saved in a file...
by Member 11370301
Hi, everyone.I made a class and I initialize a const bool value in constructor.And I didn't make any code to change the value in the class.But after an object is created, its value is changed.I checked encoding, but there was no problem.(In my project, unicode should be used.)I...
32 mins ago by Member 10953863
Forum: Article "Windows Authentication Using Form Authentication"
by Member 10781325
Hi allI have an mfc - application: foo.exe.Now i want this foo.exe to create a process of itself and kill itself.(I simply want to create a new process of itself and kill the old one.)I tried this like that:CreateProcess("path of foo.exe", NULL, NULL, NULL, FALSE,...
by ost3z
hi everybody i have atextbox which have two events first txtsearch_TextChanged which fire to autocomplete the other is txtsearch_KeyPress which pass data in click enter txtsearch_TextChanged stop txtsearch_KeyPress firing how can i make both of them work one after the other...

Advertise | Privacy | Mobile
Web03 | 2.8.150427.4 | Last Updated 1 Jun 2014
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid