CSS – Le guide complet 2022 (Avec Flexbox, Grid & Sass)
Rejoignez ce cours CSS à succès pour tout savoir sur CSS de fond en comble, en profondeur !
CSS – abréviation de Cascading Style Sheets – est un “langage de programmation” que vous utilisez pour transformer vos pages HTML brutes en de véritables sites Web magnifiques.
Ce cours couvre tout – nous commençons par les bases (Qu’est-ce que CSS ? Comment ça marche ? Comment l’utilisez-vous) ? et plongeons progressivement de plus en plus profondément. Et nous le faisons en montrant à la fois des exemples pratiques ainsi que la théorie sous-jacente.
Commencer avec CSS peut sembler facile, mais il y a en fait beaucoup de profondeur dans CSS – par conséquent, ce cours propose différentes “Pistes” ou “Points d’entrée” pour répondre exactement à vos demandes et reflèter votre niveau de connaissances actuel :
- The Basics Track : Partez de zéro, apprenez le CSS à partir de zéro. Vous commencez par la leçon 1 et suivez simplement jusqu’à la fin.
- La voie avancée : vous connaissez déjà les bases du CSS, vous savez ce que sont les sélecteurs et comment cela fonctionne, mais vous souhaitez approfondir et apprendre certaines fonctionnalités et utilisations avancées.
- La piste expert : Vous Vous avez également des connaissances avancées, mais vous souhaitez vous plonger dans des éléments tels que Flexbox, CSS Grid, CSS Variables ou Sass. Cette piste est pour vous.
Bien sûr, ce cours offre la théorie et des exemples pratiques – nous allons construire un projet de cours réel complet tout au long du cours – mais il y a aussi plusieurs devoirs, questionnaires et défis pour vous permettre de mettre en pratique les concepts individuels enseignés tout au long du cours.
Parlons du projet de cours – nous Je construirai le frontend (pas de backend) d’une société d’hébergement Web fictive. Nous aurons un écran de démarrage qui a différentes sections, nous avons un design réactif avec un tiroir latéral animé, nous avons des modaux et des formulaires et en général nous avons beaucoup d’animations CSS , des styles de police et plus , les combinateurs et la configuration des règles de style en général
- Propriétés, valeurs et décalarations
- Fonctionnement de la spécificité et de l’héritage  ; et pourquoi il s’appelle “Cascading” Style Sheets
- Concepts théoriques importants comme le “Box Model”
- Comment la position par défaut des éléments peut être modifiée
- Styles d’arrière-plans (par exemple, dégradés) et images
- Quelles unités et dimensions que vous utilisez généralement dans CSS (px, rem, % et plus)
- Comment JavaScript et CSS interagissent
- Responsive design et wha t “Mobile First” signifie
- Styliser les formulaires et les entrées de formulaire
- Travailler avec du texte, des polices et du texte styles
- Flexbox ! Comment ça marche et comment l’utiliser
- Utilisation de la grille CSS et en quoi elle diffère de Flexbox
- Transformer et animer des éléments HTML à l’aide de CSS
- Écrire du CSS évolutif avec des fonctionnalités telles que Variables CSS ou noms de classe recommandés
- Utilisation de Sass et de quoi il s’agit réellement
Ce cours est-il pour vous ?
C’est pour vous si …
- vous avez commencé par apprendre le web développement et vous voulez créer de plus beaux sites Web
- vous connaissez déjà CSS mais vous voulez approfondir
- vous êtes en utilisant CSS par essais et erreurs et que vous souhaitez changer cela (vous devriez !)
Vous pourriez revenir plus tard si …
- vous êtes un vrai pro du CSS et d vous connaissez par cœur les brouillons du groupe de travail CSS
- vous êtes un développeur backend uniquement (Node, PHP, NO HTML ou JavaScript frontend)
- vous êtes un nouveau venu dans le développement Web et vous ne connaissez pas les bases du HTML
Si cela vous semble bien à vous, nous serions plus qu’heureux de vous accueillir dans ce cours !
Getting Started
Let me introduce you to this course and to what you'll learn inside of it.
Let's start with the most important question first: What is CSS and why do we need it on our websites?
CSS constantly evolves so let me give you a quick overview of the past and the current development of CSS!
You now know what CSS is but what does the course actually offer you? This lecture will answer that question.
As noted in the course outline, this course offers multiple tracks. Here's how you reach your favorite one.
You know what this courses offers, but what do you need to succeed in this course? Let's have a look at the prerequisites.
There's more than one way of taking a course. Let's find out how you can get the most out of this course in this lecture.
Which tools are we using throughout this course? Time to have a quick look at our code editor and the recommended browser.
Find out where you can get the course source code.
Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.
Diving Into the Basics of CSS
Let me introduce you to this module and to what you'll learn inside of it.
This is a hands-on course, so we will learn CSS in practice. Time to take a closer look at the starting setup for our course project!
We have an index.html file, but how can we add CSS now? Let me show you inline styles and how these allow us to change the look of our website!
We learned that inline styles are probably not the best way to add CSS code. So let's have a look at two other ways to achieve this and also explain which approach we will follow throughout the course.
We added CSS and applied some basic styling, but so far the same style is applied to all elements. Time to change that, so let's understand how we can select a specific element and add styles to it. Additionally, we'll import fonts using Google Fonts.
We learned how to select elements, but we probably need more selectors to style our website individually. Thankfully, we do have more selectors available in CSS, so let's understand classes, IDs and attribute selectors!
Our website keeps growing, but why are some styles applied and why is this not true for others? Turns out that there are two important concepts that are mainly responsible for that: The "Cascading" nature of CSS and Specificity. But what is the idea behind these?
We understood Specificity so the general styling logic is clear now. Unfortunately not, there is one additional core concept we definitely have to understand: Inheritance. Time to add this to our project and to understand it in this video!
For the styling of a website it is very important to define the look of the different parts of the website individually, because we definitely do not want our website to have the same style all over. Combinators helps us to achieve that.
We added the descendant combinator, but there are more combinators available in CSS. Time to dive into these in this theory lecture.
We learned a lot about the CSS core concepts in this module. Let me quickly summarize what we learned so far about selectors, properties and values!
Do you know how to work with all these selectors and combinators?
Let me wrap this module up and summarize what you learned thus far.
Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.
Diving Deeper into CSS
Let me introduce you to this module and to what you'll learn inside of it.
One of the most important concepts to understand is the way CSS interacts with elements in HTML. This concept is called the box model, so let's see if we can find such a box in our project!
Content, padding, border, margin - we found and understood these parts of the box model. Let's now take a closer look at it and also understand the box model concept in connection with parent and child elements.
Why could we observe overlapping margins between two elements? Let's understand why margin collapsing causes this behaviour and how we can remove the default margin from the <body>.
Margins of elements can behave unexpectedly - here's a deep dive on the phenomena.
Theory time! Throughout this course we already applied a lot of properties. Turns out that we can combine multiple properties in a single one by using a shorthand. Let's understand these shorthands in this video!
Shorthands seem to make writing CSS code a lot easier. Let's try it out and apply some in practice in our project!
Styling our website also requires to define the size of our elements. In this video, we will apply the "height" and "width" properties and see how we can use these to change the box size according to our needs.
We changed the "height" and the "width", but what was actually changed? Let's dive into the "box-sizing" property and also learn, how we can use this property to change the default behaviour of the "height" and "width" properties.
Let's apply what we learned so far and dive deeper into our project. In this video, it's time to work on the header!
We have two types of elements in HTML - block-level and inline. But is there a way to change the default behaviour of these elements? Turns out it is, so let's find out how we can achieve this and why this might be helpful in certain situations.
There's more than one way of hiding elements on the page. Let's explore the differences between display: none; and visibility: hidden.
It's not really a CSS topic (though it's related to it) but it's super important to know. The difference between block-level and inline elements.
After we understood the "display" property it's now time to style our navigation bar. For that we'll also use the advantages of the "inline-block" value of this property.
"inline-block" is a really helpful value, but there is one specific behaviour which can cause problems in practice. Let me show you which problem this is and how you can easily solve it.
Let's continue the work in our project and improve the styling of our navigation. For that, we will style links with "text-decoration" and align elements with "vertical-align".
Styling links is very important as every website contain such. The default styling is not the most beautiful one though, so let's find out how we can improve that.
Pseudo classes are a big help to improve the user experience on our website. Why don't we take the chance and apply some pseudo-classes in our project?
Time to dive into the theory. We already applied pseudo classes, but which additional values are available and what is the difference between a pseudo class and a pseudo-element? Let's find the answers in this video!
Sometimes the same rules should be applied to different selectors. Turns out we can avoid repeating these rules again and again by grouping them. Let me show you how this works.
We constantly improve the look of our website, so let's use "font-weight" to change the default font style of selected elements. In addition to that, it's also time to add some borders.
Until now we only have list items in our navigation bar. Wouldn't it be great to have a special CTA-button in a different style? I think it would, so let's add one in this video.
The red block level element in the background is ok, but I think a real background image definitely would improve the user experience. Let's learn how we can easily add such an image in this video!
Puh, we worked with a lot of properties so far. Of course we don't have to remember every single property, but you will probably use some properties a lot. This short list will help you remembering these.
Let me wrap this module up and summarize what you learned thus far.
Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.
More on Selectors & CSS Features
Let me introduce you to this module and what you'll learn in it.
There are a couple of things we can do with CSS classes and selectors in general.
Besides class selectors, we can use ID selectors, tag selectors etc. But which one should you use?
In very, very, very rare cases, you might need to force a certain declaration to overwrite the others, even though it normally wouldn't. Here comes !important.
Thus far, we always set our rules up to select certain elements. You can also set up rules that DON'T select something.
Not all CSS features are supported by all browsers. This lecture explains how you find out what is supported and what's not.
Let me wrap this module up and summarize what we learned thus far.
We got the very basics of CSS covered. Time to round it up and check if you got them down.
Attached to this lecture, you find the module resources. In the lecture, you find some helpful links.
Practicing the Basics
Let me introduce you to this module and to what you'll learn inside of it.
Our page gets more and more beautiful, but there is still a lot of content and styling missing. So let's add our different hosting plans and some basic styling in this video!
We want our users to focus onto the recommended plan. Let's use our CSS knowledge to highlight this plan!
The badge on the recommended plan doesn't stand out so far. Time to add some styling to it, to make clear that this is the plan to choose!
All our plans include lists which present the features of the corresponding plan. The bullet points are quite ugly though, so let's remove these and improve the look of our lists!
Let's continue with the title and the price presented on our plans. So far these look pretty unspectacular, time to change that!
The action button at the bottom of each box will redirect the user to the plan purchasing page. We want to make sure that our users click these buttons, so some nice button style might be a good idea.
We styled our buttons, but if we hover over these we still see an additional blue outline. This is automatically added to the element and definitely something we don't want to be displayed. Let's learn how we can remove it in this video.
Time to add another (unstyled) section, which presents the core advantages of our hosting service to the user!
Let's start styling the new section! A good starting point probably is the headline and the background!
Time to style the list which includes our core website features. As these are presented as list items, we can apply our previous knowledge to change the list style. Additionally, we should align the features.
We reached the end of our starting page - time to add a footer. Let's learn how we can easily add one in this video!
We finished (at least partially) our starting page. So let's think about what we achieved so far and how we can continue. Because one page probably is not enough...
Time to add more content, this time for the packages page. We know how this works, so let's add the HTML code and apply some basic styling to get started.
Now it's your turn! You learned a lot so far, so let's take the chance and practice what we learned. Style the page on your own and try to achieve the result shown in this video!
How did I solve it? Let me show you my solution in this video and let's start with the styling of our links.
The links look fine, but the different plans also need individual styles. Time to add these in this video!
Until now the plans are displayed according to the document flow, but we would prefer to display one plan aligned to the right part of the page. How could we achieve this?
With "float" being applied, the free plan is positioned correctly, but the hover effect doesn't work correctly any more. Let me show you how to easily fix that in this video.
This was a lot of work, but we now finished two pages - great job! Let's fix some minor issues before we dive deeper into positioning in the next module to further improve the look of our website!
Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.
Positioning Elements with CSS
Let me introduce you to this module and to what you'll learn inside of it.
Before we dive deeper - why is positioning elements important when creating a website? Let's take a look at our website and identify potential areas of improvement for the position of our elements!
How does positioning work? Let's recap the default behaviour of elements and understand how the "position" property can be used to change the default position of elements.
We understood that we can apply different values to the "position" property. Let's take a closer look at the "fixed" value, understand its positioning context and the impact on the document flow it has on the element it is applied to.
We already have a navigation bar on our website, but as soon as we scroll down the bar disappears. Let's understand how we can stick the navigation bar to the viewport with the "fixed" value.
The navigation bar works, but we also need a background image for our Packages page. Turns out that the "fixed" value can also be very helpful is this situation, so let's find our more.
We added the background image but the remaining elements are hidden below it. Why isn't there a property that allows us to change the element order along the z-axis? Thankfully the "z-index" does exactly that, so time to understand and apply it!
The "Plus" plan is the #1 choice for our customers and our recommendation. Why don't we add a badge to this package which indicates exactly what? Let me show you how the "absolute" and "relative" values work together and make the positioning of the badge a breeze!
We added the badge but the positioning is not perfect yet and we definitely need to add more style to it. So let's continue!
The "relative" value was very helpful to position the badge, but did we really understand how it works? Let's dive deeper and find out more about its positioning context and its impact on the positioning context on the element it is applied to.
We learned a lot about the position property in this module so far. Let's now practice this knowledge in this quiz before we continue!
With "relative" we can move our element without any limitations - even outside of its parent. In case this is our intention that's ok, but what if we want to make the element invisible once it leaves the parent element? Then we need "overflow"...
Time to have a look at "sticky" positioning, combining the advantages of "fixed" and "relative". How it works? Let's have a look in an example project.
The "z-index" allows us to define the element position along the z-axis. But we should not be able to position children of our parent above our parent's neighbours. With the Stacking Context we can easily control that.
Let me wrap this module up and summarize what you learned thus far.
Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.
Understanding Background Images & Images
You already knew the CSS basics before and just wanted to enhance this knowledge? Then this is your starting point for this course, so let me give you a quick overview of what we achieved up to this point in the beginner's track!
Let me introduce you to this module and to what you'll learn inside of it.
When working with backgrounds, we often want to change the size of background images. Learn more about the helpful background-size property.
Changing the size of a background-image is nice but positioning it would also be awesome, wouldn't it? Let's dive into that topic in this module.
Now that we had a closer look at some background properties, let's explorer a shorter version of defining them.
We got more background properties - let's explore them all!
With all background properties explored, it's now time to learn the final form of the background shorthand property.
We're not limited to styling background images - normal images can be styled, too.
Time to continue working on the content of our web page. In this lecture, we'll add a brand new page to it: The customers page.
With our page growing, let's now continue working on the image layout.
Enough about images! We can also create gradients in CSS. Let's dive into linear gradients in this lecture.
Linear gradients aren't everything - time to explore radial ones.
Did you know that you could stack background images in CSS? Let's take advantage of that.
Gradients, images - so many ways to adjust the visuals of our page. Let's add one additional feature: Filters!
Thus far, we worked with bitmap images. We can also use and style (!) SVGs. Time for a first introduction.
Let me wrap this module up and summarize what you learned thus far.
Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.
Sizes & Units
Let me introduce you to this module and to what you'll learn inside of it.
Our website doesn't look bad and thus far we only used pixels ("px") and percentages ("%") to define the width, padding, font-size, etc. What's wrong with that approach? Let me show you why we might want to improve that...
Which additional units do we have and are there any core properties these can be applied to? Let's have a look in this lecture.
So we have a lot more units to apply, but can we categorize these to get a better overview? Yes we can so time to have a look at the categories in this video!
Ok, we applied the "%" unit in our project but apparently we didn't fully understand it. And why is the "position" property important again? A lot of questions, so let's find answers - starting with the "fixed" value!
The "fixed" value and the viewport, we understood that. But what about "absolute", what is the containing block and how does our element behave when we apply "position: absolute"?
Two more values left to fully understand the "%" unit. Let's dive into "relative" and "static" and see how these affect the containing block.
"%" are clear now, but why doesn't "height: 100%" work as intended? Turns out that we need a workaround to be able to inherit the height from our parent element in certain situations. Let's have a look!
Do we have to define a specific font size in our root element (the HTML element)? Let me explain which options we have and which approach we will follow throughout this course.
Our website is not responsive yet, we'll have an entire module to understand and add responsive design. But having a first look at the "min" & "max" properties for "width" and "height" is definitely a good idea to complete our understanding of the "%" unit.
Time to introduce new units - "rem" & "em". These always refer to the font-size and therefore allow us to make our styling more dynamic depending on the font-size chosen by our visitors. Let me show you how this works.
"rem" and "em" depend on the font-size but their application is not limited to this single property. Let's see how we can add "rem" to other properties than "font-size" on our website.
You finished your challenge - so let's have a look at the other .css files and exchange "px" with "rem".
Time to introduce the last units - "vw" and "vh" allow us to easily define the size of our element based on the viewport. Let's understand how this works and what we can do with "vmin" and "vmax".
After adding viewport units,, scrollbars are displayed on Windows machines (on Mac this is not an issue). Let me show you how to get rid of these in this article.
Puh, these were a lot of new units, but which one should we use in which situation? Let me help you by providing some guidance in this lecture!
Time for a quick tip: We already used the "auto" value throughout the course, but now it's time to take a closer look and understand why it helped us to center elements easily!
We are almost done, let's have a final look and see if we have to clean up our code and if all units are applied correctly.
Let me wrap this module up and summarize what you learned thus far.
Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.
Working with JavaScript & CSS
Let me introduce you to this module and to what you'll learn inside of it.
A modal element is a typically feature to add to a web page. It depends heavily on CSS but also on JavaScript. Learn more about how you can show and hide it via JavaScript in this module.
In the end, it's all about manipulating DOM element styles via JavaScript. Let's dive deeper into that in this lecture.
Often you need to change something on your page upon the occurrence of a certain event. Let's dive into that now.
We want to build a responsive website - for that we'll need a side menu. Time to add one - of course with help of JavaScript.
The side menu shouldn't always be visible so let's connect that hamburger menu.
What if you don't want to change the inline styles but the classes attached to an element? You can do that, too!
Time for some theory about the property syntax.
We got some cleanup to do - let's tackle that now.
Let me wrap this module up and summarize what you learned thus far.
Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.
Making our Website Responsive
Let me introduce you to this module and to what you'll learn inside of it.
Our website gets better and better, but we have one problem: We only worked on the styling for desktop devices. Many of our potential users might visit our site using mobile devices, so we should ensure that our site looks great for all users. To achieve this, we need to make our site responsive!
A pixel is not a pixel, sounds strange doesn't it? With the latest smartphones & tablets and their corresponding high pixel density, the traditional 96px = 1inch formula doesn't work anymore, so let's find out how we can solve this problem.
Making our website responsive requires both HTML and CSS: In HTML we need to use the "viewport" metatag, in CSS we will add media queries. Let me introduce both concepts to you in this lecture.
We understand the basic concept of the "viewport" metatag, but which additional options do we have to control the user actions? Let's find that out in this video!
We just learned how CSS works, so styling our website "Desktop First" was the right approach. With the basics set, we should change that as "Mobile First" is the modern way to style websites. Time to do that!
The mobile version of our background image on the starting page looks ok, but now we destroyed the desktop version. Time to understand the basic concepts of media queries and how these allow us to make our site responsive!
Media queries are powerful and awesome while applying them is really easy. However, there are some things that we need to know about media queries before we continue styling our website.
With the incredible amount of different devices available on the market, setting the right breaking points for our media queries is a big challenge. Let me show you one way how to find a good starting point and how to avoid creating unnecessary media queries!
Time to turn the design for our different plans on the starting page into a beautiful mobile style!
We have wonderful mobile plans, but the desktop version is not displayed as intended. Time to optimize that!
With the responsive web design basics being set, it's your turn! Make our features responsive and turn them into beautifully styled mobile and desktop versions. Let me also show you my solution in case you are not sure how to approach the problem.
So far our media queries were only based on one condition, but we can do more! Let's have a look at logical operators and understand how these allow us to combine multiple conditions in our media queries.
We learned a lot about responsive design, but our customers page has a lot of issues. Time to fix these to make our testimonials shine!
The packages page also needs some improvement as the look on wider screens is not the best. Time to add an additional media query to improve that!
Our navigation bar looks fine, but the calculation logic of our logo height is not perfect. Let's make our code leaner and clean up the navigation bar!
We almost did it, but to make our site totally responsive, we need to fix the position of our footer. At the moment it is positioned in the somewhere in the middle of the page, so let's see how we can position the footer at its intended position: At the bottom of each page.
Let me wrap this module up and summarize what you learned thus far.
Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.
Adding & Styling Forms
Let me introduce you to this module and to what you'll learn inside of it.
Time to add the last page of our website - the page which will actually hold the form we need.
Let's get all set regarding our newly added page now.
There's one feature we didn't have a closer look at yet: Advanced attribute selectors. Time to change that.
With the newly gained knowledge, let's dive into the form and start styling it.
Let's continue our work on the form.
Thus far, we focused on "normal" form inputs - let's now style a more fancy one: The checkbox element.
Styling form elements is only one part of styling forms. You also need to ensure that you provide good form validity feedback to your users. Time to dive into that.
What would a form be without a button? Not that useful, hence you should also know how to style such buttons.
We got a tiny error in our web page - let's fix it.
Let me wrap this module up and summarize what you learned thus far.
Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.
Working with Text and Fonts
Let me introduce you to this module and to what you'll learn inside of it.
Before we dive into fonts we have to understood the general concepts behind them. So let's have a look at generic families and font families in this lecture.
The browser is able to apply default settings in case we did not specify a font family in our code. Let's take a closer look at these settings.
We had a look at the browser settings, so let's now see how the browser uses the default font families in practice in our project website.
Using a specific font family is great as it improves the look of our website. But what if a specific font family is not available for one of our users? Let's have a look at the "font-family" syntax and learn how we can add a fallback for such cases.
The goal of our website is to attract as many users as possible - and the website should look equal for all these users. Therefore using a unique font which might not be available for all users can cause problems, so let's have a look at this issue.
Using fonts only locally available for (some) users is not the best way to add a font family. Web fonts are a great alternative, so let's learn how to add a web font at the example of google fonts.
On google fonts we saw that we do not only have to add the font family but also a specific font face. Time to take a closer look at that.
Time to have a look at the last option to add new font families to our website. Let's learn how we can use @font-face to add our own custom font to our website.
The font faces applied so far used the .ttf format. As there are multiple font formats available, we should dive deeper into these and learn which formats might be a good choice and which we might not necessarily need.
We added the font to our website, now it's time to dive into the properties we have to change the default style of this font. So what can we do with "font-size", "font-variant" and "font-stretch"?
There are more properties available for our font so let me introduce "letter-spacing" and "white-space" in this lecture!
Another really interesting property is "line-height". Let's apply this property to our project and see how it helps us to define the height of our content box!
We are almost done, two additional properties left. Let's understand how we can use "text-decoration" and "text-shadow" to make our texts shine!
These were a lot of properties and always typing each single property is certainly not a lot of fun. Thankfully, we have the "font" shorthand. As this is a special shorthand, it definitely makes sense to have a closer look in this lecture!
Fonts make our website beautiful - and slow. Not necessarily though but we should have a look at "font-display" and how we can use it to improve the loading behaviour of our customized fonts imported with @font-face!
Let me wrap this module up and summarize what you learned thus far.
Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.
Adding Flexbox to our Project
You already are an advanced CSS user and just joined this course at this stage? Let me quickly give you an overview of what we achieved so far!
Let me introduce you to this module and to what you'll learn inside of it.
We achieved a great and responsive styling for our website, but let's have a closer look and see if there aren't some areas to improve the code structure.
We want to avoid "inline-block" and make our code leaner, but why could Flexbox help us here? Let me introduce you to the general idea of Flexbox in this lecture!
Time to create our first Flex Container. Let's learn how this works and which different Flex Container types we can create in this video!
Creating a Flex Container automatically applied some assumptions regarding the way our elements behave. We should find out more about this default behaviour and also learn how we can change it according to our needs.
Main axis and cross axis - two very important concepts when working with Flexbox. Let's find out more about these and also learn how we can switch the main and cross axis by using "flex-direction".
The standard positioning of our Flex Items might not be the one required by us. Time to understand which properties we can use to change this default behaviour.
We were diving into almost all properties related to the Flex Container - let's have a look at the last one, "align-content", in this lecture.
We had a detailed look at the core concepts of Flexbox up to this point. So let's test you knowledge in this quiz, before we jump back to our course project!
After understanding the theory, it's time to apply our new knowledge to the project. The navigation bar generally works, but adding Flexbox to it would definitely be an improvement. Let's do it!
The desktop navigation bar is Flexbox "powered" now, but our mobile navigation bar should also be based on that newly learned approach. This is your chance, try to implement Flexbox for the mobile navigation bar and let's then have a look at my solution together!
We almost finished the shared elements for all pages on our website - time to work on the footer now!
Before we dive into your next assignment, there is one important thing about the Z-Index and Flexbox that I would like to share with you.
The starting page is also done, time to apply Flexbox one last time - the customers page also needs to be improved!
Working with the Flex Container is a lot of fun, but what if we want to change the behaviour of a single Flex Item? Let's find out how this can be achieved with the "order" property!
We learned about "align-content" and "align-items" for the Flex Container. In this lecture, it's time to find out how we can change the position of a single Flex Item inside a Flex Container by using "align-self".
We understood the default behaviour of our Flex Items, but what if we want to change the way the items behave if our viewport gets larger than the actual item width? Then it's time to learn more about "flex-grow"!
Having an impact on the growth behaviour of the Flex Items is possible, so the same thing should also be possible the other way round, shouldn't it? Turns out this is possible, so let me show you how this works in this lecture!
We know that we can define the width or the height of our elements, so what is "flex-basis" and which impact does it have on these two properties? Let's find an answer to these question in this lecture!
Let me wrap this module up and summarize what you learned thus far.
Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.
Using the CSS Grid
Let me introduce you to this module and to what you'll learn inside of it.
Let me start this module with the answer to the most important question: What is the CSS Grid?
The CSS Grid is a very powerful tool, so for diving into all of its features we will start with an example project. Let's have a look at this project and also see why Firefox might be a good choice when working with the CSS Grid.
Time to add a new value to our well known "display" property: "grid". This turns our container into a CSS Grid and also impacts the child elements. Let's investigate that.
With the first steps done it's time to dive deeper. In this lecture we will add "grid-template-columns" and "grid-template-rows" to overwrite the default settings and to define the column and row sizes on our own!
After creating the Grid each element uses one cell. What if we want to overwrite this default behaviour and define the position of the elements inside the Grid manually? Let me show you how this works in this lecture!
Time to have a closer look at the layout of our CSS Grid. Let's see how we can impact the space needed by our elements by using some special CSS functions!
Until now we only positioned our elements by defining the lines and column numbers. Let me show you alternative ways how to achieve this by using "span" and negative line numbers. Additionally, we'll find out if elements can overlap inside a CSS Grid.
Working with line numbers works fine, but being more specific about the lines we want to refer to would be helpful. Turns out that there is a solution for that - named lines!
We understand the basic layouting and positioning concepts of the CSS Grid. Time to have a look at some useful shorthands!
Right now all rows and columns sit directly next to each other. Let's have a look at "grid-column-gap", "grid-row-gap" and the "grid-gap" shorthand to change this!
Time to dive deeper! Let's understand how we can devide our Grid into separate areas and then define which part of this area specific elements should occupy.
We understood the concept of areas and we also worked with line names. In this lecture we will learn how to add column names and how to place elements inside our template area with the help of line names! We'll also learn how to create an automatically generated Grid area.
Enough of the theory for now, let's apply some of the concepts we learned so far to our project! Let's start by using the Grid layout for the navigation bar and the footer.
We successfully added the Grid but our image on the starting page is not displayed correctly anymore. Additionally the footer doesn't work as intended in the mobile mode. Let's work on these issues and also learn how to use "fit-content" in this lecture!
Time to go back to our "theory" project and have a closer look at positioning: Let's find out how we can position elements inside a Grid, because until now each element uses the full space available in its cell. Turns out that we can change this default behaviour!
We know how to position our Grid elements, but what if we want to change the position of our entire Grid inside our container? Let me show you how this works in this lecture!
We already learned how to change the position of all elements inside our Grid container. But is it also possible to change the position of a single element? Yes it is, so time to learn how this works!
Throughout the course we worked on the responsive design of our website. Our Grid should of course also become repsonsive, so let's find out how we can add media queries to our Grid.
Whenever applying "display: grid" to a parent element, the Grid will automatically create new rows for the direct child elements of this element. But how can we control and change this default behaviour? Time to find out how this works!
We saw that we can either define parts of the Grid manually or simply let the Grid generate the rows and columns automatically. Let's have a look at these approaches again and understand the difference between the explicit and the implicit Grid.
In this lecture, we will learn how we can dynamically generate columns. Because depending on the viewport size more or less space is available on our website so we should ensure that this space is always used in the best possible way!
Time to understand the "dense" value in our Grid and to see how this allows us to overwrite a specific default behaviour related to the DOM order!
Let's jump back to our course project and continue applying our new knowledge. So time to apply a Grid layout to our form! While doing that, we'll also learn how we can nest Grids.
Grid vs Flexbox, which one should we use in which situation? Let me give you some guidance in this video!
How should you continue? In this lecture you find some helpful resources to dive deeper into the CSS Grid!
Let me wrap this module up and summarize what you learned thus far.
Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.
Transforming Elements with CSS Transforms
Let me introduce you to this module and to what you'll learn in it.
Let's start with something exciting: Rotating elements via the rotate() method.
Rotating elements is fun but let's now also dive into moving elements via the translate() function.
We saw two of the four transform functions - time to also explore the remaining ones in this lecture.
As for many other properties, too, we got shorthands for transforms.
Enough of the 2D space, let's start diving into 3D animations!
3D is all about understanding where the camera is. Learn how to adjust the viewer perspective in this lecture.
So much rotation! Let's now dive into how you may move elements in a 3-dimensional space.
When we start rotating everything, we can end up in quite confusing situations. Time to bring some light into the dark.
When flipping (rotating) elements, we eventually see their backside. You can control what you see as you'll learn in this lecture.
Let me wrap this module up and summarize what we learned thus far.
Attached to this lecture, you'll find the module source code. Inside the lecture, you find use links.
Transitions & Animations in CSS
Let me introduce you to this module and to what you'll learn in it.
We got two different tools when it comes to animating things in CSS. Let's start with CSS transitions and understand how these work.
I explained how the CSS transition property is used. Here's a deep dive in case you want to study it in even greater depth.
There are these strange "timing functions" as you learned. Let's now explore what exactly is up with these.
When adding CSS transitions, you can run into issues if you also use the display property to show and hide things. Learn more about that in this lecture.
Besides CSS transitions, we also got CSS animations. Time to dive into these.
I explained how the CSS animation property is used. Here's a deep dive in case you want to study it in even greater depth.
We added a basic animation, let's now have a look at multiple keyframes.
Time to add more animations to our webpage - let's add them to the customers page.
CSS animations also trigger useful events to which we can listen via JavaScript. Learn more about that in this lecture.
Let me wrap this module up and summarize what we learned thus far.
Attached to this lecture, you'll find the module source code. Inside the lecture, you find use links.
Writing Future-Proof CSS Code
Let me introduce you to this module and to what you'll learn in it.
Want to stay up-to-date with what's happening in CSS land? Dive into the working groups of the various CSS modules.
When writing CSS code, you often repeat certain values like colors or units. CSS variables can help you with that.
Browsers implement CSS features differently and at different speed. Vendor prefixes help you with that.
With the basics about vendor prefixes out of the way, let's explore which ones you should use.
Sometimes, you need a certain fallback in case a browser doesn't support a feature. @supports helps you with that.
If a browser doesn't support a certain feature, you can use a polyfill. Learn more about that in this lecture.
Your users use different browsers and each browser has its own defaults. Learn more about such defaults and how to start from a comparable basis in this lecture.
You can name CSS classes in which ever way you want. But that of course opens up a lot of possibilities. How should you name them?
You can also use CSS frameworks in your projects. Which kind of frameworks exist and when should you use them?
Let me wrap this module up and summarize what we learned thus far.
Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.
Introducing Sass (Syntactically Awesome Style Sheets)
Let me introduce you to this module and to what you'll learn inside of it.
So what is Sass? Let's dive into this question (and answer it) in this module.
Let's get started with using Sass. Step #1: Install it. That's exactly what we'll do in this lecture.
What can Sass do for us? Let's take a look!
One very cool feature of Sass is that we may easily combine selectors by nesting them. Time for a closer look.
We can not only nest selectors - we can do the same with properties. So how does that work then?
Sass variables are another very cool feature. Time to take a closer look.
Instead of using simple variables, you can also create more complex maps of data.
Sass also comes with many built-in functions which make your life as a web developer easier. Let's find out which these are.
Besides using built-in functions, you can also do arithmetics in Sass-driven stylesheets.
Writing code in one file only is not that much fun. With Sass, you got even more ways of splitting your code.
Let's learn how Sass can also help us when writing media queries.
Sass also comes with its own concept of inheritance as you lean in this lecture.
Another very cool feature of Sass are "Mixins". Now what's that?
When writing Sass rules, there's a helpful "utility" you definitely should know about.
Let me wrap this module up and summarize what you learned thus far.
Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.
Course Roundup
Amazing job, you made it through the course and learned a lot about CSS! Let me summarize this course and outline some possible next steps.
