HTML and CSS resources to kickstart your frontend

on


In this Article I am going to share a few resources for HTML and CSS for Beginners.
If you own a website, most probably you rely on some web designer to get those tiny details fixed, and the designer may charge you per minute spent on your website, or he may not always be available to you. But you can change all that by devoting some time and learning the basics at home. Yes! you can learn HTML and CSS at home, it takes bit of a practice and then there’s not stopping.
Once you become confident with HTML and CSS, you can easily fix things in your website HTML & CSS, and then who knows what! You may never have to call your web designer again!

Basic CSS and HTML Tutorials

HTML and CSS are very building blocks of web pages, but if you are not sure what is HTML-CSS, and how to use them to build website, I suggest you checkout some of very basic tutorials below to get you started.
  1. Chris Coyier’s basic HTML and CSS video tutorial (62 MB)   — A must watch video, he literally teaches you everything from picking up a text editor, writing your fist HTML page and using CSS for styling.
  2. 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.
  3. HTML5 Beginner’s Guide   — Since you know bit of HTML and usage, why not dig little deep? checkout these Beginner’s Guide.
  4. Basic HTML   —More HTML tuts for you, if a web page is a house, its HTML code is its blueprint, in this article you’ll learn the newest variation of HTML known as XHTML, learn how combines ordinary HTML with aspects of XML.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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?
  11. 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.
  12. 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.
  13. 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.
  14. 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.
  15. Starting with HTML + CSS  — Explains how to create an HTML file and a CSS file and how to make them work together using plain text editor. Tutorial targets people who want to start using CSS and have never written a CSS style sheet before.
  16. 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.
  17. Learn HTML & CSS in one easy to use guide. — Simple and comprehensive guide dedicated to helping beginners learn HTML and CSS, learn HTML and CSS. Outlining the fundamentals, this guide works through all common elements of front-end design and development.
  18. 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

When you 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.
  1. HTML-5-Tutorials — HTML5 is not just the future of web design, it’s the present. Site contains brief history about HTML, the new introduced elements and In-depth tutorials on HTML5.
  2. CSS3 Under 5 Minutes — Videos teaches you CSS3 briefly under 5 minutes.
  3. 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.
  4. Learning the basics of HTML5 canvas — Rob Hawkes explains how to use the canvas element, draw basic shapes and text, change the colour, erase the canvas and how to make it fill the browser window.
  5. CSS text-shadow — Achieve Photoshop style effects on your website text without having to resort to image replacement techniques.
  6. 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.
  7. Placeholder Stylization — Learn to style HTML5 placeholder attribute in Google Chrome, Safari and Firefox, in Opera, Note:IE doesn’t support it at all.
  8. 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.
  9. 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.
  10. 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.
  11. CSS Box Shadow — Create casting shadows off block-level elements using CSS3 Box shadows.
  12. CSS Transitions — Time to learn some animation techniques with CSS3, this article explains the use of CSS3 transitions, and browsers that support it.
  13. CSS Animations — CSS animations were introduced into Webkit in 2007. Over the years support was gained by Firefox, Internet Explorer and finally Opera. Article explains the use of CSS3 animations.
  14. Shaking Up The Web With CSS3 — Did you know it’s possible to make links that shake when you hover on them? Learn how to make links that shake on mouse hover with CSS3.
  15. 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..
  16. CSS Flipping Animation — Tutorial shows how to create that Flipping effect in as simple a manner as possible.
  17. 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.
  18. More CSS3 Tutorial List — Not satisfied with this list ? Here’s my another collection of Pure CSS3 Tutorials & Examples.

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.
  1. 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.
  2. 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:
  1. Introduction to Chrome Developer Tools — Do more than just CSS and HTML editing. Learn how navigate and use this wonderful Chromo Developer tool.
  2. Faster HTML/CSS — Another article to work with Chrome Developer Tools.
  3. How to use Firebug — For Firebug user for Firefox, here’s simple tutorial.
  4. Using Firebug to Troubleshoot and Customize CSS — Another tutorial for Firebug.
  5. Getting Started with Firebug — A Video tutorial for Firebug.
  6. Internet Explorer Developer Tools — Guide provides debugging HTML and CSS with the Internet Explorer inbuilt Developer Tools.
Take your time to comment on this article.

Comments

Post a Comment