Free
CourseLearn CSS: Box Model and Layout
Use the box model to fine tune display and positioning of HTML elements.
This course includes
This course includes
Skill level
BeginnerTime to complete
Average based on combined completion rates — individual pacing in lessons, projects, and quizzes may vary2 hoursProjects
2Prerequisites
None
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
Syllabus
3 lessons • 2 projects • 2 quizzesCertificate of completion available with Plus or Pro
Earn a certificate of completion and showcase your accomplishment on your resume or LinkedIn.
Projects in this course
- practice Project
The Box Model: Davie's Burgers
In 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. - practice Project
Broadway
In 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.
Meet the creator of the course
Jiwon Shin
Senior Curriculum Developer at CodecademyEarn a certificate of completion
Show your network you've done the work by earning a certificate of completion for each course or path you finish.- Show proofReceive a certificate that demonstrates you've completed a course or path.
- Build a collectionThe more courses and paths you complete, the more certificates you collect.
- Share with your networkEasily add certificates of completion to your LinkedIn profile to share your accomplishments.
Learn CSS: Box Model and Layout course ratings and reviews
393 ratings
- 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?
Related resources
- Article
The Box Model in DevTools
View and edit an HTML element's box using Chrome DevTools. - Article
CSS Glossary
Programming reference for CSS covering Comments, Properties, and Selectors - Article
CSS Visual Rules in Chrome Inspector
In this article, you'll learn how to use browser developer tools to analyze a web page's HTML and CSS, as well as learn techniques to help speed up your development workflow.
Related courses and paths
- Free course
Learn CSS
In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.Beginner Friendly6 hours - Skill path
Build a Website with HTML, CSS, and GitHub Pages
Learn the basics of web development to build your own website.Includes 9 CoursesWith CertificateBeginner Friendly14 hours - Free course
Learn CSS: Introduction
Learn how to use CSS (Cascading Style Sheets) to style and visually organize HTML pages.Beginner Friendly2 hours
Browse more topics
- Web development4,916,355 learners enrolled
- HTML & CSS2,340,477 learners enrolled
- Web design2,323,152 learners enrolled
- Code foundations7,343,189 learners enrolled
- Computer science5,798,816 learners enrolled
- Data science4,432,528 learners enrolled
- Python3,579,326 learners enrolled
- For business3,308,619 learners enrolled
- JavaScript2,841,104 learners enrolled
Unlock additional features with a paid plan
Practice Projects
Guided projects that help you solidify the skills and concepts you're learning.Assessments
Auto-graded quizzes and immediate feedback help you reinforce your skills as you learn.Certificate of Completion
Earn a document to prove you've completed a course or path that you can share with your network.