Resources & Tutorials
Need Help? We’ve got it!
Try these sites first, before doing a generic topic search.
Using a website from this list could potentially save you from being inadvertently sent to a spam site or an advertising site.
| Tutorials | URL | Description |
|---|---|---|
| MCWT FileZilla FTP Tutorial | Download the Filezilla Tutorial PDF | These steps to connect initially are a little different than the past years. This tutorial includes the update and explains step-by-step how to upload your finished website to the competition's host site. |
| W3schools.com | http://www.w3schools.com/html/default.asp | A site with tutorials explaining a wide range of web development essentials; spending time exploring this site is well worth your time. |
| HTML Goodies | http://www.htmlgoodies.com/introduction/intro/ | Non-technical information about building a website. |
| HTML Tutorials | http://www.yourhtmlsource.com/ | A site with tutorials for both beginners and advanced learners, including an excellent CSS explanation. |
| HTML Dog | http://htmldog.com/guides/html/beginner/ | This tutorial assumes you have no previous knowledge of HTML and CSS. |
| WikiVersity | https://en.wikiversity.org/wiki/Web_design | Offers easy-to-understand instructions on the various components of web design. |
| Mozilla | https://developer.mozilla.org/en-US/Learn/CSS | Explains how to use CSS (Cascading Style Sheets) properly. |
| "Best Practices" Advice | URL | Description |
|---|---|---|
| Terrymorris.net | http://www.terrymorris.net/bestpractices/index.htm | A checklist of best practices, in an easy to read chart. |
| WebsiteHelpers.com | http://websitehelpers.com/design/ | A discussion of best practices in design that also tells designers why a “bad” practice is bad |
| Troubleshooting | URL | Description |
|---|---|---|
| Plagiarism.org | http://www.plagiarism.org/ | Enter your wording into the site’s checker. It not only checks for plagiarism but also checks your spelling and grammar! |
| Browsershots.org | http://browsershots.org/ | So easy! Enter your site’s URL where indicated. It instantly shows you any compatibility issues when your webpage visitors are using any of the popular browsers. |
| Websiteoptimization.com | http://www.websiteoptimization.com/services/analyze/ | Enter your site’s URL where indicated. It will estimate loading speed and give tips for improvement. |
| Free Software Downloads | URL | Description |
|---|---|---|
| Filezilla | https://filezilla-project.org/ | Filezilla is the recommended free downloadable “FTP” software that you’ll need to upload your site to MCWT. Choose the “client” download when prompted. |
| Freemake.com | http://www.freemake.com | Free downloadable multi-media conversion software. |
| SourceForge | http://sourceforge.net/directory/os:windows/freshness:recently-updated/ | Reliable source for open-source (free) software. |
| Microsoft Expression | https://www.microsoft.com/en-us/download/details.aspx?id=36179 | Expression Web is a full-featured professional tool for designing, developing, and publishing compelling, feature-rich websites that conform to web standards. |
| Microsoft Visual Web Developer | http://www.asp.net/downloads/ | ASP.NET is an open source web framework for building modern web applications and services. With ASP.NET you can quickly create web sites based on HTML, CSS and JavaScript, scale them to millions of users and easily add more complex capabilities like Web APIs, forms over data or real time communications. |
| Open Bexi | https://sourceforge.net/projects/ob-htmlbuilder/ | OpenBEXI is a WYSIWYG (“What you see is what you get”) HTML builder using the magic of HTML5 and CSS3 . By resizing, dragging and dropping various HTML widgets, it is easy to build a web page. |
| Photo Editing Tools | URL | Description |
|---|---|---|
| Pixlr | http://apps.pixlr.com/editor/ | Online editor with functions similar to Photoshop. |
| Picmonkey | http://www.picmonkey.com | It’s a photo editor with lots of goodies so be careful you don’t get lost in the toys. Tutorials are available on the site. Caution: it offers a free 30 day trial to a more elaborate editor called Royale. When the 30 days expire, you’ll lose all your work! So, it’s safer to stick with picmonkey. |
| Gimp | http://www.gimp.org/ | GIMP works like Photoshop but it’s free. The site has tutorials, as well. |
| About Tech | http://graphicssoft.about.com/od/digitalphotography/a/essential.htm | Common sense advice on photo editing. |
| Photos, Images & Icons | URL | Description |
|---|---|---|
| WikiMedia | http://commons.wikimedia.org/wiki/Main_Page | Free Creative Commons images (but remember: this competition's judges give higher scores to original photos/images than images from the web). |
| Slideshop | https://slideshop.com/free-stock-photos | Slideshop offers free, high-quality stock photos, licensed as Creative Commons Zero. |
| Vecteezy | http://www.vecteezy.com | If you need wallpaper for your site, Vecteezy offers free vector art. |
| Icons | https://www.mightydeals.com/free_stuff | Fun icons, such as padlocks, gears, and checkmarks, are offered as free downloads. NOTE: The download subscribes you to its newsletters, but you can unsubscribe at any time. |
| Favicon tool | http://tools.dynamicdrive.com/favicon | Favicons are the small 16 pixel by 16 pixel pictures you see beside some URLs in your browser's address bar. |
| Avatars | http://www.webdesignerdepot.com/206/06/free-download-avatar-vector-collection/ | Need a cool avatar? Find one here. These free avatars are in vector format so they'll scale to any size. |
| Tineye.com | https://www.tineye.com/ | Use this site to see the original source of an image to make sure you're not violating a copyright. It's a "reverse look-up" tool. If you place your own original images on your website, you can set up Tineye to alert you if someone is using one of your images. |
| Places to Find Cool Tools | URL | Description |
|---|---|---|
| JQuery | http://jquery.com/ | Advanced contestants may find this helpful for animations, buttons, etc. |
| Lorem Ipsum | http://loremipsumgenerator.org/ | When you begin a web design, it can be useful to have some text so you can imagine the site. Use Lorem Ipsum Generator to generate simple text. Replace it with you own content once you've written it. |
| Css3generator.com | http://www.css3generator.com | Online code generator for current CSS3 effects. |
| JQuery User Interface | http://www.jqueryui.com | Jquery information, plugins, downloadable libraries and tutorials. |
| Fontsquirrel | http://www.fontsquirrel.com | Free fonts and webfont generator. |
| Bootstrap | http://getbootstrap.com/2.3.2/index.html | Offers help for faster and easier website development. Free download. |
| Wired.com | https://www.wired.com/code-snippets/ | Provides free html copy-and-paste code snippets and tutorials. |
| Wired.com | https://www.wired.com/2010/02/color_charts/ | To add a color to your web page, you’ll need to use what’s called the hex code. This page shows all the colors and their hex codes. |
| Wired.com | https://www.wired.com/2010/02/html_cheatsheet/ | The most common HTML tags and their proper syntax to help you create, for example, the desired size of your title font. |
| BibMe | http://www.bibme.org/ | Free auto-fill automatic bibliography maker. |
| ColorMatters.com | http://www.colormatters.com/color-and-design/basic-color-theory | Need help choosing color schemes? This simple discussion of the color wheel helps you understand color combinations |
