Practice

Here you'll use a great coding resource called Code Pen. Below are some guided practice exercise to help get your comfortable with entering some HTML and CSS syntax. At a minimum try each of the given practice exercises, but I really encourage you to play around with each and try things out to see what happens. What happens if I don't add a forward slash? What happens if I add or delete whitespace? What happens if I add multiple paragraph or image tags? Experimenting really helps with understanding. And don't worry, you can't break it. If you get stuck or want to start over, just refresh the page.

Practice adding text using the paragraph HTML element. You can add whatever text you like.

See the Pen Practice Text by Andrew Probert (@aprobert) on CodePen.

See the Pen Practice Text-answer by Andrew Probert (@aprobert) on CodePen.

CLICK TO SHOW ANSWER

Practice changing the size of the text. You can make it any size you want.

See the Pen Practice Text-2 by Andrew Probert (@aprobert) on CodePen.

See the Pen Practice Text-2-answer by Andrew Probert (@aprobert) on CodePen.

CLICK TO SHOW ANSWER

Practice changing the color of the text. You can make it any color you want.

See the Pen Practice Text-3 by Andrew Probert (@aprobert) on CodePen.

See the Pen Practice Text-3-answer by Andrew Probert (@aprobert) on CodePen.

CLICK TO SHOW ANSWER

Practice changing the type of the text. Make the text sans-serif.

See the Pen Practice Text-4 by Andrew Probert (@aprobert) on CodePen.

See the Pen Practice Text-4-answer by Andrew Probert (@aprobert) on CodePen.

CLICK TO SHOW ANSWER

Practice changing the alignment of the text. Make the text aligned center or right.

See the Pen Practice Text-5 by Andrew Probert (@aprobert) on CodePen.

See the Pen Practice Text-5-answer by Andrew Probert (@aprobert) on CodePen.

CLICK TO SHOW ANSWER

Practice working with all the CSS properties for text.

See the Pen Practice Text-all by Andrew Probert (@aprobert) on CodePen.

See the Pen Practice Text-all-answer by Andrew Probert (@aprobert) on CodePen.

CLICK TO SHOW ANSWER

Practice adding an image. You can use any image.

See the Pen Practice Image-1 by Andrew Probert (@aprobert) on CodePen.

See the Pen Practice Image-1-answer by Andrew Probert (@aprobert) on CodePen.

CLICK TO SHOW ANSWER

Practice changing the size of your image. You can make it bigger or smaller.

See the Pen Practice Image-2 by Andrew Probert (@aprobert) on CodePen.

See the Pen Practice Image-2-answer by Andrew Probert (@aprobert) on CodePen.

CLICK TO SHOW ANSWER

Practice adding an div. You'll need to add HTML and CSS code in order to give your div a size and color so it is visible.

See the Pen Practice Div-1 by Andrew Probert (@aprobert) on CodePen.

See the Pen Practice Div-1-answer by Andrew Probert (@aprobert) on CodePen.

CLICK TO SHOW ANSWER

Practice adding a class name to p tags. There are 3 p tags. Add the class name of "blue" to the 2nd and 3rd p tag.

See the Pen Class and ID-1 by Andrew Probert (@aprobert) on CodePen.

See the Pen Class and ID-1-answer by Andrew Probert (@aprobert) on CodePen.

CLICK TO SHOW ANSWER