- You'll complete three challenges designed to expose you to different parts of HTMl and CSS
- Each challenge will have three slides:
- An intro slide explaining the challenge
- A sandbox slide where you can work on the challenge in an embedded HTML+CSS editor
- A solution slide if you're finished or want to look at a possible solution
- Have fun!
- Warning: left/right keys won't work unless you're clicking on the slide itself (rather than an editor or other component)
Step 1: Styling a Textarea
Your first task is to style a textarea component to look like the one on the right. Some suggestions:
- Google extensively to learn about CSS properties you're not sure about!
- You can use linear-gradient to get the striped background effect.
Step 2: Positioning Elements
Your next task is to create two textareas positioned like the ones on the right. Some suggestions:
- You can use flex to control the positions of the two textareas.
- You'll probably need a mix of relative and absolute positioning to get the HTML and CSS labels in the top right corners.