Upgrade to Pro — share decks privately, control downloads, hide ads and more …

From student to web professional: Hints, tips &...

From student to web professional: Hints, tips & cheat codes

A presentation I gave for the CS359 - Web Programming students in Computer Science Department of University of Crete.

*wipes tear*

Zaharenia Atzitzikaki

May 20, 2015
Tweet

More Decks by Zaharenia Atzitzikaki

Other Decks in Design

Transcript

  1. Hi.

  2. “ If you work on the Web and you complain

    about the financial crisis, you do something wrong. „ Thanos Papavasileiou • UpNorth Conference
  3. // A nightmare to maintain a { color: #fc3; }

    p { color: #fc3; } nav { background-color: #fc3; }
  4. // Variables are cool! $brand-color: #fc3; a { color: $brand-color;

    } p { color: $brand-color; } nav { background-color: $brand-color; }
  5. header[role="banner"] { margin: 20px 0 30px 0; #logo { float:

    left; margin: 0 20px 0 0; img { display: block; opacity: .95; } } }
  6. // Lots of repetitive styles p { margin-bottom: 20px; font-size:

    14px; line-height: 1.5; } footer { margin-bottom: 20px; font-size: 14px; line-height: 1.5; }
  7. // Abstract them in a mixin! @mixin default-type { margin-bottom:

    20px; font-size: 14px; line-height: 1.5; } p { @include default-type; } footer { @include default-type; }
  8. .alert, alert-positive { padding: 15px; font-size: 1.2em; text-align: center; background:

    #ea4c89; } .important, .alert-positive { font-size: 4em; } .alert-positive { background: #9c3; }
  9. // Import shared styles @import 'shared/alerts'; @import 'shared/avatars'; @import 'shared/loaders';

    // Import base styles @import 'backend/base/grid'; @import 'backend/base/icons'; @import 'backend/base/typography'; @import 'backend/base/forms'; // Import modules @import 'backend/modules/billing'; @import 'backend/modules/filters';
  10. .media, .bd { overflow:hidden; } .media .img { float:left; margin-right:

    10px; } .media .img img { display:block; } .media .imgExt { float:right; margin-left: 10px; }