Beginning CSS Page Layout for Creatives, Visual Learners, and Everybody Else

Marc Nischan, Artsy people can code!

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
10 Lessons (1h 11m)
    • 1. Basic CSS Intro

      0:44
    • 2. Quick-Start

      2:03
    • 3. Basic CSS Anatomy

      7:36
    • 4. Know Your Boxes

      7:20
    • 5. Layout Strategy

      9:56
    • 6. Float Based Layout

      13:41
    • 7. Web Fonts

      7:14
    • 8. Absolute Positioning

      11:08
    • 9. Recycle for Speed

      10:51
    • 10. Thanks!

      0:23

About This Class

Quickly gain a nuts-and-bolts understanding of basic web design! This class is geared toward beginners who know a bit about HTML and want to learn the basics of CSS (Cascading Style Sheets). If you do not yet understand basic HTML, I suggest starting with my Basic Web Design for Creatives class as a foundation (it’s fast and easy!).

Students in this class will learn how to control the location and appearance of the HTML elements on their webpages so they can build their designs in code - things like text, photos, paragraphs, navigation and so on. For example: In the way that the same box of legos can be rearranged to create a house, or your name, or a Dragon Car (I have kids :), you can use CSS to change the way the elements on your page are arranged. And like a chameleon can change its appearance but still remain a chameleon, you can use styles to change the way the elements on your page present themselves.

Understanding how to do this predictably will give you the power to make what you see in your head or your design files appear on the screen. It will also give you the wisdom to design confidently with your medium (the Internet) in mind -  knowledge that helps you avoid designing yourself into a corner, and demonstrates mastery to clients and colleagues.

The project for this class is going to be a small website for a music festival. When you have finished the project for this class, you will be able to confidently plan and write code for the websites that you design. All you need is a text editor, and I’ll tell you where to get one in the first video - so let’s go!