HTML & CSS Workshop
A two-part workshop for Traktor School with an example of building a mobile app. We’ll create the HTML skeleton for the app, style the page, take into account the peculiarities of the mobile interface, and keep accessibility in mind.
In Part 1, we’ll build the layout of the pizza ordering app and learn how to use the right HTML tags. We’ll understand what semantics is and why it is important. Will learn how to choose the right elements of forms, choose between links and buttons. Will fulfill the requirements for basic accessibility and validity.
In the second part, we’ll style the page so that it looks like in the designs. We’ll convert the standard browser controls into custom ones, while retaining all the functionality provided by the browser. We’ll understand the difference between content and decorative images, learn how to optimize graphics and its loading. We’ll talk about style composition and the BEM methodology.
Video
The workshop is split into two parts. In the first part, we create HTML skeleton of the page considering the content structure and accessibility:
In the second part, we style the page and make it look like in the design mockup: