CSS Fundamentals

Cursus CSS Fundamentals

De cursus CSS Fundamentals biedt een grondige inleiding in de basisprincipes van CSS. In deze cursus leren deelnemers hoe CSS selectors HTML-elementen selecteren op basis van ID- of class-attributen, of hun positie in de hiërarchie van de pagina. Hierdoor kunnen ze de juiste styling toepassen, wat essentieel is voor webdesign.

Text en Fonts

Vervolgens wordt er dieper ingegaan op de CSS-syntax met behulp van de opmaak van tekst, waaronder kleuren, fonts en achtergronden. Ook het cascading aspect van CSS en het concept van inheritance worden uitvoerig besproken. Dit helpt deelnemers te begrijpen hoe stijlen zich kunnen stapelen en overerven.

CSS Box Model

Een belangrijk onderdeel van de cursus is het CSS Box Model. Bij de lay-out van een HTML-pagina representeert de rendering engine van de browser elk element als een rechthoek volgens het CSS Basic Box Model, dat bestaat uit margin, padding en outline. Dit model is cruciaal voor het begrijpen van de opmaak en afstand tussen elementen.

CSS Layout

De cursus behandelt ook hoe CSS kan worden gebruikt om de lay-out van de pagina te controleren. Elementen hebben standaard block- of inline-displaywaarden, maar deze kunnen met CSS worden aangepast. Andere CSS-layoutattributen zoals float en overflow worden eveneens besproken, zodat deelnemers flexibele en responsieve ontwerpen kunnen maken.

Tables and Grids

Daarnaast komt aan bod hoe CSS de weergave van tabellen, lijsten en grids kan beïnvloeden. Er wordt aandacht besteed aan de verschillende gap properties die daarbij worden gebruikt, wat essentieel is voor het creëren van gestructureerde en overzichtelijke layouts.

CSS Advanced

Tenslotte worden een aantal geavanceerde toepassingen van CSS besproken in de cursus CSS Fundamentals. Dit omvat het aanbrengen van ronde hoeken, het werken met schaduwen en kleurverlopen. Ook worden 2D- en 3D-transformaties met CSS3 behandeld, waardoor deelnemers hun creativiteit kunnen uiten in webdesign.
Voor meer geavanceerde technieken kun je ook kijken naar onze cursus Sass and Less Preprocessing. Voor meer informatie over CSS kun je de officiële CSS documentatie raadplegen.‎

Doelgroep Cursus CSS Fundamentals

De cursus CSS Fundamentals is bedoeld voor personen die het gebruik van CSS voor de opmaak van web pagina's willen leren.

Voorkennis CSS Fundamentals

Voor deelname aan deze cursus zijn geen specifieke vaardigheden of kennis nodig.

Uitvoering Training CSS Fundamentals

De concepten worden behandeld aan de hand presentatie slides. Een demo website wordt gebruikt om de concepten te verduidelijken. Er wordt ook aandacht besteed aan hands-on oefeningen. De cursustijden zijn van 9.30 tot 16.30.

Certificering Fundamentals

De deelnemers krijgen na het goed doorlopen van de cursus een officieel certificaat CSS Fundamentals.

Modules

Module 1 : CSS Intro

• What is CSS?
• CSS Standard
• CSS Syntax
• CSS Selectors
• Basic Selectors
• CSS Rules
• Styling in Place
• Internal Style Tag
• External Style Sheets
• What is Cascading?
• Checking Browser Support
• Caniuse Site

Module 2 : Text and Fonts

• Working with Fonts
• Formatting Text
• Font Families
• Font Style and Size
• Font Color
• Font Web Safe
• Font Fallbacks
• Text Alignment
• Text Decoration
• Text Transformation
• Borders
• CSS Backgrounds

Module 3 : CSS Box Model

• Basic Box Model
• Margin Edge
• Padding Edges
• Content edge
• Border Edge
• Margin Collapsing
• Box Background
• Containing Block
• CSS Outline
• Outline Shorthand
• Outline Offset
• Outline Width

Module 4 : CSS Layout

• Layout Concepts
• display Property
• Block Level Elements
• Inline Elements
• Units of Measurement
• width and max-width
• Element Positioning
• Position and Overflow
• float Property
• Overflow
• inline Blocks

Module 5 : Tables and Grids

• Table Borders
• Table Styles
• Collapsing Borders
• Full-Width Tables
• Styling Lists
• Navigation Bar
• Grid Layout
• Grid Elements
• Grid Columns
• CSS Counters
• CSS Links

Module 6 : CSS Advanced

• CSS Rounded Corners
• CSS Combinators
• Pseudo Classes
• Pseudo Element
• CSS Gradients
• CSS Shadows
• Text Effects
• CSS Resets
• CSS3 Transformations
• 2D Transforms
• 3D Transforms