Markup Spikes

Accessibility

How do you write markup so that your page is accessible to as many users as possible?

Questions to consider

1. Who does semantic HTML benefit?
2. How does ARIA relate to HTML?
3. What’s the difference between accessible and inclusive?

Useful resources

• What a Year of Learning and Teaching Accessibility Taught Me
• Why, How, and When to Use Semantic HTML and ARIA

CSS architecture

How should you write CSS to ensure it’s easy to read, maintain and scale as a website grows?

Questions to consider

1. Why are CSS naming conventions useful?
2. When might specificity become a problem?
3. How can composition help us build UIs?

Useful resources

• CSS Guidelines
• BEM Methodology
• Composition - Every Layout

CSS layout

How does CSS decide where to put elements on the page?

Questions to consider

1. What is the box model?
2. How does the display property affect layout?
3. How does the position property affect layout?

Useful resources

• Boxes - Every Layout
• CSS Layout - MDN

Responsive design

How do you design and build a webpage that looks good on any device?

Questions to consider

1. What CSS units should we use for dimensions? What are absolute and relative units?
2. When should you use a media query? Are they only for screen size?
3. How can mobile-first CSS make responsive styling easier?

Useful resources

• Units - Every Layout
• The lengths of CSS
• How To Write Mobile-first CSS

Github projects (stretch)

Questions to consider

1. How can we leverage Github projects to help us plan and track work?

Useful resources

These resources are helpful extra reading that may clarify or enhance concepts you’re learning in the main curriculum.

• Flex children examples

  An explanation of how flex-grow, flex-shrink and flex-basis work for elements inside a flexbox container.

• Quickstart for Projects