Learning Web Design by Jennifer Niederst Robbins

Learning Web Design 

A BEGINNER’S GUIDE TO HTML, CSS, JAVASCRIPT, AND WEB GRAPHICS

Jennifer Niederst Robbins

---

My GitHub Files: https://github.com/Li-YangZhong/Learning_Web_Design_Book_by_Jennifer_Niederst_Robbins_home.git

---

The biggest web graphics story, however, is the emergence of SVG (Scalable Vector Graphics).

---

companion website: learningwebdesign.com.

It features materials for the exercises, downloadable articles, lists of links from the book, contact information, and more.

---

Here are a few of the most popular site building services as of this writing:

• WordPress (www.wordpress.com)

• Squarespace (squarespace.com)

• Wix (wix.com)

• SiteBuilder (sitebuilder.com)

• Weebly (weebly.com)

---

The approach of designing around the user’s needs is referred to as User-Centered Design (UCD)

---

A wireframe diagram shows the structure of a web page using only outlines for each content type and widget (FIGURE 1-1). The purpose of a wireframe diagram is to indicate how the screen real estate is divided and where functionality and content such as navigation, search boxes, form elements, and so on, are placed. Colors, fonts, and other visual identity elements are deliberately omitted so as not to distract from the structure of the page. These diagrams are usually annotated with instructions for how things should work so the development team knows what to build.

---

A site diagram indicates the structure of the site as a whole and how individual pages relate to one another.

---

One option for separating style from screen size is to use style tiles, a technique introduced by Samantha Warren (see Note). Style tiles include examples of color schemes, branding elements, UI treatments, text treatment, and mood (FIGURE 1-5). Once the details are decided upon, they can be implemented into working prototypes and the final site. For more on this technique, visit Samantha’s excellent site, styletil.es, where you can download a template.

---

Frontend Development

Frontend development includes the following web technologies:

• HyperText Markup Language (HTML)

• Cascading Style Sheets (CSS)

• JavaScript and DOM scripting, including AJAX and JavaScriptbased frameworks

---