Adobe Creative Cloud

November 15, 2016 /

Learn to Code Series: Intermediate HTML and CSS Resources and Activities

Now that we’ve gotten into some more intermediate HTML and CSS concepts, you can start using them to write semantic code and create more intricate layouts for your pages. The following resources will provide additional information on the concepts we covered in the Facebook Live session. Missed the session? Watch it now and download the completed files:

This post will provide a guide to resources and activities you can use to continue learning HTML and CSS as well as an activity to reinforce what you learned in our Facebook Live session.

Learn To Code Activity

Use this Dreamweaver activity to continue working on the project you started in the first Facebook Live session!

Intermediate HTML and CSS

These resources give more in-depth information about CSS and will help reinforce concepts and terminology you learned in our first Facebook Live session.

HTML5: MDN gives a great overview of all of the possibilities with HTML5.  Check out the semantics section review what we learned in the Facebook Live session.

Semantic HTML: A good overview on semantic HTML, what it is, and best practices.

Normalize and Reset: To help create consistent styles across all browsers, use a normalize or reset CSS stylesheet in your code. Normalize will remove a lot of the browser styling but leave some basic styling on text while a reset stylesheet will remove all styling from the elements.

HTML5 Element Flowchart: Not sure which HTML5 element to use? This flowchart will help you decide when you should use each element.

Semantic CSS Class Names: Learn how to best name your classes to help others understand your code and to plan for the future of your site.

Learning Dreamweaver CC

These resources from Adobe focus on helping you learn how to code in HTML and CSS with the help of Dreamweaver.

Taking the Next Step

These resources will help you take your CSS3 and CSS animations to the next level.

CSS3 Bling in the Real World: Discover some of the possibilities with CSS3!

Using CSS Animations: This MDN guide gives you all of the information you need to build amazing CSS3 animations.

CSS Animations: Take the next step with CSS animations and discover how to use keyframes in your code.

CSS Resources for New Coders

These resources are a few of the most popular for beginner and advanced coders alike.

caniuse.com: This website helps you determine how widely accepted certain elements and properties are across browsers so you can make sure your code is cross-browser compatible.

Github: Use Github to start keeping track of your code with Github version control or learn more about how to use the command line.


Complete Learn to Code Series:

Try Dreamweaver CC!

A modern web design and development tool that has been re-imagined for designers who code.

Download