Introduction to Design Patterns

Introduction to Design Patterns

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Previous LessonMastering CSS Layout WelcomeNext LessonThe Stack Design Pattern

Lesson Transcript

  • [00:00 - 00:10] Hey, everybody. In this module, we're going to talk about design patterns and how they help us solve problems in software in general, and especially when doing layouts on the web.

  • [00:11 - 00:12] So what is a design pattern? A design pattern.

  • [00:13 - 00:31] One of the earliest examples of this comes from this book, a pattern language. And in this book, the authors introduce patterns that are used to solve common problems that people face when designing towns, designing buildings, and even designing individual homes or rooms.

  • [00:32 - 00:48] This is a quote from the book they say, "Each solution is stated in such a way that it gives the essential field of relationship needed to solve the problem, but in a very general and abstract way. So you can solve the problem in your way by adapting it to your preferences and to the local conditions at place you are making it."

  • [00:49 - 00:58] So in layman's terms, basically, a design pattern is a general, reusable solution to a commonly occurring problem. A design pattern is not the actual implementation itself.

  • [00:59 - 01:09] It is, in fact, a description or a template for how to solve a problem that can be used in many different situations. Now this concept was brought over and adapted into software engineering.

  • [01:10 - 01:19] One of the most famous books that did this is this book called Design Patterns for Elements of Reusable Object-Oriented Software. I'm written by four authors.

  • [01:20 - 01:29] Often times this is called the "Gang of Four." And they introduce several patterns of software in this exact way.

  • [01:30 - 01:36] So for example, they introduce this concept of a decorator pattern. And then they would give examples on how to implement this.

  • [01:37 - 01:42] Now you notice here, there's no code here. This is just high-level templates.

  • [01:43 - 01:49] That way it can be adapted into whatever code and implementation that fits their need. So why are design patterns useful?

  • [01:50 - 01:59] Well they create a systematic approach to solving recurring challenges. They promote module or unreasonable code base and they encourage efficient and maintainable code.

  • [02:00 - 02:10] This is especially helpful in CSS layout because without it, we just start throwing mud on the wall and we start getting things to work. But we don't really understand why we're doing certain things for another.

  • [02:11 - 02:30] So we're going to introduce in this course seven design patterns that will help you recognize problems and the solutions that solve those problems. And specifically we're going to talk about the stack, the inline cluster, the split, the cover, the center, the column drop and the grid design pattern.

  • [02:31 - 02:31] So I'll see you on the next lesson.