1 of 12

Slide Notes

DownloadGo Live

CSS for Newbie

Published on Feb 11, 2016

As I am a designer who can coding, I would like to inspire web designers that programming is not difficult. Let's CSS be your first programming language.

View Outline

MORE DECKS TO EXPLORE

PRESENTATION OUTLINE

1.

CSS for Newbie

- Good start for someone who know nothing about programming -
Photo by carlosgomez
2.

Basic HTML

https://www.codecademy.com/en/courses/web-beginner-en-HZA3b/0/1
3.

HTML 101

  • What is tag?
  • &
  • What does means?
  • class vs. id
  • What is inside ?
  • HTML or PHP?
Photo by Jitter Buffer
4.

Let's start styling

Photo by LifeSupercharger
5.

Where You Should Place CSS

  • External CSS file
  • Internal style in
  • Inline style
Photo by s2art
6.

CSS Syntax

Click to add more text here
7.

Style of Something

  • Title

  • h1 { color:white; }
  • .myc { font-size: 60px; line-height: 1.5em; }
  • #myh1 { padding: 10px; }
  • Add class if > 1 elements using same style
  • Add id's to fix style for an element
Photo by Pierre Nel
8.

Margin vs. Padding

Learn about space
9.

Bootstrap

Shortcut to make your web look good
10.

Inspect Element

The secret for css creator
11.

GREAT CSS TEACHERS

w3schools and stackoverflow
Photo by tybeeney
12.

If you love to design

CSS is a little thing changing designer to be programmer.
Photo by Dean Hochman

Tarn Natnaree

http://tarntist.com