Kurs i CSS för Programmerare

Grundkurs i CSS & HTML för programmerare

Har du upplevt att du bara skulle göra en liten förändring i en CSS regel och hela webbsidas utseende förvandlades till något som mer liknade en kubistmålning? Har du tänkt tanken att CSS snarar är besläktat med alkemi än programmering?

Kanske du inte ens känner igen dig i frågeställningarna ovan. Hursomhelst, så är detta en kurs ger dig en solid grund i CSS & HTML, med ett stänk av JavaScript.

Du får lära dig allt du behöver veta om CSS & HTML för att förstå hur CSS regler ska utformas och hur webbläsaren väljer ut vilka regler som ska användas. Kursen är uppbyggd kring många korta teoriavsnitt, vilka avslutas med praktiska programmeringsövningar.

Vi vill understryka att kursen vänder sig till utvecklare som använder CSS som ett programspråk, för att realisera en design. Med andra ord; det är inte en kurs om grafisk web design, utan om att förstå och kunna tillämpa CSS/HTML/JS.

Detta får du lära dig
  • Kunna formulera kraftfulla CSS regler
  • Kunna designa återanvändbara CSS widgets
  • Kunna placera element med flexbox
  • Kunna designa sidlayout med grid
  • Kunna skapa effektfulla bakgrunder med gradienter
  • Förstå hur webbläsare exakt väljer vilka CSS reglar att applicera
  • Kunna välja och konfigurera byggverktyg för både för- och efterbearbetning
Kursinnehåll

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
                  SnabbFakta
                  NamnCSS för Programmerare
                  Längd 4 Dagar
                  NivåBeginner
                  MålgruppWeb utvecklare
                  FörkunskaperVerksam som utvecklare i något programspråk
                  Verktyg
                  • NodeJS && NPM/NPX
                  • Microsoft Visual Code
                  • Chrome || Firefox || Edge
                  KursDatum
                  DatumPlatsPris
                  2019-09-10Stockholm24 000 kr
                  2019-10-07Stockholm24 000 kr
                  2019-11-04Stockholm24 000 kr
                  2019-12-09 Stockholm24 000 kr

                  Samma-Företags Rabatt

                  Vi ger 20% rabatt för tillkommande deltagare från samma företag vid samma kurs-tillfälle. Läs mer här.

                  Företagsintern Kurs

                  Om du beställer en företagsintern kurs kommer vi till er och håller kursen i era lokaler. Priset bestäms av vår prismodell och baseras på antalet kursdagar, antalet deltagare, samt i förekommande fall resa och logi.

                  Läs mer om vår prismodell och beställningsvillkor här.

                  Relaterade Kurser
                  KursDagarNivå
                  JavaScript3BeginnerVisa
                  Twitter Bootstrap1BeginnerVisa
                  Angular Grundkurs4 BeginnerVisa
                  Angular PWA med Firebase 3IntermediateVisa
                  NodeJS2Intermediate Visa
                  TypeScript2 IntermediateVisa