Introduction to the Course
In this lesson we will be outlining the goals and expectations of this course as well as quickly reviewing the basics of HTML, CSS, and the Web in general so that we're all on the same page.
Hybrid Class Format
Since this is a hybrid class, we will be having every other class online and every other class together in the class room. During the online classes, I plan on giving the instructions and lectures and class time will be spent as lab time where you will be able to ask questions directly. Do not expect to show up every other week with no work done. I will expect homework to be completed at the beginning of each class, even though you will be given the majority of class to work on it further.
Your grade will be based on the following:
How engaged are you in the class? Are you asking questions? Are you contributing to discussions and critiques? If the answer is yes, you will be fine.
You MUST be doing your homework assignments in order not to fall behind. I need to keep the class moving at a certain pace so that we can get through all of our material, and I cannot take out extra time to catch you up. Notes will be available.
This is just as important as doing homework. For every class you don’t attend, you are missing out on hours of valuable lecture and instruction. For the same reason as missing homework, I cannot take out extra time to re-teach you what you missed.
So, if you are attending regularly, and don’t miss more than a couple classes, you will be fine.
Class will begin promptly on the hour, so if you are late, you will be marked as tardy. This will affect your grade.
There will be a couple tests presented on Blackboard throughout the semester. These will be multiple choice, true/false, and matching. There will be no fill-in-the-blank or essay answers. Be sure that you study for these tests, as there will be a time limit and they will count for a good portion of you grade.
- Final Project
- Quality of Work / Effort
I don’t expect everyone to be Web design masters, but I am mostly interested in seeing improvement and to see that you are really putting forth a strong effort to learn and grow.
How is this course going to be different from Web 1?
- Will not spend any time on the fundamentals of HTML, but only a quick review.
- Will not spend any time on developing in Flash, other than a brief explanation of what it does.
- Will place much more emphasis on the design side in Photoshop.
- You will be required to host your own files and Websites.
- Design multi-page site in Photoshop (3 page minimum)
- Slice Photoshop layout into web-ready images and HTML and CSS code
- Explore new HTML5 and CSS3 features
- Set up hosting, database, and domain name
- Integrate HTML site into CMS (Modx, Tumblr, Concrete, or Wordpress)
- Implement PHP plugins
- Implement jQuery features
- Write custom Javscript or jQuery code
- Make site mobile-friendly
- Use good SEO techniques
- Implement traffic analytics
- Set up social media pages to link to site
Screaming Eagle Media (link) <- New, under construction site
Currently working part-time at the Republic’s online division - Screaming Eagle Media as a Web designer, photographer, videographer, and motion artist.
Also starting up personal Web design company with a developer - Joust.co to serve remote clients outside of Columbus.
Also started up local social site C-buz.com - promoting local creative culture.
Email - email@example.com - Please email me rather than message me, since I can access my email any time of the day from my phone, but need to log into Campus Connect to view messages.
Skype - joustco
I will sometimes be available to chat or screen share over Skype if it is arranged beforehand.
iChat - firstname.lastname@example.org
- What is your name?
- Think of an adjective that starts with the same letter as your first name that also describes you.
- What degree are you pursuing?
- What are you passionate about?
- What was your experience with Web 1?
- What do you hope to learn in this class?
Scratching the Surface
The Web is a big place, and it's rapidly growing. Most people realize this, but don't have any concrete numbers or figures to deal with. Below are a few videos that may help put things into perspective.
“State of the Internet” (video)
This is a very short, entertaining animated infographic explaining some facts and figures about the sheer volume of Internet activity that takes place everyday and how truly the Web has become an integral part of the world as a whole.
“Did you know” (video)
Another short, somewhat startling video explaining not only statistics about the internet, but also about the shifting direction of the worlds job market and economy.
History of the Internet (infographic)
A very abbreviated graphic explaining some of the key events in history that have contributed to making the Web what it is today, dating back to the 1960s. Note: if the image appears very small and hard to read, you may need to click on it to magnify it to 100%.
History of the Internet (video)
This animation gives a much more in-depth explanation of how the Internet came about as a result o the combination of 4 main networking systems.
The Next 5000 days of Web (video)
A very interesting speech given by Kevin Kelly, describing the Internet as a single machine that we are all connected to. Kevin Kelly shares a fun stat: The World Wide Web, as we know it, is only 5,000 days old. Now, Kelly asks, how can we predict what's coming in the next 5,000 days?
Below is a list of extremely valuble resources that you can go to for help. I use these sites on a daily basis and recommend them all strongly to anyone hoping to pursue any kind of career in Web design. We will be drawing upon sever of these resources throughout the course.
- browserlab.adobe.com - Allows you to preview Websites in multiple browsers.
- net.tutsplus.com - Awesome source for coding tutorials and resources.
- webdesign.tutsplus.com - Awesome source for Web design tutorials and resources.
- psd.tutsplus.com - Awesome source for Photoshop tutorials and resources.
- jsbin.com - Free, online code editor.
- marketplace.tutsplus.com - Online store to purchase high quality video and text tutorials.
- lynda.com - Massive library of video tutorials on just about any design topic imaginable.
- webdesignserved.com - Gallery of the best Web design on the Web.
- creattica.com/css - Another gallery of incredible HTML-based Web design.
- creattica.com/flash - Gallery of Flash based Web design.
- fontsquirrel.com - Resource for Web fonts.
- themeforest.net - Marketplace for high quality, prebuilt Web templates.
- godaddy.com - World’s largest domain name registrar.
- ted.com - Inspirational speeches given by the world’s smartest, most innovative people.
- muse.adobe.com - Adobe's visual HTML web design software (different from Dreamweaver).
- labs.adobe.com/technologies/edge/ - Adobe's HTML5 animation software.
Web Design Cookbook eBook
Web design cookbook is a short eBook presentation that I created for a few lectures I did around town talking about some of the fundamentals of good web design. Even though many of these concepts may be already familiar to you, they are still vital to re-visit and regularly implement.
HTML / CSS Lightning Review
Another great way to review code is by viewing the Source Code of any page in your browser. The common key combo for this is either Ctrl (Cmnd) + U or Ctrl (Cmnd) + Shift + U.
There are also code repositories where people post common code snippets for public use. These sites also allow you to create your own accounts and save chunks of code that you use commonly.
http://snipplr.com is a very good example although there are many others.
FireFox + Firebug = Web Design Magic
Firebug is a powerful tool that allows us to not only view a page’s source code, but also manipulate it. Here is an article explaining some of the key advantages to using Firebug and why you, as an aspiring Web designer, need to use it.
Also, there is a good video explanation on the main Firebug homepage under the section.
Once you’ve downloaded Firefox, downloaded Firebug, and read the above article, go ahead and go to a site like cnn.com or nytimes.com and change the text of the article to make it however you want it.
- Go to your desired page.
- Right-click on the element you want to change.
- In the Right-click menu, you should see "Inspect Element" at the bttom. Click it.
- At the bottom of the browser, you should see a window containing the HTML of that page. Click on the text that you want to change between the tags that hold it.
- To the right, you should also see the CSS of whatever element you have clicked on in the HTML side of the code. This can also be manipulated.
You can even right-click on an element in the HTML below, such as a paragraph you may want to get rid of, and choose “Delete Element”.
There are many other things you can do with Firebug, but for now, let’s just stick with changing text. This should help give you a familiarity with HTML structure as you are manipulating different elements.
Cross Browser Compatibility Testing
As a Web designer or developer, one of the main important tasks you need to be aware of is making sure that your site looks consistant across all the browsers out there. For the majority of browsers, if your code is clean, you shouldn't see too much of a difference, however, no matter what, there will almost always be bugs that appear in Internet Explorer. Not only that, by IE versions 6, 7, 8, and 9 all behave quite differently from each other.
There has been a huge push by the Web development community for dropping of support for IE6, since it is now over 10 years old and is becoming an increasingly smaller user base. Not only that, but IE6 can require up to several hours of extra testing a development in order to look right.
Here is a list of some rather candid and comical websites related to IE6, just to give you an idea of what I'm talking about.
Later in the semester, we will dive into some tools, techniques, and resources available to combat the inconsistancies amongst the browsers.
- Download the latest version of Firefox to your home computer or laptop if you haven't already (instructions are above, under the section "Firefox + Firebug = Web Magin").
- Download and install the Firebug plugin for Firefox if you haven't already (instructions are above, under the section "Firefox + Firebug = Web Magin").
- Pick out 5 site from webdesignserved.com that you really dig, and write a paragraph on each describing what you think makes them so good based on visual layout, funtionality, content, and user experience. Email your homework to email@example.com.