CSS för programmerare
Kurs för programmerare om hur du tillämpar modern CSS i webb-applikationer
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 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.
Snabbfakta
Namn
CSS för programmerareÄmne
WebbapplikationerURI
web/css-for-programmers
Längd
3 dagarNivå
BeginnerMålgrupp
Web-apps programmerareFörkunskaper
Erfarenhet av att utveckla webbapplikationerProgramvara & Verktyg
Relaterade Kurser
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.
Du sitter bekvämt i ett av våra klassrum, vilka finns centralt placerade i Stockholms innerstad.
I priset ingår tryckt kursmaterial (och som PDF), samt kaffe/te med smörgås på förmiddagen och kaffe/te med bulle på eftermiddagen. Pris: 21 000 kr + moms
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:
16 500 kr + moms
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. Klicka på knappen nedan för att be om en offert.
Kursdatum
Kurs i Klassrum
Kurs via Zoom
Kurs hos Er
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.Detta får du lära dig
Eftersom kursmaterialet är författat på engelska, så återger vi innehållet också på engelska.Kursinnehåll
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