Sökresultat för

Kurs om
CSS för programmerare

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.

3 dagar Beginner Web CSS
CSS 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 kubist målning? Har du tänkt tanken att CSS snarare ä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 som ger dig en solid grund avseende CSS & HTML, med ett stänk av JavaScript. Du får lära dig allt du behöver veta 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 på kursen

Här är ett sammandrag i punktform av vad du får lära dig på kursen. Eftersom kursmaterialet är författat på engelska, så återger vi sammandraget också på engelska.

  • Be able to formulate powerful CSS rules
  • Be able to design reusable CSS widgets
  • Be able to place elements with flexbox
  • Be able to design page layout with grid
  • Be able to create effective backgrounds with gradients
  • Understand how browsers choose exactly which CSS rules to apply
  • Be able to select and configure construction tools for both pre- and post-processing

Kursfakta

Här finner du alla detaljer om kursen.

  • Kursnamn

    CSS för programmerare
    CSS for Programmers (eng.)
  • Varaktighet

    3 dagar
  • Nivå

    Beginner
  • Målgrupp

    Web programmerare
  • Förkunskapskrav

    Erfarenhet av att utveckla webbapplikationer
  • Program & Verktyg

    • Node.js && NPM && NPX
    • MS Visual Code || JetBrains IntelliJ IDEA
    • Chrome || Firefox || Edge
  • Publicerad

    1 januari 2010

Overview & Background

  • Why CSS was invented
  • Version history
  • Browser compatibility

WEB APP BASICS

Laying the foundation for the course

HTTP Overview

  • The HTTP invocation structure
  • Request operations
  • 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 placeholder 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 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 direction
  • 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 downloaded 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
  • A 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 fieldset to group fields
  • Designing a modal popup form

ADVANCED CSS

Deepening 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
  • What is a Cubic Bezier function
  • 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

Här ser du vilka kursdatum som är tillgängliga. Klicka på en av datumknapparna för att anmäla dig till ett kurstillfälle. På kursen pratar läraren svenska, medan vårt kursmaterial alltid är författat på engelska.

Missa inte vår samfaktureringsrabatt! Är ni fler personer från samma företag/organisation som går på samma kurs, rabatteras tillkommande personer med 25%. Ni anmäler er till kursen en och en, men uppger samma företag, så ordnar vi resten. Samtliga deltagare från samma företag ingår på samma faktura, den första till fullt pris och resterande till rabatterat pris.

Klassrumskurs

Datum för klassrumskurser

Du sitter bekvämt i ett av våra klassrum. I priset ingår tryckt kursmaterial, samt kaffe/te med smörgås på förmiddagen och kaffe/te med bulle på eftermiddagen.

Pris: 18 000 kr + moms

Hoppsan då 😳
Just nu finns det inga datum tillgängliga. Titta förbi om några dagar eller kontakta oss och be oss lägga upp fler kursdatum.

Fjärrkurs

Datum för fjärrkurser

Du sitter bekvämt framför datorn och deltar i kursen via internet. Vi använder programvaran Zoom för alla våra fjärrkurser. I priset ingår kursmaterial som PDF.

Pris: 14 000 kr + moms

Background

CSS för programmerare

3 dagar

Kursen vänder sig till web programmerare och utgår från att deltagarna har erfarenhet av att utveckla webbapplikationer.

Företagsanpassad kurs

Företagsanpassad kurs

Om ni är tre eller fler personer från samma företag eller organisation, kan ni beställa en företagsanpassad kurs. Då håller vi kursen på ett datum som passar er. Antingen på plats i era lokaler eller som en fjärrkurs. Vi kan också hålla den muntliga framställningen på engelska.

Kontakta oss för en offert

Företagsanpassad Kurs

Jens Riboe

Jens Riboe

Senior/Expert Software Developer

5.0 Instructor/Author Rating

50+
Courses Authored
1000+
Students Lectured
40+
Years Experience

Jag har programmerat sedan början på 1980-talet i en stor mängd olika programspråk och på olika plattformar. Har jobbat på både stora och små företag, både etablerade och startups, samt både inom och utom Sverige. Att skriva (elegant) programkod är det bästa jag vet. Denna erfarenhet och passion är den centrala komponenten i våra kurser. Något som gör oss unika på marknaden och att våra kunder återkommer år efter år för nya och fördjupade kunskaper.

View LinkedIn Profile

Relaterade Kurser

Background

Angular grundkurs

Angular

Angular grundkurs

Kurs om att bygga moderna SPA webbapplikationer med Angular och TypeScript

Background

Vue.js grundkurs

Vue.js 3

Vue.js grundkurs

Kurs om hur du bygger moderna SPA webb-applikationer med Vue 3

Background

Node.js grundkurs

Node.js

Node.js grundkurs

Kurs om hur du utvecklar applikationer i Node.js

Background

JavaScript för programmerare

JavaScript

JavaScript för programmerare

Kurs om hur du programmerar i Modern JavaScript, dvs ES2015 och senare