Gain insights into advanced CSS concepts, delve into responsive design, explore animations, learn practical projects, and discover powerful tools. Perfect for backend engineers and budding developers.

My Goal is to take you from a beginner (or intermediate) CSS user to becoming one of the best CSS devs you know! 


👉🏻 COURSE CONTENT?
1. A detailed look at CSS Fundamentals
2. Practical SVG for today
3. A Sane Guide to Responsive Design
4. Creating sleek Interfaces with CSS Animations and Transitions
5. Writing Maintainable CSS and tips for CSS at Scale
6. Learn the CSS Grid by Building ... wait for it! 😉
7. Get a Private slack Invite where you can ask me anything
8. Gain a Solid Understanding of CSS Fundamentals 
9. Build Practical Projects
10. Flexbox, Variables, Gradients, Backgrounds, Responsive Images, Handy pro tools, and many more! 

👉🏻 WHAT ARE THE REQUIREMENTS?
The course assumes no previous knowledge of CSS

👉🏻 WHAT'S THE TARGET AUDIENCE?
1. Backend Engineers looking to level up their frontend design skills 
2. Budding developers looking to create beautiful applications 
3. Generally, engineers who want to stand out by truly understanding the internals of CSS

Ready to upgrade?

The Complete Advanced Guide to CSS

From the last lesson, I have gone ahead to make a few cosmetic changes.



/* =========
 basic reset 
========== */
body {
  padding: 0;
  margin: 0;
}

/*=============================
  default grid set up -> mobile first
===============================*/
body {
      display: grid;
      min-height: 100vh;
      min-width: 100%;
      grid-template-rows: 1fr 90px;
      grid-template-columns: 1fr;
			grid-template-areas: "content"
                           "footer";
		}

.main {
  background-color: #2c3e50;
  grid-area: content;
}

.footer {
  background-color: #c0392b;
  grid-area: footer;
}

.aside {
  color: rgba(255,255,255,0.8);
  background-color: #7f8c8d;
  grid-area: sidebar;
}

/* hide the icons */
.aside i {
  display: none;
}

/*
  main
*/

 img {
  max-width: 100%;
}

.main__header {
  display: grid;
  color: rgba(255,255,255,0.9);
  grid-template-areas: "img"
                       "dtls"; 
  margin-bottom: 10px;
  padding: 20px;
}

.main__header > .img {
  grid-area: img;
}
.main__header > .details {
  grid-area: dtls;
} 

.main__body > div {
  padding: 8px;
  display:flex;
}

.main__body > div p{
  flex: 0 0 25%;
}

/*===============
  clean ups.
===============*/

.details {
	display: flex;
	flex-direction: column;
	font-weight: 300;
	color: #fff;
	padding-left: 50px;  
}

.details div:nth-child(1){
	margin-bottom: auto;
}

.details div:nth-child(2){
	margin-top: 0;
}

.details div:nth-child(2) i.fa{
	font-size: 0.9em;
	padding: 0 0.7em;
	font-weight: 300;
}

.details div:nth-child(1) p:first-child{
	font-size: 1.8em;
	margin: 0 0 10px;
}

.details div:nth-child(1) p:not(:first-child){
	font-size: 0.9em;
	margin: 2px 0;
}

/*=============================
  larger screens
===============================*/

@media only screen and (min-width:600px) {
  body {
    grid-template-columns: 40px 1fr;    
		grid-template-areas: "sidebar  content"
			                     "footer  footer";
  }
  
  .aside {
     display: grid;
     justify-items: center;
     align-items: center;
  }
  
  /* show the icons */
  .aside i {
    display: block;
  }
  
   .main__header {
    grid-template-columns: 250px 1fr;
    grid-template-areas: "img dtls"
  } 
}

/* ===============
Mobile: Phones
==================*/
@media screen and (max-width: 600px) {
  .sm--hide {
    display: none;
  } 

	.sm-text-right {
		text-align: right;
	}
  .main__header {
    justify-items: center;
  }
  .main__header > .details {
    text-align: center;
  }  
  .img > img {
    width: 150px
  }
  .main__body > div p{
    flex: 0 0 50%;
  }
}





<html>
 <head>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
 </head>
 <body>
    <div class="aside">
      <i class="fa fa-bars"></i>
      <i class="fa fa-home"></i>
      <i class="fa fa-search"></i>
      <i class="fa fa-volume-up"></i>
      <i class="fa fa-user"></i>
      <i class="fa fa-spotify"></i>
      <i class="fa fa-cog"></i>
      <i class="fa fa-soundcloud"></i>
  </div>

  <div class="main">
    <div class="main__header">
      <div class="img">
      <img src="http://bit.ly/2sc2NJd"/> 
      </div> 
        <section class="details"> 
              <div>
                <p>CattyBoard Top 100 Single Charts (11.06.36)</p>
                <p class="sm--hide">Unknown Artist</p>
                <p class="sm--hide">2016 . Charts . 100 songs</p>
              </div>
             <div> 
                <i class="fa fa-play"> &nbsp;Play all</i>
                <i class="fa fa-plus"> &nbsp;Add to</i>
                <i class="fa fa-ellipsis-h">&nbsp;&nbsp;More</i>
              </div>
        </section>
    </div>
    <div class="main__body">
        <div>
              <p>1. One Dance</p>
              <p class="sm--hide">Crake feat CatKid &amp; Cyla</p>
              <p class="sm-text-right">2:54</p>
              <p class="sm--hide"><span>CATTY CLOUD SYNC</span></p>
        </div>
        <div>
              <p>2. Panda</p>
              <p class="sm--hide">Cattee</p>
              <p class="sm-text-right">4:06</p>
              <p class="sm--hide"><span>CATTY CLOUD SYNC</span></p>
        </div>
        <div>
              <p>3. Can't Stop the Feeling!</p>
              <p class="sm--hide">Catin Cimberlake</p>
              <p class="sm-text-right">3:56</p>
              <p class="sm--hide"><span>CATTY CLOUD SYNC</span></p>
         </div>
         <div>
              <p>4. Work From Home</p>
              <p class="sm--hide">Cat Harmony feat Colla</p>
              <p class="sm-text-right">3:34</p>
              <p class="sm--hide"><span>CATTY CLOUD SYNC</span></p>
         </div>
    </div>
  </div>



  <div class="footer"></div>


 </body>
</html>

codemirror

# Final Clean-ups 
I have gone ahead to make even more cosmetic changes to the previous code output above. 

I have tried to model the final result we aimed for. 

Please click the tabs to see what has changed.

<br />

# Gosh! I don't understand what you did. 
With this particular project, I am trying to model a real world scenerio. Truth is, no matter how much I try to explain everything, when you get a job or have to work on projects, I won't be there with you!

You'll either have to refer to past lessons from this course or perhaps do a bit of research. 

Why not start that now? 

If there are changes I made you don't understand, check some of the previous lessons. If something isn't obvious from any of the previous lessons, be sure to ask around on Slack. I'm willing to help. Actually, I'll be very happy to help. 😀

That's a lot of talking up there.

Alright, get into the code. Figure this out. You can! 


Introduction

Getting started with CSS

Oh My Selectors!

CSS Fundamentals Everyone Should Know

Colors, colors, colors!

We all Need Units

Typography in CSS

The Box Model

Challenge: Hands-on Practice with Texts, Margin, Padding and Borders

Getting creative with Backgrounds

Project: Build a Movie Order Page

Making Sense of CSS Gradients

Hands-on Practice with Gradients

Project: Build a Sign Up Page for a Startup

{New} Teach Me Positioning Like I'm Five

{New} A Detailed Look at CSS Variables ( a.k.a Custom Properties )

{New} CSS Variables Real World Applications

{New} Long Live the CSS Grid

Final Words

Conclusion

Final Clean-ups