DIG 3171C Front End Design Review

In the head section, there is the [blank_start]title (displayed in the browser tab)[blank_end], the [blank_start]viewport[blank_end], the [blank_start]CSS link[blank_end], and the [blank_start]favicon link[blank_end]. Please note that favicons should be saved in the [blank_start]ico[blank_end] format. Furthermore, they will not display in [blank_start]Edge[blank_end] without a [blank_start]server request[blank_end] (in other words, they won't be visible in [blank_start]Edge[blank_end] until you [blank_start]upload your site to the server[blank_end]).

Fundamental to localized control of a website are [blank_start]classes[blank_end] and [blank_start]ids[blank_end]. Classes are deeply flexible. They can be used to apply formatting to [blank_start]groups of elements[blank_end] thanks to [blank_start]nesting[blank_end] (which is why we often use them with [blank_start]divs[blank_end]). Ids, on the other hand, are [blank_start]precision tools[blank_end]. An id is a [blank_start]unique identifier[blank_end] (hence the name), so they are used when one element needs [blank_start]a little extra attention[blank_end], but you don't want the rest of your page to be affected by the [blank_start]CSS[blank_end].

As [blank_start]content elements[blank_end], images often represent the [blank_start]trouble makers[blank_end]. Simply put, they are not as easy to [blank_start]style[blank_end] as other elements. However, they marked a significant improvement for the [blank_start]early web[blank_end] and are a hallmark of the [blank_start]modern internet[blank_end]. They are efficient information delivery systems that represent concepts otherwise incomprehensible. With regards to [blank_start]source sets[blank_end], you'll likely need not worry about them unless you're using them for an image-intensive site.

Reviewing preprocessors creates a unique [blank_start]conceptual[blank_end] problem. We talked about them pretty late in the semester, but they are best when implemented [blank_start]from the start[blank_end] of a project. The reason for this disparity is where the learning curve lies. You have to understand CSS as a style language in order to get any mileage out of [blank_start]SASS[blank_end]. Thus, for this review, we begin with the [blank_start]SCSS[blank_end] files in order to show how they work with the CSS concepts. We've talked about modularity, and how the file architechture is laid out [blank_start]on the top[blank_end]. There is the index, our [blank_start]main html page[blank_end], main.css, the [blank_start]single output style[blank_end] file (which is quite large), main.scss (the file that is being processed into a [blank_start]CSS file[blank_end]), mixins.scss (which contains, unsurprisingly, [blank_start]mixins[blank_end]), and stylevars.scss (which holds the [blank_start]variables[blank_end] we are using).