In “9 Truths That Computer Programmers Know That Most People Don’t” by Macleod Sawyer, he quotes Ben Cherry and adds the following after:
“Under the hood, most critical software you use every day (like Mac OS X, or Facebook) contains a terrifying number of hacks and shortcuts that happen to barely fit together into a working whole. It would be like taking apart a brand-new 747 and discovering that the fuel line is held in place by a coat-hanger and the landing gear is attached with duct tape.” – Ben Cherry
That’s the funny thing about code, the website or program may work beautifully, it may run smoothly, and it may be absolutely beautiful on the front-end side (what the user sees). But, behind everything that makes it work it will have so many errors, and work arounds that barely work and that shouldn’t work, but do for some strange reason.
While this may apply to computer programming, it also applies equally to the web.
In March 2013, a study at Drexel University in Philadelphia, Pennsylvania, was conducted to evaluate the most common errors beginners make when learning HTML and CSS. Louis Lazaris of Sitepoint analyzed those results recently. He quoted from the survey a conclusion that explains the reasons most errors persist in HTML and CSS:
When a beginner writes code that has many errors but still renders as desired, they receive positive feedback in the form of the properly formatted web page. These errors are latent, remain unresolved, and reinforce faulty understandings that can become difficult to overcome.
This explains the statement by Ben Cherry. Web browsers work overtime to display whatever we throw at them in the code. Doesn’t mean it is right, deprecated, or totally wrong. The goal of the web browser is to display content on a web page. So remember, just because it looks right on the web page doesn’t mean it is right.
There is much about HTML and CSS that works perfectly with little or no effort. It makes sense. Then there are parts of HTML and CSS that make little sense. HTML5, the latest version, was supposed to clean up many of the inconsistencies and strange behavior, but it has its quirks, too. Things that should work, don’t. Things that shouldn’t work, do. We must understand not only how to code, but how the browser interprets that code. This is why I started out these two mini-series with the web browser before talking about HTML and CSS.
Welcome to programming.
I’ve put together a list of some basic guides and helpful sites for you to add to your resources and maybe learn more about how HTML and CSS work. This is a course about learning WordPress, and HTML and CSS are the basic building blocks. It is not a course for learning HTML and CSS. Hopefully the recent posts in this mini-series on HTML and CSS gave you a taste and will help you understand more about how a WordPress Theme works and how to modify it in future lessons.
There are new resources on HTML and CSS arriving on the web constantly. These are just a few I’ve found helpful over the years.
HTML and CSS Tutorials, Guides, and Help
This is just a taste of what it takes to understand how HTML works and how modifying the CSS styles in a WordPress Child Theme are often all you may need to customize the look and feel of your site.
For more information on WordPress and HTML, and other web programming and WordPress Theme development and design resources, check these out.
- Learning HTML and CSS Online (Free)
- HTML/CSS: Making webpages – Computer programming – Khan Academy
- HTML/CSS – Code School
- Learn to Code HTML & CSS – Shay Howe – Learn to Code
- HTML & CSS – Codecademy
- 30 Days to Learn HTML & CSS – Tuts+ Course
- Intro to HTML & CSS Online Course – Udacity
- to HTML/CSS Beginner-level introduction to HTML and CSS – Girls Develop It (gdi)
- Intermediate HTML/CSS HTML 5 and CSS 3 techniques for more advanced students – Girls Develop It (gdi)
- HTML and CSS from the Course HTML Essential Training – Lynda.com (fee)
- The Standards, Facts, and Rules of HTML and CSS
- HTML/CSS Basics for WordPress and Web Publishing
- The 10 HTML Tags You Must Know to Blog
- The Basic Structure of a Blog Post
- What is a Properly Formed Link?
- How to Add Images in Your Post Content
- HTML and CSS Basics Tutorial [Video]
- Truly Beautiful HTML Cheat Sheet
- Links and the Anchor HTML Tag
- Copyright: How to Quote and Cite Sources
- Design and Development with HTML and CSS
- Tutorial: How to Inspect, Edit, and Save a Web Page
- Learn to Code Advanced HTML & CSS – Shay Howe
- Website Code Validation and Testing
- Tips for Debugging HTML & CSS – Treehouse Blog
- 70 Expert Ideas For Better CSS Coding – Smashing Magazine
- Learn Web Development 101 — HTML and CSS Basics – The Odin Project
- CSS Selectors: Just the Tricky Bits – Design Shack
- WordPress Theme Basics
- Example of a Sandbox Post for Testing WordPress Themes
- The Basics You Must Know About a WordPress Theme
- WordPress Cheat Sheets, Checklists, and Infographics
- WordPress Theme Resources
- Theme Development – WordPress Codex
- Convert HTML to WordPress — The Theme Foundry
- Create Your Own WordPress Theme from an HTML Template
- Building a Website from HTML to WordPress (1 of 3): Photoshop Mockup – CSS-Tricks (video series)
- WordPress › CSS Coding Standards – Make WordPress Core
- In Depth HTML and CSS Information
- HTML and CSS Tools and Resources
- CSS Development : Firebug
- Debugging HTML and CSS with the Developer Tools (Internet Explorer) – Microsoft
- Top 10 CSS Tools for the Design-challenged Web Developer – WebReference
- 11 Top CSS Editors – Reviewed – Hongkiat
- Beyond HTML and CSS in WordPress
Now Back to Our Regularly Scheduled Programming
This has been another brief mini-series in Lorelle’s ongoing WordPress School. We’ve been learning about the very basics of HTML and CSS and how it applies toward your upcoming work on WordPress Themes.
There will be more of these mini-series as we dive deeper into how WordPress works from the inside out. They are designed to group related learning skills together to help you understand all the parts and pieces that go into WordPress.
This is a tutorial from Lorelle’s WordPress School. For more information, and to join this free, year-long, online WordPress School, see:
- Lorelle’s WordPress School Introduction
- Lorelle’s WordPress School Description
- WordPress School Tutorials List
- WordPress School Google+ Community
- WordPress Publishing Checklist
- How to Give Feedback and Criticism