Walking through the design mockup

Whether we are working for a digital agency or simply freelancing, in most cases, we will already have purchased a theme or designed one from scratch that has been built in pure HTML, CSS, and JavaScript. Having a theme already available to us makes our job as a frontend developer much easier in identifying what needs to be built. As we begin to review each page of our design, we will be taking notes about specific functionality that we will later revisit when creating our new theme. We will clearly point out such items as regions, page layouts, blocks of content, and how we would best implement CSS and JavaScript.

Homepage layout

If we haven't already done so, let's open up the homepage of our mockup, as shown in the following image, and navigate as any other user visiting our site would.

At first glance, our mockup seems to contain some very standard components, such as a header with a logo, menu, full page slider, and some social network icons. However,...