CSS for the backend web developer

An overview of CSS for the full stack web developer.

Transcript

2. Full stack engineers need to have a fundamental understanding of CSS and browsers.
3. About Me Aarti Parikh Sr. Software Engineer Have shipped production code with Java, Ruby, JavaScript and Go. Full-stack engineer, but mostly backend. @classyhacker on twitter
6. Not just for elements
7. Declarations Properties: color: red; max-width: 20px @ rules: @font-face { font-family: MyHelvetica; src: local("Helvetica Neue Bold”); font-weight: bold;}, @media screen { body { width:75%;} } pseudo-classes: a:visited { color: purple } /* visited links */ pseudo elements: p::before { content: "Hello world!"; } /* inserts content before every p element */
8. CSS Box Model
9. Fixed vs Fluid Layout
10. Responsive design • Liquid or fluid layout • Media queries • Fluid images
12. Cascade algorithm <div id=“test”> <span>Hello</span> </div> div#test span { color: green } div span { color: blue } span { color: red } In the above case, No matter what the order of CSS is, the text “Hello” will be green because that rule is most specific.
14. CSS Preprocessors • SASS • Less • Compass • Stylus
15. Sass $font-stack: Helvetica, sans-serif; $primary-color: #333; .about { font: 100% $font-stack; color: $primary-color; .my-container{ $secondary-color: #343; } }
16. Sass - II • Variables • Nesting • Inheritance • Mixins • Partials • Operators
17. Flexbox - the future
18. References • MDN documentation • css-tricks.com • standardista • eric meyer web • CSS Weekly
19. Thank You