Cool Tools for Web Developers
Free Fonts
Need a cool font for your website? You need a Google Font. There are hundreds of choices, and Google gives you the instructions how to install them in case you don't remember. Best of all, they are free!
Free Images
Never use an image you find on the World Wide Web without permission. The owner of the image could demand thousands of dollars. Here are places you can get images for free.
Color Codes
When you make websites, you generally use hexadecimal numbers for your color choices. Hexadecimal numbers look like this: #FFFFFF for white or #000000 for all black. If you want the color from an image you can either purchase a tool for your computer or use an online tool like the one at left. W3 Schools also has a handy tool to find a color number.
If you want to set the opacity of a background color so you can see through to an image behind it, use
RGBA colors instead of Hexadecimal. RGBA colors look like this: rgba(215, 40, 40, 0.9). The fourth number is the opacity, which ranges from 0 to 1.
CSS Generators
Some CSS is just too complicated to write by hand. There are online tools to make writing CSS easier for for gradients, text-shadows, and box-shadows.
Viewport
Make sure your entire website will show on the screen, no matter how small it is. This code will set your website width to the width of the device or browser window:
<meta name="viewport" content="width=device-width, initial-scale=1">
Photo Gallery
Need a simple photo gallery for your website? Use the code in the JSFiddle to get started. This code uses some simple Javascript in an onclick event to change the pictures when you click the thumbnail. Simply change the src attributes to your src attributes. Don't forget the CSS!
The trick to making photo galleries is to use images that are the same size and aspect ratio. This one is built for 640 x 480 pixels, a 4:3 aspect ratio. You can easily change it to fit the size you want for your photo gallery.
Chrome Inspector
Take the time to master the Chrome Developer Tools! Simply right click on the web page, choose Inspect Element, and you can see everything under the hood. You can even test out CSS changes. TutsPlus has a great tutorial on how to use the tools for HTML and CSS.
Special Characters
Sometimes you need a character that isn't on the keyboard. With HTML we use HTML Entities, which are short strings you use in the text editor to create the special character in the browser. See the complete list at the W3 website.
Font Awesome Icons
Font Awesome icons are free icons that you can use in your website. You can make them any size or color and change the CSS when you hover over them, just like with text. All you need to do to use them is to include the reference code below in your website head. Be sure to put the code above your stylesheet.
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
Forms
With only a knowledge of HTML and CSS it is not possible to put working forms into a website. However, there are free online tools to make forms that you can embed on your website. The free versions have limitations. All these tools are responsive.
- For surveys, I recommend Survey Monkey.
- To collect email addresses, Mail Chimp.
- To make contact forms, either use an embedded Google Forms or JotForm. JotForm has more limitations, but also gives more opportunity to customize the CSS.
Images 1-2-3
Crop. Resize. Optimize.
It is very important to optimize images for your website. If your site loads slowly because the images are too large, your website visitors will not stay on your website. Google will even penalize you in its search listings. There are three steps in preparing your images for your website:
- Crop images to focus on your subject AND to fit the space.
- Resize images to so they aren't wider in pixels than the maximum width you need.
- Optimize images to reduce their size (in kb's). Use TinyPNG.org for this.
This website project gives students practical experience at cropping, resizing, and optimizing images with a website project. Students are provided with oversized images, such as are taken on smartphone, and given instructions to crop, resize, and optimize them.
Clean Code
It is important to keep your code clean! If you need help with your code, the developers you ask for help will expect you to have nicely indented code. In fact, if your code isn't working right, the first thing to do is clean up your code. You might just find your code error.
Dirty Markup to correct formatting
CSS Lint to find errors