Skillcrush Class
ADVANCED CSS LAYOUTS
Forget floats—learn the layout techniques experts love & employers demand!
Does the thought of dealing with floats make you cringe? Do you have a decent grasp of CSS and want to know all the tips and tricks to making layouts that will land you the job? Are you unsure if your code is efficient enough, or feel like your layouts are so cookie cutter they come with chocolate chips? Then say CS-YES to learning Flexbox and CSS Grid.
CSS Grid has quickly risen through the ranks of essentials in every front end developer’s toolbox. CSS Grid takes the guesswork out of making layouts with intuitive, simple syntax. When you combine this with the versatility of Flexbox, you’ll unlock the superhero-level layout powers that will boost your portfolio—and your job prospects.
Course Outline
Prerequisites: A solid understanding of HTML & CSS is required
-
Advanced CSS Layouts
By the end of this class you’ll be able to:
- Build websites using mobile-first responsive design.
- Structure a webpage and its content with CSS Grid or Flexbox.
- Control the order, position, and alignment of website content using Flexbox.
- Build intricate, responsive website layouts using CSS Grid.
- Use CSS units that will make automatic resizing a snap.
- Apply CSS selectors and CSS functions to style and resize HTML elements.
- Combine Flexbox and CSS Grid to create dynamic, responsive sites.
You’ll Learn:
- Responsive site layouts
- Flexbox
- CSS Grid
- CSS units
- CSS functions
- Complex CSS Selectors
Projects for your portfolio:
Tools you will learn:
-
CodeSandbox
CodeSandbox is an online code editor and prototyping tool that makes creating and sharing web apps faster.
-
Firefox Developer Tools
Firefox Developer Tools is a set of web developer tools built into the Firefox web browser. You can use these tools to examine, edit, and debug HTML, CSS, JavaScript and CSS Grid layouts.
-
SLACK
You’ll connect with your classmates and instructors in Slack, a messaging and collaboration tool used by thousands of digital teams worldwide.
Your Advanced CSS Layouts Portfolio
By the end of this class, you’ll have learned everything you need to code up advanced responsive layouts using the following skills:
-
Responsive Site Layouts
Responsive Site Layouts
Website layouts that automatically resize to the user’s screen
-
Flexbox
Flexbox
A CSS layout system for arranging page elements within a column or row
-
CSS Grid
CSS Grid
A CSS layout system for arranging page elements into columns AND rows
-
CSS Functions
CSS Functions
Snippets of reusable code used to quickly set values for CSS styles
-
CSS Selectors
CSS Selectors
More complex CSS code snippets used to target specific page elements like combinators and child selectors.
-
CSS Units
CSS Units
A technique for defining a size system for elements
After completing the program, you will earn:
The Skillcrush Advanced CSS Layouts Class
Official Certificate Of Completion
How Do I Know if This Class is For Me?
This Class Is For You If:
- You have a solid grasp of CSS and want to learn more advanced techniques.
- You want to impress employers more complex website layouts in your portfolio
- You want to improve how you build layouts in your current job.
- You love solving puzzles.
This Class Is Not For You If:
- You want to build mobile apps for iOS or Android.
- You don’t have solid understanding of HTML & CSS (check out the Front End Developer + React JS Course instead!).
- Solving puzzles isn’t for you.
Your instructors are ALWAYS here to help.
-
Sharon Siegel
Full Stack Instructor
Sharon is a self-taught developer who started out with a Psychology degree and no tech skills to speak of. With the help of Skillcrush, she became a Full Stack Developer. After spending some time working as a full-time Developer, she returned to Skillcrush as an Instructor to teach HTML & CSS, Git, JavaScript, and Ruby and help students gain the skills they need to succeed in the world of tech.
-
Will King
Advanced CSS Subject Matter Expert
Will is a front end developer and the Development Team Lead here at Skillcrush. With a background in web design, he became a student at Skillcrush a few years ago to learn how to turn his designs into websites. From the Skillcrush platform to freelance projects, he has been turning amazing layouts into websites for years!
-
CHELSEA JENNINGS
DIRECTOR OF CURRICULUM
Chelsea oversees curriculum development at Skillcrush. She’s developed and taught numerous courses in coding, design, freelancing, writing, editing, publishing, communication, and other professional skills.
Have a question? Our team of expert instructors is here for you around the clock:
-
GET HELPFUL FEEDBACK ON YOUR WORK
-
VIDEO CHAT IN GROUP Q&A SESSIONS
-
SLACK COMMUNITY
-
SHOOT US A QUICK EMAIL
With 1-on-1 support from your instructors & Skillcrush community, you’ll accomplish more than you ever thought possible.
Frequently Asked Questions
-
Do I need any previous tech experience to succeed in this class?
Yes! Our Advanced CSS class is designed on the assumption that you’re familiar with HTML and CSS. If you’re not sure if your level of skill will be enough for the class, please send us an email at hello@skillcrush.com to find out more. You don’t need to be an HTML and CSS expert, but you should be familiar with HTML and HTML5 tags and know how to code and style a simple website. If you’re an absolute beginner, you can start with our Front End Developer Course. There’s absolutely NO prior knowledge needed for that course, and it’ll prepare you very well for this class!
-
I’m a student in Skillcrush’s Coding Responsive Websites class. Will I learn anything new about Flexbox in this class?
Yes! The Flexbox portion of the Advanced CSS Layouts class starts with a brief introduction and then dives into skills and techniques not covered in our Coding Responsive Websites class. You’ll also learn how to use Flexbox and CSS Grid together!
-
Does the Advanced CSS Layouts class build upon what I learned in Skillcrush’s HTML & CSS class?
Yes! Our HTML & CSS class is designed to give you solid foundational skills in HTML and CSS and an understanding of how they work together to create basic websites. The Advanced CSS Layouts class dives deeper into using HTML and CSS together — and introduces new tools like Flexbox and CSS Grid — so you gain the skills you need to create more sophisticated layouts. It’s a major leveling-up of your coding skills!
-
What is CSS Grid?
CSS Grid is a flexible layout system designed for controlling larger page layouts. It’s a much more flexible version of tables and floats and allows you to control the layout of items across multiple rows and columns. For example, you can use CSS Grid to align several stacked sections of a page next to a long sidebar. And yes — CSS Grid is perfect for responsive layouts!
-
What is Flexbox?
Flexbox is a CSS layout system designed for controlling layouts along a single direction, meaning along a row OR a column. With Flexbox, you can use CSS properties to control the position and alignment of items within the layout. For example, you can use Flexbox to position buttons alongside one another in a navigation bar.
Flexbox also reduces code complexity (say goodbye to floats!) and makes responsive layouts a breeze.
-
Does this class include mobile-first & responsive techniques?
Yes! This class will teach you modern layout techniques using CSS Grid and Flexbox. With this knowledge, you’ll be able to create mobile-first, responsive websites!
-
Are there any hidden costs associated with this class?
Nope! This class utilizes CodeSandbox and Firefox DevTools, both of which are free!
-
How do you determine how long it will take to complete this class?
Work, family, hobbies, life… we get it! Our time estimates are based on the assumption that you can spend about 1-2 hours a day on your classwork, including class projects. We feel confident that this is a reasonable amount of time to commit to learning new skills without having to turn your entire life upside down! At this pace, you should finish this class in 3-4 weeks.
-
How long will I have access to my class?
Once you’ve completed payment for the class, you’ll have access to it for LIFE.
-
What skills do you need to become a front end developer?
There are at least 10 must-have skills to become a front end developer, which you can read about in this blog post here. Proficient knowledge in HTML, CSS and JavaScript, with a good handle on Git and Github are probably the most important skills to have! Once you master these, you can add on complementary skills like JavaScript frameworks and CSS preprocessors.
Skillcrush Reviews
You don’t have to go back to school. You don’t need to be under 30, 40, or even 60. You don’t have to leave your job or take time off. You don’t even have to know a single thing about code—if you can download a file, you’re tech-savvy enough.
-
I used to work in retail and I just don’t see myself ever going back—my career outlook has completely changed! Now I am a Junior Developer at a small business that needs their site updated. I work directly with the Lead Developer to launch new products, debug issues, and alter styles for each viewport. The best part about my job is that I’m also being paid to learn!
JESSELYNN AMERLING
Junior Developer
-
My dream has literally come true and is really working. Now that I have tech skills, I work from home, earn a decent wage, spend time with my children, code (which I love), and continue to learn.
ANTONIA CRONIN
WEB DEVELOPER
-
4.8/5 RATING | 416 REVIEWS
Read Reviews -
4.74/5 RATING | 145 REVIEWS
Read Reviews
Sign up for your Advanced CSS Layouts class right now!
If you’re not completely satisfied within the first 14 days, we’ll give you a full refund.
More Questions? We’re Here For You.
-
CHAT WITH US!
Want to talk in real time with a career counselor? Look for the chat box at the bottom right corner of this page.
-
EMAIL US ANYTIME
We’re always happy to answer any questions. Write us at hello@skillcrush.com.