Best Practice blogs

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.  

Posted by Allison King on Jan 11, 2018 10:00 AM America/New_York

Leave a Comment

Log in to post a comment.

My library offers card holders Lynda.com for free - check and see if your library does!
  • Posted Thu 01 Feb 2018 09:44 AM EST
Exactly what Jennifer says - my local public library (in a VERY small town!) offers Lynda.com too.
  • Posted Mon 12 Feb 2018 09:30 AM EST
Is this also helpful for a new beginner with NO coding experience?
  • Posted Tue 03 Apr 2018 11:48 AM EDT
All of the resources here, especially the first three, are great places for an absolute beginner to start.
  • Posted Tue 03 Apr 2018 11:59 AM EDT
Very helpful, I've been needing to brush up on some of my coding!
  • Posted Tue 03 Apr 2018 03:16 PM EDT
These are great suggestions. I'm always recomending the first 3 sites.
  • Posted Wed 04 Apr 2018 03:38 AM EDT
Codeacademy is great. Easy to follow examples and lessons.
  • Posted Mon 09 Apr 2018 01:43 PM EDT
I've used w3schools for HTML before, but would love to dive into CSS, too. Thanks for including all of these resources!
  • Posted Mon 09 Apr 2018 01:45 PM EDT
This is a super helpful resource! We are in the process of migrating to a new online donation platform that requires us to know basic coding.
  • Posted Tue 17 Apr 2018 12:49 PM EDT
I learned HTML many years ago. I can surprised at how often that knowledge comes in handy.
  • Posted Tue 17 Apr 2018 02:00 PM EDT
I've put this off for too long - thanks for the push!
  • Posted Mon 23 Apr 2018 01:01 PM EDT
OMG Thank you so much to Jennifer Lange and Gurukarm Khalsa for mentioning Lynda access through a library membership.  I had no idea, and mine totally has it too!!!
  • Posted Tue 24 Apr 2018 01:28 PM EDT
HUGE THANKS!  So thankful :)
  • Posted Thu 26 Apr 2018 10:25 AM EDT
Thank you for this great information.
  • Posted Fri 27 Apr 2018 09:21 AM EDT
These are great and I've dabbled with a good number of these products. Thanks for sharing this helpful information!
 
  • Posted Mon 30 Apr 2018 12:19 PM EDT
This is very cool and helpful!
  • Posted Mon 30 Apr 2018 02:49 PM EDT
Thank you!  This is helpful! 
  • Posted Mon 30 Apr 2018 03:17 PM EDT
The university where I work has a lynda.com license and it is free for us here. :)
  • Posted Mon 30 Apr 2018 04:58 PM EDT
This is great--thank you so much! 
  • Posted Mon 30 Apr 2018 05:39 PM EDT
Just wanted to share this additional link for converting word documents to HTML: https://word2cleanhtml.com/
  • Posted Tue 01 May 2018 01:01 PM EDT
Library card! I never thought of that resource. Thanks all who brought that up!
  • Posted Tue 01 May 2018 04:55 PM EDT
Thank you for posting this!
  • Posted Wed 02 May 2018 01:30 PM EDT
Wonderful resources! I will have to check them out:)
  • Posted Fri 04 May 2018 08:08 AM EDT
I've used code academy and it's very comprehensive!
 
  • Posted Mon 07 May 2018 02:53 PM EDT
Thank you this is very helpful and i will share with a few co-workers
  • Posted Wed 09 May 2018 02:26 PM EDT
Thanks for the resources!
  • Posted Mon 04 Jun 2018 11:39 AM EDT
Thanks! W3 and Lynda are good. We created customized guides and one pagers specific to HTML and Intranet.
  • Posted Mon 04 Jun 2018 06:05 PM EDT
This is fantastic, thanks for sharing these links - something I need to check out for sure! Also, if you are looking for a specific problem, might I suggest YouTube has some brilliant broadcasters who could help explain certain concept for you if you need clarification on something.
  • Posted Tue 05 Jun 2018 12:18 PM EDT
Yay - I've heard and used the first three resources listed, BUT not the last two!  Thanks for posting - always good to learn stuff! ;-)
 
  • Posted Tue 12 Jun 2018 03:04 PM EDT
If you get stuck on a particular issue you can often find helpful answers on StackOverflow.com, too. If you don't, you can also post your own questions as well.
  • Posted Fri 15 Jun 2018 04:23 PM EDT
Great blog! I would love to see one that goes over the css classes that can be used in CRM to style elements like the out of box ones.
  • Posted Mon 18 Jun 2018 11:42 AM EDT
Very helpful blog post!  I'm going to bookmark all of these to check out soon.  Thanks for taking the time to share.
  • Posted Fri 13 Jul 2018 09:37 AM EDT
Thank you!!  I always do a random Google search to refresh my memory each year.
  • Posted Mon 23 Jul 2018 01:53 PM EDT
Wonderful list!
MIT OpenCourseware and https://developers.google.com/web/ are available as well.
  • Posted Sat 28 Jul 2018 05:22 PM EDT
The things you end up learning to advance your mission...
  • Posted Fri 03 Aug 2018 03:42 PM EDT
Our University offers Lynda.com.  Now to just find extra time in the days to do everything!  :) 
  • Posted Thu 09 Aug 2018 12:08 PM EDT