Web Design 101

Hypertext Markup Language is the standard markup language for creating semantic layouts for websites. HTML uses elements (i.e. tags) that allows designers to organize the content of a web page. Although there are dozens of elements that can be used, all elements are either semantic or not. Semantic elements clearly defines content for the browser and is used to provide structure for the overall layout for the content of a web page. Such elements always begin on a new line on a web page, extending the full-width of the horizontal space of its parent element (i.e. container).

Inline-level elements, on the other hand, reside within semantic elements, only takes up as much space as is required by its content and cannot start on a new line. Such elements are helpful in that they emphasize how content will be displayed, particularly when CSS is applied to them.

HTML5 no longer defines elements as block or inline and suggests that designers use content categories when marking up a web page. The resources presented below reference HTML elements (i.e. tags) as well as attributes that can be used to properly structure content while providing accessibility which makes websites more inclusive.

A Cascading Style Sheet is a document with instructions that are called statements, which defines the visual design of HTML elements. All statements begin with a selector and is followed by a set of curly braces; these target specific and/or groups of elements. Within the statement are property-value pairs, which declares a specific styling, hence its name: declaration.

A major tenet of writing CSS is to keep the syntax DRY: that is, do not repeat yourself. This can be accomplished by following design principles that conform to web standards such as outlining a grid layout for responsiveness; building an interactively-accessible form; or properly designating colors, fonts, images, icons and navigation links. Learn more about CSS, which is the standard programming language used to make websites pretty.

Online Resources

This curated list of resources offers useful documentaion, DIY guides and tools familiar to front-end web developers for the basic creation of a website.

Blogged Resources: HTML -- CSS -- Project Management