Collaborate, be compassionate, and creative!

Tim Berners-Lee, the person who founded the World Wide Web, posted an open letter on the web’s 35’s birthday (March 23, 2024) discussing the state of the web, affirming his original intention, the three Cs: the intention for collaboration, to foster compassion, and generate creativity, and criticizing its commercialization and monopolization. That is what the web is about. This is your community. Collaborate, be compassionate, and creative!

What do you hope to achieve this semester?

Write a few sentences expressing what you hope to achieve this semester, if you haven’t already done so in class. You should do this first thing before you read or hear how I will proceed. This will provide me with insight into what you expect, and will provide you with an indicator of your original expectations. You will post this on the landing page you will create next week.

Inspiration

Building a website opens you up to your target audience. Exposure to what you perceive to be your target audience is the biggest benefit of this course. Capitalize on that opportunity! It is not learning how to build websites, which is easy enough, and gotten easier with AI, but to use that knowledge to discover, target, and convert your target audience: to sell yourself. Use this course to position yourself within your professional horizon. It is an opportunity to organize, test out, innovate, secure and professionally develop yourself. The future will be shaped by AI. I expect you to use AI to help you confront that, and come out on top.

Let’s say your major is product design. When the instructor asks you to come up with a product idea, those ideas most likely originate out of your own interests, of what you want to do, or out of what you think your teacher requests. But by building a website to sell that project, you start thinking about the target audience. Who is the product for? How will they use it. How are similar products marketed? What can I learn from the competition? Do the research. Check out other websites. As the competition is established, they probably know a thing or two about how to reach their customers. This is the market you have to enter.

Working to define your target audience, figuring out how to best capture their attention, and selling your product will impact how you communicate whatever commercial art you are working on here at Parsons. Being attentive to the real world and targeting your work is the best way to initiate any product. Doing so will make you more competitive. A marketing strategy for your product will force you to create a more thorough and complete job from the outset.

The course demands you to think about your target audience. Who will use your website? Who are you building it for? This is an opportunity to think about, investigate, and target your work. Whatever your major: photography, illustration, fashion design, etc, your work will improve when you take your target audience into consideration. Building a website around that goal can only reinforce your concentration as to who your target audience is. Haven’t thought about it much? This is a commercial design school. You are being educated to solve the problems that other people want solved. You need to be clear as to what the problems are, so you can solve them. A website gets you into that space, so you can test things out.

What do I hope you achieve this semester?

I hope that this course will prime you to always consider your target audience for all your creative commercial work while at Parsons and beyond. Nothing keeps you from developing a website and marketing materials for whatever projects you will create from here on out.

I recently ran into the son of a friend of mine who picked up a new girlfriend who recently graduated from the fashion design program at Parsons. She did develop a generic website, using SquareSpace or Wix, I’ve forgotten. She did not investigate her target audience until the very last year, and was not prepared to market her work until the last moment. After telling her about this course, she wished she had taken something like this early on in her student career, so she could have been up and running by the time she graduated rather than figuring out how to do that after the fact. This course is about developing who you are and your professional career. Think of it as an opportunity and treat it that way. The real grade for this course is earned by who you become, not whatever letter grade on a transcript that few will ever take note of.

Grades

There are 20 assignments I use to grade your progress, but the main deciding factor is the progress you exhibit between the midterm assignments and the final. I expect professional looking, validated websites that take user experience into account. I provide feedback on your work throughout the semester, and grade everything at the end of the course, which allows for revisions to earlier or incomplete work without penalty. If you have any questions as to your standing in the course, please ask me. 

Everyone will not have had the same exposure to the plastic language of art, design, and graphic problem solving, and just because you can illustrate, in my experience, is no indication that your graphic design sense is any good. To help amend any visual literacy deficiencies, there is supplementary information and the vignelli Canon) to help everyone achieve visual literacy. My grade will not reflect the talents you do not bring to this class. I evaluate each person on their own terms, and do not compare students according to their fluency in design, etc. Seek help and advice from me or your peers, not only to solve problems in your code, but for visual and design issues as well.

Learning how to Code

Learning to code requires internalizing the rules and methods associated with HTML and CSS. You learn by coding. Internalize HTML and CSS by creating websites. Be ready to explore how to code. The World Wide Web is the teacher that has every answer. Effective web searches are a great way to understand the problems that you encounter.

Start with the basics and try it yourself. Take the initiative and build websites. The magic word is repetition. Your ability to problem solve with code improves with each website you build. The more websites you build, the better you become.

Chat GPT and an increasing number of AI competitors are available to help you code, create pictures, write copy, etc. Get to know them and take advantage of these resources. But first you have to be familiar with the basics of HTML and CSS, or you will have difficulty integrating the code they produce. I want you to use AI to help create websites that go beyond what you can code on your own. Your websites need to stand out, to be different from other websites, to reflect who you really are, and catch the attention you deserve. To need to learn how to hand code to make that unique and special website.

There are other ways to expedite the creation of a website, like using Twitter’s Bootstrap to realize your site. But you still need to have the basics down to take advantage of Bootstrap, and it takes time to learn Bootstrap that is not spent learning HTML and CSS. Though Bootstrap websites are professional, you cannot generate a totally unique site the way you can by hardcoding it.

Other programs don’t require that you know any HTML or CSS, and provide an InDesign-like interface experience. I’ve had students use Webflow, for example, and the websites looked professional. But the time it takes to learn such a program is better spent learning how to code. It provides you with much more flexibility in the end, and you still have to enter all the same information, just in an interface that you have to learn.

I haven’t used Adobe Dreamweaver in a long time, but I’ve used it at an ad company many years ago. They did not use the ‘what you see is what you get’ design interface, only using it as a development platform, because of its tight integration with the other adobe apps that the rest of the creatives used. I don’t know if Dreamweaver is still in use, but you are better off using your time to learn to code by hand.

Plagiarism

You are free to use any and all artificial intelligence and other web and code services to create your work. You can beg, borrow, and steal, just let me in on it, and be able to defend it, if I ask questions. By that I mean that you understand what the code is and what it is doing. The one requirement, if you use outside help, that you document where your code comes from. I will consider it plagiarism if you don’t, which can result in a) failure of the assignment or b) failure of the course, with multiple instances leading to possible suspension or even being expelled from the school. This is from the The New School Academic Honesty And Integrity Policy, so don’t pass off as yours what someone else created.

Document everything that you have not directly created and let me know what services you have used, etc. Most every service can be traced back in the structure of the code, but I prefer to know ahead of time where everything came from, rather than having to figure it out. That makes it easier for me to evaluate you on the basis of the code you write, and not the code you did not write.

Course Design

⁃

You only learn to code by doing it. My aim is to get everyone coding by the midterm, so you can practice coding on your own projects for the rest of the semester, with the strategy that you grow secure in your ability to code by the time you leave this course. I front-load the course. That means the first half of the course is demanding and requires you to keep up with the work. I ease up in the second half of the course, to give you the freedom to apply what you have learned on your own projects, or to catch up if they did not fully finish everything by the midterm. This format works for most students. Some students wish I would continue to provide guidance in the second half of the semester. I may figure out additional projects, but if I don’t, and if you are one of those students, ask me, and I’ll be happy to assign additional guidance, projects, and whatever it takes to keep you engaged. 

Seniors can choose to spend the entire course developing their portfolio or senior projects (instead of the final assignment, where everyone else has to sell something other than themselves.) I recommend you to sell something other than yourselves, as that allows for a more effective application of your creative talents. By completing the course successfully, you should be able to build a better portfolio website in short order. You’ll learn more when you’re not stuck on the same project for the entire 15 weeks, and portfolio websites are rarely complicated enough to warrant the extra time. But I understand the pressure to build out and perfect one’s portfolio site, so the option is there.

Easy access to artificial intelligence (AI) transforms this course, since it is possible to get the chat bots to write code for you. But to take advantage of that, you need to understand how to code, to integrate what it produces. While there are no restrictions of the use of chat bots to create code for you, you are to attribute where the code came from whenever you do not write the code yourself, be it from a website, or if a chatbot helped you write the code. This can be done using the comment element.

Why learn how to code websites by hand for the web? There are many website builders that allow a person without much prior knowledge to create a good-looking website without hand coding HTML or CSS. The tradeoff is that these web experiences use templates, making it more difficult to differentiate yourself from other web experiences. In today’s competitive world, to stand out in a captivating way is a plus. 

You should be able to follow me in class and glean most everything you need to learn how to code. If not, the course portal has your back.
 

This website is here to help you. Use this portal to help you catch up when you’ve missed a class or need a reminder later on. All the lectures are written out. If you have trouble with a topic as presented in class, read the topic on the website, and follow the links and examples. 

Make up the material of a missed class before the next class. Students entering the course after the first or second lectures need to read all the material as soon as possible and complete all assignments to catch up with the rest of the class. 

Much of the learning takes place as you write code. Learning to build websites is a cumulative effort: basic skills are necessary for building advanced skills. Watching me write code is not the same as writing code yourself. You start learning when you try to overcome the mistakes you have made. Don’t be intimidated. Start simple and you will become more adventurous as you gain confidence. Most of you will be wondering what all the fuss was all about by the time the midterm arrives. 

The scope of this course is coding HTML and CSS with a smidgin of PHP and JavaScript thrown in. A student needs a solid foundation in designing and developing HTML and CSS before they deploy JavaScript to develop behaviors. That makes it optional. Anyone can use existing JavaScript code, and if you already know the language, don’t let me stop you.

If you missed a class or do not completely understand a topic well enough to move on, go back to the supporting material. If you have difficulties understanding the material or completing your homework, email me or visit the Learning Center. I recently found out that the department has students available for you to ask questions at the Design Lab located on 10th Floor of 2 W 13th Street. Just go in and there should be people there to help you with your code. This may be better help than the university learning center.

In-Class Code Checking

Class Assignments require me to personally check your code in class for correctness. Many of you have laptop screens and display the code in small type, or reverse the color. While I want you to set your preferences that work best for you, these issues make it difficult for me to find that needle in a haystack, which is what it is like to discover errors in existing code. To facilitate my correcting your work, please increase the size of the code so I can easily see it, use black text on a white background, and move your laptop to the side, so I can sit directly behind it. The corrective glasses I wear operate optimally at a specific distance two or so feet from the screen.

I mention this because it is possible that I encroach on your personal space as I situate myself to read your code, and I would prefer not doing that. This is especially important if you are sensitive about your space. Some people are more sensitive than others. I work to be respectful of everyone, knowing that there are many personal and cultural differences at play. Please make sure I can view your code in a way that is both comfortable for me and for you.

Do not hesitate to ask or email me if you have questions.

I am always surprised by the number of students who do not ask me for help when they are having problems. You can always ask me, email, me, and we can schedule a zoom to figure out what the story is. The answers can be found in this website, or on the web. Write full sentences in Google Search to ask your question, as in “how do I create a link in HTML.” Or just ask a chatbot. If you can’t figure out the problem on your own, ask me. There is so much information that it’s not always easy to connect it all with what you need at that moment. So you get stuck. Know that most of the mistakes happen in the first four weeks of the course. Use validator with some frequency to catch any issues as you code. Sometimes in CSS the mistake happens right before the css code that does not work. By the midterm, the mistakes will mostly disappear.

Book time at the Learning Center. How to make an appointment. and schedule an appointment.. They can help you understand and overcome the problems you are facing, help you code your final project, and keep you organized and working. Or check out the Design Lab located on 10th Floor of 2 W 13th Street. Just go in and there are people there help you with your code.

There are many resources on the web from which to learn how to code. Do make sure that the information is current or you will be learning ways that are no longer practiced. A comprehensive resource is Mozilla’s Mozilla developer network (MDN) which includes individualizedAI Help. Also look into Google’s Chrome Developer Relations web.dev. The important thing is that you practice writing code and to do it often. The only way to learn to write code is by writing code. Making mistakes is part of the process. The mistakes that stop you dead in your tracks disappear after a week or two of doing the work. Do not become discouraged when you get stuck. There are many ways to solve most problems. Take a step back and try again. Use validator to help you avoid mistakes. 

And what if you do not like my teaching style or this website?

There are people who cover the basics from the beginning. CSS Tricks is Chris Coyer’s website and a great resource for all things for building websites. His Where do you learn HTML & CSS is 2020 is a great place to start. But many people attempt to communicate the basics, like How to Build a Website with HTML to help you learn the basics. I googled that and there is so much more so finding alternatives to me is easy enough.

The real grade for the course

The grade that goes on your transcript is not as important as learning the basics of web design well. You could gain a career out of front-end web development, as previous students have. You are planning to enter the workforce, a good website can only help. Whatever you want to do with your life is at stake. Work as if that is the case, and your grades will be fine. Everyone is different. Not everyone needs to sell their creativity on the open marketplace. I will be grading you on your work, and will not be comparing you to others in the course. I look to see how much each person improved from the first assignments to the last. It is easy to see the effort in your projects, and effort counts.

About this Website

I present each class systematically. Figuring out the topic, the information you need, the homework, and support files, is straightforward. Otherwise, you can use the search bar at the top of the window to find what you are looking for.

The fixed menu on the right-hand side covers every class, in addition to often used reference websites. Clicking on the link loads the class page. I structure each page in the same way, except this one, as it has welcome information. 

A shortcut to each class, the associated pages, and to the homework is available on the top menu.

Next up are the goals and outcomes of this course. This is what you are to learn.

Much of the learning is scaffolded, meaning that what you learn is a necessary part of a larger skill set that you need to be familiar with. These learning outcomes need to be acquired before the next class meets, as it likely assumes this knowledge and builds upon it. If you miss a class, you are responsible for making up the class you missed by going over all of the information.

The topic summary and homework assignment are followed by a materials section that has all of the linked files associated with the course.

Green and red colored links are required reading.

Green signifies conceptual overview that helps put the material in perspective.

Red signifies core knowledge that you need to know to continue. That means you should reread the material if you do not understand, or read the corresponding chapters in the book.

Links without color are suggested readings, but not required.

The homework link takes you to the homework for the week.

The estimated breakdown of time it should take for each topic to be adequately covered in class. Some topics are summarized in a few minutes. Others are demonstrated at length. Emphasis is on those topics that help you master the skills needed to build web pages, which are usually done through in-class activities. What is said and done in class overrides what is written here.

Learn By Doing

Paying attention in class is half the battle. Putting into practice what’s covered in class is the other half. Each class teaches a necessary skill. It is your responsibility to learn it. 

Many of the units point to a number of websites that exemplify current practices. This helps you see how the web implements the topics discussed in class.

The last item on the first few pages contains definitions for words used in the class that you should be familiar with.