Learn CSS: Box Model and Layout
Use the box model to fine tune display and positioning of HTML elements.
Time to completeAverage based on combined completion rates — individual pacing in lessons, projects, and quizzes may vary2 hours
Certificate of completionIncluded with paid plans
About this course
Continue your CSS learning journey with Learn CSS: Box Model and Layout. Make websites look exactly like you want them by gaining an understanding of how to fine-tune the display and positioning of HTML elements.
Skills you'll gain
Explain the box model
Position HTML elements
Change the layout of elements
Projects in this course
The Box Model: Davie's BurgersIn this project, we're going to practice box manipulation so you can hone your skills and feel confident taking them to the real world. Why? You'll be able to hone the skill of accurately setting up your box model properties and sizing each element on your webpage.
BroadwayIn this project, we're going to practice element positioning in CSS so you can hone your skills and feel confident taking them to the real world. Why? Applying the display and position properties on a certain element is something you'll be doing plenty of with CSS, so exploring and practicing it now will help you a lot.
Learn CSS: Box Model and Layout course ratings and reviews
- 5 stars
- 4 stars
- 3 stars
- 2 stars
- 1 star
- The progress I have made since starting to use codecademy is immense! I can study for short periods or long periods at my own convenience - mostly late in the evenings.ChrisCodecademy Learner @ USA
- I felt like I learned months in a week. I love how Codecademy uses learning by practice and gives great challenges to help the learner to understand a new concept and subject.RodrigoCodecademy Learner @ UK
- Brilliant learning experience. Very interactive. Literally a game changer if you're learning on your own.John-AndrewCodecademy Learner @ USA
Our learners work at
Join over 50 million learners and start Learn CSS: Box Model and Layout today!
Looking for something else?
The Box Model in DevToolsView and edit an HTML element's box using Chrome DevTools.
Getting Started With Hugging FaceAn introduction to one of the most popular new ML education and model-building resources.
The Machine Learning ProcessLearn the general structure of how to approach Machine Learning problems in a methodical way.
Related courses and paths
- Skill path
Build a Website with HTML, CSS, and GitHub PagesLearn the basics of web development to build your own website.Includes 9 CoursesWith Certificate16 hours
- Free course
Learn Testing for Web Development: Model TestingLearn how to create the model layer of a web application using Mongoose and TDD.2 hours
- Free course
How to Choose a Linear Regression ModelLearn about the differences between different regression models and how to decide which one to use.1 hour
Browse more topics
- Web Development6,887,772 learners enrolled
- HTML & CSS3,735,317 learners enrolled
- Web Design3,698,172 learners enrolled
- Code Foundations13,232,515 learners enrolled
- For Business9,761,571 learners enrolled
- Computer Science7,457,642 learners enrolled
- Data Science5,799,040 learners enrolled
- Python4,542,297 learners enrolled
- Cloud Computing4,108,237 learners enrolled
Unlock additional features with a paid plan
Practice ProjectsGuided projects that help you solidify the skills and concepts you're learning.
AssessmentsAuto-graded quizzes and immediate feedback help you reinforce your skills as you learn.
Certificate of CompletionEarn a document to prove you've completed a course or path that you can share with your network.