Advanced HTML/CSS Materials
Day 1: CSS Layout Review: CodePen exercises, Who To Know Presentation (PDF) or (Keynote file)
Day 2: Dave's class version of HTML5 Boilerplate, HTML5 Boilerplate Presentation (PDF) or (Keynote file), HTML5 Boilerplate terms you should know (DOC), 37Signals website assignment (Zip)
Day 3: Absolute Positioning Review: Codepen exercises, How to make a tool tip (DOC), How to make Dropdown Menus (DOC), 37Signals class homework finished (ZIP)
Day 4: Intro to SEO presentation: (PPT) (PDF) , Codepen Exercises,Day 4 Notes:Ems,:before/:after,Css Triangles,Attribute Selectors
Day 5: SEO: Meta Tags (PPT), Contact Form Class Exercise, Codepen example of finished Form,HTML Forms PPT,Forms Code Cheatsheet(DOC), Sending a Contact Form(DOC), Anchor Links(DOC)
Day 6 Responsive: SEO: Links (PPT),
Responsive Design PPT Presentation,
Codepen Media Queries Assignment,
Codepen Fluid Layout Assignment,
Responsive Assignment,Responsive Design Infographic
Day 7 Responsive: My pinterest board for Responsive Layouts,
Codepen: Fittext Demo,
,
Codepen: 3 column layout assignment,
Responsive Assignment part 2
Day 8 Responsive:
Codepen: Responsive Navigation Assignment,
Codepen:Using Iframes: Responsive Tester,
Article on responsive videos (shay howe),
Example of code for Responsive Video
Embed Responsively tool for responsive videos and media,
Homework
Day 1: Choices choices...
If you still feel like you need a refresher on floats and clearfixes then check out This Video from Chris Coyier's CSS-Tricks website.
Otherwise, your homework if to finish coding a previous website project which you have not finished. Later in the class we will be taking this website and converting it to a responsive website.
If neither of these options appeal to you and you want a challenge, trying creating a styled scrollbar using the css from this article and then make it work in firefox by using this javascript fix.
Day 2: Get some practice coding
Continue working on the 37signals website practice from class. Finish the layout by putting width/heights where appropriate and floating your divs except for the wrapper. Then put class="clearfix" on the wrapper. Once the layout looks good, you can change/remove background colors and paste in the text of the page inside the appropriate divs. We will code the HTML tags in class so no need to do that part. Here is a handout that has detailed instructions on my method for doing layout with CSS.
Day 3: Finish 37signals or Finish your websites!
Practice the dropdown menu techniqes from class and create a vertical dropdown menu instead of a horizontal in codepen.
If we didn't finish the project in class, finish the 37 signals project completely. More importantly, try to finish up an existing web project so that it is ready for the responsive project. Even if you have a project finished, maybe spend your time organzing your code and refamiliarizing yourself with the project
Day 4: Css3 experiment
Create a codpen using CSS3 properties like transform and transition and maybe even pseudo-selectors like :before :after and :first-child to create
Day 6: Prep your website project
Continue finishing/prepping a previous website project to work as our final project in class. Email me your projects by Tuesday/Wednesday so I can look them over and give you notes and feedback on your work.
Day 7: Get some work done on your responsive project
Because all this responsive stuff is fresh in your mind and we won't meet for two weeks... try to get as much done on the responsive version of your site. Tip: start with translating your Px dimensions for text into Ems. Then separate out the CSS that is common to all viewpoints.
Useful Curated Links
Tutorials
Code Academy
Cool online teaching tool that shows you the basics of programming. Based around javascript, you learn to code by typing in code straight into the browser. Its a fun and painless way to learn programming.
Lynda.com Free Access
Amazing, incredible and free access to Lynda.com. The best place for online tutorials on almost ANY software. Only free if you use at school.
Method and Craft
Web tutorials that focuses on design software like Photoshop and Illustrator.
30 days to learn HTML/CSS
30 short videos that teach you web design. Looks good.
Further Reading
24 Ways
Yearly blog that adds 24 new articles every december. Check out the archive for easier-to-digest articles
Smashing Magazine
Prominent web design blog that covers a full range of topics from coding to design. Tons of tutorials and current information.
Css Tricks
Amazing blog of Chris Coylier. Contains tons of written tutorials and articles but more importantly Video! Beautiful site, well organized, fun and easy to read. Good resource for learning Wordpress/CMS.
A List Apart
More academic, blog on web design. More technical. Less entertaining but definitely reputable.
Orbit Media Blog
Orbit Media is a Chicago Based web shop whose blog is one of the best sources for SEO, Marketing and Content Marketing. Easy to digest and fantastic insider info.
Medium: Web Design section
Medium is a newish minimal blog platform that is very popular in the tech world. Here is a collection of stories/posts about web design.
HTML5 Boilerplate and Best Practices
HTML5 Boilerplate explained in simple terms
Covers the basics of what the HTML5 Boilerplate is and does. Nicely covers some of the HTML code included in the index.html file
Initializr
This is an online tool that allows you pick and choose which parts of the HTML5 Boilerplate you need. These are the settings I used to create our class version of HTML5 Boilerplate.
About Normalize.css
Normalize.css is the new replacement for the Reset.css file. Learn more about it here.
Make your own Favicon
Its that little icon next to the URL in your browser. Simple steps for making one in photoshop.
Make your own Apple Touch Icon
Its the bookmark icon that pops up on an iPhone or iPad when someone bookmarks your website
What is a Robot.txt file?
Answers the question. You probably won't need this but is useful if there are parts of your website you need to block from Google and other search engines.
HTML5 Shiv
This is already included in your boilerplate so no need to download it... but this excerpt will help you understand why you need it if you are interested. Basically makes old version of IE accept the new HTML5 elements like HEADER, FOOTER, ARTICLE etc.
PolyFills and Modernizr: Cross Browser Support
You probably don't need to read this. But, its a good overview of making older browsers support the new fancy features (that you probably aren't using anyway). Worth it just to know what PolyFills and Modernizr are.
Useful Tools
CodePen
Code HTML/CSS/Javascript online in your browser. Good for smaller examples. We will use this in class
w3 HTML Validator
Debug (find problems) with your HTML code. Great tool for beginners who make alot of simple spelling/syntax mistakes.
CSS Lint (css validator)
Debug your CSS code. Great tool to find out syntax problems. Note: will not help with all problems in CSS, mostly just syntax errors which is HOW you write your code.
FireBug plugin
Plugin for Firefox that gives you fantasic web development tools in your browser. Look at all the code behind a website. Select an item on a website and see the HTML/CSS code behind that element. Very very useful. Chrome and Safari have this sort of thing built in
Package Control for Submlime Text Editor
In order to install packages (plugins that extend the functionality of sublime), you first have to install the package controller. Click "install" on this page to find out how
Typography/Fonts
Google Web Fonts
Free Webfonts through Google! Google has its own method for implementing @fontface so be aware.
Font Squirrel
Great list of free webfonts. And more importantly, the @Font-Face generator used to make webfont versions of any font (almost)
Font Spring
If you want to buy webfonts
TypeKit
If you absolutely need "famous" fonts like Helvetica, Bodoni. Paid service starts around $25 a year.
DaFont
Not web fonts at all. Just free fonts online for you to download. Be careful as there are alot of ugly fonts here too.
Lost Type
Not web fonts at all either. Pay-what-you-wish model pretty much makes this a great list of free fonts.
CSS Font Stack
Fantastic list of font stacks. Select a font and it lists out the best alternative fallback if the user doesn't have that font. As well as stats for support on pc/mac.
CSS3 Resources
12 Awesome CSS3 Features You Can Finally Start Using
Pretty self explanatory
CSS3 Please!
The latest/correct way to write CSS3. Live editable code for CSS3. Change code and see it update live.
Css3 Generator
Don't type out all of those prefixes! Let this create the code for you.
Can I Use?
Look up CSS3 properties and which browsers support them.
HTML5 Please
Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are.
Css3 gradient Generator
Pretty self explanatory. Don't have to code these gradients yourself.
a href="http://www.css3files.com/">Css3 Files
Index and tutorials on how to use the new CSS3 properties
About CSS3 Image Borders
Css Tricks article on using Image based borders in CSS3
Cool Text Shadow Effects
Using CSS3 text shadow for effects like Letterpress, Emboss and 3d text
Hosting / Uploading
EIG wikipedia article
See a list of all web hosts owned by evil EIG company
Dreamhost
Great hosting company. Costs a little more. Ryan uses them.
Namecheap
You typically shouldn't buy hosting from Domain registrars... this is an exception.
A Small Orange
Cheap. And they are awesome. BUT... got bought out by EIG so will go downhill soon.
EIG Alternatives
A couple other options if you don't want to support EIG
Whats DNS?
DNS: simple explanation of domain names and how they work
FileZilla FTP
Free FTP program from the makers of Firefox
Responsive Web design
Respond.js polyfil for IE
Essential javascript fix for IE 6-8 which don't support min-width/height in a media querey. You should use this in all your responsive projects.
Responsive Videos (tool)
If you don't feel like coding it yourself, this website will generate the code you need to make your video responsive. (just take the style section of the code and place in your css)
Live Responsive Layouts
A library of different column layouts and how they translate to responsive design. Good place for ideas for responsive layouts and for looking at the code since examples are live
Dont Overthink It Grids (csstricks)
Although not neccessary for responsive design, using "grids" which means creating classes for columns and other layout blocks really helps in a responsive design.
FitText.js
This little javascript plugin allows you to dynamically size text based on width of container. Works great for headings in a responsive designed site but not body copy. Click download button to see instructions.
FlowType.js
Like Fitext it changes font sizes dynamically. Good for responsive design. This one can do body copy as well! Easy setup but its even easier to use this technique sparingly like only on headings
Responsive Nav plugin
Makes those dropdown navigation menus with the hamburger toggle button easy to implement
How many decimal points?
Divya Manian's great article which takes a second look at the practice of using as many decimal points as possible.
