What I’d Tell My Younger Self About Learning HTML/CSS

Posted: 18 Aug 2014 05:30 AM PDT

It usually doesn’t take long to figure out that html and css are the first things to learn if you want to develop websites, but is there a best way to go about learning them? Do you simply memorize syntax and start developing websites or is there something more you can do to improve your learning?

Last week I began a response to a request for guidance in finding a path to learn web design and development. I offered thoughts for learning how to become a better designer where the graphic side of web design is concerned.

Today I want to continue with thoughts about the development side. I want to talk about learning html and css, particularly in combination with each other and in relation to compositional design principles.

Start with HTML

Your path through front end development begins with html. It’s the structural skeleton of every web page. You’ll quickly meet up with css, but html is there waiting for you as you take your first steps.

The syntax is relatively easy to learn. There’s a tag that turns markup on and corresponding tag that turns it off. Some tags do both at the same time. Learn the basic html structure of a web page with its html, head, and body tags and start filling it in with different html tags.

Together, html and css are used to solve real world problems so learn to see both in the context of real problems to solve.

Practice the simplest of things like creating different heading levels. Add tags to make text bold or italic. Work with lists and become familiar with html tables. Much of beginner learning about html is memorizing what tags you can use and what each does and then practice using them.

Don’t stress the memorization. It will come with use. The more often you use certain tags, the more you’ll remember the little details about them. The tags you don’t use frequently you’ll look up if and when you need to know the details.

Once you feel comfortable working with html tags see how they fit into the big picture. Keep in mind that html is about structure. The main job of html is to structure content and it’s important that understanding frames how you approach your learning.

Visit web pages and see how they’re structured visually. Header at top, footer at bottom, and a couple or three columns in between? Think about how you would structure what you see with html. What tags you would choose for different areas of content. Is that text part of a paragraph or is it part of a list? Would you use a generic div as a container for a block of elements or would a section tag or aside tag make more sense?

View the source code of web pages you find interesting as often as possible. Observe and note how others structure their html and what tags they use. Do you notice patterns in the work of a single developer? Across many developers? Why do you think those patterns exist?

Continue to explore source code. Look deeper and notice how other web developers structure blocks of content within the overall layout. Which blocks of content and elements are independent of each other and which rely on each other? Which are nested inside other structural blocks of code?

Memorizing html tags, setting text as bold or red, creating a table to hold some data are easy things that you can learn fluently over a weekend. The difficult part of html is up a level of abstraction and it deals with patterns for structuring real world content and best practices. Try to see the connection as soon as possible.

Combine CSS with HTML as Soon as Possible

While you need to start with html, it’s best to learn html and css together as soon as possible. They work in combination to solve real problems and you’ll often make decisions about one based on the other.

As with html, the basic syntax and use of css is fairly easy to learn. You can learn to how to add a background color to an element or add a border around a block of content in less than an hour. Like html you can be fluent with the syntax of css by the end of a weekend.

Different css properties can be grouped together. I’m not sure if this is the only way to organize css, but I’ve always liked the way the folks at HTML Dog group css properties.

Text and fonts
Colors and backgrounds
The box model (dimensions, padding, margins, borders)
Positioning and displaying
Lists
Tables
Generated content
Paged media
Miscellaneous

You can click the link above to see which properties belong in each group. Most of the property groups above are fairly easy to learn and mainly amount to similar memorization and practice that will help you with html.

The box model and positioning and displaying will take a bit more time to fully grasp. The syntax and basic properties are no more difficult, but their use takes some practice and experience.

See the connection between design principles and how you write the code to achieve the principles. Spend more time with text and font properties while you’re learning typography. Do the same for color. Remember you’re learning techniques for a real world problem. Always see what you’re learning within the context of the larger picture.

Layouts in CSS

The more difficult aspects of css are often about building layouts. Practice building real layouts with html and css. Try developing one with header and footer and multiple columns in between. Try developing two, three, and four column layouts using floats and then try again using positioning?

Can you recreate each layout using both? Don’t worry so much about what goes in all the blocks you’re moving around. Focus on the the overall structure of the layout. Continue to move the blocks around and develop different structural systems for layouts.

When you feel comfortable working with the box model, floats, and positioned elements, you can explore the some layout modules that are coming to browsers in the near and not so near future. For example:

Flexbox
CSS grids
Multicolumns
Regions
Exclusions

None are in common use today, but some will be and soon. Flexbox can be used today and will probably become the dominant method to develop layouts over the next couple of years. Learn it sooner rather than later. Multicolumns are also supported well enough to use for some production sites now.

The Path Forward Runs Through Responsive Design

As you work with layouts learn about responsive design. Focus first on the basics.

flexible layout
flexible images and media
media queries

These basics are much easier to learn than you might think. They’re simply some new techniques and new properties you might not have used before.

The challenge is less in the techniques and more in how you put the technique to use. It’s in rethinking how blocks of content are structured.

It’ll be easier for you to learn responsive design than it was for those of us who spent years developing fixed width and centered sites. You won’t have to unlearn some of what we had to unlearn.

Think Modular and Layered

One thing you’ll want to learn as soon as you can is how to work with classes and ids. Classes are central to working with html and css together and ids are central when Javascript is added to the mix. Think of classes as hooks to style elements and think of ids as hooks to allow you to add behavior and respond to events.

Learn about specificity and all the different types of css selectors that are at your disposal. Which selector is best to target a specific element or group of elements. Start thinking about your code modularly. Look into OOCSS, SMACSS, BEM, DRY CSS, and Atomic design. The goal of modularity is to make your html and css more maintainable and efficient to write.

Another key is realizing that any site can and will be viewed in devices you don’t expect or know exist. Learn to build web pages and websites in layers. Think progressive enhancement.

Build a minimal layer that works everywhere. Then build layers on top that offer a better experience when viewed on more capable devices. Make sure any additional layer doesn’t break the layers below. Your site can deliver a different experience under different conditions, but it needs to work under all conditions.

Closing Thoughts

You don’t read a book on html or css and then know all there is to know about either. Don’t feel like you have to master one before moving on to the other. It’s better to learn them both together.

You’re going to revisit both again and again, each time with a different perspective that will allow you to see and learn more. You need to learn the basic syntax of both html and css before you can work with them to create layouts for example.

The more important learning is not the details of a particular html tag or css property value. The more important learning is how to work with html and css to create layouts, work with type and color, and implement design principles. You can always look up the details about how a css property or html attribute works.

Remember the problems you’re trying to solve are real world problems of organization and communication and function. I can’t stress that enough. The problem doesn’t start with the technical details of a markup or programming language. Together, html and css are used to solve real world problems so learn to see both in the context of real problems to solve.

You can’t learn everything in an instant. Don’t worry, though. No one else can either. Everyone starts learning one thing at a time and slowly builds to the point where they can design and develop websites. Then they learn more to design and develop those websites better.

I’ll pick this up again next week and finish this short series with some thoughts about learning JavaScript, Backend development languages, and other things you should probably know if you plan to design and develop websites.

Download a free sample from my book Design Fundamentals.

The post What I’d Tell My Younger Self About Learning HTML/CSS appeared first on Vanseo Design.