Course in CSS for Programmers

Basics course in CSS & HTML for programmers

Have you experienced that you were tasked by doing just a minor update of a CSS rule and the whole web page transformed into something resembling a cubist painting? Have come across the thought that CSS rather is rooted in alchemy than programming?

Perhaps you don't even recognize any of the questions above. Anyway, this is a course that provide you with a firm foundation in CSS & HTML, with a dash of JavaScript.

You will learn everything you need to know about CSS & HTML in order to understand how CSS rules should be formulated and how browsers select the rules to apply. The course is structured around many short theory lectures that finishes with practical programming exercises.

We would like to emphasis that the course is directed towards developers using CSS as a programming language, in order to realize a specific design. In other words; it's not a course about graphical web design, rather about how to understand and apply CSS/HTML/JS.

This is what you will learn
  • Know how to formulate powerful CSS rules
  • Know how to design re-usable CSS widgets
  • Know how to place elements using flexbox
  • Know how to design page layouts using grid
  • Know how to design exiting backgrounds using gradients
  • Understand how browsers select the CSS rules to apply
  • Being able to choose and configure build tools for both pre- and post-processing
Course Contents

Overview & Background

  • Why CSS was invented
  • Version history
  • Browser compatibility

Web App Basics

Laying the foundation for the course

    HTTP Overview

    • HTTP invocation structure
    • Request opersations
    • Response codes
    • MIME types
    • Understanding HTTPS
    • Payload encryption
    • Using a non-validated X.509 certificate

    HTML Basics

    • Basic syntax
    • HTML page document
    • Lenient HTML
    • Heading tags
    • Paragraph tags
    • List tags
    • Link tags
    • Block vs. inline tags
    • White space
    • Pre-formatted and code tags
    • Presentational tags
    • Semantic tags
    • Grouping tags
    • Common attributes
    • Special attributes
    • Head section tags
    • Meta tags

    CSS Syntax

    • Basic syntax
    • Element selector
    • Size units
    • Colour properties
    • Text properties
    • Padding and margin
    • Borders
    • Embedding and linking to CSS code
    • Tag link attributes
    • The default style-sheet

    JavaScript Basics

    • Variables
    • Scalar types
    • Operators
    • Print outs
    • Functions
    • Lambdas
    • Lists
    • Objects
    • JSON
    • Running JS in a browser
    • Understanding DOM
    • Finding DOM nodes
    • Dealing with CSS styles
    • Modifying the DOM tree
    • Event handling
    • Brief about AJAX
    • Embedding and linking to JS code
    • Tag script attributes

    Mock/Fake Data

    • What is mock data?
    • Lorem ipsum text
    • Getting filler text from a web service
    • Getting place holder images from a web service
    • Getting random stock images from a web service
    • Fake personal data
    • Generating mock/fake business data
    • Fake back-end REST-WS server

    CSS Fundamentals

    Presenting the corner stones of CSS

      Fonts & Size Units

      • Font categories
      • Setting the font
      • What is font-size relative?
      • Using em size
      • Nested elements with em size
      • Using rem size
      • Using viewport units

      Colour Expressions

      • Colour expression syntax
      • Understanding RGB
      • Understanding HSL
      • Opacity / transparancy
      • A little bit of colour theory

      Combinators & Selectors

      • Combinator syntax
      • Universal selector
      • Attribute selectors
      • Pseudo classes
      • Pseudo elements
      • Variables
      • The calc() function
      • Special property values

      CSS Box Model

      • Block vs. inline elements
      • Element box rendering
      • Box shape structure
      • Border properties
      • Border radius
      • Getting creative with think borders
      • Inline images
      • Floated images
      • Floating around several paragraphs
      • Stop floating
      • Floating block elements
      • The clearfix trick
      • Using floated divs to define a columnar layout
      • Understanding the box-sizing property
      • Always set box-sizing to border-box
      • Box shadows
      • Simple card widget

      Text Formatting

      • Alignment
      • Variations
      • Spacing
      • Columns
      • Newspaper format

      Layout

      Discussion of various ways of place content

        Positioning

        • What can property position achieve?
        • Fixed
        • Absolute
        • Relative
        • Sticky
        • Z-index

        Flexbox Layout

        • What is flexbox?
        • Terminology
        • Properties
        • Flex directiojn
        • Justify content
        • Align items
        • Flex wrap
        • Flex basis/grow/shrink

        Grid Layout

        • What is grid?
        • Terminology & anatomy of a grid container
        • Container properties
        • Item properties
        • Named grid lines
        • Named grid areas

        Page Layouts

        • Base style
        • Even out browser differences
        • CSS concepts
        • Common page layouts
        • Dealing with a wide screen
        • Usage of max-width
        • Dealing with overflow

        Application

        Application design aspects

          Web Fonts

          • What is a web font?
          • Web font providers
          • Using Google Fonts
          • Using a font link
          • Using a donwloaded font

          Icon Fonts

          • What is an icon font?
          • Icon font providers
          • Using Font Awesome
          • Linking to and applying Font Awesome
          • Scaling icons
          • Icon variations
          • Combining and mixing icons

          Designing Widgets with Module CSS

          • What is modular CSS?
          • Simple Message widget
          • Buttons widget
          • Dealing with button states
          • Button variations
          • Media widget with image
          • Multi-component widget using JS
          • Dropdown widget
          • Menu widget

          Composite Elements

          Styling tables and forms

            Tables

            • Basic table tags
            • Cell borders
            • Column formats
            • Striped and hover rows
            • Row groups
            • Unstyled and styled row groups Merged cells

            Forms & Fields

            • Basic form tag
            • Basic form field tags
            • Using the input tag
            • Input tag attributes
            • Toggle buttons
            • Item selection fields
            • Multi-line text field
            • Borders & corners of fields
            • Styling labels
            • Using fieldsets to group fields
            • Designing a modal popup form

            Advanced CSS

            Depening the understanding of CSS

              Cascading & Specificity

              • Understanding how to browser chooses a CSS rule to apply
              • Different selectors have different specificities
              • Specificity encoding into tuples
              • How to deal with conflicting rules of the same specificity
              • What is a cascaded value
              • Property inheritance

              Backgrounds

              • Properties dealing with backgrounds
              • Gradients
              • Linear and radial gradients
              • Repeating gradients
              • Mixing and blending colors
              • Mixing images
              • Cut-out text over an image

              Transitions & Transforms

              • What is a transition?
              • Transition properties
              • Fading
              • Cubic bezier functions
              • What is a transform?
              • Rotate, translate, scale and skew

              Device Queries

              • Media query by device type
              • Media query by device feature
              • Logical operators of query expressions
              • Using mydevice.io
              • Handling media queries in JS
              • Principles of responsive design
              • Mobile first
              • Fluid layout
              • Size and resolution dependent image selection

              Tooling

              Developer support tools

                Build Tools

                • Do not install NPM packages globally
                • Using NPX for CLI tools
                • Understanding the scripts section of package.json
                • NPM & BASH
                • What is GulpJS?
                • Sample gulpfile
                • HTML minification

                Style Docs

                • What is a style doc?
                • Installation of KSS
                • Doc comments syntax
                • Defining a start page
                • Running KSS

                Pre-Processing

                • What is a pre-processor?
                • What is PUG?
                • Sample PUG file
                • What is SASS/SCSS?
                • Sample SCSS file
                • Other CSS languages
                • Using Modernizr to even out browser differences

                Post-Processing

                • What is post-processing?
                • Using PostCSS and its CLI
                • Sample PostCSS usage
                • Sample PostCSS translations
                • Using GulpJS as the PostCSS runner
                • Minification of HTML, HS and images using GulpJS and PostCSS

                Bundlers

                • What is a bundler?
                • Typical operations of a bundler
                • Installing and configuring Parcel
                • Using Parcel for development
                • Using Parcel for application build
                • Hash naming of asset files

                Beyond CSS

                What else is it there to grasp

                  Themes

                  • What is a theme?
                  • Popular (open-source) themes
                  • Overview of Twitter Bootstrap
                  • Bootstrap widgets

                  Frameworks

                  • What is a web framework?
                  • What is a single-page (web) app (SPA)?
                  • SPA frameworks
                  • What is Angular?
                  • Generating an Angular component
                  • Angular component anatomy
                  Facts
                  NameCSS for Programmers
                  Duration 4 Days
                  LevelBeginner
                  AudienceWeb developers
                  Prerequisites Active as a developer in any programming language
                  Tools
                  • NodeJS && NPM/NPX
                  • Microsoft Visual Code
                  • Chrome || Firefox || Edge
                  On-Site Course

                  If you order an On-Site course, we will come to you and hold the course in your office. The price is determined by our price model and is based on the number of course days, number of participants and any travel and lodging.

                  Read more about out price modell and term of sales here.

                  Related Courses
                  CourseDaysLevel
                  JavaScript3 BeginnerShow
                  Twitter Bootstrap1BeginnerShow
                  Angular Basics4 BeginnerShow
                  Angular PWA using Firebase3 IntermediateShow
                  NodeJS2IntermediateShow
                  TypeScript2 IntermediateShow