Ah the humble module! A good many designs these days make use of modules in the content-y and app-y sites alike. A chunk of information, an advertisement, a grouped set of functionality... could be anything. The fact that they likely have visual similarity yet can contain anything leads to an interesting CSS challenge: how do you pad the inside consistently?

Here's a simple example where the module is set apart from the background through color differences:

html {
      background: #333;
    }
    .module {
      width: 20rem;
      padding: 1.5rem;
      margin: 1.5rem auto;
      background: white;
    }

But as soon as that module contains other elements, the padding can get "off".

<div class="module">
      <h3>Module</h3>
      <p>Pellentesque habitant morbi tristique senectus...</p>
    </div>

The paragraph will very likely have some global typography rules applied to it which very likely have some bottom margin. Even if you go with opt-in typography, you'd probably opt-in here since there is type present.

See the heavy bottom padding? Perhaps that's OK to you, but I'd suspect it's not. That heaviness comes from the consistent set of padding you've set on the module itself plus the bottom margin on the paragraph.

So what do we do here? A wet band-aid would be to remove margins on those paragraphs.

.module p {
      margin: 0;
    }

But I'm sure we agree that's pretty gross. What if a module contains two paragraphs? Now they butt up against each other awkwardly.

Perhaps just the last one?

.module p:last-child {
      margin: 0;
    }

That might work. But this fix is still feeling a little hacky. What if the problem element isn't a paragraph at all someday? It could be an <ul> or <ol>. Or <dl>. Or any other HTML element... Are we going to list every single HTML element out?

.module p:last-child,
    .module ul:last-child,
    .module ol:last-child,
    .module dl:last-child {
      /* losing battle */
      margin: 0;
    }

That's a losing battle for sure.

But we could match any element...

.module *:last-child {
      margin: 0;
    }

You could even omit the "*" there since it's implied and has no specificity, but I think it makes it more clear. I think that's closer to a good fix, but it's a little heavy. Lists always have child elements that this would effect. Anything with decendants would be a problem. To fix that, we'll just ensure only the top level element under the module gets this treatment with the child selector.

.module > *:last-child {
      margin: 0;
    }

That's decent. I still wouldn't call it perfect since descendants might actually be the cause of the final extra bottom padding. Like if the list items had paragraphs in them. You might want to chain them up a few times to match up to a reasonable level of DOM depth.

.module > *:last-child,
    .module > *:last-child > *:last-child,
    .module > *:last-child > *:last-child > *:last-child {
      margin: 0;
    }

That might just do it.

Here's a visual demo:

See the Pen JFynD by Chris Coyier (@chriscoyier) on CodePen

A totally different approach might be to leave the bottom padding off the module and let the child elements provide it, but that feels a bit dangerous to me as there is no guarantee the child element would come with its own (e.g. some generic <div>).

Have you run into this? Do you have your own solution you like?

Spacing The Bottom of Modules is a post from CSS-Tricks

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.

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

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.

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

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 companies 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.

“Don’t Fear The Internet” is a fantastic learning resource that teaches some quite useful HTML and CSS 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 Twitter using the hashtag #webeducation.

(al) (ea) (il)

© Jen Kramer for Smashing Magazine, 2013.