Background image with CSS flex | Beginner tutorial

Publicado em: 21 Junho 2021
no canal de: Red Eye Media

4,240

How to create a responsive background-image and title with CSS flex box and start to master its fundamentals.

This is something I was struggling with in the beginning. And you encounter it more often than you would think. It's a handy trick to have in your toolbox and whip out when needed.
Making basically any kind of page meant for the internet - OK, here we go again.

CSS flex is a super useful part of CSS to position the parts of your page. It might sting for a second when touching it for the first time, but it's well worth understanding it for sure.

This is the CSS that will get you a long way for not that much effort.
Learning how to position things is essential styling knowledge and you'll encounter it sooner or later in your front-end work, I guarantee it.

Note that this is a React project, so to run it you need to open a terminal pointing to your projects directory and type:
npm run start

This will start the development server on port 3000 and it usually opens automatically.

Complete code on Github:
https://github.com/Polkagris/css_flex...

How to get the code without using the terminal:
1. Go to the Github link
2. Click on the green Code-button
3. Click Download ZIP
4. Extract and open the folder in your proffered code editor (I'm using visual studio code)
5. To see the game in action, just open the index.html file in you browser

Code editor download link:
https://code.visualstudio.com/

Timecodes
0:00 - Intro
0:48 - Start of coding
1:19 - Styling
1:40 - Attaching the background-image
2:48 - Style title text
4:30 - Make it responsive
5:44 - Code complete

Twitter: / redeyemedia3
RedEyeMedia website: https://redeyemedia.io/

Nesta página do site você pode assistir ao vídeo on-line Background image with CSS flex | Beginner tutorial duração hora minuto segundo em boa qualidade , que foi baixado pelo usuário Red Eye Media 21 Junho 2021, compartilhe o link com seus amigos e conhecidos, no youtube este vídeo já foi visto 4,240 vezes e gostou 29 espectadores. Boa visualização!