part 1: the design prototype
We take a look at the design in hand, the prototype and its markup. Before you can work with this design, preview in browser, check the responsive layouts and menu toggles. Have a look at the files for subfolders and additional files, such as images.
Then take a closer look at the markup to know how the menu toggle is set up, what the code structure is for the different page elements.
The following is a quick summary of the video for reference.
design preview
Before we begin, let’s take a closer look at the given design prototype. When you are working with your own design, you’ll of course know your code. In this case, you’ll have to check on how the design has been implemented before you can work on the theme.
The prototype only features few pages. Make yourself familiar with the presentation of content in terms of context as well as layout.
Check on all design aspects by previewing in the browser, look at the breakpoints – and then have a closer look at the code. Look at the structure of page elements for layout, the typesetting in place, which media queries are used and how the menu toggle is set up.
HTML/CSS code preview
The prototype folder includes HTML / CSS files as well as 2 images files, organised into folders. Each page of the site will use one HTML file which includes all code required to present the page in browser.
Next, have a look at the code structure and make yoursel familiar with the markup of the prototype in detail
