

Weet je niet waar
starten?
Track
Certificaat
Web Developer from Zero to Hero
4.7+
★★★★★
★★★★★
832 recensies
Beginner
Discover the power to create captivating websites by harnessing HTML, CSS, and JavaScript. Immerse yourself in building dynamic web applications enhanced with cutting-edge frameworks and libraries. Bekijk meer
HTML/CSS
JavaScript
React
Boost your Tech Skills!
with up to 55% off
What you'll get with our subscription:
Access to 85+ top-rated courses
AI-driven Learning
Workspaces for practicing your skills
Personalized study tracks
Certificates of completion
Training 2 or more people?
Get your team access to Codefinity courses anytime, anywhere.
Try Codefinity TeamsWhat you will learn
- Begrijp de fundamentele rol van tags en attributen bij het maken van webpagina's.
- Begrijp de structuur van webdocumenten door te leren over documentstroom en hoofdelementen.
- Ontwikkel het vermogen om afbeeldingen, audio en video in te voegen en te beheren, waardoor de omgang met webmedia wordt verbeterd.
- Verkrijg vaardigheid in het maken en organiseren van formulieren, en beheers het gebruik van invoertypen en formelementen.
- 241 chapters
- 28 hours
- 253 tasks
Trusted by employees of leading companies
Learning track content
Module 1 / Ultimate HTML
Verken de werking van het web. Leer hoe gegevens over netwerken reizen, ontdek de rol van protocollen en ontrafel de mysteries van IP-adressen en domeinnamen. Krijg een hoogwaardig begrip van hoe webbrowsers en servers communiceren om webinhoud te leveren.
Ontdek de kracht van tags om inhoud te structureren, van koppen en alinea's tot lijsten en tabellen. Leer hoe je de elementen kunt verbeteren met attributen.
- HTML-Tags BegrijpenVoorbeeld
- Werken met HTML-AttributenVoorbeeld
- Begrijpen van Gepaarde en Enkele Tags in HTMLVoorbeeld
- Tekstmarkering en Opmaak in HTMLVoorbeeld
- Uitdaging: Maak Je Eerste Webpagina ParagraafVoorbeeld
- Uitdaging: Bouw een Persoonlijke Introductie WebpaginaVoorbeeld
- Uitdaging: Ontwerp een Filmshowcase-WebpaginaVoorbeeld
- Links en Knoppen Gebruiken in HTMLVoorbeeld
- Uitdaging: Maak Links Naar Populaire WebsitesVoorbeeld
- Je HTML-Code Valideren Voor Best PracticesVoorbeeld
De kern van de HTML-documentstructuur. Leer de componenten van een HTML-document, inclusief de doctype-verklaring, head en body. Begrijp het doel van elk element en hoe ze bijdragen aan de algehele structuur van een webpagina.
- De Geheimen Achter Goed Gestructureerde Webpagina'sVoorbeeld
- HTML-Documentstructuur BegrijpenVoorbeeld
- De Rol van de DocumentkopVoorbeeld
- Beheer van Documentstroom en Lay-outVoorbeeld
- Uitdaging: Structureer een HTML-Document CorrectVoorbeeld
- Ontwikkelaarstools Gebruiken Voor HTML-Inspectie en -DebuggingVoorbeeld
Maak een webpagina aantrekkelijker met behulp van media zoals afbeeldingen, audio en video. Werk met gestructureerde tabelgegevens in de vorm van tabellen.
- Afbeeldingen Toevoegen in HTMLVoorbeeld
- Uitdaging: Werk Met AfbeeldingenVoorbeeld
- Werken met Klikbare Afbeeldingen, Bijschriften en OptimalisatieVoorbeeld
- Begrijpen van Vector- en RasterafbeeldingenVoorbeeld
- Audio en Video Insluiten voor Rijke Media-InhoudVoorbeeld
- Uitdaging: Audio en Video Insluiten in HTMLVoorbeeld
- Tabellen Maken en Structureren in HTMLVoorbeeld
- Uitdaging: Ontwerp een Functionele HTML-TabelVoorbeeld
Ontdek de veelzijdigheid van HTML-formulieren. Leer intuïtieve en gebruiksvriendelijke formulieren ontwerpen door gebruik te maken van belangrijke concepten en technieken. Ontdek hoe formulieren gebruikersinteractie en gegevensverzending op websites mogelijk maken.
- Inleiding tot HTML-FormulierenVoorbeeld
- Basisprincipes van Formuliercreatie in HTMLVoorbeeld
- Het Gebruik van Labels voor Betere Formulier ToegankelijkheidVoorbeeld
- Formulieren Verbeteren met InputattributenVoorbeeld
- Verschillende Invoertypen in HTML VerkennenVoorbeeld
- Uitdaging: Maak een Formulier met Invoervelden en LabelsVoorbeeld
- Werken met het Textarea-Element voor Invoer over Meerdere RegelsVoorbeeld
- Het Select-Element Gebruiken Voor Dropdownmenu'sVoorbeeld
- Het Gebruik van het Datalist-Element voor Vooraf Gedefinieerde InvoersuggestiesVoorbeeld
- Groeperen van Formelementen voor Betere StructuurVoorbeeld
Module 2 / CSS Fundamentals
Basic CSS concepts and rules to add styles to the web page.
- What is CSS?Voorbeeld
- Connecting HTML and CSSVoorbeeld
- Selectors for Styling HTML ElementsVoorbeeld
- Challenge: Add Your First StylesVoorbeeld
- Challenge: Add The Styles using the Class NameVoorbeeld
- User Action Pseudo-ClassesVoorbeeld
- Challenge: User Action Pseudo-ClassesVoorbeeld
- Text ColorsVoorbeeld
- Effective Work with CSSVoorbeeld
- Challenge: Variables in CSSVoorbeeld
Set of CSS properties that are used to style the text content of HTML elements.
Concept of arranging elements according to the box model, which describes the layout and spacing of all elements.
- Box ModelVoorbeeld
- Box SizingVoorbeeld
- Adding Space to ElementsVoorbeeld
- Challenge: Box-SizingVoorbeeld
- Structural and Functional Pseudo-ClassesVoorbeeld
- Challenge: Structural Pseudo-ClassesVoorbeeld
- Element TypesVoorbeeld
- Working with Block-Level ElementsVoorbeeld
- Working with Inline ElementsVoorbeeld
- Challenge: Predict the Page LayoutVoorbeeld
Method of arranging the set of elements in rows and columns.
Create visually stunning and interactive web designs by using advanced CSS techniques for adding decorative elements.
Module 3 / Advanced CSS Techniques
Research what learners can expect from this advanced HTML and CSS styling course. What do you need to know before starting the course? What topics will be covered in it?
Position and manage elements on the web pages. Learn about the different positioning properties, discover how to use the stacking order to control the visibility of elements that overlap each other, and finally, handle content overflow.
- Understanding CSS PositioningVoorbeeld
- Relative Positioning ExplainedVoorbeeld
- Challenge: Apply Relative PositioningVoorbeeld
- Absolute Positioning in CSSVoorbeeld
- Challenge: Implement Absolute PositioningVoorbeeld
- Fixed Positioning for Sticky UI ElementsVoorbeeld
- Challenge: Work with Fixed PositioningVoorbeeld
- Sticky Positioning for Dynamic LayoutsVoorbeeld
- Challenge: Master Sticky PositioningVoorbeeld
- Managing the Stacking Order of ElementsVoorbeeld
- Challenge: Control Z-Index and Overlapping ElementVoorbeeld
- Handling Content Overflow in CSSVoorbeeld
Research the power of transitions and learn how to improve the user experience. Discover how to liven properties smoothly and gradually, creating seamless state transitions.
- Introduction to CSS TransitionsVoorbeeld
- Choosing the Right Transition PropertiesVoorbeeld
- Setting Transition Duration for EffectsVoorbeeld
- Customizing Transitions with Timing FunctionsVoorbeeld
- Adding Delay to CSS TransitionsVoorbeeld
- Combining TransitionsVoorbeeld
- Challenge: Add a Smooth Transition EffectVoorbeeld
Learn about the animation property and how it can be used to create dynamic and engaging designs. Discover how to create complex animations using keyframes and how to control the animation.
Explore the transformation property, which allows modifying the appearance and position of elements on a webpage. Learn how to scale, rotate, skew, and translate elements in two and three dimensions. Combine multiple transformations to create more complex effects.
- Introduction to CSS TransformationsVoorbeeld
- Scaling ElementsVoorbeeld
- Rotating Elements in 2D and 3DVoorbeeld
- Challenge: Apply Scaling & RotationVoorbeeld
- Translating Elements for Dynamic EffectsVoorbeeld
- Skewing Elements for Unique DesignsVoorbeeld
- Using Perspective for Depth EffectsVoorbeeld
- Challenge: Combine Translation and SkewingVoorbeeld
The principles and techniques used in adaptive/responsive design aim to make websites and applications accessible and visually appealing across different devices, screen sizes, and orientations.
Learn about preprocessors in CSS and how they can help to write more efficient and maintainable code. Understand how to use preprocessors to simplify the workflow and generate cleaner CSS code.
- Introduction to CSS PreprocessorsVoorbeeld
- Understanding Sass Syntax for Better CSSVoorbeeld
- Using Sass Variables for Reusable StylesVoorbeeld
- Performing Calculations with Sass Numeric OperatorsVoorbeeld
- Nesting Styles for Cleaner CodeVoorbeeld
- Extending Styles with the @extend DirectiveVoorbeeld
- Organizing Sass Files for Scalable ProjectsVoorbeeld
Module 4 / Introductie tot JavaScript
Ontdek de basisprincipes van JavaScript, inclusief het doel en de syntaxis ervan. Leer hoe je met de console werkt voor output en hoe je opmerkingen gebruikt om je code te organiseren en te documenteren. Deze fundamentele vaardigheden bereiden je voor op een diepere verkenning van de mogelijkheden van JavaScript.
Verken de bouwstenen van JavaScript door onderscheid te maken tussen letterlijke waarden en variabelen. Begrijp de kerngegevenstypen, inclusief `null` en arrays, en leer hoe je ze kunt manipuleren met behulp van array-methoden.
- Begrijpen van Variabelen in JavaScriptVoorbeeld
- Uitdaging: Definieer de VariableVoorbeeld
- Using Const voor ConstantenVoorbeeld
- Verkennen van JavaScript-GegevenssoortenVoorbeeld
- Werken met Null in JavaScriptVoorbeeld
- Introductie tot ArraysVoorbeeld
- Arraymethoden en ManipulatieVoorbeeld
- Uitdaging: Voer Arraybewerkingen UitVoorbeeld
Leer hoe je de datatypes van JavaScript kunt manipuleren via essentiële operaties. Beheers assignment, wiskundige operaties, incrementing en decrementing, vergelijkingen, logische operaties en stringconcatenatie.
- Begrijpen van ToewijzingsoperatorenVoorbeeld
- Wiskundige Bewerkingen in JavaScriptVoorbeeld
- Toewijzingsoperatoren in JavaScriptVoorbeeld
- Incrementeer- en DecrementeeroperatorenVoorbeeld
- Uitdaging: Variabele Bewerkingen OefenenVoorbeeld
- Vergelijkingsoperatoren in JavaScriptVoorbeeld
- Logische Operators UitgelegdVoorbeeld
- Uitdaging: Vergelijk Variabelen in JavaScriptVoorbeeld
- Strings Samenvoegen in JavaScriptVoorbeeld
- Uitdaging: Bouw Zinnen met JavaScriptVoorbeeld
Ontdek hoe je de stroom van je programma's kunt beheersen met conditionele uitspraken. Beheers `if`, `else` en `else if` om JavaScript te instrueren beslissingen te nemen en code uit te voeren op basis van verschillende voorwaarden.
Vereenvoudig je code door de beheersing van JavaScript's lusstructuren. Verken `while`, `do while` en `for` loops, en leer hoe je hun gedrag kunt beheersen met behulp van `break` en `continue`. Ontgrendel de kracht van loops om repetitieve taken efficiënt uit te voeren.
- Het Begrijpen van de While-Lus in JavaScriptVoorbeeld
- Het Gebruik van de Do While-Lus voor IteratieVoorbeeld
- Uitdaging: Print Nummers van 5 tot 9 AfVoorbeeld
- Het Beheersen van de for-Lus in JavaScriptVoorbeeld
- Uitdaging: Console Tigers Met LussenVoorbeeld
- Uitbreken Uit Lussen met BreakVoorbeeld
- Iteraties Overslaan Met ContinueVoorbeeld
- Uitdaging: Stoppen en Overslaan in LoopsVoorbeeld
Ontdek de kracht van functies in JavaScript. Leer hoe je functies definieert, werkt met argumenten, en de `return`-verklaring gebruikt om herbruikbare en efficiënte code te maken. Het beheersen van functies zal je vermogen verbeteren om schone en modulaire programma's te schrijven.
- Wat Zijn Functies in JavaScript?Voorbeeld
- Functies Definiëren in JavaScriptVoorbeeld
- Uitdaging: Schrijf een Functie – Mijn NaamVoorbeeld
- Effectief Gebruik van FunctieargumentenVoorbeeld
- Waarden Retourneren Vanuit FunctiesVoorbeeld
- Uitdaging: Maak een SumfunctieVoorbeeld
- Cursusoverzicht & Volgende StappenVoorbeeld
Module 5 / React Mastery
Gain an understanding of the core principles of React. You'll learn about JSX (JavaScript XML), building reusable UI components, and rendering elements. Additionally, you'll explore the importance of data collection and conditional rendering in React applications. By the end of this section, you'll have a solid foundation of React's essential concepts, setting you up for success in the more advanced topics covered in the following sections.
- What Is React and Why Use It?Voorbeeld
- Comparing SPAs and MPAs in Web DevelopmentVoorbeeld
- How React Works with the Virtual DOMVoorbeeld
- Introducing JSX for Writing HTML in JavaScriptVoorbeeld
- Building Complex UI with JSXVoorbeeld
- Rendering Elements in ReactVoorbeeld
- Challenge: Render an Element in ReactVoorbeeld
- Understanding React ComponentsVoorbeeld
- Passing Data with Props in ReactVoorbeeld
- Challenge: Create Functional ComponentsVoorbeeld
- Conditional Rendering in ReactVoorbeeld
- Challenge: Implement Conditional Rendering – Chat NotificationVoorbeeld
- Challenge: Implement Conditional Rendering – Bank AlertVoorbeeld
- Rendering Collections of Data in ReactVoorbeeld
- Challenge: Display Data Collections in ReactVoorbeeld
- React Fundamentals Wrap-UpVoorbeeld
Explore the various methods of adding styles to the React applications. You will learn how to apply styles to individual components, use dynamic styles, and maintain a scalable and maintainable styling approach in your projects.
- Introduction to Styling in ReactVoorbeeld
- Using Inline Styles in ReactVoorbeeld
- Applying Inline Styles in PracticeVoorbeeld
- Challenge: Use Inline Styles in a React ComponentVoorbeeld
- Styling React Components with External CSSVoorbeeld
- Applying External CSS in PracticeVoorbeeld
- Challenge: Apply External CSS to a React AppVoorbeeld
- Using CSS Modules for Scoped Styling in ReactVoorbeeld
- Organizing File and Folder Structures for StylesVoorbeeld
- Challenge: Use CSS Modules in ReactVoorbeeld
- Styling Techniques in React Wrap-UpVoorbeeld
Powerful features in modern React development. Hooks revolutionize how we write functional components, providing a concise and intuitive way to manage state and perform side effects. Conversely, Context allows us to share data through the component tree without prop drilling. Combining hooks and Context enables efficient state management and simplified data sharing in React applications.
- Introduction to React Hooks and ContextVoorbeeld
- Managing State with the useState HookVoorbeeld
- Challenge: Toggle Visibility with useStateVoorbeeld
- Working with References Using the useRef HookVoorbeeld
- Challenge: Build a Controlled Form ComponentVoorbeeld
- Handling Side Effects with the useEffect HookVoorbeeld
- Challenge: Fetch and Display Data with useEffectVoorbeeld
- Optimizing Performance with the useMemo HookVoorbeeld
- Challenge: Implement a Car List Filter with useMemoVoorbeeld
- Sharing State Across Components with ContextVoorbeeld
- Using Context in a Real-World ScenarioVoorbeeld
- Challenge: Build a World of Astronomy App with ContextVoorbeeld
- React Hooks and Context Wrap-UpVoorbeeld
Step-by-step guide on how to start a real-world React project. From setting up your development environment to understanding project organization and critical tools, you'll gain the knowledge and confidence to embark on your React journey.
Module 6 / React Router Essentials
Learn the theoretical basics of concepts such as URL, domain, protocol, query parameters, and more. Understand the significance of routing in web applications and why we need the React Router library.
Discover how to create an entire React application from scratch, with the ability to display content that adapts based on the URL using React Router functionality.
- Overview of the Multi-Page WebsiteVoorbeeld
- Installing React RouterVoorbeeld
- Enabling Routing in a React AppVoorbeeld
- Defining Routes for NavigationVoorbeeld
- Recap: First Steps in React RouterVoorbeeld
- Optimizing Imports with Lazy LoadingVoorbeeld
- Implementing a Fallback ComponentVoorbeeld
- Recap: Second Steps in React RouterVoorbeeld
- Creating and Managing NavigationVoorbeeld
- Exploring React Router's Complete LogicVoorbeeld
- Recap of React Router FundamentalsVoorbeeld
Explore using query strings for sharing and managing application state via URLs, work with different data types in query parameters, and leverage React Router for navigation and effects based on URL changes.
Requirements
- A computer with a browser - all browsers are supported.
- Your enthusiasm to enhance your tech skills.
- Everything else needed to start learning and practicing is already included in this course.
Over 200,000 5-star ratings and counting
Ruslan Kravchuk
Het belangrijkste is om te leren en niet op te geven
Het materiaal is goed, er valt veel te leren, alles om beter te worden en het belangrijkste is te leren wat je wilt....
Matteo Comune
Dankzij hen leer ik veel…
Dankzij hen leer ik veel sneller omdat ze je vanaf nul alles uitleggen. Het is de beste website voor mensen zonder IT-achtergrond...
Yuliana Cadavid
geweldige cursus voor beginners
geweldige cursus voor beginners, ze toetsen je kennis in elke les...
Elpunzon
Ik geniet van mijn Codefinity-ervaring…
Ik geniet van mijn Codefinity-ervaring met Python. De zelfgestuurde leermethode past perfect in mijn schema...
Alexandru Alexandru
Het is prettig om van Codefinity te leren
Het is prettig om van Codefinity te leren. Het is eenvoudig en heeft goede voorbeelden van wat ik hier geleerd heb...
jacob Templet
Easy to follow along with and provides…
Makkelijk te volgen en biedt uitdaging in mijn dagelijks leven. Die uitdaging motiveert me elke dag weer te leren...
Elan
Codefinity is een uitgebreide leeromgeving…
Codefinity is een uitgebreide leeromgeving die je helpt je vaardigheden als software engineer of datawetenschapper te ontwikkelen. De oefeningen zijn leuk en helpen je je skills aan te scherpen...
Thibault
Voor het eerst leren coderen
Voor het eerst leren coderen en dit succesvol doen met Codefinity - bedankt...
Adrien Morel
Goed ontworpen voor totale beginners
Goed ontworpen voor totale beginners, met stapsgewijze vooruitgang die me vertrouwen geeft....
_Gracy
het is simpelweg perfect uitgelegd
het is simpelweg perfect uitgelegd! Tot nu toe heb ik geen problemen ervaren, want alles is zo goed geregeld....
Ruslan Kravchuk
Het belangrijkste is om te leren en niet op te geven
Het materiaal is goed, er valt veel te leren, alles om beter te worden en het belangrijkste is te leren wat je wilt....
Matteo Comune
Dankzij hen leer ik veel…
Dankzij hen leer ik veel sneller omdat ze je vanaf nul alles uitleggen. Het is de beste website voor mensen zonder IT-achtergrond...
Yuliana Cadavid
geweldige cursus voor beginners
geweldige cursus voor beginners, ze toetsen je kennis in elke les...
Elpunzon
Ik geniet van mijn Codefinity-ervaring…
Ik geniet van mijn Codefinity-ervaring met Python. De zelfgestuurde leermethode past perfect in mijn schema...
Alexandru Alexandru
Het is prettig om van Codefinity te leren
Het is prettig om van Codefinity te leren. Het is eenvoudig en heeft goede voorbeelden van wat ik hier geleerd heb...
jacob Templet
Easy to follow along with and provides…
Makkelijk te volgen en biedt uitdaging in mijn dagelijks leven. Die uitdaging motiveert me elke dag weer te leren...
Elan
Codefinity is een uitgebreide leeromgeving…
Codefinity is een uitgebreide leeromgeving die je helpt je vaardigheden als software engineer of datawetenschapper te ontwikkelen. De oefeningen zijn leuk en helpen je je skills aan te scherpen...
Thibault
Voor het eerst leren coderen
Voor het eerst leren coderen en dit succesvol doen met Codefinity - bedankt...
Adrien Morel
Goed ontworpen voor totale beginners
Goed ontworpen voor totale beginners, met stapsgewijze vooruitgang die me vertrouwen geeft....
_Gracy
het is simpelweg perfect uitgelegd
het is simpelweg perfect uitgelegd! Tot nu toe heb ik geen problemen ervaren, want alles is zo goed geregeld....
Data Engineer
Certificaat van Voltooiing
Toon je pas verworven vaardigheden. Je hebt het verdiend
Discover more
Learning tracks
Alleen voor Ultimate
7 Cursussen
293 Taken
Alleen voor Ultimate
6 Cursussen
168 Taken
Alleen voor Ultimate
4 Cursussen
115 Taken
Alleen voor Ultimate
6 Cursussen
101 Taken
Alleen voor Ultimate
4 Cursussen
143 Taken
Alleen voor Ultimate
5 Cursussen
119 Taken
Alleen voor Ultimate
3 Cursussen
39 Taken
Alleen voor Ultimate
7 Cursussen
376 Taken
Alleen voor Ultimate
2 Cursussen
1 Project
57 Taken
Alleen voor Ultimate
7 Cursussen
346 Taken
Alleen voor Ultimate
6 Cursussen
309 Taken
Alleen voor Ultimate
5 Cursussen
146 Taken
Alleen voor Ultimate
5 Cursussen
135 Taken
Alleen voor Ultimate
3 Cursussen
71 Taken
Alleen voor Ultimate
6 Cursussen
239 Taken
Alleen voor Ultimate
5 Cursussen
239 Taken
Alleen voor Ultimate
4 Cursussen
125 Taken
Alleen voor Ultimate
3 Cursussen
119 Taken
Alleen voor Ultimate
3 Cursussen
75 Taken
Learning tracks
traject
Webontwikkeling met C#
Beginner
4.8
(2347)
traject
Python van Nul tot Held
Beginner
4.7
(8314)
traject
SQL van Nul tot Held
Beginner
4.7
(2583)
traject
C++ Basisprincipes
Beginner
4.5
(475)
traject
Game-ontwikkeling Met Unity
Beginner
4.7
(70)
traject
Word Een React Ontwikkelaar
Halfgevorderd
4.7
(66)
traject
Excel Essentials
Beginner
4.7
(293)
traject
Java Essentials
Beginner
4.7
(193)
traject
Python Voorbij Gevorderd
Beginner
4.6
(63)
traject
Full Stack Webontwikkeling
Beginner
4.7
(847)
traject
Fundamenten van Frontend-ontwikkeling
Beginner
4.7
(818)
traject
Meesterschap in Datavisualisatie
Halfgevorderd
4.7
(558)
traject
Gecontroleerd Machine Learning
Halfgevorderd
4.6
(123)
traject
C++ Beheersing
Gevorderd
4.8
(16)
traject
Java Web
Gevorderd
4.7
(1153)
traject
Word een QA-Ingenieur
Beginner
4.7
(712)
traject
Videoproductie met Adobe
Beginner
5.0
(5)
traject
UI/UX Ontwerptools
Beginner
5.0
(4)
traject
Essentiële Kantoorvaardigheden
Beginner
4.8
(235)
Become a Development expert
Interactive exercises
Learning videos
AI-assistant on all courses
Workspaces for designing your own projects
Ready to get started?
ProBest intro offer | UltimateA complete experience to kickstart your career | |
---|---|---|
85+ Top-Rated courses | ||
Completion certificates | ||
AI-Assistant in all courses | ||
20+ hands-on Real-world projects | ||
Personalized study tracks | ||
Unlimited workspaces | ||
Boost your Tech Skills!
with up to 55% off
What you'll get with our subscription:
Access to 85+ top-rated courses
AI-driven Learning
Workspaces for practicing your skills
Personalized study tracks
Certificates of completion
Training 2 or more people?
Get your team access to Codefinity courses anytime, anywhere.
Try Codefinity Teams