Yoga Studio Landing Page
Yoga Studio Landing Page
Create a simple landing page for a yoga studio using HTML and CSS.
Created: 11/06/2023 by Brian Jensen
Skill level: beginner
Topics used: HTML CSS
Estimated completion time: 1 Hour
Create a simple landing page for a yoga studio using HTML and CSS.
HTML Basics
Learn HTML (HyperText Markup Language), the language common to every website. HTML describes the basic structure and content of a web page.
CSS Basics
Learn the basics of CSS, one of the core technologies for designing and building websites and applications.
CSS Flexbox Layout
Flexbox is a set of CSS properties that give you a flexible way to lay out content.
Mobile-First CSS Layout
Practice using CSS layout techniques such as a CSS Reset with Normalize, a layout wrapper, a sticky footer, and centered content with a full-width header.
CSS Grid Layout
CSS Grid Layout provides a built-in, more efficient way of designing grid-based layouts in the browser.
-
0
To begin, click "Start Adventure" at the top of the page and then download your starter files.
-
1
Use CSS Flexbox or Grid to lay out the elements on the page.
-
2
Use semantic elements to structure the page, ensuring accessibility and SEO optimization.
-
3
Extra Challenge: Generate your own wave patterns with CSS instead of using the included background images. You can use a tool like https://getwaves.io/