Search⌘ K
AI Features
Home
Courses
The Complete Advanced Guide to CSS

Beginning the Project

Explore how to start a practical CSS project by creating and centering a phone container using flexbox. Understand applying styles such as border-radius, background colors, and text formatting. This lesson helps you build a structured interface with minimal markup and introduces fundamental CSS properties for effective design.

We'll cover the following...

Getting Started

The project begins with the modest markup below:

HTML
<html>
 <head>
   <title> Teach me positioning </title> 
 </head>
 <body>
   <section class="phone-body">
   </section>
 </body>
</html>

As you may have guessed, .phone-body refers to the outer phone container.

I’ll go ahead and give it a width and height:


	width: 350px;
  height: 700px;

Well, that’s good but not good enough to get anyone excited.

Let’s display something on the screen.

Not bad.

Be sure to check the code tabs above.

The html is the same as the former. No additions made here.

On the CSS side of things though, there’s a bit in there. Look closely, and you’ll realize all of that is familiar terrrain.

NAME_
CSS
:root {
  --secondary-bg: rgba(0,0,0,0.9);
}
body {
  min-height: 100vh;
  margin: 0;
  font-family: serif;
  background: var(--secondary-bg);
}
.phone-body {
  width: 350px;
  height: 700px;
  
  border-radius: 30px;
  border: 2px solid red;
}

First off there’s a color variable on line 2. Gosh, I love variables.

The variable is used to give the body a dark background, as seen on line 9. From previous lessons, you should know that ...