35+ HTML & CSS Resources for Beginners
by Bradley Nice, Content Manager at ClickHelp.co — professional technical writing tool
In case you are not familiar with HTML and CSS, here’s a quick intro.
HTML is a markup language used to describe the content in a document or a web page. The purpose of HTML is to describe the content and provide structure.
“CSS is a special language used to style HTML content. CSS defines how HTML elements will be displayed — color, size, position, border, background, etc.”
So today I’ve gathered a list of HTML & CSS resources for beginners.
Basic CSS and HTML Tutorials
- Chris Coyier’s basic HTML and CSS video tutorial (62 MB) — A must watch video for absolute beginners. It teaches you everything from picking up a text editor, writing your fist HTML page and using CSS for styling.
- Learn HTML in 20 Minutes — This is not fraud, you really can learn it in 20 minutes. If you’ve watched Chris Coyer’s video above, you should read this to understand HTML tags and its usage.
- HTML5 Beginner’s Guide — Since you know bit of HTML and usage, check out this Beginner’s Guide.
- How to Learn HTML — Learn the basics, understand markup tags, format of an HTML document and the uses of the head tag, body tag and other tags.
- The basics of HTML — Learn the basics of HTML, what it is, what it does, its history in brief, what the structure of an HTML document looks like and writting valid HTML document possible.
- Basic Structure of a Web Page — The HTML element breaks the document into two main sections; the head and the body. Thorough breakdown of the various HTML elements and their respective attributes.
- HTML Elements — Every HTML document is a hierarchical structure made up of elements and their content. This section of the reference describes all the different types of element that you can use to write an HTML document. Describes all the different types of element that you can use to write an HTML document.
- HTML Beginner Tutorial — HTML and CSS are all about separating the content (HTML) and the presentation (CSS). Getting into the frame of mind of doing things the right way from the start will turn in to much better results in the end.
- List of all HTML Elements — Have a quick look at this list of HTML elements you will be using in your HTML projects, why not memorize some of those tags?
- Creating a Global Style Sheet — You don’t need different CSS file for different pages, always create just one Global CSS file for all your webpages. Global style sheets can be applied either across your entire site, or across a subset of pages, and doing so means that you only need to update one or two files when you need to make a style change.
- CSS Basics — Stuck in the world of nested tables and deprecated markup? Using CSS to style your (X)HTML files, will benefit you and your visitors in many ways. Learn basics of CSS chapter by chapter online or download all 18 chapters of CSS Basics in one downloadable printable PDF file.
- Cascading Style Sheets (CSS) Tutorial — Learn the usage of CSS, defining font size, margins and padding. Identify the HTML elements via id and class attributes.
- CSS Tutorial — More CSS tutorials here, from lesson 1 to 16 contains brief introduction and indepth tutorial about CSS, learn from using colours to floating elements.
- HTML & CSS for Beginners — How to set up your HTML webpage, create headings and paragraphs, add lists, change font size, color and type using CSS.
- Learn HTML & CSS in one easy to use guide. — Simple and comprehensive guide dedicated to helping beginners learn HTML and CSS. Outlining the fundamentals, this guide works through all common elements of front-end design and development.
- Linking Style Sheets to HTML. — Here’s another one that explains many ways to link external style sheets to HTML page.
Advance CSS and HTML Tutorials
If you are familiar with basics of HTML and CSS, it is time to move up and learn advance lessons. Here you will learn how to apply text-shadows, box-shadows, CSS animation and many more, the possibilities are almost limitless.
- HTML5 & CSS3 Fundamentals — Over the course of 21 episodes, Each concept is broken into its own video, Bob Tabor teachs you the fundamentals of HTML5 & CSS3 programming.
- CSS text-shadow — Achieve Photoshop style effects on your website text without having to resort to image replacement techniques.
- CSS text-shadow Examples — It is amazing how you can produce different text effects with CSS text-shadows. Here another text-shadows examples worth checking out.
- Optimizing Mobile Performance HTML5 — Discusses what it takes to create a mobile HTML5 web app. Minimalistic approach (using core HTML5 APIs) and basic fundamentals that will empower you to write your own framework or contribute to the one you currently use.
- Preferred Syntax Style for HTML5 Markup — Many developers have wondered what syntax style should be most prevalent in HTML5, personal point-by-point recommendations for clean and consistent markup, and some reasons behind the decisions.
- HTML5 Powered Contact Form — Build a HTML5 and AJAX powered contact form. The form will use some of the new HTML5 input elements and attributes, and will be validated using the browser’s built-in form validation.
- CSS Box Shadow — Create casting shadows off block-level elements using CSS3 Box shadows.
- CSS Transitions — Time to learn some animation techniques with CSS3, this article explains the use of CSS3 transitions, and browsers that support it.
- CSS Animations — Article explaining the use of CSS3 animations.
- Animation-fill-mode — If you’ve been working with CSS animations a bit and are curious about animation-fill-modes, this little tutorial and screencast will fill you in on all the details.
- CSS Flipping Animation — This tutorial shows how to create that Flipping effect in as simple a manner as possible.
- Shadows Experiments — The CSS box-shadow and text-shadow allow us to create some pretty cool design elements that don’t even look like shadows. The key is to think about how CSS shadows work and use them to get the desired effect.
The Text Editors
If you are familiar with basics of HTML and CSS, you might want to find a decent text editor to write your codes. Sure, you can use default text editors that comes with your OS, but there are other text editors that can give you the edge while coding HTML and CSS.
- Brackets — Brackets is a lightweight, yet powerful modern text editor.
- 12 Excellent Free Text Editors for Coders — Find that feature-packed text editor for yourself, which you’ll be using to write all those codes for a very long time.
- 22 Neat Code Editors for Windows — Another list of Text editors you can use.
Debugging HTML and CSS
By now, you must be using your text editor to play with HTML and CSS files. But did you know, you can make changes to your pages style in realtime using just your web browser? Yes! You can open a webpage in your Chromo or Firefox browser and start changes your layout style live. All you need to do is install a developer tool to your browser. There’s another powerful tool called Firebug for Firefox browser. If you need some help using these tools, checkout tutorials below:
- Introduction to Chrome Developer Tools — Do more than just CSS and HTML editing. Learn how navigate and use this wonderful Chromo Developer tool.
- Faster HTML/CSS — Another article to work with Chrome Developer Tools.
- How to use Firebug — For Firebug user for Firefox, here’s simple tutorial.
- Using Firebug to Troubleshoot and Customize CSS — Another tutorial for Firebug.
- Getting Started with Firebug — A Video tutorial for Firebug.
Have a nice day!
Content Manager at ClickHelp.co — best online documentation tool for SaaS vendors