Making Learning HTML and CSS a Whole Lot Easier (and Fun)
We asked Hannah some quick questions about her new course.
Q: Hannah, you are a trained visual artist and a game designer as well as a Web designer. What first attracted you to learning and practicing Web design?
My attraction to Web design is connected to my love of games. Over the years, I experimented a lot in Flash to make these weird, interactive art pieces that were part game/part website. When it became clear that Flash web design was no more, I was disappointed. I felt like Web design as a whole was going to return to this dreary, static place… and for awhile, it sort of did!
Rather than give up, I decided to continue on and teach myself HTML and CSS. I was most interested in CSS (the thing that makes Web sites beautiful), but begrudgingly learned HTML when I realized they came as a package deal.
Q: How did you first start to learn HTML and CSS? What do you think is hard about it for anyone learning it for the first time?
I first started learning from a handful of introductory Web design books. It was challenging, as the standards are constantly changing, and the books were already dated by the time I picked them up.
I think something many beginner designers struggle with, and certainly something I struggled with, is how arbitrary or unpredictable a lot of the rules feel. You spend all this time learning different tags, and you start to commit rules about opening and closing tags to memory, only to learn that some tags don’t even have a closing tag!
Students sometimes ask how I’m able to memorize all of these rules, and I tell them that I don’t. I’m constantly cross-referencing code on the Web!
Q: Your course makes it a lot easier to learn a technology that’s quite complex and abstract. What are some of the keys to understanding the subtleties and getting the code under your fingertips?
I think that clear, step-by-step images of the process make a big difference. When updating the course, I tried to include many side-by-sides of what the code looks like behind the scenes, paired with what it’s supposed to look like in your web browser.
If you can get your code to match an example design, then you can gradually branch out and start tweaking code to make a design your own.
Q: The adoption of HTML5 and CSS3 in the Web standards seems to have made the Web more appealing for designers again (what with Web fonts and CSS3 effects, and so on.) Do you agree? In what ways do you have more flexibility or creativity as a designer than say 4-5 years ago?
I do agree! I think that the beauty of flat graphics, web fonts, and CSS3 animations make an appealing case for web design. As for flexibility and creativity, I’d say the evolution of content management systems like WordPress, tools like Font Awesome, and responsive web design have been big game changers.
Over the past 5 years, the reality of mobile browsing has pushed designers to think about accessibility and user interface design in new ways. Creating a website that functions the same across hundreds of devices is a big challenge, but that challenge has inspired designers to think outside of the box!
Q: Your course emphasizes the virtue of learning hand-coding (versus using an HTML editor like Dreamweaver or Muse). Why is that important to a designer professionally, and what message do you have for designers who are afraid of code?
In my professional work, I often work with a CMS, but without that deeper knowledge of code, I’d have no way to customize a client’s website! Hand-coding is a web designer’s boot camp. It’s grueling, and it can be difficult for visual learners, but all that training and hard work leads to beautiful Web design. When a client asks if you can move the sidebar on their site from the left side of the screen to the right side, you’ve got to be able to answer that challenge.
When students come in and they’re feeling intimidated by code, I like to point them in the direction of all these amazing tools at their disposal. Want to troubleshoot your code for errors? That’s what the HTML5 validator is for! Forgetting to close tags? A program like Sublime will close them for you!
Q: Your course embraces responsive design. Why is it important to learn responsive design right now?
As I mentioned before, responsive design is the reality. More people are accessing the Web from mobile devices than ever before, and to ignore responsive design is to ignore human behavior.
We use mobile devices to communicate with loved ones, to navigate around in unfamiliar cities, and even to access live-saving information in an emergency. It might sound a bit dramatic, but a well-designed responsive website can literally save a life!
Here are just a few examples of sites that use responsive design to save lives:
Q: Everyone should learn Web coding (HTML/CSS) because: _________
It’s the future—and the future is here right now! 🙂
Visit sessions.edu to learn more about the Web design degree program and Web design courses at Sessions College,
Gordon Drummond is the President of a Sessions College, where he is Director of Instructional Design, among many roles. He's passionate about education, technology, and the arts, and likes to surround himself with more talented people.
