Clues to teach & learn Web Design

I began teaching Web Design two years ago at private and public universities of Argentina and it became my second passion (front-end being the first one ❤). Most of my students have no idea of web development until they go through the classroom doors, and it is up to me to give them the tools to build a functioning website in about four months. These are my clues to teach and learn web design (from the basics):

  1. (First things, first.) Never say something is obvious: It isn’t. Not for them! You may have years of experience but they have just walked through your door, the most important thing is not to scare them away, make them comfortable. Nope, not even you were born being Sir Tim Berner’s Lee.

    Back to the Future - Remember old days!

    Recap of the past

  2. A nice recap of the past: Why don’t you tell them how you began? Designing in frames? Tables? Flash? FrontPage?! (I designed my first webpage in Word, just sayin’) How crazy and cool it was to change the user’s cursor into a flaming arrow?

    The passion for JavaScript and all the lovely pop-ups. Since they are familiar with all that stuff you will be able to engage them and they will learn how the web works and evolves through time. The philosophy behind W3C and its standards, the browser rendering engines and compatibility issues.

  3. The most valuable technologies: Not HTML, nor CSS, nor Javascript. But:
    1. How to manage files: It may seem silly, but the whole idea of NOT saving files separated and putting everything on just one folder is difficult to capture. Most of the time, when a student doesn’t see an image he looks all the code thoroughly, checking if everything is correct when the issue is simply that the image is on the Desktop. You can only move forward once they get this concept.
    2. How to find typos and unclosed tags fast: Oh typos, so much time wasted on you. But careful here, because I don’t mean those grammar typos, I mean witdh instead of width typos. This kind of stuff will make things stop working properly and that will give you bad headaches. In order to avoid yours and your student’s frustration at a code that’s not working the fastest tools to find these issues are:
      1. Firefox (HTML): Open any website and check out the source code with Firefox, this is the moment when you must not see red. If you do, these might include unclosed tags, typos and/or wrongly nested tags.

        Firefox Source Code Checker

        Firefox Source Code Checker

      2. Notepad++ (HTML and CSS): You may call me old-fashioned because I teach my students with this software but if you are familiar with it you must know that it has no auto-complete feature (enabled by default). Unlike Dreamweaver (please don’t use this…), Notepad++ does not close tags on its own, you have to close them yourself, which is an awesome exercise for someone who has never coded before, it’s basically a painful practice.

        Notepad++ Checker Tool

        Notepad++ Checker Tool

      3. W3C Validation Service (HTML and CSS): This is the most reliable tool there is. It displays errors and warnings with an explanation and the details of which line is having trouble.

        W3C Validation service

        W3C Validation service

  4. Teach them to teach themselves: You will not be there forever! Teach them to research, to “stay hungry”. What’s more important, you need to describe the best ways of keeping up to date (newsletters, Twitter, blogs, etc.). By doing this, you are certain that they will never be behind the new stuff. If their mother tongue is not English remind them how important it is to speak and to write that language.
  5. Codrops website

    Be Motivational

    Be motivational: From my experience, there is nothing better than opening Codrops in the middle of the class and to see the students’ smiles. Yep! Codrops is the best way of pushing front-end web design to the edges and to someone who has just walked into HTML and CSS this website means infinite possibilities. Plus, let us not forget that each demo has its own article, which means everyone can follow along.

Is there anything else you think could be added to this list? 🙂

One thought on “Clues to teach & learn Web Design

Leave a Reply

Your email address will not be published. Required fields are marked *