In this posts are some web resources that I will be adding to for my Art 058 course on Designing for the Web Using Adobe Dreamweaver CC at Los Medanos College in the Fall of 2016. (Search for the course here in the Fall 2016 schedule)
When designing for the web there are many tools that can help speed up that process. I’ve made a collection of some of them below. If you know of any more please feel free to share!
Web coding tips
- W3 Schools (online references)
- w3 Newbie (HTML instructional videos)
- All about lists (ordered, unordered, definition lists etc.)
- Learn about CSS specificity in this fun little game
- CSS reference sheet
- Use Emmet in Dreamweaver CC for faster coding. For example you can quickly get a block of lorem ipsum text by typing p>lorem in code view.
- Responsive design resources
All about fonts
- Font Glossary
- A list of unit types and their uses
- Font size conversion chart
- Choosing fonts
- Type inspiration with TypeWolf
- 50 most popular fonts according to MyFonts.com
- fontpair.co
- Justmytype.co
- fonts.google.com
- A card sort to aid in font pairing.
- Think music when choosing size
- Choosing fonts
Symbols and icons
- Available bootstrap glyphicons
- Glyphicons cheat sheet
- Miscellaneous symbol character codes
- HTML character reference chart
- Unicode search
- Icon packs and the ability make your own icon web pack
- Cheatsheet for FontAwesome
- FontAwesome examples
- Material Icons by Google
- Make your own icons with Fontastic
All about color
- Hex Invaders is a fun arcade game to learn about Hex colors
- Color tool: Adobe Color https://color.adobe.com/explore/newest/
- Color tool: Pictaculous by mailchimp http://www.pictaculous.com/
- Color tool: Imagepallette by CSSdrive http://www.cssdrive.com/imagepalette/index.php
Video
- CSS Tricks for including responsive video
- Embed responsivly for a quick responsive embed
Comments on your site
Not using wordpress but you still wanting commenting on your articles? Then sign up for a disqus account and embed the code right on your website.
Track your back door URLs
The URL builder helps you add parameters to URLs you use in custom web-based or email ad campaigns. A custom campaign is any ad campaign not using the AdWords auto-tagging feature. When users click one of the custom links, the unique parameters are sent to your Analytics account, so you can identify the URLs that are most effective in attracting users to your content.
Sharing the web address
When sharing a web address it’s hard on when they are too long. The web address will wrap weird or you reached your character limit on twitter or not to mention it’s just hard to type manually. If we want to track a web address though it’s going to be long. Just make it shorter with bitly!
QR code creator
Another reason to make a web address shorter is if you want to use that address in a QR code. You not only have the advantage of tracking using bitly above but a shorter web address means a QR code with less squares and thus much easier and quicker to scan. Less room for error! Once you have a web address to track just head on over to shopify – they have a free QR code generator. Of course they will want you to sign up for their service but you don’t have to.
Want a prettier QR code? Then you can use onchtag. I blogged about it here.
Images: formatting and displaying
- Think you know your pixel sizes? Think again with this game…
- Image slider bxslider
- CSS image gallery
- slideshow from w3schools
- JPEG compression with jpegmini
- Tips and Tutorials at vectips.com a great way to walk through and learn
- Quick logo maker – good for getting ideas
- Alternatives to Foundation’s orbit slider
- Free Image libraries (remember not to steel)
eCommerce Solutions
- Gumroad – good for downloadable files
- nopCommerce – open source ecommerce
Web Templates
- Bootstrap skins free from bootswatch
- Bootstrap templates available under the MIT license
- HTML5UP free bootstrap templates up the Creative Commons license
- General bootstrap templates free to use from Github
- 30 free Dreamweaver templates
- 66 responsive HTML/CSS templates for 2016
- Full page scrolling web template
Email templates
Adobe Dreamweaver CC updated their custom templates to provide a couple of email templates that you can use to build custom emails. The trick to do this is inline CSS styles. This is exactly the bulk the web world has been trying to get away from is all that markup in the content. Never the less this is the way it works with email. If you don’t like the templates provided and would prefer to work with external style sheets to design you still can! Just create your page as you would normally and then use mailchimp to convert all your code to inline styles to finish your email template!
If you would like an alternative to mailchimp the inliner.cm tool works pretty well too!
Bells & Whistles (figuratively speaking of course)
You ought to be a teacher, Eloine! Very good!