The goal is to prepare a semantically well formed HTML document. How do we go about doing this?
Organizing the Content
Document structure before HTML5 was organized according to the hierarchy of header tags, which went from the most general to more specific, following the way content is created.
How content is created? In a well written document, the topic is expressed by the title. It is then supported by subtopics. This structure is duplicated in HTML. The main header expresses the title, and sub headers express the subtopics.
This hierarchy of headers used to be the only structure an HTML document had. The title is an <h1> header that explains what document is about. Second level topics are given a <h2> header, and if there are third or forth level topics, they receive a <h3> or <h4>. Headers become more specific as the levels go down, to level <h6>, the most specific header available in HTML. There is no <h7>.
Here Come the Machines, or The Semantic Web
We can understand the content of a web page, because we are cognizant beings. The World Wide Web was originally built for human consumption, and although everything on it is machine-readable, this data is not machine-understandable. It is very hard to automate anything on the Web, and because of the volume of information the Web contains, it is not possible to manage it manually.
It has been a goal of the 3W.org and of Tim-Berners-Lee in particular to overcome this problem. To that end, Tim Berners-Lee coined the term semantic web, and has simplified it to something he calls linked data. You can see this idea embodied in a discussion of statistics by Swedish professor Hans Roseling.
The goal of the semantic web project is to make machines understand, as far as possible, the meaning of the content from the structure and meta information contained in the markup itself. This would allow automated agents, like bots that cruse the web, to link up information in a meaningful way.
Such agents would automatically locate related information on behalf of the user. That would allow us to cut through the noise, so to speak.
The semantic web has been gaining ground, and is currently (2015) expressed as
In addition to the classic “Web of documents” W3C is helping to build a technology stack to support a “Web of data,” the sort of data you find in databases. The ultimate goal of the Web of data is to enable computers to do more useful work and to develop systems that can support trusted interactions over the network. The term “Semantic Web” refers to W3C’s vision of the Web of linked data. Semantic Web technologies enable people to create data stores on the Web, build vocabularies, and write rules for handling data.
HTML vs XHTML
HTML is tolerant of human differences in coding and allows for errors. That made it difficult for machines to understand the semantic meaning of the content. W3.org introduced XHTML as a way to clean up the excesses of human error. It saw XHTML as the future of the web, and was fully prepared to release XHTML2 as the future of the web back in 2005-6. Good thing for us that didn’t happen.
Based on XML, or extensible machine language, it would have make the web much more friendly for machines to repurpose the information, but at a price. Humans would have been required to write code with machine like accuracy to create all their web pages. To enforce that accuracy, draconian error handling would not render pages if they were not XHTML2 compliant.
A group of browser makers (Apple, Mozilla Foundation and Opera) revolted and came together in 2004 to form the Web Hypertext Application Technology Working Group (WHATWG). They created HTML5 in response to XHTML2, making it forgiving to human error, even standardizing how errors are to be resolved, and introduced new tags that would allow for a more semantic web.
The messy world of human error won over the more perfect coding world of machines. XHTML 2.0 was canned by the W3.org and was allowed to expire in 2009, officially recognizing HTML5 as the way of the future. It should be noted that there is an XHTML5 version, for machines to read and write, but we need not be concerned with that.
You can view the differences between HTML and XHTML in this Table. To provide but one example, while XHTML requires all starting and ending tags, HTML is quite cavalier about it, so that both starting and ending tags are optional for the html, head and body tags. A well formed HTML5 document can start and end with the content itself. End tags are optional for li, dt, p, tr, td. I personally started to leave these out as the W3.org site itself leaves them out. I figure that they set the standard by which we are to measure our web pages. Roll over in your grave, XHTML2.
Tag Soup
The model for marking up a page is to let the CSS do all of the styling. This is most easily done by using the <div> tag for block elements and the <span> tag for inline elements, and then giving them id or class attributes: <div id="header">. <Div> stands for division, and is a generic element that, along with other block elements, can be thought of as boxes that divide the page. The <span> tag “spans” the content of inline elements. The content of inline elements are like characters, though they can be pictures, links or characters that make up the content of a paragraph.
Everything can be marked up with these <div> and <span> tags, and before HTML5, this is what a lot of people did, to the exclusion of using the other HTML tags.
The problem is that these are generic tags that do not impart any meaning onto the content. The over-use of these tags, called “classitis” and “divitis”, of which I have been guilty of in the past, contributed to a lack of semantically well formed web pages. Being semantically neutral, the markup could not be counted on to help machines understand the meaning of the content.
The solution is simple. Use the different HTMl tags to determine the content, and only use the <div> and <span> tags if necessary.
Imparting Semantic Meaning to the Markup.
The content can be structured so that it becomes more semantically meaningful, by using the header tags, specific tags, microformats and meta tags. HTML5 then comes along and introduces a number of new tags that help determine the document content’s. meaning .
Document Hierarchy and structure
As mentioned above, before HTML5, documents were structured using the header tags <h1> through <h6>. This does not always synch up with a designer’s gut reaction, which visualizes header 1 as bigger and bolder than header 2. This is how they are in the default browser style sheets. Designers then use these header tags according to their idea of the visual hierarchy.
This may or may not be correct, as the design’s visual hierarchy does not necessarily follow the semantic requirement that header tags reflect the structural meaning of the content. It’s possible, for example, to make a <h1> smaller and less bold than a <h3> if that is what the layout calls for.
Before HTML5, each document should have only one <h1> tag that expresses the title and purpose of the page. All of the subsequent content should be organized according to the <h2> through <h6> headers. With HTML5, each tag can have its own hierarchy of <h1> to <h6> headers, making it much easier to structure complicated documents.
Semantic Code Elements
Tags that describe the content are:
<cite>
Citation, used to cite a source of information.
<code>
Computer or Programming code.
<del>
Deleted word or phrase.
<dfn>
Definition.
<dl>
Definition List. Similar to UL and OL but uses DT (Definition term) and DD (definition description) to show terms and definitions.
<em>
Emphasis, displayed as italicized text.
<ins>
Insert, used to display text you have inserted due to an edit at a later date.
<kbd>
Keyboard instructions.
<ol>
Ordered List.
<samp>
Sample output, used to show sample output from programming code.
<ul>
Unordered List.
<var>
Variable, used to represent a variable in programming code.
<strong>
Strong, or bold, emphasis on a word or phrase.
MicroFormats
Microformats are agreed upon classes used to tag certain information. Instead of making up your own name for the class, which would be specific only to your document, a name has become universally recognizable by convention. This is quite handy for things like contact information or calendars, and can be seen in Apple’s Address Book and iCal, which uses standardized microformats.
In this example, the contact information is presented with generic markup:
<div><div>Joe Doe</div><div>The Example Company</div><div>604-555-1234</div><ahref="http://example.com/">http://example.com/</a></div>
With hCard microformat markup, that becomes:
<divclass="vcard"><divclass="fn">Joe Doe</div><divclass="org">The Example Company</div><divclass="tel">604-555-1234</div><aclass="url"href="http://example.com/">http://example.com/</a></div>
Structured data
To improve your website’s chances at being found in a search, Google recommends using structured data, which goes beyond the HTML elements used to display content to using microdata to give information about the content’s meaning. Google’s article on structured data. Microdata requires the use of a standardized vocabulary of which schema.org is the most used. Using such a vocabulary makes it possible to provide meaning for content that can be read by browsers, readings apps, search engines, and technologies like Apple’s watch. Implementing structured data is above what will be covered in the course, but you should be aware of structured data.
Accessible Rich Internet Applications (ARIA)
ARIA is a set of HTML attributes that define ways to make web content and web applications more accessible to people with disabilities. Where HTML5 provides some semantic meaning, javascript often does not, which makes for broken and incomplete transfer of information to people with disabilities.
W3.org provides for resources for how to address people with disabilities. They even provide stories of people with different disabilities so you can better understand the challenges they face. Ideally, web design address all possible cases. HTML 5 goes a long way to structure content in ways that make it accessibility for people with disabilities. As the websites produced in this course tend to be simple, well structured HTML5 documents will be the primary way disability compliance is addressed.
Meta Tags
Meta tags that described the content. They are used by bots to identify page content. This use to be especially important for search engine optimization but was abused. Google will still take them into account but they no longer have the weight they used to have.
Here is a list of some of these meta tags that can appear in the header of the web page. You can use these yourself. Just fill in _missing_fields and delete unwanted tags.
HTML5 added structural elements that provide additional semantic meaning, replacing the divs that would otherwise have marked up the page. Incorporate these elements into the structure of the document as part of its semantic structure. You can find out more about HTML5 elements here.
The HTML5 Tags help to structure your content/document
main is an element that can be used only once per page. It represents the main content of the body. The main element may not be a descendant of a article, aside, footer, header or nav element.
section represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure.
article represents an independent piece of content of a document, such as a blog entry or newspaper article.
aside represents a piece of content that is only slightly related to the rest of the page. For complimentary content to the main content (Taken from XHTML 2.0 specification)
header represents a group of introductory or navigational aids.
footer represents a footer for a section and can contain information about the author, copyright information, et cetera.
nav represents a section of the document intended for navigation.
picture represents a container for multiple img elements that gives browser hints as to which img to display depending on pixel density, viewport size, image format, etc..
figure represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document, and used to attach a caption to that content using figcaption
User Experience means making every visitor feel like your website was built just for them.
That there are User eXperience professionals demonstrates that the web has grown up just like print or broadcast. That it has grown up different from print is the nature of the hypertext links, interactivity and different form factors that the media takes. Web sites have become so complex and feature rich that they require the services of information architects and user experience designers. Websites designed in this class will not be as complex but the needs that drive the industry to create user experience designers is demanded of your work as well.
Fundamentals
In order for there to be a meaningful and valuable user experience, information must be useful, usable, desirable, findable, accessible, and credible.
Useful: Your content should be original and fulfill a need
Usable: Site must be easy to use
Desirable: Image, identity, brand, and other design elements are used to evoke emotion and appreciation
Findable: Content needs to be navigable and locatable onsite and offsite
Accessible: Content needs to be accessible to people with disabilities
Credible: Users must trust and believe what you tell them
Know The User
Users employ a number of shortcuts that have to be taken into account. They do not read the page linearly, and usually read only the top-left hand corner, if they read anything at all. They scan pages, usually spending little time on any one page, as if they are in a hurry. The user knows that they do not need to read everything, and they have gotten used to doing just that.
They can usually tell that they want and decide whether or not to continue in a fraction of a second, and that is all the time that you will have. If they continue, it means you aroused their interest.
When the user gets to a page, they often have something in mind and that is all they are interested in. This is not logical or rational but driven by a mix of desires called satisfice. Satisfice combines satisfy with suffice, and it means that a user will select the first reasonable match to what they are looking for that they find, not necessarily the best choice. Truth is, most users don’t really care to evaluate their options, and they will muddle through till they get what they are looking for.
How often do you read a manual before using a product? If you are like most people, rarely, and so it goes for web sites.
That means a web site has to anticipate the users’s habits if it wants to communicate effectively. You have to know the user. Most of you will be designing for peers, faculty or prospective employers, three very different users with different requirements. The challenge is to be clear about your audience and to target them in your writing and design.
Understand Experience
A website’s success hinges on how users perceive it. “Does this website give me value? Is it easy to use? Is it pleasant to use?” These are the central tenets of a user-centered design, and that’s the base line for beginning the design process.
Once you have targeted your user you have to design for them, and then test to see if this has actually been the case. Does the website provide value, is it easy and pleasant to use? This is the roll of user testing, and there are software packages that will help you facilitate this.
How does a web site provide good value? Easy to navigate will not be a problem with the web sites that you will create here. Will the web site provide that something extra to make it stand out? There are too many web sites out there to be just like the rest. You need to stand out!
What makes the user experience? Low barriers to getting what they are looking for, pleasant surprises and a good story. Ease of use, effective communication and novelty can be designed but a good story is integral to the developing and presenting of the content itself.
Good story telling gets the reader hooked on the protagonist. Once hooked, the author can tortures the hero until they break, at which point in time they somehow manage to overcome all obstacles for a cathartic resolution. A good writer will do that with each scene, emotionally grabbing the reader so that they cannot put the book down.
In the same way, a good design can turn a product into a coveted experience, one that satisfies something in the user by how it is presented, ideally anticipating the user’s actions and motivations, and can teach, motivate, persuade, inform or inspire the user, for that is how users form positive emotional experiences so important in successful communication. There is no joy if nothing resonates.
Create a Story
Create a website that has a story that is engaging and fun to engage, and not just coherent and informative.
Facts sit. Stories dance. About and bio pages come to life when they shape facts using the framework of a familiar, cherished story line. Appealing narratives include:
Underdog succeeds. Since the days of the Bible, we love to root for David against Goliath, the unknown who overtakes from behind, the unglamorous tortoise who beats the boastful hare.
Metamorphosis. A caterpillar turning into a butterfly fascinates us. Just beware of too many transformations in your story. The butterfly then turning into a bird and then a monkey becomes bewildering.
Discovery. How did you invent, find or formulate what you’re now known for?
Triumph. A goal reached, obstacles defeated, the quest completed.
Righting a wrong. As long as the injustice remedied was uncontroversial to your audience, this makes a stirring tale.
Unexpected joy. Describe a surprising fun result from one of your efforts.
Look at this Op Ed video from NYTimes, where a political consultant shows just how powerful a good story can be.
Understand Information
A simple web site will seem pretty straight forward but as the complexity ramps up, the information architecture becomes daunting, especially since websites are not static systems but are in a continual process of being reinvented, and the content is continually repurposed. This is a fact of life for sites like the New York Times.
To manage the daunting amount of complexity, a process emerged to help manage it all. The treasure map is a list of user experience deliverables: stories, proverbs, personas, scenarios, content inventories, analytics, user surveys, concept maps, system maps, process flows, wireframes, storyboards, concept designs, prototypes, narrative reports, presentations, plans, specifications, style guide and design patterns. Not all of these will be useful to you but there are a lot of techniques to help you create and test the user experience.
Navigating the content is full of junctures where decisions are made. To prototype such decisions logical flowcharts are created called user flows. It is impossible to design an information hierarchy with fully loaded with content, so designers strip the content away and use wireframes.
Wireframes are an integral part of developing the web site, and each of you will get your chance to build one with the midterm project. Removing what the content looks like allows the designer to focus on the information hierarchy, of what comes where, not just on the page but throughout the site. Wireframes isolate user interaction by including only those elements that are absolutely necessary, like site navigation, headers, and content locations, and then only by empty shapes that allow the site to be easily modified to the user requirements before locking in the code.
The goal of the wireframe is to structure the content so it’s understandable and easy to use. The CSS’s box model is ideally suited for developing an interactive wireframe but first develop your ideas on paper in quick thumbnails. There is no better, faster and comprehensive way to foster your creative impulse to do good work than by using paper and pencil, and to sketch out what’s on your mind. A few minutes brainstorming will be followed with hours of less creative implementation, if not tedious and often frustrating development, so make these first minutes count.
Go straight from the thumbnail to the wireframe. If you were doing a more official site, the procedure would require you figure out the relation between the content and the navigation first. An information architect would do the following:
Write down and organize the site objectives.
List the content requirements.
Determine the appropriate page hierarchy for the site, be it top down or bottoms up.
Design the navigation to access this hierarchy. Note that the navigation does not need to mirror the hierarchy, and can take the form of a matrix, be organic, or even linear.
Standardize the navigation architecture with the organization of the content, and you are ready to create a complete diagram of the information architecture.
Create a wireframe mockup from that diagram which will show the placement of the navigation elements in relation to the content of the site.
Test and Test Again
All of this development does not happen in a vacuum. Mockups and prototypes are not enough. You have to build what you prototype and test it with real users, and test it, and test it until you know that it actually works.
Everything has to be user tested. How else can you learn that the user experience actually works?
You can’t watch over someone’s shoulder to test user experience. Software packages like silverback can follow the user as they go through the website. This kind of feedback can be invaluable. You have the opportunity to use this software at the middle and end of the course, to test your portfolio and final projects.
Download a free version of Silverback 2.0 to test your website!
Strive for Simplicity
KIS!Keep It Simple is the mantra. For emphasis, add a second “S.” KISS!
The user is concerned with the content, not how it is presented. The presentation should be like the cuts in a movie: transparent, intuitive and emotionally effective. The design should not get in the way of the user experience, period. Keep it simple!
The Landing Page Critique
If your landing page does not capture your audience, they will not go further, and you will have lost your chance to communicate. The landing page is a marketing campaign, not just a design problem.
To help you along, Unbound has a number of videos to make you think twice about how to put a landing page together. Take the time and watch their constructive video critique. It should help inspire you to do the right thing when it comes to your own landing page.
Apple’s User Experience Guidelines
Apple’s done a great job implementing user experience guidelines from the very beginning. We can all be thankful that Steve Jobs oversaw the creation of the Macintosh and the Next Computers, both of which pushed intelligently designed user interfaces from the beginning. The new way forward at first appear a step backward, as a finger is not nearly as precise as a mouse but precision is not what user interaction is about, and immediacy has won out.
These are the devices including the MacOS, iOS, watchOS, and tvOS covered by Apple’sHuman Interface Guidelines. User experience revolves around streamlined interaction with content that people care about. Here are some points:
Focus on the Primary Task
Elevate the Content People Care About
Think From the Top of the screen Down
Give People a Logical Path to Follow
Make Usage Easy and Obvious
Strive to make your content instantly understandable to people,
Make the main point of your content immediately apparent.
Be consistent
Use User-Centric Terminology
Minimize the Effort Required for User Input
Enable Collaboration and Connectedness
Brand Appropriately
For the best user experience, you want to quietly remind users of your identity.
Avoid taking space away from the content people care about.
Entice and Inform with a Well-Written Description
Be sure to correct all spelling, grammatical, and punctuation errors.
Keep all-capital words to a minimum.
Be Succinct
Think like a newspaper editor, and strive to convey information in a condensed, headline style.
Give buttons short labels, or use well-understood symbols, so that people can tell what they do at a glance.
Use Design Elements Consistently
Consider Adding Physicality and Realism
Use appropriate animation to further enhance realism in your application.
Delight People with Stunning Graphics.
Consider replicating the look of high-quality or precious materials.
When appropriate, create high-resolution artwork.
Make Targets Fingertip-Size
Give tappable elements in your application a target area of about 44 x 44 points.
Use Subtle Animation to Communicate
Add animation cautiously
Make animation consistent
Restrain Your Information Hierarchy
Apple TV
User Design experience adapts to whatever experience the device delivers. Apple has a clear explanation of the User Experience on Apple TV. Watch it to see how to design for Apple TV. It is all about the living room experience and sitting at a distance across the room, unlike a desktop computer or an iPhone. Platform design goals (principles) are to be (1) connected, (2) clear and (3) immersive. Good explanation and examples throughout.
Apple TV button feedback
Apple Website
Apple’s website has been one of the goto sites for design but look at its early incarnations and you realize how much it’s changed.
Google User Experience Manifesto
As you can imagine, there is a lot more to this that you had probably thought about when you entered the class. That is how it goes. I want to leave you with Google’s Googlification, if that is a word. This is their user Experience manifesto.
Our aspirations
The Google User Experience team aims to create designs that are useful, fast, simple, engaging, innovative, universal, profitable, beautiful, trustworthy, and personable. Achieving a harmonious balance of these ten principles is a constant challenge. A product that gets the balance right is “Googley” – and will satisfy and delight people all over the world.
Ten principles that contribute to a Googley user experience
Focus on people, their lives, their work, their dreams. The Google User Experience team works to discover people‘s actual needs, including needs they can‘t always articulate. Armed with that information, Google can create products that solve real-world problems and spark the creativity of all kinds of people. Improving people‘s lives, not just easing step-by-step tasks, is our goal.
Above all, a well-designed Google product is useful in daily life. It doesn‘t try to impress users with its whizbang technology or visual style – though it might have both. It doesn‘t strong-arm people to use features they don‘t want – but it does provide a natural growth path for those who are interested. It doesn‘t intrude on people‘s lives – but it does open doors for users who want to explore the world‘s information, work more quickly and creatively, and share ideas with their friends or the world.
Every millisecond counts. Nothing is more valuable than people‘s time. Google pages load quickly, thanks to slim code and carefully selected image files. The most essential features and text are placed in the easiest-to-find locations. Unnecessary clicks, typing, steps, and other actions are eliminated. Google products ask for information only once and include smart defaults. Tasks are streamlined.
Speed is a boon to users. It is also a competitive advantage that Google doesn‘t sacrifice without good reason.
Simplicity is powerful. Simplicity fuels many elements of good design, including ease of use, speed, visual appeal, and accessibility. But simplicity starts with the design of a product‘s fundamental functions. Google doesn‘t set out to create feature-rich products; our best designs include only the features that people need to accomplish their goals. Ideally, even products that require large feature sets and complex visual designs appear to be simple as well as powerful.
Google teams think twice before sacrificing simplicity in pursuit of a less important feature. Our hope is to evolve products in new directions instead of just adding more features.
Engage beginners and attract experts. Designing for many people doesn‘t mean designing for the lowest common denominator. The best Google designs appear quite simple on the surface but include powerful features that are easily accessible to those users who want them. Our intent is to invite beginners with a great initial experience while also attracting power users whose excitement and expertise will draw others to the product.
A well-designed Google product lets new users jump in, offers help when necessary, and ensures that users can make simple and intuitive use of the product‘s most valuable features. Progressive disclosure of advanced features encourages people to expand their usage of the product. Whenever appropriate, Google offers smart features that entice people with complex online lives – for instance, people who share data across several devices and computers, work online and off, and crave storage space.
Dare to innovate. Design consistency builds a trusted foundation for Google products, makes users comfortable, and speeds their work. But it is the element of imagination that transforms designs from ho-hum to delightful.
Google encourages innovative, risk-taking designs whenever they serve the needs of users. Our teams encourage new ideas to come out and play. Instead of just matching the features of existing products, Google wants to change the game.
Design for the world. The World Wide Web has opened all the resources of the Internet to people everywhere. For example, many users are exploring Google products while strolling with a mobile device, not sitting at a desk with a personal computer. Our goal is to design products that are contextually relevant and available through the medium and methods that make sense to users. Google supports slower connections and older browsers when possible, and Google allows people to choose how they view information (screen size, font size) and how they enter information (smart query parsing). The User Experience team researches the fundamental differences in user experiences throughout the world and works to design the right products for each audience, device, and culture. Simple translation, or “graceful degradation” of a feature set, isn‘t sufficient to meet people‘s needs.
Google is also committed to improving the accessibility of its products. Our desire for simple and inclusive products, and Google‘s mission to make the world‘s information universally accessible, demand products that support assistive technologies and provide a useful and enjoyable experience for everyone, including those with physical and cognitive limitations.
Plan for today’s and tomorrow’s business. Those Google products that make money strive to do so in a way that is helpful to users. To reach that lofty goal, designers work with product teams to ensure that business considerations integrate seamlessly with the goals of users. Teams work to make sure ads are relevant, useful, and clearly identifiable as ads. Google also takes care to protect the interests of advertisers and others who depend on Google for their livelihood.
Google never tries to increase revenue from a product if it would mean reducing the number of Google users in the future. If a profitable design doesn‘t please users, it‘s time to go back to the drawing board. Not every product has to make money, and none should be bad for business.
Delight the eye without distracting the mind. If people looked at a Google product and said ”Wow, that‘s beautiful!” the User Experience team would cheer. A positive first impression makes users comfortable, assures them that the product is reliable and professional, and encourages people to make the product their own.
A minimalist aesthetic makes sense for most Google products because a clean, clutter-free design loads quickly and doesn‘t distract users from their goals. Visually appealing images, color, and fonts are balanced against the needs for speed, scannable text, and easy navigation. Still, ”simple elegance” is not the best fit for every product. Audience and cultural context matter. A Google product‘s visual design should please its users and improve usability for them.
Be worthy of people’s trust. Good design can go a long way to earn the trust of the people who use Google products. Establishing Google‘s reliability starts with the basics – for example, making sure the interface is efficient and professional, actions are easily reversed, ads are clearly identified, terminology is consistent, and users are never unhappily surprised. In addition, Google products open themselves to the world by including links to competitors and encouraging user contributions such as community maps or iGoogle gadgets.
A greater challenge is to make sure that Google demonstrates respect for users’ right to control their own data. Google is transparent about how it uses information and how that information is shared with others (if at all), so that users can make informed choices. Our products warn users about such dangers as insecure connections, actions that may make users vulnerable to spam, or the possibility that data shared outside Google may be stored elsewhere. The larger Google becomes, the more essential it is to live up to our “Don‘t be evil” motto.
Add a human touch. Google includes a wide range of personalities, and our designs have personality, too. Text and design elements are friendly, quirky, and smart – and not boring, close-minded, or arrogant. Google text talks directly to people and offers the same practical, informal assistance that anyone would offer to a neighbor who asked a question. And Google doesn‘t let fun or personality interfere with other elements of a design, especially when people‘s livelihood, or their ability to find vital information, is at stake.
Google doesn‘t know everything, and no design is perfect. Our products ask for feedback, and Google acts on that feedback. When practicing these design principles, the Google User Experience team seeks the best possible balance in the time available for each product. Then the cycle of iteration, innovation, and improvement continues.
want to learn more? Joel March has put together what 31 fundamentals. They are short and to the point, and an illustration of his XU Perspective in which everything rotates around XU.
Responsive design started with the May 25, 2010 article Responsive Web Design by Ethan Marcotte discussing media queries. Flexible layouts and responsive images are two additional components necessary for responsive web design to function effectively. Prior to the advent of responsive design, flexible layouts were achieved using em units.
EM as a basis for Web Design
An em is a unit of measurement in typography, equal to the currently specified point size. It’s believed to be derived from the width of the capital “M” in a specific typeface. Today, it represents the height of a font. This unit remains consistent across all fonts at a given point size. For instance, 1em in a 16-point typeface corresponds to 16 pixels, which is the default font size for browsers.
CSS allows one to measure everything in em units and some consider it a best practice to do so. (In case you are wondering, Bert Bos is the original author of CSS) This practice originated at a time when browsers only enlarged the fonts when zooming the page in or out, leaving all other elements the same size. To make the whole web page scale, the other elements had to be built with ems.
You define the reference size of the text on the page in the body tag by setting the size of the em. When zooming in or out at the time when browsers only enlarged fonts, all elements specified in ems would change proportionally with the font, preserving the layout.
Flexible Layouts using EM
To calculate a size in ems: divide the desired size by the reference em or rem — 960px / 16px = 60em.
Because percentages are often used to resize elements including fonts, it is possible to accidentally add a percentage on top of a percentage. When the font size of both a child and its parent are set at 80%, the child ends up being 80% of 80% of the em. This can lead to unexpected results. To avoid that, CSS3 introduced a rem, which stands for reference em. Unlike the em, the rem is not affected by inheritance and reflects the percentage of the font as specified in the body tag.
I don’t recommend using the em as a relative measurement for anything other than specifying font size. The need for using it to create responsive or scalable websites has vanished, and I don’t see any advantage to using the em, despite some people still advocating for its use.
Flexible Layouts using %
Flexible websites resize automatically with the size of the window or the device, which is known as the viewport. To design elements effectively, use relative measurement units such as percentages. This ensures that all elements with relative sizes change proportionally when the viewport changes.
Figuring out the percentage isn’t hard: target divided by context equals the result, where the target is the parent element and the context is the child element(s). This formula is used to calculate the correct percentages and is illustrated below in the creation of a fluid layout. The following example begins with a pixel-based layout, similar to a Photoshop comp, and transforms it into a percentage-based layout without using any absolute values.
The conventional standard width for web pages used to be 960px. That number can be evenly divided in many columns: by 2 (480), 3 (320), 4 (240), 5 (192), 6 (160), 8 (120), 10 (96), and 12 (80). This makes it easy to create columns and facilitate design.
A 960 pixel wrapper div can be divided up into a grid of 12 columns, each measuring 68 pixels across and separated by regular 12px-wide gutters. Taken together, those columns and gutters are a total width of 960 pixels.
If the main article were 6 grid columns and the side column were three grid columns with a column between them, that would fit in a container 900 pixel wide, leaving around a half column on either side. Break this into pixel width and the main column width is 566p pixels while the side column is 331 pixels wide.
To give the wrapper div a little padding on either side, instead of 960pixels, make it 90%. That is 90% of the viewport. That width is then used to define all other widths.
Figuring out the percentage of a 900px container in a 960px parent, plug it into the formula target ÷ context = result, dividing 900 by 960 gives us 0.9375. Since 100% is equal to 1, .9375 is equal to 93.75%. That makes the container that holds the two columns 93.75% of the page size.
The two columns fit inside the 900 pixel container. The width of the column is divided by 900. The large column is 62.8888889% and the small column is 36.7777778%. Don’t round the numbers off, as the browser uses the information to make the layout more accurate.
All of the padding and margins need to be translated to percentages using the formula target ÷ context = result, dividing the child into its parent to get the right percentage.
The layout will be problematic when the window becomes too small or too large. Use min-width and max-width to keep it from doing that. This is where media queries come in handy.
Flexible Images
The img element by convention is a child of a figure element. Set the image width to 100% img {width: 100%}. The set the figure width to a percentage of the parent element to control the size of the image. figure {width: 50%}
Background images can be sized in percentages, or they can be tiled to fill the background, or cropped.
Utopia (2024)
Responsive design has been updated using Utopia, a comprehensive support system that simplifies the creation of fluid responsive designs. Utopia employs CSS frameworks to seamlessly achieve fluid design for fonts and spacing across the range of smartphones and large screens. Unlike @media queries, Utopia eliminates the need for jumps or surprises, and it scales better than relying solely on viewport width. Additionally, Utopia offers tools for designing a layout grid. While these tools may seem complex at first, they’re worth checking out in a week or two as you begin coding and developing your website.
Introduction to CSS (Cascading Style Sheets). Cover the Mechanics of CSS: how CSS integrates with HTML. Demonstrate most-used properties. Activity: Highlight content using CSS selectors. Activity: Create selectors targeting markup. Make page look like Photoshop comp.
Responsive Design. The web is on display on iPhone and iPad screens to desktop computers. CSS media queries allow you to target each of these devices in one style sheet. Activity: Using media queries to target different devices.
1) Finish Content. 2) Turn Photoshop sketches into HTML / CSS wireframe. 3) Test CSS selectors by targeting each element and change its background color. Read chapters 7-10. Due: The following week.
Questions from Last Weeks Class or Homework?
Goals
The goals of this unit are to:
Learn how CSS works.
Apply CSS.
Understand responsive design with media queries.
Materials
Additional materials for this unit can be found by following these links:
Cheat Sheets that list all of the different HTML5 and CSS3 tags you can use. Print them out, use them. explore. You will be able to use these during the quiz:
HTML5 Cheat Sheet all of the different tags and the attributes they can have.
CSS3 Cheat Sheet all of the different properties and all possible values or value types they take.
Install these Plug-ins for Firefox and Chrome. They will facilitate your web development. Do not forget to activate the Show Developer menu in menu bar under the Advanced tab in Safari’s Preferences.
rule or ruleset: A selector + braces combo, or an at-rule.
declaration block: A sequence of declarations.
declaration: A property + colon + value combo.
property value: The entire value of a property.
component value: A single piece of a property value. Like the 5px in text-shadow: 0 0 5px blue;. Can also refer to things that are multiple terms, like the 1-4 terms that make up the background-size portion of the background shorthand.
term: The basic unit of author-facing CSS, like a single number (5), dimension (5px), string ("foo"), or function. Officially defined by the CSS 2.1 grammar (look for the ‘term’ production)
outer <anything>: Refers to the margin box.
inner <anything>: Refers to the content box.
start/end/before/after: Refers to the logical directions, which are dependent on the ‘direction’ and ‘writing-mode’ properties. start and end are in the “inline” axis, the axis that a line of text is laid out in (horizontal in English text). Perpendicular to that, before and after are in the “block” axis, the axis that block elements are laid out in (vertical in English text).
simple selector: A single atomic selector, like a type selector, an attr selector, a class selector, etc.
compound selector: One or more simple selectors without a combinator. div.example is compound, div > .example is not.
complex selector: One or more compound selectors chained with combinators.
combinator: The parts of selectors that express relationships. There are four currently – the space (descendant combinator), the greater-than bracket (child combinator), the plus sign (next sibling combinator), and the tilda (following sibling combinator).
sequence of <anything> selectors: One or more of the named type of selector chained with commas.
The following terms are terms taken from w3.org CSS definition list. Many of these terms are technical, and for the sake of precision, these definitions obfuscate rather than clearly explores what they are saying, for most of them are really very basic. I though that exposure to the technical definitions would be a good idea:
Style sheet
A set of statements that specify presentation of a document.
The validity of a style sheet depends on the level of CSS used for the style sheet. All valid CSS1 style sheets are valid CSS 2.1 style sheets but some changes from CSS1 mean that a few CSS1 style sheets will have slightly different semantics in CSS 2.1. Some features in CSS2 are not part of CSS 2.1, so not all CSS2 style sheets are valid CSS 2.1 style sheets.
A valid CSS 2.1 style sheet must be written according to the grammar of CSS 2.1. Furthermore, it must contain only at-rules, property names, and property values defined in this specification. An illegal (invalid) at-rule, property name, or property value is one that is not valid.
Source document
The document to which one or more style sheets apply. This is encoded in some language that represents the document as a tree of elements. Each element consists of a name that identifies the type of element, optionally a number of attributes, and a (possibly empty) content. For example, the source document could be an XML or SGML instance.
Document language
The encoding language of the source document (e.g., HTML, XHTML, or SVG). CSS is used to describe the presentation of document languages and CSS does not change the underlying semantics of the document languages.
Element
(An SGML term, see [ISO8879].) The primary syntactic constructs of the document language. Most CSS style sheet rules use the names of these elements (such as P, TABLE, and OL in HTML) to specify how the elements should be rendered.
Replaced element
An element whose content is outside the scope of the CSS formatting model, such as an image, embedded document, or applet. For example, the content of the HTML IMG element is often replaced by the image that its “src” attribute designates. Replaced elements often have intrinsic dimensions: an intrinsic width, an intrinsic height, and an intrinsic ratio. For example, a bitmap image has an intrinsic width and an intrinsic height specified in absolute units (from which the intrinsic ratio can obviously be determined). On the other hand, other documents may not have any intrinsic dimensions (for example, a blank HTML document).
User agents may consider a replaced element to not have any intrinsic dimensions if it is believed that those dimensions could leak sensitive information to a third party. For example, if an HTML document changed intrinsic size depending on the user’s bank balance, then the UA might want to act as if that resource had no intrinsic dimensions.
The content of replaced elements is not considered in the CSS rendering model.
Intrinsic dimensions
The width and height as defined by the element itself, not imposed by the surroundings. CSS does not define how the intrinsic dimensions are found. In CSS 2.1 only replaced elements can come with intrinsic dimensions. For raster images without reliable resolution information, a size of 1 px unit per image source pixel must be assumed.
Attribute
A value associated with an element, consisting of a name, and an associated (textual) value.
Content
The content associated with an element in the source document. Some elements have no content, in which case they are called empty. The content of an element may include text, and it may include a number of sub-elements, in which case the element is called the parent of those sub-elements.
Ignore
This term has two slightly different meanings in this specification. First, a CSS parser must follow certain rules when it discovers unknown or illegal syntax in a style sheet. The parser must then ignore certain parts of the style sheets. The exact rules for which parts must be ignored are described in these sections (Declarations and properties,Rules for handling parsing errors,Unsupported Values) or may be explained in the text where the term “ignore” appears. Second, a user agent may (and, in some cases must) disregard certain properties or values in the style sheet, even if the syntax is legal. For example, table-column elements cannot affect the font of the column, so the font properties must be ignored.
Rendered content
The content of an element after the rendering that applies to it according to the relevant style sheets has been applied. How a replaced element’s content is rendered is not defined by this specification. Rendered content may also be alternate text for an element (e.g., the value of the XHTML “alt” attribute), and may include items inserted implicitly or explicitly by the style sheet, such as bullets, numbering, etc.
Document tree
The tree of elements encoded in the source document. Each element in this tree has exactly one parent, with the exception of the root element, which has none.
Child
An element A is called the child of element B if and only if B is the parent of A.
Descendant
An element A is called a descendant of an element B, if either (1) A is a child of B, or (2) A is the child of some element C that is a descendant of B.
Ancestor
An element A is called an ancestor of an element B, if and only if B is a descendant of A.
Sibling
An element A is called a sibling of an element B, if and only if B and A share the same parent element. Element A is a preceding sibling if it comes before B in the document tree. Element B is a following sibling if it comes after A in the document tree.
Preceding element
An element A is called a preceding element of an element B, if and only if (1) A is an ancestor of B or (2) A is a preceding sibling of B.
Following element
An element A is called a following element of an element B, if and only if B is a preceding element of A.
Author
An author is a person who writes documents and associated style sheets. An authoring tool is a User Agent that generates style sheets.
User
A user is a person who interacts with a user agent to view, hear, or otherwise use a document and its associated style sheet. The user may provide a personal style sheet that encodes personal preferences.
User agent (UA)(otherwise known as a web browser)
A user agent is any program, for example, the web browser, that interprets a document written in the document language and applies associated style sheets according to the terms of this specification. A user agent may display a document, read it aloud, cause it to be printed, convert it to another format, etc.
An HTML user agent is one that supports one or more of the HTML specifications. A user agent that supports XHTML [XHTML] but not HTML is not considered an HTML user agent for the purpose of conformance with this specification.
Property
CSS defines a finite set of parameters, called properties, that direct the rendering of a document. Each property has a name (e.g., ‘color’, ‘font’, or border’) and a value (e.g., ‘red’, ’12pt Times’, or ‘dotted’). Properties are attached to various parts of the document and to the page on which the document is to be displayed by the mechanisms of specificity, cascading, and inheritance (see the chapter on Assigning property values, Cascading, and Inheritance).
The browser has a default style sheet, and if you do not neutralize it, you will be adding your styles on top of its styles. Worse, different browsers can have different style sheets, and individuals can personalize the browser’s style sheet. An example: Safari’s default style sheet. To counter this we implement a css reset. There are two to choose from.
The first is by Eric Meyer, who created the first popular reset in 2007, and recently released this second version:
The second reset is called Normalize. It is a more nuanced approach that tries to do as little as possible and attempts to harmonize the browser defaults instead.
The aims of normalize.css are as follows:
Preserve useful browser defaults rather than erasing them.
Normalize styles for a wide range of HTML elements.
Correct bugs and common browser inconsistencies.
Improve usability with subtle improvements.
Explain the code using comments and detailed documentation.
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
This will have happened before many of you were born, though I remember it well. In the late 1980 and the early 1990’s desktop publishing was born with programs like PageMaker, a program whose reincarnation would be named InDesign.
What liberated the designers was the ability to put content anywhere. Be it text or pictures, the content is always contained in a box. PageMaker and Indesign can position these boxes anywhere on the page.
Those who knew how these programs worked would make sure that they used the numerical coordinates to accurately position the boxes, and not just rely on guides or to do it by eye. It was easy to see how many inches a box was from the upper left corner of the document that represented the default 0 point.
Each box in InDesign (or Illustrator, for that matter) has four numbers associated with it: the horizontal distance (x) from the point of origin, the vertical distance (y), the width and the height. This is the same for each element that is absolutely positioned in HTML and CSS. We are going to use that to layout the bio.
The Document’s Default Behavior
In the first homework assignment you marked up content using heads <h1>–<h6> and paragraphs <p>, added links <a> and images<img>, and grouped certain content together using the generic <div> or the more semantic HTML5 tags like <header>, <nav>, <section>, <article>, <figure> and <figcaption>.
At this time you did not nest too many tags inside of other tags, but know that every tag you created was already nested as a child of the body tag. As you develop the layout, you will increasingly nest tags inside of one another, usually to define and group an area of the layout, like the header, right column, main content, navigation or footer.
When you look at the first assignment, you see the browser’s default style at work. The content vertically lines up, one below another, while the text flows left to right.
To better understand this structure, change the embedded style included in the HTML5 template, which currently looks like this:
<style type="text/css">
.example {
}
</style>
To an embedded style that puts an outline or border on all elements, like this:
A red outline is put on the elements that are displayed according to the block mode and a green border is put on the elements that are displayed according to the inline mode.
Each element of the assignment now has an outline or border.
Take a moment and explore the way the red outlined block elements stack below one another. Each element’s width extends all the way out to the parent by default.
Inline elements with green borders styles the content (type) in block elements, flowing from insertion point to the end of the box. It then start over on the next line. Not all languages flow horizontally or left to right, though english does, so we can say that type starts left and flows horizontally.
The default display of the content is that the block elements flow down one below the other from the top of the page The absolute display mode radically changes this by completely removes elements from the default document flow.
There is no need to keep this style, so you can remove it by commenting it out using the CSS commenting convention: /* comments */. That way it is still there is you ever want to see the block elements outlined in red.
It is also possible to just break a property inside a CSS rule by misspelling it, as it will just be ignored. Insert a special letter combination, and be consistent in your used of it, like -break-, as in out-break-line: 2px solid red;. It is the possible to quickly searched for -break- and find them. This is handy when stylesheets become big and need to be more carefully managed.
Styling the Elements
I use an embedded style sheet for this example, but you should use an external style sheet. You then need to write selectors that select all the elements on the page. You could do this by giving each element an id or class, but we want to be more efficient, and so first try to select the elements using type and pseudo selectors if possible.
The best selectors to use are type selectors. They select the element by its type, i.e. p for selecting all paragraphs. You can combine them to get more specific, like article div p, which targets only those paragraphs in the div in the article. If that doesn’t work, you can use the pseudo class selectors like :nth-child(N) or use class selectors if you want to target certain elements.
Avoid using ids, as they are much stronger than classes and tend to dominate the cascade hierarchy. To great a reliance on ids takes away a lot of the flexibility built into the CSS cascade.
Select each of the elements in the document and change the background color to know that you have successfully targeted that element with a CSS rule.
Altering the Default Layout Order
The block elements are like a child stacking playing blocks one on top of the other, only upside down, starting from the top with one box below the other. This is the normal document flow mode, and it is similar to how a word processor works. The difficulty of laying out a document using the normal document flow is that you have to build your way to every part of the document. The benefit is that if one thing changes, everything else adapts, if it’s done right.
Most Design students layout their documents using Indesign (Illustrator, or even Photoshop). The activity of creating and moving design elements where you want them is what layout is all about.
Forget the normal document flow! Click on an object and move it to where you want it to be.
A What You See is What You Get editor can do that, but the code it creates is messy. The best way to do this is coding the layout by hand. Go through the creative process, with thumbnails, mood boards etc., and develop a Photoshop comp before starting to code the layout.
There is not much spontaneity in coding the layout, but then, there is little spontaneity in prepping an Indesign document for print. The creativity and spontaneity of web design happens in the early planning stages. To encourage that I ask you to show me your creative development in the worksheet. After that it’s mostly creative problem solving as you execute the layout. You are ahead of the game if you can see this as a puzzle to be solved.
Homework Assignment Using Absolute Positioning
To get started, we want to remove all of the background properties from the selector demo, so we can start with a clean slate.
Next, we want to center the layout in the middle of the window. That forces us to use a relatively positioned element as the containing element that wraps the website. So much for using only absolute positioning.
The way to horizontally center an element in CSS is to set the right and left margins on auto , and by giving the element a width. The width is subtracted from the width of the parent element, and whatever is left over is split into two so that equal side margins automatically center the element in the middle.
Absolute Position based on Relatively Positioned Parent
We also position this element as relative. This is an important step, for a page element with relative positioning gives you the control to absolutely position children elements inside of it. If we were to skip this step, the absolutely positioned elements would position itself to the body element, and not the automatically centering element just created.
The section element is made 960 pixels wide, and if the window is bigger than that, the margins are evenly divided, centering it in the window, or viewport, as it is technically called.
The absolutely positioned elements inside of the section element will all stay centered in the window. This has the effect of grouping all of the enclosed elements. We will continue to use this technique to simplify our layout into the main HTML5 divisions, each one of which will be turned into a group: header, nav, aside, article and footer.
Header
All of the elements inside of the header element function as a group, allowing me to move them all by moving the header element.
Overlapping Elements
There is a shadow under the header element, but unlike most shadows, it does not stick out on one side. If it were to stick out, it would flatten the overall look by unifying the background and the page. I didn’t want that, so I made the element with the shadow property shorter. But that does not look right either.
To solve the problem I covered up the header element which has the shadow. The div inside of the header extends beyond its boundaries and covers up the shadow on the right side, as this picture demonstrates.
There is no need to position the div element, since it is already where it is suppose to be. It has to be made the same height and just a little longer. To calculate the length of the div, add the 112px of padding on the left to the 848px in length. I took out the 1 px border on the sides, but left it in on the top and bottom. That makes it 960px wide, or 20 pixels longer than the header.
To calculate the height, add the 20 pixels of padding to the 90px in height, in addition to the 1px border on top and on the bottom. The div’s padding is what positions the title, which is then 112 pixels from the left and 20 pixels from the top of the header element.
Google Fonts are used, and the link to them has to be included in the header.
The picture of Piet is placed via absolute positioning from the right of the header div, its parent, and not the left. Since it sticks out above the header, it requires negative number for the top position. Here is the CSS:
That takes care of the header as a group. If we were to move it up or down, we could do so by changing only the header values.
Aside
The pictures on the left side make up the aside. The aside is pretty straight forward, as the pictures, which are 160px wide, fall into place once a width of 160px is specified. The figcaptions align up below the pictures. The HTML is as follows:
The navigation is absolutely positioned from the top of the page to just below the header picture. Though nothing was obstructing its view, the links were not working. Using the z-index property to raise it just off of the default layer exposed the link’s functionality. The anchor elements, or links, are displayed as block elements, and styled accordingly. The CSS:
The article is composed of one large picture and a div element that contains two columns. The figure falls into place. The figure is given extra padding on the bottom to push the div down. The div is given a background color, height, and padding to push the text of the first column both down and to the left. The width of the column is defined by the paragraph.
The second column is absolutely positioned so it sits beside the first. The title is given the same treatment as the nav title above.
<article>
<figure>
<img src="images/BroadwayBoogie.jpg" alt="Broadway Boogie Woogie" />
<figcaption>Broadway Boogie Woogie</figcaption>
</figure>
<div>
<div class="column1">
<h2 class="shadow_2">EXPERIENCE</h2>
<p><a href="http://www.lipsum.com/">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Proin nec mi vitae arcu euismod sagittis eget vitae nunc. Integer eu mi felis. Nullam eleifend tincidunt magna. Cras ultrices est vel metus fermentum molestie. Maecenas ante elit, varius sollicitudin placerat nec, tempor sit amet dui. Nulla facilisi. Nam ac justo quis eros eleifend molestie in eget purus. Nulla facilisi. Sed dapibus, justo eu semper feugiat, eros turpis lobortis dolor, a malesuada sapien arcu sit amet sapien. Nulla aliquet lectus eget mauris molestie placerat.</p>
</div>
<div class="column2">
<p>Cras dolor metus. Proin diam nibh, sodales in hendrerit non, laoreet a dui. Proin tristique, sapien et mattis vestibulum, mi ante lobortis neque, in ultricies neque enim et diam.</p>
<p>Etiam id magna at arcu scelerisque iaculis vehicula ut tortor. In hac habitasse platea dictumst. Mauris a purus vitae lacus dictum, mi arcu porttitor velit, in aliquet tortor orci sed est. Mauris fringilla adipiscing dui, a pharetra odio porta in.</p>
<p>Etiam id magna at arcu scelerisque iaculis vehicula ut tortor. In hac habitasse platea dictumst. Mauris a purus vitae lacus dictum, mi arcu porttitor velit, in aliquet tortor orci sed est. Mauris fringilla adipiscing dui, a pharetra odio porta in.</p>
</div>
</div>
</article>
Footer
All that is left is the footer. Because absolutely positioned elements do not interact with the document flow, the footer cannot be positioned by the content itself. The last element is absolutely positioned, just like all the rest. The CSS:
<footer>
<p> <a href="http://validator.w3.org/check?uri=referer"> Validate your page.</a> </p>
</footer>
The finished product. Absolute position of the elements works for print, because once the printed page is determined, the size no longer changes. That is not true of web design, and the next period will introduce a number of additional strategies to deal with layout out pages for the web.
CSS, or cascading style sheets, describes the presentation of web pages, including colors, layout, and fonts. It does this through properties that style HTML elements.
Think form and content. CSS is the form, HTML the content.
CSS is separate from the content and is able to adapt the presentation of the content to different types of devices such as large screens, small screens, or printers.
The separation of CSS from HTML makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments.
CSS is deceptively easy to apply when it is done inline. That means you write the code right into the HTMl tags using the style attribute. You write these locally applied rules like this: style="inline CSS rules go here". The addition of the code style="color: red" to the paragraph tag <p > looks like <p style="color: red">, and colors the following paragraph red.
Changes are seen as soon as you update the browser. This immediacy and the simplicity of the syntax makes CSS appear easy, which it is when there is no cascade or style sheets to worry about.
It is possible to write all of your presentation in the tags themselves but you would find that to be highly inefficient. It is generally frowned upon to write CSS locally and defeats the purpose of the cascade.
What is CSS?
CSS gets its power from inheritance, the style sheets and the cascade. It is called CSS, or cascading style sheets. With that power comes the responsibility of keeping track of all the selectors that target the html element, and when there are many overlapping rules it can become difficult.
Not all properties are inheritable but those that are can be set in the <html> or <body> element, and every child element that is inside of these containing or parent elements, will inherit these properties.
The cascade describes how the CSS rules in the style sheet are applied globally. The CSS styles are a list of rules prefaced by one or more selectors. These rules can be placed in the header of the page or can be in an external style sheet, a blank text file saved with the .css extensiont, in which case, a link to that style sheet is placed in the header of the page.
Selectors provide the link between the rules in the style sheet and the HTML elements that receive the rule. The browser parses the document, figures out every element in the document tree, heals any errors it may find, and tracks all of the selectors used by the style sheet to target the different tags so that it can assign the rules of properties and their values to each element, so that the page ends up looking the way it does.
Inheritance
Every element is a child of the <html> element. If you target the <html> , or the <body> element, many properties will be inherited but not all.
For example, a child element inherits the font property of its parent but it will not inherit the background property. Other automatically inherited properties are: color, font (and related properties), letter-spacing, line-height, list-style (and related properties), text-align, text-indent, text-transform, visibility, white-space, and word-spacing.
Properties not automatically inherited are: background (and related properties), border (and related properties), display, float and clear, height and width, margin (and related properties), min- and max-height and -width, outline, overflow, padding (and related properties), position (and related properties), text-decoration, vertical-align, z-index. There are more but this gives you an idea.
Inheritance prevents certain properties from having to be declared over and over again in a style sheet allowing the developers to write less CSS and the users to view faster-loading pages.
Inheritance plays a large roll in CSS but it’s not overtly visible. Be aware that it’s constantly determining what the elements on the page look like. In the cascade, inherited properties lose out to any properties provided by a selector.
CSS Selectors
Central to this process is the selectors that connect the CSS properties to the element when the properties are no longer written in the element itself.
There are many kinds of selectors, and W3C has a whole list of them, I have a reduced set of them below. It is best to keep things simple and start with the type selector.
You can select all paragraphs in a document by using the type selector, like this: p {css property: value;}. It is possible to limit the scope and target only the paragraphs in the header for example. This is done by placing header before the p like this header p {css property: value;}.
An interactive demonstration can be of great help when conveying this information. What follows is the first of many such interactive demos.
Interactive CSS Selectors Demo
The following demonstration selects all of the text contained by <p> in this document. You can change the font, the type color and the type size (or anything else if you write in the rule).
Words inside of /* */ are comments. They are there to help you come up with values that match the properties. For example, /* green, #abc, hsl(35 100% 50% /1) */ are suggestions to replace black with green, blue grey or orange in color: black. You will see the content surrounded by <p> tags go to the default color black while typing in the new value. When CSS does not recognize a value it ignores it and applies the default value.
Your changes could render the document unreadable. To reset the document, refresh the page. The selector <p> selects all paragraph elements.
If you find something you like (this concerns other demos more than this one), copy the declaration and use it in your project.
CSS Code View
If you colored the text green, you will notice that the paragraph above that was originally colored red is still colored red. Why did the color not change? The same is true of the font-family.
We will explore this in much greater detail but know that the cascade determines which rule wins out over all the other rules that target the element.
You can overpower the cascade order by using !important, which is inserted right after the value and before the semicolon. Try inserting green !important in the demo, and you will see that the global CSS rules now override the local inline rules in the cascade. The red type in the introduction will be green.
The !important quickly destroys the cascade and quickly makes the CSS unusable, so it is not recommended unless you have no other options. I use it mostly for testing purposes, to check on whether I’m actually targeting an element or not in WordPress template that I did not create.
Specificity and Grouping Selectors
It’s not always desirable to select all the paragraphs in the document. We usually want to select very specific paragraphs, or elements, in the document. This paragraph or that paragraph but not all of them. This is achieved including one or more containing or parent elements, each separated by a space.
Selectors move up the DOM tree to achieve greater specificity. In the following demonstration, each line is targeted individually by nesting the selectors. Use a space “” between selectors to specifically select the child element inside of the parent element:
Selectors can also be grouped to share the same rule. Use a comma “ ,” between the selectors to include all of the selectors to which the rule will be applied. This is the case with the last two selector in this demonstration:
CSS Code View
Header in div
Paragraph in div
Item 1 of list in div
Item 2 of list in div
The blue div has the 120% applied twice, and is larger than all other text in this demonstration. Another example of the cascade at work. Play around with the demo to see how specificity is able to narrow the targeted section to exactly the element that you want to style.
The HTML code for this example is:
<div id="example0">
<h2>Header in <span>div</span></h2>
<p>Paragraph in <span>div</span>
<ol>
<li>Item 1 of list in <span>div</span>
<li>Item 2 of list in <span>div</span>
</ol>
</div>
CSS Rule Placement
There are three places where to put style definitions. CSS styles can be written in the tag itself, called inline styles, in the head of the document, called embedded styles and in an external style sheet.
Inline Style definitions
You can write the style directly in the tag itself. The attribute style has as its value whatever properties are to effect the HTML element style="color: red".
<p style="color: red">
Embedded Style definitions
The CSS can be put in the <head> of the document between <style> and </style> tags. Using a p selector it’s possible to target all the paragraphs in the document with the embedded style.
<style type="text/css">
p { color: red}
</style>
The declarations are now enclosed in brackets and is called the declaration box, and in front of the bracket is the selector that targets which element is to be affected by the rule. The rule can be applied to many elements. Many rules can target the same elements and that increases the complexity. Different selectors with conflicting rules can target the same element. Which rule will win out to style the element? That is the question.
This is were it can get difficult as several rules can target the same element. When that happens, the browser has to select which rule wins out in what’s called the cascade.
Embedding the styles is more efficient than writing them in each paragraph element but it’s still not ideal, since the rules can only targets the HTML elements in the page. Websites almost always consist of multiple pages.
External Style Sheets
The most efficient place for styles is in an external style sheet. The external style sheet is a simple text file saved with a .css extension with nothing but CSS style rules on it. They can be written in any way, as spaces, returns and tabs are ignored by the browser. Start out by separating all of the properties in their own line, as in the following example, so that they are easy to read:
p {
color: red;
background: white;
width: 400px;
padding: 20px;
border: 2px solid green;
margin: 20px auto;
}
It’s also possible to write the declarations in one line:
p {color: red; background: white; width: 400px; padding: 20px; border: 2px solid green; margin: 20px auto;}
There is no difference, as all the white space is collapsed. I tend to write all of my declarations in one line as that reduces scrolling in long style sheets. Once I finish I sometimes clean the styles so each declaration is on its own line.
The file is saved with a .css extension, often in its own folder called CSS, in case there are more than one external or imported style sheets. Note that it is required to exit the folder when linking to an external resource like a picture: use ../ in front of the resource to get out of the css folder.
Each HTML page in the site refers to that style sheet by linking to it by including the following code in the header of each document:
You can copy this into your pages, though it is already included it in the HTML5 template.
It’s possible to link to or import several style sheets and some think it’s a good organizing principle to break the styles into several style sheets like the CSS reset, typography, navigation, layout or alternate styles for depreciated browsers.
The downside to all this organization is that each stylesheet requires a server request. That is, your browser has to ask the server for one more file to complete the page. The lag time involved in asking the server for each style sheet can take more time than the actual loading of the stylesheet itself. Because of this a more common approach is to put all the styles into a single style sheet.
Browser Style Sheets
There are three style sheets.
User Agent styles are the default style sheet the browser uses, which are modifiable by an end user.
Author Styles are the styles that you create when you design the page.
User Styles style information specified by the user apart from the default style sheet.
Browser’s Default Style Sheet
Even if you do not write any CSS, the HTML has formatting applied, so that an <h1> tag looks different from an <h2> or a <p> tag. Where do these styles come from?
Every browser has a default style sheet, called the user agent style sheet, like this one from Safari that formats the markup.
If you look at Safari’s default style sheet, you will see that it determines how the p element is to be displayed:
A paragraph not yet styled looks as specified by the browser style sheet. If you start styling the elements with your own styles in an author style sheet, they are built on top of the styles specified in the user agent style sheet. That may lead to problems when the page is looked at in a different browser. To solve that problem a CSS reset is used.
Resetting Browser Default Style
To counteract the possibility that your author styles change with different browsers, you need to neutralize the default user agent style sheet the browser uses.
To counter this we implement a CSS reset. The CSS reset was initiated by Eric Meyer, and he recently released a second version. Take the following code and place it at the beginning of your style sheet, and it will neutralize the default styles of the browser style sheet.
A more nuanced CSS reset is accomplished by normalize.
Last Style Definition Wins
There is a pattern here. The styles in the author style sheet override the styles in the user agent style sheet. In the order in which CSS rules are compiled, subsequent declarations override previous ones.
If you repeat the same property twice, the second one will style the element. {color: green; color: red} The type will be colored red, not green.
This is also true of the three places where you can place the rules. If the same rule is found in the user agent style sheet, the author’s style sheet and any other imported external style sheets, the embedded or internal style sheet and repeated once again inline, that is, in the element itself, guess which rule wins out?
The inline rule wins out. The rule of thumb here is that the closer the style definition is to the element being styled, the more likely it is to triumph over the other rules and style the element. The insight we are given is that the order in which the browser concatenates the various style sheets is as given above, with the default style sheet first, then external style sheets, then the internal style sheet and finally it arrives at the elements themselves.
That the last style definition wins is part of the cascade:
The Cascade
CSS stands for cascading style sheets. The cascade is the ordering of selectors that determines which selector wins out over to style the element. In writing CSS you intentionally determine the cascade by how each selector targets their element(s).
CSS rules can be written in a number of places. In each place it is possible to have many declarations targeting the same HTML element. It is, therefore likely that element are targeted by several rules at once — from inline rules to embedded rules to external rules, to user stylesheets. When there are several rules targeting the same property with different values, only one of these rules wins out to determine the presentation of the HTML element. Figuring out which rule ends up styling the element is important.That is why it is necessary to figure out how the cascade works.
For example, <span style="color: red">red</span> this text’s inherited default color of black is overridden by the inline style that colors the type red. That tells you that the inline style trumps the inherited style.
The browser needs to figure out which rule to use when there are multiple conflicting values for a property. The cascade refers to the selection process in which these styles are evaluated so that only one value ends up styling the element.
Generally speaking, the closer a style definition is to the tag, the more likely it wins out. The inline style wins out over the embedded style, the embedded style trumps a linked or imported style sheet which in turn wins over the browser’s default style sheet, and they all trump inherited styles.
The cascade takes the selector’s specificity into its calculation. One selector ends trumping all the other selectors. There is a formula that determines the cascade. It prioritizes ids over classes, for example. Classes win out over structural tags and structural tags trump typed tags.
The new CSS transition and animation take top spots.
You can pull out the big gun and place !important after a rule if you absolutely want it to be the case no matter what.
Be judicious in your use of classes, ids, and especially !important, as you can easily make a document unmanageable. The rule of thumb is to use as low a cascade value as possible to select an element.
A fun interactive explanation of how the CSS cascade works It explains the cascade hierarchy in importance, origin, specificity, and position, and quizzes you on each of these points. If in doubt, take the quiz.
Cascade Layers
Cascade Layers are designed to ease CSS development on large projects. Cascade Layers provides a powerful way to organize styles into layers, where specificity is calculated independently inside each layer.
/* establish the layer order, so the "override" layer takes precedence */
@layer framework, override;
@layer override {
@keyframes slide-left {
from { translate: 0; }
to { translate: -100% 0; }
}
}
@layer framework {
@keyframes slide-left {
from { margin-left: 0; }
to { margin-left: -100%; }
}
}
.sidebar { animation: slide-left 300ms; }
In this case the override layer has a higher cascade priority than the framework layer, so slide-left will animate using the translate property rather than margin-left.
Cascade Layers are for advanced websites and are outside the scope of this class.
The Elements of a CSS Rule
CSS has a simple syntax and uses a number of English keywords to specify the names of various style properties and values. That makes it easy to use. A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors and a declaration block. A declaration-block consists of a list of declarations in braces. Each declaration itself consists of a property, a colon :, and a value. If there are multiple declarations in a block, a semi-colon ; must be inserted to separate each declaration. The rule-set is applied to the target element by a selector. The combination of a selector with a rule-set completes the CSS statement.
The CSS Rule
The CSS rule contains both the selectors and the declarations.
The declaration is a property-value pair and is part of the rule that describes how the selector will style the element. When the style sheet is embedded in the document, convention is to follow each declaration inline: Example: h1 { font-size:1.5em;font-weight: 700;color: #333;}
While in an external style sheet, convention is the put each delectation on a new line with a tab in front: Example: h1{ font-size:1.5em; font-weight: 700; color: #333;
}
With the advent of @media queries in responsive design my preference is to write all CSS rules inline to minimize scrolling.
The Declaration Box
Declarations determines how the selector will style the element. it’s always bookended by curly braces { }.
A property describes an aspect of an elements’s presentation such as color, font-size or border-width. The property is always followed by a value and the two are always separated by a colon:. There are a lot of properties, so it’s best to have a place where you can look them up, though repetition will acquaint you with the ones you need.
Example: h1 {color: #356590; padding: 3px 16px;}
Values
A value describes a specific appearance, such as a specific width, the name of a color, or some set value, such as for text-decoration: none; which removes the underline from text, often used to remove the underline that the browser’s default stylesheet gives a link. The value commences the declaration statement, and you signify that to the computer by using a semicolon ;. While it’s not necessary to tell the browser that there are no more declarations in the declaration box, it’s a good practice to close the last declaration as well.
Example: h1 {color:#356590; padding: 3px 16px;}
CSS Selectors
Selectors are patterns that match the elements of a document that will then have the declarations applied to them.
The easiest selector to understand is the type selector, in which p selects the paragraph element: <p>.
The type selector selects the element by the tag itself:
Type: p { }
Use the type selector whenever possible. Use other selectors when the type selector cannot target an element.
The universal selector selects all elements:
Universal: * { }
The scope of the universal selector can be restricted through specificity.
Universal: nav * { }
The universal selector only selects all elements inside the nav element.
The attribute selector selects elements on the basis of their attributes. Example of attribute selector selecting all image tags with an attribute of “alt”:
Attribute: img[alt] { }
Example of attribute selector selecting all links to pdf files.
Attribute: a[href$=".pdf"] {color: #45a2f4;}
The pseudo class selects different states of an element, most often used to target the different states of a link like hover.
Pseudo Class: a:hover { }
The class selector selects all elements belonging to the same class on a page. Example of a class selector that selects any element with a class=”example”:
Class: .example { }
Example of a pseudo selector that selects any link and creates a hover class:
The ID selector selects an ID attribute. The value of each ID should be unique, assigned to only one element per page. Example of a ID selector that selects any element with an id=”container”:
ID: #container { }
Selecting, Specificity and Grouping Selectors
Use a space to separate nested elements. body header nav ul li a would target the link in the nav of the header. Easier to use only the required elements header nav a. That would get all links in the nav contained in the header. If there were no other navs in the document, you could get alway with nav a
To make selecting elements more precise:
selectors can be combined by using a comma ,
a greater than sign > for limiting that combination to a child of the selected parent
a plus sign + for selecting the following sibling, meaning the directly adjacent element
and the tilde ~ for selecting indirectly adjacent selectors. For example, #french~p selects all the ps that are adjacent selectors of the element that has id="french".
Space: article p { } selects all <p> elements in <article>.
Greater Than: article>p { } selects only the <p> elements that are children of the <article>.
Adjacent:article+p { } selects only the <p> elements adjacent to the <article>.
Tilde:article~p { } selects all indirectly adjacent <p> elements to the <article>.
Grouping Selectors:
When several selectors share the same declarations, they can be grouped into a comma-separated , list:
example: h1, p, img, nav { }
Pseudo Class Selectors
Pseudo classes are based on the structure of the document rather than attributes or things found in the document.
A pseudo-class selector acts as if you have added a class to an element in your markup. It defines a special state of an element. It can be used to style an element when a user mouses over it, style visited and unvisited links and style an element when it gets focus.
Pseudo-class selectors make it possible to select the first, last or alternate lines to alternate the color in a set of links, for example: First Child: tr:first-child { } Last Child: tr:last-child { } Nth Child: p:nth-child(2) { } Nth Child: p:nth-child(odd) { } Nth Child: p:nth-child(even) { }
Pseudo Classes
Pseudo classes create a class of an element that already exists but where there is no predetermined class. You can select a link, the anchor tag but there is no class to select the hover state of that link. This pseudo-class selector creates a pseudo class that can be styled as the link’s hover state. Many of these pseudo classes are structural, meaning that they use information that lies in the document tree to select different elements.
here is a list of pseudo classes:
:nth-child(N)
Matches elements on the basis of their positions within a parent element’s list of child elements (N here stands for the number of the element but it can also support odd and even, as in li:nth-child(odd)).
:nth-last-child(N)
Matches elements on the basis of their positions within a parent element’s list of child elements.
:nth-of-type(N)
Matches elements on the basis of their positions within a parent element’s list of child elements of the same type. CodePen
:nth-last-of-type(N)
Matches elements on the basis of their positions within a parent element’s list of child elements of the same type.
:last-child
Matches an element that’s the last child element of its parent element.
:first-of-type
Matches the first child element of the specified element type.
:last-of-type
Matches the last child element of the specified element type. CodePen
:only-child
Matches an element if it’s the only child element of its parent.
:only-of-type
Matches an element that’s the only child element of its type.CodePen
Matches an element that’s the target of a fragment identifier in the document’s URI.
:checked Pseudo-class
Matches elements like checkboxes or radio buttons that are checked.
:not(S)
Matches elements that aren’t matched by the specified selector. It is useful to exclude elements from a particular selection.
Pseudo Classes: not
Sophisticated example of the pseudo class not.A collapsable guide to the layout modes. All of the work is being done by the last CSS rule using the pseudo class not, as in not target or hover li:not(:target):not(:hover) .
CSS Code View
Live Demo
Here you will find links to the layout modes article, including the document flow, the positioning of the elements within the document flow and display, z-index and overflow properties.
Ids and Classes
HTML uses the Id and Class attributes for general naming of the elements. This is used by Javascript as well as CSS to select these elements.
In the markup the id uses a hash mark # before the name #this in the style sheet and the HTML code looks like <div id="this">, while the class uses a period . before the name .that in the style sheet and the HTML code looks like <div class="that">.
An id is to be assigned only once per page, while classes can be assigned multiple times per page. That difference gives ids more weight than classes when it comes to the CSS cascade.
Ids and Classes so obviously connect the rule with the element that they were over-used in the past when other selectors could have worked just as well. If it were a screaming contest, it was an outright cacophony. That particular affliction, along with the overuse of the generic div element, is called divitis and classitis. It is best to be as quiet as possible, and not jump to using classes and ids unless necessary.
Pseudo Elements
CSS can create markup where there is none. These are called Pseudo Elements, and you can style them as if they existed.
For Example, if you wanted to style the first letter of a paragraph, you can target it even though there is no markup. There are four pseudo elements all together: ::first-letter, ::first-line, ::before and ::after. All of them are written using another selector, two colons :: and the pseudo element, as in p::first-letter {} (The double colon is new, so a single colon is also accepted). Some use cases for before and after.
There are many CSS properties. You do not have to memorize them all. You will remember the ones you use most often, and the other ones you can always look up. I’ve separated many of the properties into a number of interactive demos so that you can try them out. Spend some time in this sandbox, change the values of the properties or add new properties. This is where you can play and learn while it is still fun.
Color
Color is always RGB. That is how computers work. These are additive colors, you can call them by name or RGB value, both by percentages, decimal number or hexadecimal shorthand (Hexadecimal is base 16, or 1,2,3,4,5,6,7,8,9,a,b,c,d,e,f ), which is the most common form, introduced by a # hash mark, and allows each value (red, green and blue) to be represented by two Hexadecimal values, like #000000 is black or #ff0000 is red, #00ff00 is green and #0000ff is blue. Can you guess what the value of white is? If you guessed #000000, you are correct!
Here are the names of the colors, with their Hexadecimal and decimal numbers as an example:
Color
Color name
Hex rgb
Decimal
aliceblue
#f0f8ff
240,248,255
antiquewhite
#faebd7
250,235,215
aqua
#00ffff
0,255,255
aquamarine
#7fffd4
127,255,212
azure
#f0ffff
240,255,255
beige
#f5f5dc
245,245,220
bisque
#ffe4c4
255,228,196
black
#000000
0,0,0
blanchedalmond
#ffebcd
255,235,205
blue
#0000ff
0,0,255
blueviolet
#8a2be2
138,43,226
brown
#a52a2a
165,42,42
burlywood
#deb887
222,184,135
cadetblue
#5f9ea0
95,158,160
chartreuse
#7fff00
127,255,0
chocolate
#d2691e
210,105,30
coral
#ff7f50
255,127,80
cornflowerblue
#6495ed
100,149,237
cornsilk
#fff8dc
255,248,220
crimson
#dc143c
220,20,60
cyan
#00ffff
0,255,255
darkblue
#00008b
0,0,139
darkcyan
#008b8b
0,139,139
darkgoldenrod
#b8860b
184,134,11
darkgray
#a9a9a9
169,169,169
darkgreen
#006400
0,100,0
darkgrey
#a9a9a9
169,169,169
darkkhaki
#bdb76b
189,183,107
darkmagenta
#8b008b
139,0,139
darkolivegreen
#556b2f
85,107,47
darkorange
#ff8c00
255,140,0
darkorchid
#9932cc
153,50,204
darkred
#8b0000
139,0,0
darksalmon
#e9967a
233,150,122
darkseagreen
#8fbc8f
143,188,143
darkslateblue
#483d8b
72,61,139
darkslategray
#2f4f4f
47,79,79
darkslategrey
#2f4f4f
47,79,79
darkturquoise
#00ced1
0,206,209
darkviolet
#9400d3
148,0,211
deeppink
#ff1493
255,20,147
deepskyblue
#00bfff
0,191,255
dimgray
#696969
105,105,105
dimgrey
#696969
105,105,105
dodgerblue
#1e90ff
30,144,255
firebrick
#b22222
178,34,34
floralwhite
#fffaf0
255,250,240
forestgreen
#228b22
34,139,34
fuchsia
#ff00ff
255,0,255
gainsboro
#dcdcdc
220,220,220
ghostwhite
#f8f8ff
248,248,255
gold
#ffd700
255,215,0
goldenrod
#daa520
218,165,32
gray
#808080
128,128,128
green
#008000
0,128,0
greenyellow
#adff2f
173,255,47
grey
#808080
128,128,128
honeydew
#f0fff0
240,255,240
hotpink
#ff69b4
255,105,180
indianred
#cd5c5c
205,92,92
indigo
#4b0082
75,0,130
ivory
#fffff0
255,255,240
khaki
#f0e68c
240,230,140
lavender
#e6e6fa
230,230,250
lavenderblush
#fff0f5
255,240,245
lawngreen
#7cfc00
124,252,0
lemonchiffon
#fffacd
255,250,205
lightblue
#add8e6
173,216,230
lightcoral
#f08080
240,128,128
lightcyan
#e0ffff
224,255,255
lightgoldenrodyellow
#fafad2
250,250,210
lightgray
#d3d3d3
211,211,211
lightgreen
#90ee90
144,238,144
lightgrey
#d3d3d3
211,211,211
lightpink
#ffb6c1
255,182,193
lightsalmon
#ffa07a
255,160,122
lightseagreen
#20b2aa
32,178,170
lightskyblue
#87cefa
135,206,250
lightslategray
#778899
119,136,153
lightslategrey
#778899
119,136,153
lightsteelblue
#b0c4de
176,196,222
lightyellow
#ffffe0
255,255,224
lime
#00ff00
0,255,0
limegreen
#32cd32
50,205,50
linen
#faf0e6
250,240,230
magenta
#ff00ff
255,0,255
maroon
#800000
128,0,0
mediumaquamarine
#66cdaa
102,205,170
mediumblue
#0000cd
0,0,205
mediumorchid
#ba55d3
186,85,211
mediumpurple
#9370db
147,112,219
mediumseagreen
#3cb371
60,179,113
mediumslateblue
#7b68ee
123,104,238
mediumspringgreen
#00fa9a
0,250,154
mediumturquoise
#48d1cc
72,209,204
mediumvioletred
#c71585
199,21,133
midnightblue
#191970
25,25,112
mintcream
#f5fffa
245,255,250
mistyrose
#ffe4e1
255,228,225
moccasin
#ffe4b5
255,228,181
navajowhite
#ffdead
255,222,173
navy
#000080
0,0,128
oldlace
#fdf5e6
253,245,230
olive
#808000
128,128,0
olivedrab
#6b8e23
107,142,35
orange
#ffa500
255,165,0
orangered
#ff4500
255,69,0
orchid
#da70d6
218,112,214
palegoldenrod
#eee8aa
238,232,170
palegreen
#98fb98
152,251,152
paleturquoise
#afeeee
175,238,238
palevioletred
#db7093
219,112,147
papayawhip
#ffefd5
255,239,213
peachpuff
#ffdab9
255,218,185
peru
#cd853f
205,133,63
pink
#ffc0cb
255,192,203
plum
#dda0dd
221,160,221
powderblue
#b0e0e6
176,224,230
purple
#800080
128,0,128
red
#ff0000
255,0,0
rosybrown
#bc8f8f
188,143,143
royalblue
#4169e1
65,105,225
saddlebrown
#8b4513
139,69,19
salmon
#fa8072
250,128,114
sandybrown
#f4a460
244,164,96
seagreen
#2e8b57
46,139,87
seashell
#fff5ee
255,245,238
sienna
#a0522d
160,82,45
silver
#c0c0c0
192,192,192
skyblue
#87ceeb
135,206,235
slateblue
#6a5acd
106,90,205
slategray
#708090
112,128,144
slategrey
#708090
112,128,144
snow
#fffafa
255,250,250
springgreen
#00ff7f
0,255,127
steelblue
#4682b4
70,130,180
tan
#d2b48c
210,180,140
teal
#008080
0,128,128
thistle
#d8bfd8
216,191,216
tomato
#ff6347
255,99,71
turquoise
#40e0d0
64,224,208
violet
#ee82ee
238,130,238
wheat
#f5deb3
245,222,179
white
#ffffff
255,255,255
whitesmoke
#f5f5f5
245,245,245
yellow
#ffff00
255,255,0
yellowgreen
#9acd32
154,205,50
Change the Color of the Background
CSS Code View
Live Demo
Font Properties
Basic properties that style the font. Children inherit these properties from parents.
CSS Code View
Live Demo
Font Style Properties
More stylistic properties to change the appearance of fonts.
CSS Code View
Live Demo
Font Style Properties
Text Layout Properties
These properties have to do with the inline flow of the characters. The children inherit all of these properties from their parents. I have created three selectors, one for the header h3., one for the body text p and one for the superscript inside the body text.
CSS Code View
Live Demo
Text Layout Properties
Change the text by applying different styles. Notice that when you make a mistake, the style reverts to the default style. The 1st selector is an h3. The 2nd selector is a p. The 3rd selector is a span acting like a superior (sup) tag and the 4th selector selects an actual sup tag and colors it red.
Box Properties
Each HTML element is a box. The size of this box is determined by its inheritance, the content, or by a CSS rule. By default, the width of the box is inherited from the parent and the height is determined by the content. That makes the box is as wide as its parent, or the width of the window when the parent element is the body tag.
The box remains invisible unless it has a border or a background.
The box has four sides. You can target each side’s margin, border and padding at once padding: 10px; the vertical and horizontal sides separately padding: 0 auto or each side independently, starting at the top and moving clockwise: top, right, bottom and left padding: 0px 30px 60px 90px;.
CSS Code View
Each element is a box. The size of the box is determined by the parent element, or if CSS is used, the box can have a width, height, padding, border and margins. Padding and the border is added to the size of the content.
Border Properties
The border usually uses a shorthand where the width, color and style are given in this order: border: 10px solid #f68;. Leaving any one of these out breaks the border. Here is a list of the styles:
none: No border. Color and width are ignored (i.e., the border has width 0 unless the border is an image.
hidden: Same as none but has different behavior in the border conflict resolution rules for border-collapsed tables.
dotted A series of round (square?) dots.
dashed: A series of square-ended dashes.
solid: A single line segment.
double: Two parallel solid lines with some space between them.
groove: Looks as if it were carved in the canvas.
ridge: Looks as if it were coming out of the canvas.
inset: Looks as if the content on the inside of the border is sunken into the canvas.
outset: Looks as if the content on the inside of the border is coming out of the canvas.
CSS Code View
Live Demo
You can change the border attributes including the style yourself.
Thematic Break
The Thematic Break, also knows as the horizontal rule in previous version of HTML has the following CSS for the default style. You can change that.
CSS Code View
Live Demo
Margin and Padding Properties
These properties belong to the box model, and are similar, in that they create or subtract space from the sides of the box. I created two elements to show how border collapse works when two margins overlap and only the largest margin is used.
CSS Code View
Live Demo
BOX 1: The margin is set for 20px auto, meaning that the box has 20 pixels of margin on top and bottom, and the left and right margins are automatically adjusted to center the box, possible only because the box has a declared width
BOX 2: Notice that even though both boxes have a 20px margin, that margin collapses between the boxes. If you play around with the numbers, you will see that it collapses the smaller margin into the larger margin.
List Properties
Lists are used for any element that acts like a list. Many elements are styled as lists, and when that happens, its important to take control over the list element, so that the items styled take on the look that does not necessarily look like a list. Menus are a great example of this but many other items are also considered candidates for being styled as lists. If the list-item-style is turned to one of the automatically incrementing counters, the un-ordered list is automatically turned into an ordered list.
CSS Code View
Live Demo
List Item
List Item
List Item
List Item
List Item
The HTML for the unordered list
<ul>
<li> List Item </li>
<li> List Item </li>
<ul>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</li>
</ul>
Live Demo
Have numbers span ordered lists by using the attribute start="3" or 55 or 77
Tables used as tables are part of the HTML/CSS landscape. Tables used for layout purposes are to be banished. That said, if you want to style a table, its best to create as many hooks in it as possible. This means that a table can have table header, a table footer and multiple table bodies. It is also possible to style columns. The code and an explanation of how the table works is reproduced below:
CSS Code View
The Caption Holds the Title of the Table
Head 1
Head 2
Head 3
table cell item
table cell item
table cell item
table cell item
table cell item
table cell item
table cell item
table cell item
table cell item
table cell item
table cell item
table cell item
table cell item
table cell item
table cell item
table cell item
table cell item
table cell item
table cell item
table cell item
table cell item
table cell item
table cell item
table cell item
The Footer is a Place for Information About the Table.
The HTML code for the table can be divided into parts, and each can be styled separately. There are table headings, footers, data cells and captions and rows, all of which can be styled. The even and odd table rows are styled using pseudo selectors. If you look at the code, you can see that the table caption comes first, then the table header, two table bodies that contain the table rows and the table data cells and finally a table footer. The row tags allow the three rows to be styled individually, though that too could be handled by pseudo selectors.
Pseudo Classes
Pseudo classes are additional classes that belong to the same element. They are most frequently applied to the link element for navigation, where hover and click or visited states can be applied to that link, though any element can have hover states applied:
A collapsable guide to the layout modes. All of the work is being done by the last CSS rule using the pseudo class not, as in not target or hover li:not(:target):not(:hover) .
CSS Code View
Live Demo
Here you will find links to the layout modes article, including the document flow, the positioning of the elements within the document flow and display, z-index and overflow properties.
HTML
<nav>
<ul>
<li id="nav-about"><a href="#nav-about">Layout Modes</a>
<ul>
<li><a href="#layoutModes" target="_blank">Layout Modes</a>
<li><a href="#block" target="_blank">Block Display</a>
<li><a href="#inline" target="_blank">Inline Display</a>
</ul>
<li id="nav-projects"><a href="#nav-projects">Positioning</a>
<ul>
<li><a href="#positioning" target="_blank">Normal</a>
<li><a href="#relative" target="_blank">Relative</a>
<li><a href="#absolute" target="_blank">Absolute</a>
<li><a href="#fixed" target="_blank">Fixed</a>
<li><a href="#floats" target="_blank">Floats</a>
<li><a href="#tables" target="_blank">Tables</a>
</ul>
<li id="nav-interact"><a href="#nav-interact">Other</a>
<ul>
<li><a href="#display" target="_blank">Display</a>
<li><a href="#zindex" target="_blank">Z Index</a>
<li><a href="#over-flow" target="_blank">Overflow</a>
</ul>
</ul>
</nav>
<div>
Here you will find links to the <a href="http://b.parsons.edu/~dejongo/04-the-layout-modes" target="_blank">layout modes</a> article, including the document flow, the positioning of the elements within the document flow and display, z-index and overflow properties.
</div>
</div>
Pseudo Elements
Pseudo classes add elements to existing elements, in CSS rather than in the document. They can be first letter and line in an inline element and the before and after a block element.
CSS Code View
Live Demo
Pseudo Elements
A pseudo element I use often is the first-line pseudo element.
But other pseudo elements, particularly the before and after, are powerful, as you can see in this posted notes look complete with a page curl above right, created by the before element on the div above, without additional elements in the HTML. Quotes as in <q>quotation marks</q>can be given quotation marks using the before and after pseudo elements.
See more such wizardry in the creation of 84 icons, using nothing but such CSS tricks.
The trick with the folded corner is a really thick border that surrounds the empty content between the quotes of the css content property. The corners of the border meet at a 45° angle, and when the content is nothing, all four corners meet at the middle in a sharp point. Put two such corners together and you get the triangle used to shape the page curl. All you have to do is fill those two sides with the color of the page curl, and fill the other two sides with the background color to block out the corner of the note, which would otherwise stick out.
Cursor
Give the user feedback. Changing the cursor is an instruction away. Roll over the square to see the change.
CSS Code View
Live Demo
Roll the cursor over this square to see it change to a little hand with a pointing finger cursor. Change the cursor in the CSS view to check out all of the cursors.
So much more
30 Seconds if CSS. Ready made CSS snippets to help you build your website.
CSS is in the middle of changes that will eventually require me to adjust the way I teach the course. The changes have not yet settled down as I wait for best practices to become clear. In addition, artificial intelligence is changing the landscape, providing editorial, image, and design solutions and code to students where there had been none. It will take a while before the dust has settled. In the meantime, I’ve accumulated a lot of material through the years, so changing the course is easier said than done. I’ve integrated some of the new topics along with making sure that the old ways remain available. Extra credit to anyone giving me useful feedback on improving the website.
Collaborate, be compassionate, and creative!
Tim Berners-Lee, the person who founded the World Wide Web, posted an open letter on the web’s 35’s birthday (March 23, 2024) discussing the state of the web, affirming his original intention, the three Cs: the intention for collaboration, to foster compassion, and generate creativity, and criticizing its commercialization and monopolization. That is what the web is about. This is your community. Collaborate, be compassionate, and creative!
What do you hope to achieve this semester?
Write a few sentences expressing what you hope to achieve this semester, if you haven’t already done so in class. You should do this first thing before you read or hear how I will proceed. This will provide me with insight into what you expect, and will provide you with an indicator of your original expectations. You will post this on the landing page you will create next week.
Inspiration
Building a website opens you up to your target audience. Exposure to what you perceive to be your target audience is the biggest benefit of this course. Capitalize on that opportunity! It is not learning how to build websites, which is easy enough, and gotten easier with AI, but to use that knowledge to discover, target, and convert your target audience: to sell yourself. Use this course to position yourself within your professional horizon. It is an opportunity to organize, test out, innovate, secure and professionally develop yourself. The future will be shaped by AI. What is AI? AI will only become more ubiquitous, so you might as well get to know it. I expect you to use AI to help you confront AI, and to come out on top.
Let’s say your major is product design. When the instructor asks you to come up with a product idea, those ideas most likely originate out of your own interests, of what you want to do, or out of what you think your teacher requests. But by building a website to sell that project, you start thinking about the target audience. Who is the product for? How will they use it. How are similar products marketed? What can I learn from the competition? Do the research. Check out other websites. As the competition is established, they probably know a thing or two about how to reach their customers. This is the market you have to enter.
Working to define your target audience, figuring out how to best capture their attention, and selling your product will impact how you communicate whatever commercial art you are working on here at Parsons. Being attentive to the real world and targeting your work is the best way to initiate any product. Doing so will make you more competitive. A marketing strategy for your product will force you to create a more thorough and complete job from the outset.
The course demands you to think about your target audience. Who will use your website? Who are you building it for? This is an opportunity to think about, investigate, and target your work. Whatever your major: photography, illustration, fashion design, etc, your work will improve when you take your target audience into consideration. Building a website around that goal can only reinforce your concentration as to who your target audience is. Haven’t thought about it much? This is a commercial design school. You are being educated to solve the problems that other people want solved. You need to be clear as to what the problems are, so you can solve them. A website gets you into that space, so you can test things out.
What do I hope you achieve this semester?
I hope that this course will prime you to always consider your target audience for all your creative commercial work while at Parsons and beyond. Nothing keeps you from developing a website and marketing materials for whatever projects you will create from here on out.
I recently ran into the son of a friend of mine who picked up a new girlfriend who recently graduated from the fashion design program at Parsons. She did develop a generic website, using SquareSpace or Wix, I’ve forgotten. She did not investigate her target audience until the very last year, and was not prepared to market her work until the last moment. After telling her about this course, she wished she had taken something like this early on in her student career, so she could have been up and running by the time she graduated rather than figuring out how to do that after the fact. This course is about developing who you are and your professional career. Think of it as an opportunity and treat it that way. The real grade for this course is earned by who you become, not whatever letter grade on a transcript that few will ever take note of.
Grades
Officially, three absences is
There are 20 assignments I use to grade your progress, but the main deciding factor is the progress you exhibit between the midterm assignments and the final. I expect professional looking, validated websites that take user experience into account. I provide feedback on your work throughout the semester, and grade everything at the end, which allows for revisions to earlier or incomplete work without penalty. If you have any questions as to your standing in the course, please ask me.
Everyone will not have had the same exposure to the plastic language of art, design, and graphic problem solving, and just because you can illustrate, in my experience, is no indication that your graphic design sense is any good. To help amend any visual literacy deficiencies, there is supplementary information and the vignelli Canon to help everyone achieve visual literacy. I expect the Communication Design Minors to be educated visual and communicative problem solvers. These resources will help you achieve visual literacy. Otherwise, my grade will not reflect the talents you do not bring to this class. I evaluate each person on their own terms, and do not compare students according to their fluency in design, etc. Seek help and advice from me or your peers, not only to solve problems in your code, but for visual and design issues as well.
Communication Design Attendance Policy
In order to foster a studio learning environment where we all learn from peers and through dialogue, timely and regular attendance is a strict expectation for all Communication Design students. Students who are not present in class are unable to meet the learning outcomes of a Communication Design course. Thus, it is an expectation of the program that students attend all classes. We recommend that students reserve the use of absences for unexpected situations.
Should students need to miss class for personal reasons, students are allowed the following number of absences:
For classes meeting once a week, students are allowed 2 absences. For classes meeting twice a week, students are allowed 4 absences. Any absence beyond the allowed absences will result in an automatic failure (F) for the course. There are no excused absences, and doctor’s notes are not necessary.
A student is deemed tardy if a student fails to arrive within 15 minutes past the beginning of class. 2 tardies will result in an automatic absence. A student who arrives an hour past the beginning of class will be deemed absent.
Per Parsons policy, faculty are asked to notify the student’s advisor and program director if the student has missed a significant portion of class time: 2 absences for a once/week class or 4 absences for a twice/week class.
Expectation of Students
Students are expected to adhere to the CD Attendance Policy. Save your absences for unexpected events. Missing class for any reason (including quarantining) will count as an absence.
Students are responsible for ensuring their computers are working
Students are expected to fully and actively participate in class.
Learning how to Code
Learning to code requires internalizing the rules and methods associated with HTML and CSS. You learn by coding. Internalize HTML and CSS by creating websites. Be ready to explore how to code. The World Wide Web is the teacher that has every answer. Effective web searches are a great way to understand the problems that you encounter.
Start with the basics and try it yourself. Take the initiative and build websites. The magic word is repetition. Your ability to problem solve with code improves with each website you build. The more websites you build, the better you become.
Chat GPT and an increasing number of AI competitors are available to help you code, create pictures, write copy, etc. Get to know them and take advantage of these resources. But first you have to be familiar with the basics of HTML and CSS, or you will have difficulty integrating the code they produce. I want you to use AI to help create websites that go beyond what you can code on your own. Your websites need to stand out, to be different from other websites, to reflect who you really are, and catch the attention you deserve. To need to learn how to hand code to make that unique and special website.
There are other ways to expedite the creation of a website, like using Twitter’s Bootstrap to realize your site. But you still need to have the basics down to take advantage of Bootstrap, and it takes time to learn Bootstrap that is not spent learning HTML and CSS. Though Bootstrap websites are professional, you cannot generate a totally unique site the way you can by hardcoding it.
Other programs don’t require that you know any HTML or CSS, and provide an InDesign-like interface experience. I’ve had students use Webflow, for example, and the websites looked professional, but do not necessarily stand out. The time it takes to learn such a program is better spent learning how to code. It provides you with more flexibility in the end, to create something that stands out.
I haven’t used Adobe Dreamweaver in a long time, but I’ve used it at an ad company many years ago. They did not use the ‘what you see is what you get’ design interface, only as a development platform, because of its tight integration with the other adobe apps that the rest of the creatives used. I don’t know if Dreamweaver is still in use, but you are better off using your time to learn to code by hand.
Plagiarism
You are free to use any and all artificial intelligence and other web and code services to create your work. You can beg, borrow, and steal, just let me in on it, and be able to defend it, if I ask questions. By that I mean that you understand what the code is and what it is doing. The one requirement, if you use outside help, that you document where your code comes from. I will consider it plagiarism if you don’t, which can result in a) failure of the assignment or b) failure of the course, with multiple instances leading to possible suspension or even being expelled from the school. This is from the The New School Academic Honesty And Integrity Policy, so don’t pass off as yours what someone else created.
Document everything that you have not directly created and let me know what services you have used, etc. There is a place in the landing page for you to do that. Most every service can be traced back in the structure of the code, but I prefer to know ahead of time where everything came from, rather than having to figure it out. That makes it easier for me to evaluate you on the basis of the code you write, and not the code you did not write.
Course Design
⁃
You only learn to code by doing it. My aim is to get everyone coding by the midterm, so you can practice coding on your own projects for the rest of the semester, with the strategy that you grow secure in your ability to code by the time you leave this course. I front-load the course. That means the first half of the course is demanding and requires you to keep up with the work. I ease up in the second half of the course, to give you the freedom to apply what you have learned on your own projects, or to catch up if they did not fully finish everything by the midterm. This format works for most students. Some students wish I would continue to provide guidance in the second half of the semester. I may figure out additional projects, but if I don’t, and if you are one of those students, ask me, and I’ll be happy to assign additional guidance, projects, and whatever it takes to keep you engaged.
Seniors can choose to spend the entire course developing their portfolio or senior projects (instead of the final assignment, where everyone else has to sell something other than themselves.) I recommend you to sell something other than yourselves, as that allows for a more effective application of your creative talents. By completing the course successfully, you should be able to build a better portfolio website in short order. You’ll learn more when you’re not stuck on the same project for the entire 15 weeks, and portfolio websites are rarely complicated enough to warrant the extra time. But I understand the pressure to build out and perfect one’s portfolio site, so the option is there.
Communication Design Minors are held to department standards for coding by the end of the semester.
Easy access to artificial intelligence (AI) transforms this course, since it is possible to get the chat bots to write code for you. But to take advantage of that, you need to understand how to code, to integrate what it produces. While there are no restrictions of the use of chat bots to create code for you, you are to attribute where the code came from whenever you do not write the code yourself, be it from a website, or if a chatbot helped you write the code. This can be done using the comment element.
Why learn how to code websites by hand for the web? There are many website builders that allow a person without much prior knowledge to create a good-looking website without hand coding HTML or CSS. The tradeoff is that these web experiences use templates, making it more difficult to differentiate yourself from other web experiences. In today’s competitive world, to stand out in a captivating way is a plus.
You should be able to follow me in class and glean most everything you need to learn how to code. If not, the course portal has your back.
This website is here to help you. Use this portal to help you catch up when you’ve missed a class or need a reminder later on. All the lectures are written out. If you have trouble with a topic as presented in class, read the topic on the website, and follow the links and examples.
Make up the material of a missed class before the next class. Students entering the course after the first or second lectures need to read all the material as soon as possible and complete all assignments to catch up with the rest of the class.
Much of the learning takes place as you write code. Learning to build websites is a cumulative effort: basic skills are necessary for building advanced skills. Watching me write code is not the same as writing code yourself. You start learning when you try to overcome the mistakes you have made. Don’t be intimidated. Start simple and you will become more adventurous as you gain confidence. Most of you will be wondering what all the fuss was all about by the time the midterm arrives.
The scope of this course is coding HTML and CSS with a smidgin of PHP and JavaScript thrown in. A student needs a solid foundation in designing and developing HTML and CSS before they deploy JavaScript to develop behaviors. That makes it optional. Anyone can use existing JavaScript code, and if you already know the language, don’t let me stop you.
If you missed a class or do not completely understand a topic well enough to move on, go back to the supporting material. If you have difficulties understanding the material or completing your homework, email me or visit the Learning Center. I recently found out that the department has students available for you to ask questions at the Design Lab located on 10th Floor of 2 W 13th Street. Just go in and there should be people there to help you with your code. This may be better help than the university learning center.
In-Class Code Checking
Class Assignments require me to personally check your code in class for correctness. Many of you have laptop screens and display the code in small type, or reverse the color. While I want you to set your preferences that work best for you, these issues make it difficult for me to find that needle in a haystack, which is what it is like to discover errors in existing code. To facilitate my correcting your work, please increase the size of the code so I can easily see it, use black text on a white background, and move your laptop to the side, so I can sit directly behind it. The corrective glasses I wear operate optimally at a specific distance two or so feet from the screen.
I mention this because it is possible that I encroach on your personal space as I situate myself to read your code, and I would prefer not doing that. This is especially important if you are sensitive about your space. Some people are more sensitive than others. I work to be respectful of everyone, knowing that there are many personal and cultural differences at play. Please make sure I can view your code in a way that is both comfortable for me and for you.
Do not hesitate to ask or email me if you have questions.
I am always surprised by the number of students who do not ask me for help when they are having problems. You can always ask me. Email me, and if I can’t answer the question over email, we can schedule a zoom meeting to figure out what the story is. Remaining silent when I ask, if anyone has any questions, communicates to me that you understand what the story is, and that you have no questions. Speak up if that is not the case. If you do not like to speak up, email me.
Most answers can be found in this website, or on the web. Write full sentences in Google Search to ask your question, as in “how do I create a link in HTML.” Or just ask a chatbot. If you can’t figure out the problem on your own, ask me. There is so much information that it’s not always easy to connect it all with what you need at that moment. So you get stuck. Know that most of the mistakes happen in the first four weeks of the course. Use validator with some frequency to catch any issues as you code. Sometimes in CSS the mistake happens right before the css code that does not work. By the midterm, the mistakes will mostly disappear.
Do a through job on the first assignment and the worksheet. The writing you complete provides the repetition necessary to make marking up content second nature, and that makes coding web pages a lot easier. I’ve had students who skimped and the result was they did not internalize marking up the content, and without that foundation, their progress was slow, and coding remained difficult.
There are many resources on the web from which to learn how to code. Do make sure that the information is current or you will be learning ways that are no longer practiced. A comprehensive resource is Mozilla’s Mozilla developer network (MDN) which includes individualizedAI Help. Also look into Google’s Chrome Developer Relations web.dev. The important thing is that you practice writing code and to do it often. The only way to learn to write code is by writing code. Making mistakes is part of the process. The mistakes that stop you dead in your tracks disappear after a week or two of doing the work. Do not become discouraged when you get stuck. There are many ways to solve most problems. Take a step back and try again. Use validator to help you avoid mistakes.
And what if you do not like my teaching style or this website?
There are people who cover the basics from the beginning. CSS Tricks is Chris Coyer’s website and a great resource for all things for building websites. His Where do you learn HTML & CSS is 2020 is a great place to start. But many people attempt to communicate the basics, like How to Build a Website with HTML to help you learn the basics. I googled that and there is so much more so finding alternatives to me is easy enough.
The real grade for the course
The grade that goes on your transcript is not as important as learning the basics of web design well. You could gain a career out of front-end web development, as previous students have. You are planning to enter the workforce, a good website can only help. Whatever you want to do with your life is at stake. Work as if that is the case, and your grades will be fine. Everyone is different. Not everyone needs to sell their creativity on the open marketplace. I will be grading you on your work, and will not be comparing you to others in the course. I look to see how much each person improved from the first assignments to the last. It is easy to see the effort in your projects, and effort counts.
Getting Help:
Ask questions during the lectures and code demonstrations in-class.
Read and watch videos on the website.
Do the homework.
Validate your work often. This will keep you from making mistakes.
Email me whenever you have questions.
Search the web for solutions. Type the solution you’re looking for in complete sentences.
Visit the Design Lab located on 10th Floor of 2 W 13th Street. Just go in and there should be people there to help you with your code.
ask a chat-bot for help, or to solve the problem for you.
Visit the Learning Center. They will help you with your homework. Slots are limited, so sign up in advance.
Book is optional. It is ancient and I don’t refer to it in the course. HTML5 & CSS3 Visual QuickStart Guide (8th Edition). Some students like to read a book, and if you are one of those students, please use this or any other HTML/CSS book to do so.
About this Website
I present each class systematically. Figuring out the topic, the information you need, the homework, and support files, is straightforward. Otherwise, you can use the search bar at the top of the window to find what you are looking for.
The fixed menu on the right-hand side covers every class, in addition to often used reference websites. Clicking on the link loads the class page. I structure each page in the same way, except this one, as it has welcome information.
A shortcut to each class, the associated pages, and to the homework is available on the top menu.
Introductions. Overview of course, course objectives, outcomes and expectations. Go over syllabus. Introduce hypertext markup language. Activity: Analyze Website. Activity: Create HTML file, start first assignment in class.
Write out expectations for the course. Use OpenAI to interrogate your future plans. Read Why Do All Websites Look the Same? Watch introductory videos. Analyze the elements of a website. Create a content sheet for the main page of a site that epitomizes the design field you are in. Write down the goals of the site. Use images. Mark up the assignment.. Due: Next Week. Email me if you have questions.
Next up are the goals and outcomes of this course. This is what you are to learn.
Much of the learning is scaffolded, meaning that what you learn is a necessary part of a larger skill set that you need to be familiar with. These learning outcomes need to be acquired before the next class meets, as it likely assumes this knowledge and builds upon it. If you miss a class, you are responsible for making up the class you missed by going over all of the information.
Goals
The goals of this unit are to:
Introduction to the World Wide Web.
Understand the content strategy that goes into creating websites.
Learn how to mark up content.
Set up a server at Parsons/New School using Fetch.
Start first assignment page on the web.
Outcomes
At the end of this unit, students will:
Be familiar with the web and the code that generates web pages.
Understand the elements that make websites work.
Learn basics of HTML and CSS.
Mark up a simple page.
Set up server space at b.parsons.edu.
Publish a page on the web.
If the class did not cover all of these topics, relax. They will be covered next week.
The topic summary and homework assignment are followed by a materials section that has all of the linked files associated with the course.
Green and red colored links are required reading.
Green signifies conceptual overview that helps put the material in perspective.
Red signifies core knowledge that you need to know to continue. That means you should reread the material if you do not understand, or read the corresponding chapters in the book.
Links without color are suggested readings, but not required.
The homework link takes you to the homework for the week.
Materials
Additional material for this unit can be found by following the following links:
The estimated breakdown of time it should take for each topic to be adequately covered in class. Some topics are summarized in a few minutes. Others are demonstrated at length. Emphasis is on those topics that help you master the skills needed to build web pages, which are usually done through in-class activities. What is said and done in class overrides what is written here.
Step-by-Step
15
Welcome, write a few sentences about your expectations for the course as we go through the introductions, and go through the syllabus
5
Overview of the course and class portal.
25
Exploration of the web. Peek behind web page to look at the code.
15
Activity: Create content by writing.
10
Break
30
Demo/Activity: Marking up the content. Writing HTML
Paying attention in class is half the battle. Putting into practice what’s covered in class is the other half. Each class teaches a necessary skill. It is your responsibility to learn it.
Code a little each day, not a lot once in a while. You’ll get over the frustration soon enough. Coding web pages is not so difficult once you get over the minor mistakes that everyone makes when they start.
There are two major assignments: a midterm portfolio and a professional, standards compliant, website that sells a product for the final.
Validate!
Why validate?
The core reason to run your HTML documents through a conformance checker is simple: To catch unintended mistakes—mistakes you might have otherwise missed—so that you can fix them.
Validate your work often! The validator is your friend that will point out your mistakes.
Go beyond validation by measuring your page quality using web.dev’s web page audit. It will measure your performance, accessibility, best practices, and Search Optimization, give you hints on how to fix it, and teach you how to do it better as well.
Do not be alarmed if there are 50 mistakes. That can happen if you haven’t been using the validator as you should. One mistake can flag a lot of other issues. Fixing one problem can make other problems disappear.
Many of the units point to a number of websites that exemplify current practices. This helps you see how the web implements the topics discussed in class.
Current Practices
A lot of websites deserve to be looked at as standard bearers for the web. A few that have stood the test of time:
CSS Zen Garden Original CSS experiment in 2003 that explores what is possible using CSS and galvanized the web toward standards compliant websites.
The Rijks Museum opened the floodgates for the new single page jQuery web design experience. Others had come before but it pushed behaviors over the top. The user experience and content interaction are impeccable.
NY Times The New York Times soon followed. A standard setting newspaper that helped move the web away from its addiction to tables in 2007 has just been redesigned using jQuery animation. Follow the link to see how design considerations led to a more engaging web experience.
The New School Jumped onboard with the JQuery look in 2014 as well. It’s redesigned the website several times since then. The Parsons Web Site.
Apple helped define design as the central tenet of computer usage and did so against the establishment for many years. Now it is the establishment. Its website is has remained similar for many years. It is sparse, to focus on what is important while hiding a site of vast complexity.
Facebook Not for what it looks like but for having taken over such a big part of the web. It has walled off a large section of the web and privatized the experience. The privacy is good for users, who feel free to share their experiences with friends and family. Except there is a back door. Facebook shares details with corporations to target advertising and government spy agencies. That’s not all they collect, so watch out what you say or do. That’s the price of freedom, or so they say.
The Bulletin of Atomic Scientists: How a nuclear war would kill you — and almost everyone else.
In a nuclear war, hundreds to thousands of detonations would occur within minutes, resulting in tens to hundreds of millions of people dead or injured in a few days. But a few years after, global climatic changes caused by the many nuclear explosions could be responsible for the death of more than half of the human population on Earth. Good use of multimedia and paralax effect to tell the story.
There is nothing like examples to motivate your own work. Be motivated to do your best. You are the one who gains from learning these skills. I’ve had students, like Urara Ito, who entered the industry after taking the class.
The last item on the first few pages contains definitions for words used in the class that you should be familiar with.
Definitions
These are the terms that participants should be familiar with during this unit:
The W3 organization definitions of HTML, XHTML and CSS:
HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Webpages. HTML provides the structure of the page, CSS the(visual and aural) layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basis of building Web pages and WebApplications.
What is HTML?
HTML is the language for describing the structure of Web pages. HTML gives authors the means to:
Publish online documents with headings, text, tables, lists, photos, etc.
Retrieve online information via hypertext links, at the click of a button.
Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.
Include spread-sheets, video clips, sound clips, and other applications directly in their documents.
With HTML, authors describe the structure of pages using markup. The elements of the language label pieces of content such as “paragraph,” “list,” “table,” and so on.
What is CSS?
CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or:content) from presentation.
The Hypertext Transfer Protocol (HTTP) is a networking protocol for distributed, collaborative, hypermedia information systems.[1] HTTP is the foundation of data communication for the World Wide Web.
File Transfer Protocol (FTP) is a standard network protocol used to copy a file from one host to another over a TCP-based network, such as the Internet.
