Advanced CSS (Video Corso)

95.00 €


Categorie: ,

Contenuti del corso

Positioning and Visibility

  • Element Flow
  • Position
  • Absolute Positioning
  • Relative Positioning
  • Fixed Positioning
  • Exercise: Positioning
  • Z-index
  • Display
  • Visibility
  • Float
  • Clear

Advanced CSS Page Layout

  • Resetting Styles
  • Full Width Layouts
  • Two-column
  • Three-column
  • Exercise: Positioning the Headings
  • Fixed Width Layouts
  • A Recommendation on Positioning
  • Exercise: Laying Out a Page – The Power of Float
  • Other Methods of Layout
  • CSS Text Columns
  • Flexible Box Model
  • Exercise: Flexible Box Layout

Media Queries

  • Media Queries
  • What Are Media Queries?
  • The Viewport Meta Tag
  • A First Example
  • Responsive Design
  • Exercise: Responsive Design for a Simple Blog
  • Image Widths
  • Exercise: Responsive Design for a Simple Blog (Three Views)

CSS Shorthand Properties

  • What is CSS Shorthand?
  • Benefits of Using CSS Shorthand
  • Value Order of CSS Shorthand Properties
  • CSS Initial Values
  • Shorthand Margin and Padding
  • Shorthand Border
  • Shorthand Backgrounds
  • Shorthand Fonts
  • Shorthand Lists
  • Exercise: Using Shorthand

CSS Lists as Hierarchical Navigation

  • Menus as Lists
  • CSS Horizontal Menu
  • CSS Vertical Menu
  • CSS Dynamic Menus
  • CSS Dropdown Menu
  • CSS Flyout Menu
  • Exercise: Combining Dropdown and Flyout Menus
  • CSS3 Menus
  • Dropdown Menus
  • A Mobile-Friendly Menu
  • Accessibility

CSS Background Tricks

  • Rounded Corner Boxes
  • Fixed-width Rounded Corner Boxes
  • Rounded Corners with CSS
  • Mountaintop Corners
  • Exercise: Creating a Rooftop Panel
  • Tabbed Navigation
  • Exercise: Tabbed Navigation: Rounding the Corners
  • Drop Shadows
  • CSS Drop Shadows: The box-shadow Property
  • CSS Sprites
  • Background Opacity and Images
  • The opacity Property
  • Exercise: Using HSL and Opacity
  • Backgrounds
  • Exercise: Multiple Background Images with background-clip, background-origin, and background-size

Laying out and Styling Forms with CSS

  • Laying out the Questions
  • Creating the Form
  • HTML
  • Form Fields
  • Adding the Form Fields
  • Reset Revisited
  • Styling the Form
  • Exercise: Expanding the Form

CSS Best Practices

  • Considerations
  • Use CSS
  • Use External Style Sheets
  • Organize Your Style Sheets/Preprocessors
  • Exercise: Using Sass
  • ID the Body
  • Use CSS Shorthand
  • Combine CSS Rules
  • Use a CSS Reset
  • Use the “LoVe HAte" Rule
  • Use HTML Lists for Navigation Menus
  • Avoid CSS Hacks
  • Use a CSS Compressor
  • Use a Master Style Sheet
  • Summary of Best Practices

Browser-compatibility Issues

  • Quirks Mode
  • Controlling Browser Modes
  • Design Strategy
  • Internet Explorer Conditional Statements
  • Common Browser Bugs / Issues
  • Positioning Legends


Il corso si rivolge a programmatori HTML.


Per partecipare con profitto a questo corso è necessario che gli allievi abbiano familiarità con l’uso di HTML e con l’uso basilare dei CSS.


Al termine del corso gli allievi saranno in grado di:

  • Learn to position elements with CSS.
  • Learn advanced CSS page layout techniques.
  • Learn how to use shorthand CSS properties.
  • Learn to create cool effects with background images using CSS.
  • Learn to lay out forms without tables.
  • Learn to use CSS with lists to create hierarchical navigation.
  • Learn to organize your CSS code.
  • Learn about browser support for CSS.