Five Helpful Resources For Learning HTML And CSS

Before working in the education industry, I was (what I like to call) a code monkey. I can easily code in HTML and CSS, with a touch of JavaScript and other coding languages thrown in for good measure. I even taught HTML and CSS classes in grad school (okay, so I guess I was never that far from education). But even an experienced coder, like myself, has to get help or needs a refresher from time to time. Here are my top five resources for learning and working with HTML, CSS, and websites in general.

w3schools.com

W3Schools is a free resource for learning HTML, CSS, JavaScript, and more. Simply pick a topic and go through the tutorials or skip to topics that interest you. Every topic gives you the opportunity to try what you've learned and some have practice exercises. Just note that on this site there is no way to save your progress.

Website: https://www.w3schools.com/

Codecademy

Codecademy also has a variety of courses for web development, including HTML, CSS, and JavaScript. Codecademy requires a login, which allows you to track your progress. Unlike W3Schools, you must complete a lesson to move on to the next one. While all interactive lessons are free, there are two paid options that give you access to practice projects, quizzes, technical help, and more.

Website: https://www.codecademy.com/

Lynda.com

Lynda.com contains a huge library of trainings on a wide variety of topics. In addition to HTML, CSS, and JavaScript, Lynda.com has courses on Adobe Dreamweaver, WordPress, and other tools you can use to create websites. Not only can you track your progress, but you can also create playlists of courses you want to take. Lynda.com is a paid service, but offers a free 30-day trial offer.

Website: http://www.lynda.com

RGB to Hex

Sometimes when web coding, I'm given a specific set of colors to use, often in RGB format. Instead of using a color picker and trying to get close, I use the RGB to Hex website. Just plug in the numbers for red, green, and blue, click Convert to Hex, and the site will generate the hexadecimal code you need to display the exact color. And if you need to reverse the process and go from Hex to RGB, the site has a page to make that conversion as well.

Website: http://www.rgbtohex.net/

WebAIM

Do you need to make sure your site is accessible to people who are color blind or who are using a screen reader? If so, WebAIM is a fantastic resource for learning about accessibility online. WebAIM also has tools to help you out. Enter a foreground and a background color into the Color Contrast Checker and the site will tell you if the combination passes Web Content Accessibility Guidelines (WCAG) for both normal and large text. Enter a website into the WAVE evaluation tool and receive a full website accessibility evaluation.

WebAIM: https://webaim.org/ 
Color Contrast Checker: https://webaim.org/resources/contrastchecker/
WAVE: http://wave.webaim.org/

Hopefully, you'll find these sites are a good place to get started. Once you have a good grasp of the basics, a good Google search can help remind you of the code for a registered trademark (®) or how to change the color of a font to green (style="color:#008800;").

Disclaimer: All websites referenced in this blog posting were live and active as of the publishing of this article. Sites discussed are not owned by Blackbaud, Inc. and may change, move, or disappear at any time.