Teaching Web Design To New Students In Higher Education

Advertisement

The Web is evolving rapidly. Front-end Web development has been majorly affected by recent changes in coding techniques and approaches. In 2003, a competent front-end Web developer would have known HTML and CSS, possibly with a bit of copy-and-pasted JavaScript, and they built websites that would be viewed on desktop computers.

Not so in 2013! Now, a competent front-end Web developer is well-versed in HTML and CSS, JavaScript and jQuery, CSS preprocessors, new techniques such as responsive design and mobile first, and a world of new devices for viewing websites.

Just as a front-end Web developer’s job has changed, so must the basic introductory Web design classes offered all over higher education. How should one teach students who know nothing about HTML or CSS, so that they think about designing and building websites in a device-independent manner, using modern techniques such as responsive design and mobile first?

I have been teaching introductory Web design for 13 years in a variety of academic and commercial settings, and I’ve given a lot of thought to how we should be teaching two of the earliest and most basic courses in a college Web design and development curriculum. This discussion is important, because only a few resources are available for teaching Web design and development. Due to a lack of time and the rapid evolution of the Web, it’s difficult to revisit courses and update them with the latest material every year.

1
Increasing collaboration between full-time professors and part-time adjuncts can help improve the student experience. Image source2

Adjunct instructors, who frequently teach part-time and typically hold a “day job,” often build websites professionally and have resources to keep up with the latest trends and techniques in the field. However, without easy access to great teaching resources, they may find it difficult to present this cutting-edge material in a way that students can understand and appreciate. Full-time instructors and professors typically don’t build websites professionally (or they’ll build few of them), and with many other demands on their time, they may have a hard time keeping up with trends and techniques.

However, they often have deep experience in teaching methodologies, with a clear sense of what works and what doesn’t in Web design education. Because many adjunct instructors teach evenings and weekends, whereas full-time instructors usually teach day classes, these faculty rarely interact. Part of the key to improving the student experience, quality of teaching and curricula is to increase collaboration between full-time professors and part-time adjuncts. Both groups of instructors bring valuable and complementary skills to higher education. (Low salaries for adjunct instructors are also important to the discussion but, unfortunately, beyond the scope of this article.)

In this article, I’ll focus on just two courses: an introductory graphic design course and an introductory HTML and CSS course. Concepts such as website strategy and planning, mobile first, information architecture, usability, user-centered design, JavaScript and jQuery, content management systems and so forth are valuable and should be covered in the curriculum. However, these topics are typically (or at least should be) covered in separate courses in most college curricula and, so, are not addressed here.

Creating Designs

In most college Web design programs, students will take a course on creating website layouts as a single graphic in software such as Photoshop or Fireworks. Students might start with a screenshot of an existing website, layering on their own images and content to create a unique design, or they might create a design from scratch.

The idea behind this class is sound. Once students have mastered the basics of working with the software, the course generates discussion of usability, color, layout, fonts, negative space, image quality and placement and so much more, all without involving code. It enables students to picture a Web page in their minds without being too concerned about how the page would be coded. When the student does start coding the page, they will have the skills to clarify what they want to build before writing a line of code.

3
It is important to let students form an idea of a Web page before involving code. Image source4

In this course, students frequently have trouble understanding what happens beyond the canvas. If the design is 960 pixels wide, what happens when the monitor is 1200 pixels wide? Usually that’s addressed by a background color or repeated graphic. Students are rarely asked what happens if the monitor is narrower than 960 pixels.

Most students, if asked about a narrower window, would point out the scroll bar across the bottom of the page, alerting the visitor to expand their browser to see the full design. They don’t consider whether buttons are too close together for touch-based navigation, for example, or how text size might vary at different screen dimensions. Students in this course can, however, be guided to think about these issues.

Many design studios that focus on responsive design do not use comps, like those generated in this class, as part of their development process anymore. Instead, they prefer to use HTML and CSS-based comps to demonstrate the look of a website to a client. So, why teach image-based comps to students?

The reason is that, at this point in their development, students don’t necessarily know HTML and CSS well, if at all. By removing code from the picture, students focus on design principles, including graphic design and user experience. Once they learn HTML and CSS, they might never create an image-based comp again. However, in this process, they have learned how to navigate Photoshop and/or Fireworks, and they’ve learned the positives and negatives of working in a comp environment — all of which are valuable experiences.

Here are some tasks you could assign to improve this class and to prepare students for device-independent design work:

  • Build a design in 12 evenly-sized columns.
    This is a great time to explain about grids and how they work. Have students build designs based on this grid to demonstrate their understanding.
  • Show versions of the design.
    If the design looks one way at 960 pixels, how does it look at 1200 pixels? 320? 767? Have students use the same content in their designs, rearranged for these different screen environments. Be sure to ask about transitions — what happens as the design moves from 767 to 320 pixels?
  • Ask questions about photos.
    What does that big photo banner stretching so beautifully across the top of the page at 960 pixels look like at 767 pixels? What happens between 960 and 767 pixels?
  • Encourage students to think about touch.
    This is particularly important at smaller screen dimensions, but desktops and laptops are trending towards touch as well. Encourage students to build navigation suitable for fat fingers, for example.
  • Deemphasize slicing.
    Rather than thinking about the comp as the source of imagery for a website, consider it its own prototype. Slicing may not be required at all, because images may need to be generated in several sizes for different screen dimensions. Even background graphics can be generated in their own independent documents. By deemphasizing slicing, you also deemphasize the centrality of this comp for the website’s design. With responsive design, the comp sets a goal or a direction, but tweaking is required to accomodate the space between 320, 767 and 960 pixels and beyond.

Note that some companies5 are working on the problem of designing in a flexible environment without using code. When these programs are more stable, they might be worth incorporating into the college curriculum.

Teaching HTML And CSS

In a typical HTML and CSS course, students learn the difference between markup and presentation. Over the course of the term, students learn to create a Web page from scratch, manipulating HTML, CSS and image files. Their layouts will usually be completely custom, and they will typically learn about floats and positioning as part of this process. Browser compatibility may be touched upon as it is encountered.

6
“Don’t Fear The Internet” is a fantastic learning resource that teaches some quite useful HTML7 and CSS8 basics.

Fundamentally, nothing is wrong with this class. Students will leave knowing how to hand-code standards-compliant HTML and CSS. However, it does need a few modifications to account for modern design techniques:

  • Standardize in one browser.
    I’d recommend working with Firefox or Chrome as the standard browser in class, because they’re available on Mac and PC and are the most standards-compliant. Tell students that this is the only browser that matters for the purpose of this class. Cross-browser issues should be dealt with later, once students understand how HTML and CSS work completely in this browser. When cross-browser problems are introduced too soon, students get confused, unclear whether a particular problem is due to the browser or just badly formed code.
  • Teach HTML5.
    Students should learn how to mark up documents with sections, asides, navigation, headers and footers from the start.
  • Teach CSS3 and all types of selectors.
    Make sure students understand media queries as soon as they are able to. Introduce adjacent sibling selectors, child selectors, universal selectors, various pseudo-classes and so forth. Again, worry less about browser support, because these students have years before graduation.
  • Incorporate grid-based thinking early on.
    Even if students can’t code their own grid yet, they could certainly build layouts while thinking about 12 columns, using em and/or percentage widths and sizes. Have students code standard shapes of pages, such as two- and three-column layouts, with or without headers, footers and horizontal navigation, rather than leaving students open to code any type of layout. Understanding the trade-offs between design and code is important, so always address those.
  • As soon as students grasp floats and positioning, teach how to code a grid.
    Because students have been thinking about Web design with grid-based principles, this transition should be fairly quick for them.
  • Responsive design is now a short lecture, not a long one.
    Students are now able to pull together grid-based layouts and media queries. They’ve likely encountered image-resizing issues along the way, but if not, this is the time to discuss them.
  • Now is the time to discuss browser compatibility.
    Now that students have mastered valid, standards-compliant, responsive code, it’s time to think about browser compatibility. One way to introduce this is to work with poorly supported HTML5 tags or CSS3 elements such as rounded corners.
  • CSS preprocessing is a hot topic.
    Centralizing CSS variables is a great idea and is bound to be a core CSS skill, required by employers, in the next year or two. (Some say it’s already here.) Some LESS and Sass concepts, such as centralized variables and logic, also offer a smooth transition to a course on JavaScript and jQuery, in which similar concepts would be important.
  • Covering responsive design frameworks is not a bad idea.
    If there’s time left in class, this is a great topic to explore. I’d recommend covering Bootstrap if you’ve taught LESS, or Foundation if you’ve taught Sass. Students will learn how to read someone else’s code (an important skill!) and how to read documentation; they will also learn new technology, as well as explore the positives and negatives of using a documented, open-source framework. Finally, they will learn to customize this code for their own purpose.

Indirect Skills

I’ve covered skills directly shaped by modern front-end Web development. I’d also suggest covering some indirect skills, as part of either these courses or other courses that the students take.

  • The Open-Source Philosophy
    Rather than teach students that open source is free (like beer), teach them that open-source projects survive based on contributions. Introduce GitHub, and explain how people can download, fork and post their own code online. Acquaint students with open-source communities, and have them investigate the types of contributions most valued by these communities.
  • Online Portfolios

    These have been integrated in curricula for several years now, but they tend to be used more by designers than by developers. With portfolios, audiences can focus on the visual design itself, rather than on the code or philosophy behind the work. Make sure students are accustomed to posting code for review (linking to their own GitHub page is a great touch).

    Have students explain the problems they have been trying to solve and why they took the approach they did to solve them. Blogging should be required, so that students can track interesting articles, new approaches to problems, code snippets of interest and so forth. Encourage students to develop a professional social-media presence, focusing on their code and work.

  • Understanding And Modifying Someone Else’s Code
    As open source continues to gain acceptance and respect in the corporate world, the ability to understand someone else’s code and to modify it will increase in importance.
  • Identifying Trends
    What are game-changers for how we approach Web development, and what are passing fads? What skills should we be learning now? (There’s always something new to learn.)
  • Learning How To Learn Technology
    Students can’t always expect a teacher to spoon-feed them what they need to know next. They need to figure out how to learn without courses or books in order to stay on the cutting edge. Help students curate interesting blogs and social-media resources for finding tips and techniques.

Guidelines For Teaching New Students

Many talented Web designers and developers find teaching beginners to be tedious and difficult. Part of the problem is that a high-level developer knows so much information without realizing it. When was the last time a professional seriously had to think about syntax, file management, the order of styles in a style sheet, the correct markup for a page and so forth? Professionals encounter these issues many times per day, but they are all new to the beginning student.

  • Provide an overview.
    Fit the topic of interest in the larger Web universe. For example, what is HTML? What does the acronym stand for? Where was it developed? Can HTML stand on its own as a Web page? Who needs to know HTML? How does CSS fit with HTML? Don’t spend long on this overview. The idea is to orient students, giving the big picture. The details will get filled in as they work with the language. This material can be presented via slides or a whiteboard. As always, involve students in the discussion, and watch out for confusion. Make sure they understand the overview before moving on to code, or else the code will make no sense.
  • Write code with the class.
    In an in-person teaching environment, I like to open a text editor and project my code overhead, with students following along with their computers. This keeps them engaged. Some students find that they don’t type along with me well, whether because they have a different learning style or poor typing skill. In these cases, I encourage them to pay close attention, while some others will write notes and code snippets with pen and paper. If you are teaching online, I’ll do the same type of presentation, using Camtasia to capture my code on screen with a voiceover. In both cases, provide your files to all students, so that they can see your work. Comment frequently in your own code so that they understand your notes and examples.
  • Write code a little at a time, slowly making the examples more complex.
    Don’t introduce too many items at once. For example, as you introduce CSS, start by writing styles for HTML tags. Show how styling the body tag can control the entire Web page, including background color, font, size, etc. Write one attribute at a time, saving the change and displaying it in the browser every time, so that students see exactly which line of CSS controls which element on the page.
  • Ask questions along the way.
    Ask students to come up with solutions to challenges one might encounter when building a page, before confirming how to do it. If they can explain the idea conceptually, then the code becomes easy. For example, if you’ve styled the body of a Web page with blue text, ask how you would make the main heading red. If the students can explain that you’d need to somehow change the text in the h1 tag to be red, then they are doing very well. Then, you’d simply need to show them how to write that as code.
  • It’s hard to keep things simple, and easy to make them complicated.
    Students will ask complex questions along the way. For example, they might notice along the way that red can be written as #ff0000, red or rgb(255,0,0) and will ask what the differences are between them! Try to avoid a scenario such as this early on. Present a single way to write colors (I suggest #ff0000), and don’t revisit the issue until students have mastered this method. Perhaps later in the course, the students will notice rgb(255,0,0) in someone’s sample code; at that point, explaining the differences will be fast and easy. But in the beginning, when little makes sense and there is much to remember, too much information can be overwhelming.
  • Syntax is challenging.
    Beginning students forget to close tags, forget semicolons, make up tags entirely and make many other mistakes. Finding those mistakes is sometimes easy and other times challenging. I like to introduce the topic of validation fairly early in the process, so that students have an easy way to check their work. In the beginning, you might need to point out missing, extra or unclosed syntax, but teaching them robust debugging techniques from the beginning will help them significantly.
  • Managing files is a challenge.

    For most students in introductory HTML and CSS courses, file management is a constant problem. Some will have trouble differentiating between saving information on a hard drive versus saving on a thumb drive, and some might not know the difference between a file and a folder. You might need to explain the fundamentals before teaching how to manage files on a website. I try to keep all of a project’s files in a single folder on the desktop to start, because students can generally find the desktop, and a single folder leaves little room for confusion. All HTML, images and CSS are then saved in that single folder. It’s manageable at first, because students will require only a handful of assets for their first few websites. By the time students feel like one folder is getting cluttered and they’d like some more organization, they will have mastered how to link two files, insert an image and so on. They will know how the code is supposed to look and work; so, if some code isn’t working, they will reasonably assume that the culprit is a malformed path.

  • Remember that you are not designing for a client.

    A common mistake among talented instructors is to make their in-class sample Web pages beautiful, tweaked to perfection and cross-browser compatible from the very beginning. Unfortunately, that’s not the point. Beginners can easily discover beautiful designs by surfing the Web. Also, you are the instructor — you don’t have to prove your competence in this way. Your job is to show them clearly what each line of code does and how it affects the Web page, both in appearance and functionality. When I’m writing code with students, I insert a lot of hideous background colors and borders in the CSS to demonstrate the concepts. I encourage students to use this same method to debug CSS. Don’t give away too much CSS too quickly. The students will push to make things prettier themselves, unsurprisingly — many of them will be graphic designers and will hate how ugly their early Web pages are. However, when students see progress in their designs, from the first HTML page with no styling to a few basic CSS styles and finally to a full layout, they will be patient with you if you explain that a particular question is complicated or premature at this point.

  • You are laying the foundation for their career.
    Graphic design, HTML and CSS are critical skills that professional designers work with every single day. Writing clean, efficient code, understanding how to debug problems, researching better ways to address problems, resolving cross-browser compatibility issues — these are foundational concepts in the life of a front-end developer. I’ve seen students suffer greatly from bad introductory instructors. Your job is incredibly important; so, go slowly with new material, and make sure students have a solid understanding of it before moving on to the next topic.

Moving Forward

If you’re a working professional who also serves as one of the many instructors of website design and development in higher education or if you’re a full-time instructor, how do you address these early Web design courses? How would you suggest that colleges and universities improve their curricula? Post your thoughts in the comments or via Twitter9 using the hashtag #webeducation.

(al) (ea) (il)

Footnotes

  1. 1 http://www.flickr.com/photos/opensourceway/6555466127/
  2. 2 http://www.flickr.com/photos/opensourceway/6555466127/
  3. 3 http://www.flickr.com/photos/opensourceway/4426824995/
  4. 4 http://www.flickr.com/photos/opensourceway/4426824995/
  5. 5 http://techcrunch.com/2013/05/06/froont/
  6. 6 http://www.dontfeartheinternet.com/html/html
  7. 7 http://www.dontfeartheinternet.com/category/html
  8. 8 http://www.dontfeartheinternet.com/category/css
  9. 9 https://twitter.com/search?q=%23webeducation&src=typd&mode=realtime

↑ Back to topShare on Twitter

For more than a dozen years, Jen Kramer has been educating clients, colleagues, friends and graduate students about the meaning of a "quality website." Since 2000, she has built websites in a freelance capacity and as part of an agency.

Jen is a lynda.com author with fourteen published titles, including the popular "Up and Running with Foundation", " Bootstrap: Adding Interactivity To Your Site", and "Responsive Design with Joomla!". She has published two books on Joomla and is working on a third book on Bootstrap.

Jen currently offers in-person and online courses through Harvard Extension School, Community College of Vermont, Center for Digital Imaging Arts at Boston University, and National University. She is also available for individual private tutoring, customized classroom training, and consulting. Jen earned a BS in biology at University of North Carolina at Chapel Hill and an MS in Internet Strategy Management at the Marlboro College Graduate School.

Advertising
  1. 1

    Geert van der Heide

    August 5, 2013 1:13 pm

    A very nice and complete overview! This approach would, in my opinion, be very effective at teaching new students. Though it might be good to include, or at least mention, the next generation of web design tools like Macaw and Webflow. These tools (or near-future tools that may follow in the same vein) will most likely see a lot of use and become central to the front-end workflow of many. Of course, it’s essential that students learn the code themselves before switching to automated editors, and they’re not quite fully matured yet at the time of this writing.

    1
    • 2

      Geert van der Heide

      August 5, 2013 1:27 pm

      Forgot to mention: It would also be good to introduce the entire world of web design, beyond just design and front-end development. Obviously, the course focuses on those 2 things (and for good reason), but those don’t exist in a vacuum. So I think it’d be good to just quickly touch on the fact that students will be working with programmers and content management systems and (online) marketeers and content creators and so on. Adding this helps prepare them for the real work situation they’ll find themselves in.

      It’s really tough giving someone a complete view of the web design world; from handling client feedback, to keeping up with the latest javascript frameworks, to design trends, to database models, to microformats: The work we’re involved in is such a large and complicated world. But you have to start somewhere :)

      1
    • 3

      Geert, thank you!

      There are many excellent tools out there for HTML and CSS productivity. However, as you point out, unless students understand hand-coded HTML and CSS, there’s not much point in teaching the productivity tools! I have no objection to students using these tools once they are solidly grounded in the basics, but until they are, I generally stay away from those sorts of environments.

      As for a comprehensive look at web design as a college curriculum, I agree that would be quite interesting and valuable. As you mention, it gets complicated quickly. What are required courses and what are electives? Do front-end web developers have to learn PHP? Maybe you argue no, because they are working on the front-end… but then, if you consider so many might be working in WordPress/Drupal/Joomla on graduation, maybe some PHP becomes worthwhile? It would be quite a spirited debate. That might make for a fun conference round-table discussion!

      3
  2. 4

    Great article. We have this vision implemented in the curriculum of Mediatechnologie Webdevelopment Grafisch Lyceum Utrecht.

    2
    • 5

      Peter, that is wonderful news. I wish many of the the colleges and universities in the US were as forward-looking as yours.

      1
  3. 6

    A friend of mine asked me to help him with learning the basics of front end web design, specifically HTML and CSS. I had to laugh – I didn’t even know where to start.

    My first question to him was, “What do you want to do?”

    He replied, “Build a website.”

    I couldn’t help but laugh. I knew the meaning of my question, but he had no idea. I asked if he wanted to have an online presence, some type of content management system, and a basic understanding of how to get information up on a site – or… Do you actually want to learn what makes websites work the way they do?

    I feel lucky, in a sense. I first started learning to craft websites in 2002. I bought a book from Barnes and Noble and just kind of started. I know there were plenty of people that had already been doing this for years, but I still feel that I have a pretty ground-level vantage point on the matter. I remember before CSS. I remember the transition to graphic-intensive table-based layouts. I remember when WordPress was a blog platform, and thinking, “Wow, this can be useful for much more than a blog.”

    I love what I do. But I don’t think, if my memory was completely erased, I’d be able to start from scratch and hold interest in creating websites. There’s just too much to choose from. Python? Ruby? PHP? Ember.js? Node.js? I used to think XML would rule the web.

    In the end, I told my friend to start with HTML and CSS. If he had a project in mind after that, I would do my best to steer him in a decent direction. But I don’t think anyone’s paths are the same. I learned more by finding languages, open source projects, and new technologies and saying. “What’s this? This looks cool. I’m going to try this.” There may have been less when I first learned, but in another sense, I’m still learning. Still trying new things. I don’t know what you should learn next. JavaScript, maybe, or one of PHP, python, or ruby. I don’t know. Just be sure to make something. That’s the best advice I can give.

    12
    • 7

      Hi Mark — yes, I totally hear you on that! There are so many different directions for today’s web design/web development students to take. Ultimately, everyone has to learn HTML and CSS, though, or they won’t be long for our world. I think your advice to your friend is great.

      After he learns HTML and CSS, he’ll also know whether he has any interest in doing more. He may discover there’s a reason that people hire web designers and developers, and he has no interest in doing anything further with web design. That’s a legitimate outcome also!

      7
      • 8

        I think part of the beauty of the web is the space there is for people that don’t even know a single HTML tag. All the marketing people who you’ve got to write some quick HTML for so they can post something on some blog, that need an image for their Facebook page or some help setting up their YouTube channel.

        All of them can be immensely successful, without knowing a thing about the actual programming side.

        And yes, it does make us the “Gods of the internet”. We code, use frameworks, implement CMSes and blog about all of it while we do it.

        We’re epic.

        4
        • 9

          There’s absolutely nothing wrong with those who work on the web but don’t code. What would we do without good writing? Great graphic design? Amazing photography? Business vision? We who code tend to undervalue these contributions, but they are critical to a great web.

          4
    • 10

      I know exactly what you mean. I’ve been coding HTML since I was 12 years old in 1998. Which means I’ve been writing HTML for 15 years. HTML in and of itself is not complicated to learn, I’m proof of that. But once you start layering on all of the other things Jen mentioned in this article, it can get quite complicated. Over the years, I have adjusted my knowledge with new technology as it has come out — shifting from tables to divs, html to html5, css to css3, cgi scripts to php, flat file websites to includes, CMSes, etc.

      I’ve had people ask me to teach them how to do this and usually I just tell them to “google it” because teaching is such a time intensive thing and I have no experience in doing it. At my last job I did have some opportunities to teach an intern basic HTML & CSS. I noticed that I kept having to back up and explain things more simply. It’s hard to explain, but just the aspect that you have so much knowledge stored away that you don’t even have to think about it — then when your pupil makes weird mistakes you realize, “Oh, yeah… there’s also this little nugget of information you need to know.”

      I’ve also had several people over the years ask me if I ever thought about teaching web design classes… and I’ve always shyed away from it. It’s a huge commitment and honestly I’m still learning new things. I’ve been working as a designer and project manager for the past couple years when all of this responsive stuff has gotten big so that’s something I need to dig into more. I have a basic knowledge of it, mostly from a design standpoint and not a development one. But I am not really on board with “designing in the browser” … personally I still like pushing pixels around in Photoshop as a creative tool. Any time I’ve tried to design in the browser it just ends up uninspired. Photoshop is my canvas.

      0
      • 11

        Not everyone is cut out to be an instructor. Think of all of the conference, meetups, user group meetings, and other tech lectures you’ve attended. How many times have you thought that the speaker was a brilliant person and clearly knew their stuff, but they simply could not communicate the concept they were trying to teach?

        As you rightly point out, it’s incredibly difficult to break down tasks that we experienced web developers think about as trivial. However, beginning students are can be overwhelmed by these concepts. I think file management is one of the best examples. Paths to files and folders, the use of ../, the difference between FILE.html and file.HTML and file.html, these are things we work with every day but we never really think too much about. Beginning students, though, struggle mightily with this.

        Many people also find that teaching beginning web design is incredibly boring. The concepts are so simple to them that it’s just not interesting to discuss. I mean, how exciting is HTML, really, after you’ve been working with it for 12 years? It’s as natural as breathing, and it doesn’t seem magical in the slightest.

        I find it helps to reframe the way you are looking at the problem. Sure, the subject matter for basic HTML might not be too interesting. So think about other problems you might solve. What did you get hung up on when learning HTML? What concept did you struggle with? Find a way to present it better, providing that nugget of information that made everything fall into place for you.

        Or consider this: You are training the next generation of web developers. What do you want them to know? Think of all of the bad code you’ve fixed in your lifetime. What are 5 or 10 coding errors you never want to see again? Train your class accordingly so they never make those mistakes.

        That’s how I make things more interesting for me. Hopefully something there will work for you, too.

        0
  4. 12

    I taught Web languages to both web and non-web university students for 6 years – understanding the DOM was critical, as was thorough understanding of what HTML/CSS/JS is and isn’t. The most successful students were the ones who first took the time to understand the structural parameters but then challenged how it was used for presentation while maintaining content semantics.

    2
  5. 13

    Dmitriy Kubyshkin

    August 5, 2013 2:00 pm

    I’ve been fortunate enough to teach several people about Frontend who new nothing about it and I think that it helps a lot to first learn a concept of a document (DOM). By that I mean an abstract structure that has some relationships between elements. This then translates to html as a kind of language for that structure.

    CSS is just a way to make that structure look different and JS allows you to change it however you want. When that clicks in someone’s head you see a big lightbulb go on and a big smile.

    5
    • 14

      Dmitriy, you are absolutely correct. The DOM is a very important part of this initial education. I do cover that as part of the curriculum, although I did not mention it specifically above. Thanks for pointing that out!

      0
  6. 15

    I think the biggest problem is the fact that the transition from print design to web design was a very quick one. Print designers were used to designing for a fixed canvas, and this showed with the designs we all saw during the first decade of the popular web.

    The browser will never be a fixed size. The job of a web designer is to communicate information to the end user in a range of sizes that we don’t yet know.

    Of course everyone should learn HTML and CSS first, but students should also learn as early as possible that the browser is not a fixed canvas. They should learn to plan out an information architecture, sketch, then build in the browser, using breakpoints that suit the content.

    3
    • 16

      Agreed, Chris. That’s what I’ve tried to address here. The issue of fixed widths is huge. Many people have difficulty trying to design something that could be any dimension at all.

      Back in the early web, we’d teach HTML first — font tags, spacer GIFs, 15 layers of nested tables. Then we’d tell students to throw it all out and use CSS for those presentational issues. It was ridiculous, as students could learn HTML and CSS together. (I still remember how happy I was when a student asked me what the purpose of a spacer GIF was!)

      My argument here is similar. There’s no reason to teach fixed width layouts, XHTML, and Dreamweaver in 2013. Let’s get right to responsive design and mobile-first thinking from the first design and HTML courses, rather than learning fixed-width design first and then trying to adapt to responsive layouts. Unfortunately, this old approach is still very common at US colleges and universities, where students learn fixed width first because it’s “easier”, and then they have to forget that and learn responsive later.

      0
      • 17

        You’re fighting an uphill battle, but those are the best kinds to fight.

        I cannot count the endless times where non-traditional thinking has been the solution to an issue. So many people learn traditional methodologies, and that can work well enough for many areas; but the web is always changing.

        Like how people used to build structures and put asbestos in it; we know better today. Yet there are tons of schools which are continually telling new Web Developers that “asbestos” is the way to go. We have to get to these minds and teach them the Mobile-First and Responsive Methodologies before they continue to take the web down the wrong direction.

        1
        • 18

          Agreed, Aaron! As recently as last year, I read a course description that referenced DHTML (anyone remember that?). At least we’re not teaching table-based layouts anymore!

          0
  7. 19

    I’m trying to teach myself web design. Though I’m not a teacher, I still find this article useful as I can use the suggestions and apply them to my own learning plan.

    I came across the ‘WaSP InterAct Curriculum’ some time back, while searching for a sample curriculum to follow. What’s your take on that?

    1
  8. 21

    I’m currently enrolled in a continuing education Web Design Certificate Program at a well known university and the most glaring omission is even a basic introduction to graphic design. That and the classes are just too short. I’m fortunate in that I have the time to do the work and also the copious research on subjects like best practices on grids and layouts which have yet to be covered in any course I’ve taken. I think I’ve learned more on my own than in these courses, unfortunately. You’re absolutely correct about the faculty not talking to each other or even knowing what has been covered in a previous course. Because the curriculum is structured in a way that a student can take classes in any order, this results in a lot of time spent covering topics that some students have already covered while others have not. I think this problem has been recognized and staring in the next semester, all students must take courses in the same sequence and as a group from the beginning to the capstone project. With that all said, some of the best sources of information I find is from reading blogs like this one.

    1
    • 22

      Yes, some web design programs focus exclusively on front-end code (HTML, CSS, Javascript). I think a well-rounded program needs to introduce a lot of things on the periphery as well. I think all students should take project management. They may never do project management, but students should have an appreciation of what it is, how it works, and why it’s important. I’d also like to see front-end web designers and developers take internet marketing. I think it helps with messaging, even if the students never do it in real life.

      Not enough time in class is always a problem! It’s good that you’re learning about how to learn new technologies outside of class. That’s a very important skill to have.

      0
  9. 23

    Monique (@webatou)

    August 5, 2013 5:23 pm

    Very interesting!
    However, an important notion is missing: accessibility
    The goal is not to train accessibility experts (another job) but to learn impact of proper use of HTML and CSS, of good choice for colors and typography…

    1
    • 24

      Monique, you are correct. Accessibility issues are important and should be covered as part of the curriculum. Standards-compliant markup is a good start but that’s not the whole story. If instructors can weave standards into their curriculum — and not just including alt tags for images! — that would be an excellent addition.

      0
  10. 25

    This is wonderful timing! I’m preparing coursework for an Intro to Web Design class I’ll begin teaching soon at my local college. Thanks for the advice.

    1
    • 26

      You are very welcome! Best of luck to you in your course. I’d love to hear how things turn out for you. I always learn the most teaching.

      0
  11. 27

    Wonderful article.

    I just wish that teachers would be more willing to get with the times–a lot of them simply haven’t done actual web work in a long time and so what they create is outdated.

    I’m entering college this fall and it scares me a lot, considering my college’s website still uses table for layout. So my question is…

    what can I, as a student, do to ensure that my teacher is teaching current standards so that other students are learning outdated techniques?

    2
    • 28

      Erick, this is a big problem with higher ed. The full-time faculty may not be up on the latest techniques, while the adjuncts may not be empowered to teach the latest techniques.

      I think your best bet is to do what you already seem to be doing! Read Smashing Magazine, A List Apart, and other quality websites that are talking about these new trends. Find a good way to stay up with the latest techniques. I am very partial to lynda.com — and very biased, since I make videos there, but I also watch videos and learn there as well. Read sites like Mashable that talk about marketing trends, and some of the business sites that talk about trends in strategy and planning (Forbes seems to do well).

      By the way, just because your college site uses tables for layout (yikes!) is no indication of the quality of the education. The staff that build the site are generally not the faculty that teach the techniques. However, it would be good feedback for the IT department and marketing departments for your school to hear that you noticed, and you’re concerned about the quality of your education. Sounds like they are overdue for a redesign!

      2
      • 29

        This is why I loved going to a state college — the emphasis on practicality. The professors came directly from the field and had scored some very prestigious design clients and awards. This was to make them equal to the professors with doctorates who taught the more specifically intellectual topics. The emphasis was on design principles, client research, design criticism reviews, etc., and we were directed toward training books and CDs for specific software and coding skills. The class time was used for the concepts and culture of design.

        3
  12. 30

    Jen, thanks for tackling such an important subject. I think about this problem all the time, but through a different lens.

    The gap I witness the most in student portfolios is in the design and strategy end. I struggle to find students with the adequate skill sets out of college for a web design job. Schools are failing to teach “the thinking piece” which occurs before you begin a design. They are also failing to teach systematic concepts which are vital to web design.

    For instance, I see a lot of student portfolios which show that the student has done a few typography exercises, made a poster or two, and generated one basic website (which generally loads slow).

    What I’m looking for is a grasp of content hierarchy, repeatable design systems, and an understanding of how to create a site that achieves a goal.

    These skills are technology independent, and yet are still not being taught.

    Part of the issues is what you stated in your article – that web design is viewed as an independent trade – detached often from the Graphic Design departments or taught in extended ed. This structure – as you pointed out – is part of the problem.

    The larger meta issue here is that sales/marketing/dev/writing and design are all part of a companies digital strategy and each person entering this field will be better served if the learn a bit about all of those elements.

    I see an opportunity to meld these disciplines and teach web design as a more holistic discipline – that pulls for design, business, pr, creative writing, marketing, tech, and psychology. If the internet is going to serve people, then we as practitioners need to created it more thoughtfully.

    We are no longer building websites. We are building businesses, communities, and affecting change.

    4
    • 31

      Oh Nica, you must have heard one of my rants before! The first chapter of my book, “Joomla! Start to Finish” was called “I want a website and I want it blue. How much will that cost?” I spent the entire first chapter talking about the importance of site planning before I ever started talking about installing Joomla. One annoyed Amazon reviewer said I wasted time until page 77. :-)

      You are so right on this point. Website strategy and planning is critically important, and it should absolutely be a core part of the curriculum.

      When I’ve taught at the graduate level, I often focus on this in my in-class lectures, leaving students to work through code and software issues via video training. I do wish schools would emphasize this skillset more, but as we both know — it’s not the art department, and it’s not computer science. It’s some weird business-ish/marketing-ish/library science-ish hybrid that no department seems to want to own. The cross-disciplinary courses are the hardest to offer.

      If you figure out how that problem should get fixed, do let me know!

      1
      • 32

        Funny – I haven’t heard your rants :). All these ideas are from trying to hire qualified individuals.

        I feel like the solution lies is Design departments restructuring on a fundamental level.

        Additionally I’ve had the idea to set up a scenario where the class is paired up into teams of “clients” and designers – so that people gain first hand experience in what it’s like to design for another person. The assignment would be a student portfolio to make the project useful, but the clients would not be able to jump in and design it themselves.

        In the mean time Treehouse, Lynda, and all the other teaching platforms are picking up the slack, along with this blog and a slew of others.

        Thanks again for writing about this.

        2
        • 33

          When I was teaching at Marlboro College Graduate School, we had our students work on a real-world problem for their capstone (master’s thesis project). The students would have an actual client they had to work with, gathering requirements, thinking about approach and what they could build with the time and budget that they had. I think this is a “learn by doing” topic, where students learn best by diving in and doing it. Your idea of having internal clients in a classroom is also good. It makes students aware of what it’s like to be a client and what a client might be thinking about when working with a designer.

          3
      • 34

        I came up with the answer – all graphic design departments should become web design. With print taking a back seat.

        1
        • 35

          In early 2012, an art department asked me to teach “Web Design 2″ to graphic design majors. I asked what Web Design 1 covered, and was told a bit of Dreamweaver, a bit of Photoshop, a bit of HTML, and a bit of CSS, if I recall correctly. “Web Design 2″ was supposed to be half CSS and half Flash. I wound up chatting with the department head about this curriculum (like why are we teaching Flash for the web in 2012?), but mostly I felt bad for these students who were being trained to be print designers. Their portfolios were full of artifacts for the dying newspaper, magazine, and book publishing industries, and their web skills were 8 years out of date — and they’d paid handsomely for their degrees.

          It did inspire me to talk more about curricula and raise awareness of the disservice we do our students — who are taking out huge loans to pay for school in the US — by not preparing students for the skills they need in the workforce right now.

          3
      • 36

        This is the approach at Salem State College. The design department is excellent. We were informed of design principles and directed to re-design corporate material.

        0
  13. 37

    Kathryn Downing

    August 5, 2013 7:43 pm

    Can you recommend any resources for current web designers who need to update skills? I try to keep up-to-date, but it would be nice to periodically have a crash-course on a new topic. Even if it’s something I may have read an article about, if I don’t practice a technique frequently it’s hard to make the knowledge stick.

    2
    • 38

      Yeah, that’s the problem! You can learn something new, but if you don’t use it regularly, it doesn’t stick.

      I live in the Boston area, and there are tech talks happening somewhere in the city every night of the week. I try to make at least one talk a month, not just to learn something new, but because the networking is so important.

      Online video training resources like lynda.com are well worth their subscription fees, if I do say so myself. I’m an author there, but I also learn quite a bit by watching videos there as well. If I need to come up to speed on something quickly, that’s where I start.

      You could always set yourself a goal for each month. What would happen if you set aside 4 hours per month (for example) to learn something new? One Friday afternoon each month, find something you don’t know about that you want to know about, and spend the afternoon reading up on it, or watching videos, or going to a talk. If you can afford more time than that, by all means, do so!

      3
  14. 39

    Great topic.

    One of the biggest problems today is that there’s so much “noise” with Front-End Web Development. Everyone and their grandmother wants to be the next person to coin a new tech or to develop a methodology that is little more than a restructuring of existing ones. Filtering out that noise is ESSENTIAL.

    Though it is a job in and of itself, I often tell many front-end developers that the natural next place to go beyond Front End is into the Back End (if your interests so dictate). HTML, CSS, Javascript, jQuery; these are all staples to know inside in out, but it’s a great feeling when you can delve into a serverside language, databases schema and other technology to provide even more functionality with your website.

    Even to this date, I’ve yet to find a resource that is structured, succinct, and gets down to the staples of front end web development. New Mobile-first and Responsive methodologies have a very respected following, but so few places can properly convey them in a way that is easy for newcomers to understand.

    I equally find it amazing how there’s a rather solid line between those who consume web tech and those who can develop it. At a time I thought the former was a cause to the effect of the latter, but this isn’t true. Consuming and Creating are just 2 very different things.

    0
    • 40

      I’ve noticed that when I am in a large, corporate setting I can see the value of scripting and databases and it’s easy to pick up the most effective tools. Do I really want to pull down these 100+ pages and change each one? NO?! and they have testing servers, too.

      0
    • 41

      Aaron, that’s great advice for those with an aptitude for programming. However, I have found some students are brilliant graphic designers, but they really don’t do well with programming. Those graphic designers would do better to concentrate more on UX/UI principles and work in other areas where they can use their design abilities. Learning to program requires a different kind of thinking than graphic design. It’s a pretty rare person, in my experience, who is both an amazing graphic designer and an amazing programmer. Usually people are talented in one area or the other.

      0
      • 42

        Yeah, I found that it is more common that people fall into one world of the other (Developer OR Designer), in fact, they are 2 separate careers, each with their own pay grades.

        I told myself that I NEEDED to be both so that I would have a higher marketability. Of the 2, I think graphic design is much harder (though programming is often more compensated for) Both are CRUCIAL to great web design. What good would a site be that looks great, but doesn’t do anything fantastic? And we’ve all seen sites where it can perform amazing feats, but looks like it was designed back in the 1990′s.

        I love telling people that the best projects aren’t “Design OR Development” but instead, “Design AND Development”.

        Also, UI/UX… I freaking LOVEit. I’m currently re-reading “100 Things Every Designer Needs to Know About People” It is a PHENOMENAL read into the psychological aspects of the Human/Computer Interaction (HCI) model. It’s really amazing how we perceive designs and interfaces. Truly an aspect of web development/design that can pay back in spades.

        2
  15. 43

    We still need iweb pro. Adobe Edge is getting there, it’s still like a wonky PS and visual code editor. Pages app on icloud is html, but a messy html.

    Responsive is nice and all but it feels like a hack as much as tables. Flex-box may be a good solution but can’t use it yet.

    Teaching and seeing an edit are two different things. And we still lack real tools on iPads and android tablets for css editing and live testing of web inspectors. This is only going to get worse as more people just work from tablets, or rather has. There’s a reason why apps like dream weaver are popular, it’s efficient at time spent to final product and well “dreams”. Which is why there are so many JS frameworks to speed up production.

    To draw with a pencil that keeps breaking every minute is quite a challenge.

    0
  16. 44

    Jen
    That’s a wonderful article. I’ve never seen that articulated so well and thoroughly. Bravo
    Dex

    4
  17. 46

    Matthew Williams

    August 6, 2013 10:12 am

    Really great article!

    I can relate to many points made here, experiencing them first hand during my degree (2003 – 2006) in Graphic Design: Interactive media. The course started with an introduction to design, typography and layout, a definite must before looking at any code, later moving on to basic web terminology, html and css (also Flash – which was at a peak at the time). This was followed by an overview of the set up as a whole, from purchasing a domain and hosting and using FTP to upload files, demonstrations of which made the whole thing very real. It all sounds very basic typing this now, but it’s very true that you really need to start right at the beginning.

    We were taught basic html and css as well as some software based creation, designing and exporting a html page from Fireworks I remember was one of the very first tasks. This was both confusing and a valuable lesson at the same time. I remember opening the Fireworks page in Dreamweaver and getting confused and frustrated by all of the unnecessary bloated code, which made me question what was essential, appreciating and seeing the need for clean and clear mark up. I still don’t know to this day if this was an intentional move, but it worked.

    I would never have been able to hit the real world without this invaluable introduction, taught by tutors and lecturers working in the industry made a huge difference, not just benefiting from up to date techniques (at the time), but as a student I had a huge amount of respect for them and inspiration to get to where they were one day. That was 7 years ago, I’ve been working professionally ever since.

    Having been heavily involved and worked on a number of responsive projects over the last couple of years, responsive design as whole would be a huge amount to take in starting from scratch. Starting out teaching fluid layouts and design for mobile first is definitely a good mind set to get things going. The mind boggles as to how you would structure a course that included all the other components that make up responsive design e.g image optimisation / replacement, polyfills, jQuery scripting and any necessary plugins. It’s very much in its infancy with many designers and developers still testing and trialling new techniques. I admire those teaching at the forefront. A solid foundation is definitely invaluable for the real world, but you definitely need a healthy, ongoing interest in current techniques to continue in the industry.

    6
    • 47

      Yes, it’s amazing how the web (and what we need to teach) has changed since you graduated in 2006! Much of that still needs to be covered (not the Flash but many of the other basics), and as you say, now we need to layer on all of the responsive and mobile first concepts as well. I hope other teachers will start thinking about how to teach responsive design from the beginning!

      3
  18. 48

    “Web developer is well-versed in HTML and CSS, JavaScript and jQuery”

    Common I thought we were past this… Treating jQuery like it’s a language or something. Especially for new developer they shouldn’t rely on jQuery too much. A huge ammount can be done just as easy in native Javascript…

    Sorry for getting out of the scope of this article. Like the rest! :)

    0
    • 49

      Point well taken. I think students should start with a solid background in JavaScript. They should definitely be introduced to jQuery, but only after they understand JavaScript by itself. Hopefully that’s the way most schools are teaching it.

      2
  19. 50

    I’ve always felt that learning how to code happens outside of the classroom. The amount of time I’ve spent running into and fixing my own problems could never have been taught to me.

    I’ve worked with a few good people who have been able to impart knowledge in me, but ultimately it was up to me putting in the time to read, learn and do.

    College did nothing for teaching me web development. In some fields, you just have to pay your dues.

    1
    • 51

      Brian, that’s a fair point. A fair amount of time learning to program absolutely happens outside of the classroom. Teachers can show you some overall concepts for debugging and fixing problems, but I think the only way to learn it is to just do it.

      Good teachers can help the process, though. When students are first learning, I will point out the badly formed syntax or misplaced/missing semicolons. After they’ve been working with code a bit, when they ask me what is wrong with their code, I do start asking them questions. Did you validate your code? What did the validator say? Did you run that error message through Google? Students get annoyed at me because I won’t give them the answer, but this is how I am encouraging them to dig to find their own answers.

      2
  20. 52

    I’ve recently taken on a role teaching second year tertiary students, as a professional in the industry. This article is great, but I think some things are truly too advanced for my students.

    Having said that, the idea of splitting the class distinctly into “web design” and “web coding” is really how you address the issue of complexity. At the moment my class is both crammed into one, and my complaint has been that it just isn’t an adequate setup for the students. I particularly agree that students should first develop a concept of designing for web, before they learn to code for web.

    2
    • 53

      Wow, that’s tough, having to cover both design principles and HTML/CSS in a single class. There really isn’t time to cover the information well in that sort of environment. I don’t know what to advise you, other than talk to the department head and find out if the courses could possibly be split in two. I think it was possible to cover this material in a single class… maybe back in 1998, when design had many fewer possibilities, fewer screen resolutions, and there was no CSS at all!

      0
  21. 54

    Hi Jen,
    Although I have just scanned your article and would read completely later on but found it very interesting and helpful.

    I being the teacher myself follow many of the advises you mentioned above. Understanding the big picture is essential for new students so that they should know from the start that where they would go from here. Thank You once again.

    1
  22. 55

    Hi Jen. Great post and amazing to see you responding to most comments here. My question is whether or not you teach designers anything about business ie. providing an ROI on a client’s website. Or incorporating SEO best practices in design? I’ve worked with so many designers that are completely oblivious to the fact that a site needs to do more than just look good. It is very frustrating having to go back and fix the mess a talented yet ignorant designer has made.

    Eric

    2
    • 56

      Hi Eric! Yes, absolutely I do teach project management, client management, tradeoffs in design, translating business requirements to design and functionality, and more. I fold those issues into introductory courses as those issues arise or a “teachable moment” presents itself. However, they’re not a formal part of the introductory curriculum in my courses. When students get to more advanced courses, I spend more time on these kinds of issues.

      I’ll be teaching a content management system class at Harvard Extension in the spring, and that’s where I start introducing many of these issues. (It’s expected that these students have experience with HTML and CSS going into this course.) Consider with a CMS that there are a thousand different ways to accomplish anything. So what’s the right way/best way to address a given issue? This is a great time to start talking about how the client is expected to maintain the site. If there are 17 steps to putting up a blog post, you’ve made it way too difficult — how can you consolidate those steps? Why are there 17 steps in the first place? How could you take a different (better) approach to maximize SEO and semantics, but still make it easy for the client to post their next press release?

      One of the best places to focus on these concepts is a project course of some kind, where students are building websites with real-world clients for a term. This is a great transition to the working world for students. They have the support of a seasoned professional to help them work through issues and problems, but at the same time, they get experience with client requirements, timelines, priorities, and so forth. Sure, building a full website is important for exercising all of the code skills the student learned to this point, but I think these soft skills are more important in a course like this. I think all designers and developers should have this experience as part of the curriculum before they graduate.

      0
  23. 57

    I teach at both a Community College and a University in Seattle, Washington. I can validate many of the challenges that you’ve addressed in this article. I even used this article to reinforce that we just aren’t “slicing” like we used to.

    But, my question is why you left out teaching rudimentary PHP, like using includes and basic conditional statements?

    1
    • 58

      PHP should be covered somewhere in the curriculum, but probably not in an introductory graphic design or HTML/CSS course, which is why I didn’t mention it here.

      There are two ways PHP could be covered. It could be a stand-alone course. That could be an elective for front-end developers, but it’s probably required for the back-end developers.

      If you’re just interested in introducing a few bits and pieces of PHP (as in reading it, but not necessarily writing it), you could also cover it as part of a content management system course.

      Good luck with your courses!

      0
  24. 60

    Hey wow excellent tutorial for teaching web design

    1
  25. 61

    An excellent and very enjoyable article! I wish it had been written two years ago, when I started working as a lecturer at a web design college. I would have found it immensely helpful.

    As more of a designer than a dev, I found this line a bit odd: “With portfolios, audiences can focus on the visual design itself, rather than on the code or philosophy behind the work.”

    I’m not sure if I understand the line “philosophy behind the work”, but as a designer, I think one of the best times to talk about “philosophy”, whether design rationale, design methodology, philosophy or otherwise is to do so in a design portfolio or showcase!

    Thanks for a good read. :)

    1
    • 62

      Hm, that might have been awkwardly phrased. What I was trying to convey was that many portfolios seem to be visually based. I’m fairly challenged in the graphic design department, so if I had to put together a portfolio graded on visual merits alone, I’d look like I had no idea what I was doing. I’m interested in coming up with a portfolio that reflects the specific skills of the student.

      If the student is a gifted back-end developer that can’t design a front-end, that’s awesome! But a visual portfolio isn’t going to display her skills in the best way possible. Instead, talking about the problem the client had and how she solved it is probably a better approach, maybe with some code snippets for those who understand the work.

      That’s not to say graphic designers can’t have a philosophy, design rationale, etc, as you rightly point out.

      Thanks for asking me to clarify!

      0
  26. 63

    I am a student who has taken the first few steps toward learning web design (transitioning from the field of industrial design). I am thankful for the quality of education I have received and my teachers have followed most of the methods that you suggest.
    From a student’s perspective, it would be very useful to provide an overview of responsive layouts and discussion of cutting-edge trends to show us where we are going, yet concentrate on writing good valid code from the beginning. Through learning code and playing with it comes a deeper level of understanding and confidence.
    Many of the class exercises in my introductory class were horrifically ugly and clumsy enough to prod many of us to investigate design options and experiment with the CSS (outside of the classroom). Later, as we were learning design elements and best practices, we were doing it in a thoughtful manner. It became a balance between design and development.
    It has also been helpful for me to learn where the field of web design has come from and how developers have met challenges in the past. While we may sit back and smirk at table-based layouts now, it was a clever solution to a problem. By understanding some past approaches, the field becomes more open to innovation as technologies change. It will be interesting to see how websites evolve as touch screens become more commonplace.

    1
    • 64

      Thank you, Paul! Yes, I think most students wind up doing some of their own work outside the classroom. That’s not a bad thing — I think that should be encouraged. If students come away from school knowing the current tools, but they have no plans for how to update their skills, I think we’ve failed as educators. I much prefer to talk with students who have done some of their own research and have questions about something they read, rather than trying to spoon-feed the information from the textbook to them.

      And yes, back in the day, using tables for layout was an absolutely brilliant hack. I’m sure we’ll be laughing at responsive design one day, too. It’s the nature of our business!

      1
  27. 65

    This was an excellent article and I can’t help but somehow wish I was taught web development back at uni like this. I ended up learning more by reading books on HTML and CSS. Well done and hope to see more of your articles.

    2
  28. 67

    Great article! Question though! I’ve noticed that JS libraries like jQuery seem to be overly encouraged (ie: throw a third party plugin at every problem!) without actually understanding why and how jQuery works (at least on a general level). How would you suggest that be taught to newcomers to front end dev?

    0
    • 68

      You’d definitely need to teach JavaScript first. jQuery is a framework built in the style of JavaScript, so the best thing to do first is learn JavaScript. jQuery can then be taught as a productivity tool, something to use when it’s helpful.

      I think the real root of the issue, though, is that there aren’t any great resources for learning one’s first programming language. Every book I’ve every read has the same format. Chapter 1 is “Hello World”, which is a great introduction. Unfortunately, Chapter 2 immediately gets too complicated, lumping too many concepts at once.

      In the last few years, we’ve jumped from front-end web developers needing only how to look up JavaScript snippets online and paste them into their code, to front-end web developers needing to write lots of scripts that aren’t addressed by copy-and-paste JavaScript. I think this is the root of the problem. People currently working in the field can understand (or mimic, or hack, or fake) the jQuery syntax to get the effects they want, quickly and easily. There’s been a similar existing phenomenon for years in many CMS communities with CSS — where people manipulate existing CSS, but they’re unable to write their own from scratch.

      I think JavaScript is a good first programming language for a front-end web developer, and I think a required course on JavaScript should be required in a college curriculum. There’s no compiling to worry about, and the results are visual and immediate, which I think enhances the learning process. However, that means we need great teaching resources for JavaScript, and I don’t know where those are yet.

      jQuery should also be part of the curriculum, as this is a skill desired by many employers. It also expands a front-end developer’s repertoire significantly, as it’s become somewhat ubiquitous… it’s in CMSs, front-end responsive design frameworks, and so forth. But it should not be what students learn first or exclusively.

      1
  29. 69

    Thank you, Jen, for this comprehensive article. I love Smashing Magazine and Lynda and you apparently are the trifecta! Your article has provided me with a great vehicle upon which to further drive my quest for responsive design in our web classes from the get go. I’ve been teaching much of what you’ve prescribed and I can now get on my self-serving soapbox with a big fat flag that sez, “read this article”! :-)

    1
  30. 71

    I’ve been thinking about this topic a lot lately, I wrote some thoughts on it over on the clearleft blog not so much on methods, but of where people are learning. I’d be very interested to hear your thoughts http://clearleft.com/thinks/educatingthefutureoftheweb/

    0
    • 72

      I think you’re trying to address the same kinds of issues I am. If you look at curricula for history, language, even science, there aren’t a huge number of changes from year to year, particularly at a basic level. This is not true on the web. Every year is a bit different and the critical skills to know evolve. Universities aren’t equipped to keep up with these rapid changes. Your model sounds like it could adapt more quickly, so it will be interesting to see how it turns out.

      The downside is that some employers still look for an academic credential in a specific area for a job candidate. However, increasingly in the US, the academic credential is less important, and provided that an applicant can prove they know the subject, they may still be able to get a job.

      0
  31. 73

    Jen,
    Thanks for a great article. As a beginning web design student (3rd semester) it gives me a great list of topics and skills to ensure I learn and master. While I researched programs and believe I picked the best in my region, I’m still sending a copy of this to a couple department heads.

    0
  32. 75

    This is great even for developers who need to get up to date with what employers expect you to know these days. It’s pretty easy to get in to a rut if you’ve been working at the same job/project for a few years, especially if your employer is slow to adopt and implement the latest technology.

    One thing that I didn’t see mentioned was preparing students for the reality of working at a job where you are interacting with colleagues from different teams (i.e. UX, product management, QA, legal, etc.) who also have a stake in your project. Also, introducing students to the different development methodologies, like waterfall or Agile, would go a long way to getting them ready to hit the ground running when they land a job.

    I would suggest adding to your list a course where students assume the roles of the different teams involved in a typical project and work to bring a product from concept to implementation. You could tweak it and have one group use waterfall and another use Agile.

    0
    • 76

      Thanks John — this represents the first 2 classes in a web design/development degree program. I’d expect that working across teams would be covered in another course, or as part of other courses. A good place to cover that might be in a CMS course, where you would almost certainly be working with a designer, engineer, content developer, project manager, etc.

      I’m all for bringing projects from concept to implementation. I think all students should do this before graduation. Many do this as part of a thesis or capstone course or as an independent study.

      0
  33. 77

    Jen, I came across your article tonight and it is completely. spot. on. I have been teaching a web design/development course for Journalism students for the last three years at Indiana University and it feels like you wrote the article to justify my techniques for that course! Thank you for making my day.

    0
  34. 79

    I just started teaching class a couple of weeks back on Interface Programming (HTML/CSS). It is really had to condense everything I learned in my professional career in one semester, especially when this is only their second semester coding. I have a very basic approach which helps them ‘click’ things together, but isn’t necessarily how things may flow in the real world.

    First, hand sketch wireframes based off of existing, responsive sites (such as Starbucks). Make it quick and sloppy! This teaches them to establish basic content area in a timely manner. Then digitize them to low-fidelity mockups; high-fidelity if there is time and to show them the differences.

    Introduce site maps and briefly discuss user experience principles with site maps and wireframes.

    Introduce code and positioning (floats, absolute vs. relative vs. normal flow) and have them code their low-fidelity wireframes. It is easy to code large, empty boxes on a screen.

    From there, start getting into details: different selectors, list types, tricks, media queries, etc.

    Then I have them use Skeleton as an intro framework since it is so basic. Bootstrap, Foundation, Pure, etc can be intimidating since they are still learning code (even if you strip it down). Skeleton is easy enough to recognize how things are working.

    They need to code a site based off of their wireframes but apply their own styling.

    Their final is usually a basic, one-page responsive website. I am thinking about incorporating CSS Zen Garden to teach them how content should be separated from design. Oh, I also make them track their time during the entire semester for each project. I think time tracking is something very important that I never was taught in school. It makes it so much easier to estimate contracts and make sure you don’t lose money on any project.

    In any case, this is a great article. I completely understand some of the points you make.

    I would like to introduce WordPress, GitHub, HAML, and SASS but again, for only one semester, this is rather ambitious.

    0
  35. 80

    Hello Jen,
    I am a graphic designer and web designer.
    I know html,css, bootstrap, responsive and now I would like to learn Javascript and Jquery. I will take your advice to learn Javascript first. :)
    Could you please tell me some good resources for JavaScript? Any tutorial?
    Thanks!

    0
  36. 81

    Nice tips, thks !

    Here some interesting elements. Good article.
    I am focusing on design even though at time I wonder if I should learn more about coding ! Given I’m a designer not a developer I want to concentrate on Visual aspect of my work. That’s why I use some web apps which generate HTML5 content without the need to have coding knowledge.
    I tried some great tool such as ‘Presenter’ by Easy WebContent, which I highly recommend. It’s an easy use tool and you can display your content on any device web and mobile.
    It still in beta version for now but you can actually create some cool pieces of work. It provides also a vector functionality which means you don’t need to pay attention of images resolution, it’s done automatically. Very helpful !

    0
  37. 82

    As the time is passing, web designing is changing. presently, the html5 is going very well. because, it has some good functionality which makes design outstanding. it is good to see that the students taking interest for learning this and you are in teaching.

    0
  38. 83

    I am teaching in a small school and have very little experience in this area. While I can do some things, it does make it difficult to created a fluid program. Where is the best place to start? Can you recommend any structured resources?

    0
  39. 84

    Hello Jen,

    I have been invited to teach a course in beginning web design – more in the style of the first type of course you talk about – we will not be getting into coding.

    This is my first classroom teaching experience, and I am looking for a textbook to teach from. I am particularly looking for something to help me plan the curriculum, not just a book about design for websites to read through. Do you have a textbook that you could recommend?

    Thank you!

    0
  40. 85

    Excellent article. Thank you for sharing it has giving me some food for thought and helped me see some of the things I am doing well and others I can improve upon. I always find external CSS confuses the students at first. They eventually start to get it and it becomes natural to them. It’s strange since they can’t even tell me when it happens, it just does. If you have any good suggestions with details of order and how to teach CSS specifically I would enjoy reading through it for more ideas.

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top