Find Project Inspiration

http://www.calltoidea.com

If you are stuck in the design stage and unsure how you want your logins, 404 pages, profiles, etc. to look, this is a great site to take a look at. There are tons of real-world implementations you can take a look at to inspire you.

This is just an example of the different categories you can look at:

Screen Shot 2017-02-20 at 4.02.58 PM.png

There’s also footers, forms, lists, and more!

Screen Shot 2017-02-20 at 4.05.32 PM.png

Happy exploring!

Advertisements

The Web & Design

Viking Code School Prep Work – Test Yourself

URL – Uniform Resource Locator, the address of a web page
Domain – the website URL
IP Address – Internet Protocol Address, numerical identification label assigned to each device
DNS – Domain Name System, where all domain names are stored
HTTP – HyperText Transfer Protocol
HTTPS – protocol for secure communication
POP & IMAP & SMTP – protocols for mail delivery

  • Post Office Protocol – allows email client to download emails locally from an email server
  • Internet Message Access Protocol – similar to POP3 but also keeps a copy of the email on the server.
  • Simple Mail Transfer Protocol – allows you to send a message to your server and then the server routes to the final destination.

API – Application Program Interface
Web Server – hardware or software that dispenses web pages
Bugs – errors
The Cloud – internet-based computing
Cookies – information that a website puts on your hard disk so that it can remember something about you at a later time
404 Error – server cannot find what was requested
SEO – Search Engine Optimization


Design

WYSIWYG – What you see is what you get
Responsive Design – scale your design for all devices
Grid System – using rows and columns to design your web page
RGB – Red, Green, Blue
Hex – codes colors are labeled with
Above the Fold – the portion of the web page that is visible when the page first loads
GUI – Graphical User Interface
Front End / Back End – front end is what user sees, back end is behind the scenes

63 Awesome Free Website-Building Tools

Source: Skillcrush

SYMBOLS + ICONS

Font Awesome
A symbol font that allows you to add symbols to your websites.

Fontello
Generates icon font packs.

flaticon
Download vector icons or include icons as webfonts.

The Noun Project
Search a noun, get a free symbol or icon.

Endless Icons
Free icon library.

Perfect Icons
Customize and optimize social media icons for your site.

iconSweets
60 free vector Photoshop icons.

Round Icons
Free quirky and professional icon bundles.

FONTS

Google Webfonts
Add fonts to your website in just a few clicks.

typegenius
Font pairing generator.

Font Squirrel
Hundreds of totally free fonts.

Beautiful Web Type
Check out a curated collection of the most beautiful Google Webfonts.

Lost Type
Gorgeous pay-what-you-can fonts.

DOMAIN NAME SEARCH ENGINES

Impossibility
Generate random domain names based on one word.

LeanDomainSearch
Search for a domain name by keyword.

FRAMEWORKS, TEMPLATES, CODE PACKS, AND THEMES

HTML5 Boilerplate
The first and the best. Free HTML5 boilerplate code.

HTML5 UP
Free fully responsive HTML5 template.

1 Line CSS Grid Framework
A framework for CSS that’s only 1 line long!

960 Grid System
A Skillcrush favorite.

Starkers for WordPress
A basic template for developing your first WordPress theme.

Barebones for WordPress
Free WordPress template for developers.

Underscores
WordPress template for building out a brand new theme.

Sage for WordPress
A WordPress starter theme based on HTML5 boilerplate and Bootstrap.

Whiteboard for WordPress
A clean, basic WordPress theme for developers.

Bootstrap
A responsive HTML, CSS, and JS framework.

Bootswatch
Free themes for Bootstrap.

CODE STYLE GUIDES

GitHub
GitHub’s very own code style guide.

Google
Google’s code style guide.

Mozilla
A code style guide from the pros at Mozilla.

CODE VALIDATION

Wrap up loose ends in your code by checking to see that it meets standards of accessibility, style, and industry best practices.

w3schools.com
Web Design Group HTML Validator
Validome
Validator.nu
Code Beautify
JSLint
Free Formatter

More here: http://skillcrush.com/2015/06/30/awesome-free-website-building-tools/