CSS and the tools to play.... Top Level Design : Four things to start your design

Here is where Eric, Lu, Ruchi, Preston, Srinivas, Holli, Ruchi, Shilpa, and James come together learn about a very overlooked (complex) web development structure. CSS is a collection of code statements that direct the visual and functional response of a website. It formats and specifies the (magical) transformation that occur in the web browser. Over the past few years it has defined the specifications that direct both the HTML and JavaScript inside this browser; that is, it influences much more than just visually (as it use to). Therefore it's absolutely necessary to understand the syntax of CSS to fully control what gets presented on the web. CSS has a one line, simple, and direct syntax; but, what's inside each of a simple top-level items (there are three of them) control thousands of design choices for your websites.
Post Reply
User avatar
Posts: 148
Joined: Mon Apr 16, 2018 1:03 pm

CSS and the tools to play.... Top Level Design : Four things to start your design

Post by james » Fri Oct 19, 2018 1:11 pm

CSS is a method of understanding ALL of the design channels to present your website. No matter what you use to get your website published: an application, a Wordpress site, Joomla!, Druple,, or any of the many CMS''s out there..

Look around the world around the world around you.




Use the Chrome web browser because you can add extensions to help you"

  • canvas flip chrome
  • color zilla chrome

Colors can make you happy, sad, angry, or confused.

Limit yourself to 2 or 3 colors; you will be able to add transparency to those colors for blending in your design and still have variation.

Primary color - 60% font & backgrounds,
Accent color - 30% menu & sub-headlines,
Pop color -- 10 % (buttons), and bold statements in backgrounds or larger text.

Hex codes

http://pictaculous.com - used to extract colors from a logo.

http://colors.co --- used to find colors and color pallets.

http://www.colourlovers.com -- used to find colors.

Fonts -- do NOT use the default fonts that come with your website builder.

Limit yourself to 2 or 3 fonts, there are many ways to present a few fonts.
Body, headline, sub-headline, and menu
Size, weight (100 to 900), line height, spacing, and more ....

Three main font sources:

google fonts
https://typekit.com <-- expensive

Custom Fonts<-- you need a license to use these fonts and that can be expensive.

https://fontpair.co <-- puts fonts pairs that work together.

WhatFont chrome extension

Illustrations <-- designed
Background Patters

Warning! You can get in trouble using the wrong images.

https://www.pexels.com/ <--- free images -- play around with them all you want..



iconfinder.com <-- paid & free; but you must consider the licensing agreement. Many font owners require a mentioning of ownership.

https://stockunlimited.com <--- paid service



Post Reply