Semantic HTML and BEMCSS Workshop

Maintaining clean and organised code is a vital part of being a developer. Today, we're going to be learning about two methodologies that can help you do this – semantic HTML and BEMCSS.

1. Pick a partner and pair up

2. Clone this repo to one of your laptops – you'll be using the other laptop for research

3. Open the repo in Atom

Semantic HTML

Have a look at the code in index.html together. We're going to be refactoring it to make it more semantic.

1. The code isn't very readable as it is – make sure that it's properly indented.

2. Make sure you both understand what semantic HTML is and why we use it. Take a look at this article to get you started on the right path.

3. Use what you've learned to cure index.html of its divitis.

BEMCSS

Our code might be looking good now, but the site looks a bit dull. Time to get our CSS on! We want to make sure our code stays organised, though, so we're going to be writing BEMCSS.

1. Go here and read through the documentation for BEM.

2. Write your CSS in style.css. Feel free to style the page how you like – just make sure you use BEMCSS (HINT: this will involve changing the IDs given to you in index.html!)