UCLA IoES Web Tools workshop
A presentation at UCLA IoES Web Tools Workshop in in Los Angeles, CA, USA by Scott Gruber
Moving science to action for the planet and all who live here. Web Tools Workshop Institute of the Environment and Sustainability www.ioes.ucla.edu
Design systems Speaking Presentations Print Web Institute of the Environment and Sustainability Code Maps and dataviz Infographics Project Management www.ioes.ucla.edu
Agenda HTML & CSS Web Accessibility Development Tools Codepen WordPress Institute of the Environment and Sustainability www.ioes.ucla.edu
What are the building blocks of the web? Institute of the Environment and Sustainability www.ioes.ucla.edu
HTML & CSS Institute of the Environment and Sustainability www.ioes.ucla.edu
HTML tag attributes <a href="https://www.ioes.ucla.edu">UCLA IoES</a> <h1 class="title">UCLA IoES</h1> <img src="/images/file.jpg" alt="Describe Image"/> Institute of the Environment and Sustainability www.ioes.ucla.edu
HTML tags and elements Institute of the Environment and Sustainability www.ioes.ucla.edu
HTML tag, attributes and values Institute of the Environment and Sustainability www.ioes.ucla.edu
Nesting elements Putting elements inside other elements is called nesting. Make sure closing tags don’t overlap:
<div> <h1>Headline</h1> <p>This is <em>emphasized</em> text.</p> </div> Institute of the Environment and Sustainability www.ioes.ucla.edu
Web page
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title here</title> </head> <body> <!-- Page content goes here.--> </body> </html>Institute of the Environment and Sustainability www.ioes.ucla.edu
CSS Cascading Style Sheets Institute of the Environment and Sustainability www.ioes.ucla.edu
Style Separate from Structure These pages have the exact same HTML source but different style sheets. Institute of the Environment and Sustainability www.ioes.ucla.edu
Style Rule Structure selector { property: value; } h2 { color: red; font-size: 2em; margin-left: 30px; opacity: .5; } Institute of the Environment and Sustainability www.ioes.ucla.edu
Declarations • • Properties are defined in the CSS specifications. Values are dependent on the type of property: • Measurements: px, em, rem, % • Keywords: center, italic • Color values: hex, RGB, HSL, blue • More Institute of the Environment and Sustainability www.ioes.ucla.edu
External style sheets Via link element in HTML: <head> <title>Titles are require</title> <link rel="stylesheet" href="/path/example.css"> </head> Institute of the Environment and Sustainability www.ioes.ucla.edu
Embedded style sheets Embedded style sheets are placed in the head of the document via the style element: <head> <title>Titles are required</title> <style> /* style rules go here */ </style> </head> Institute of the Environment and Sustainability www.ioes.ucla.edu
CSS Units of Measurement CSS provides a variety ways to specify measurements: Absolute units Have predefined meanings or real-world equivalents Relative units Based on the size of something else, such as the default text size or the size of the parent element Percentages Calculated relative to another value, such as the size of the parent element Institute of the Environment and Sustainability www.ioes.ucla.edu
CSS Units of Measurement Relative units are based on the size of something else: CSS provides a variety ways to specify measurements: Absolute units: px a unit equal to the current font size ex x-height, equal to the height of a lowercase x rem root em, equal to the font size of the html element ch zero width, equal to the width of a zero (0) vw viewport width unit (equal to 1/100 of viewport width) Relative units vh Based on the size of something else, such as the default text size or the size of the parent element viewport height unit (1/100 of viewport height) vmin viewport minimum unit (value of vh or vw, whichever is smaller) vmax viewport maximum unit (value of vh or vw, whichever is larger) Percentages Institute of the Environment and Sustainability em www.ioes.ucla.edu
Thank You sgruber@ioes.ucla.edu speaking.scottgruber.me twitter.com/scott_gruber 4356 Life Sciences Institute of the Environment and Sustainability www.ioes.ucla.edu
for free. You
can too.
Resources
The following resources were mentioned during the presentation or are useful additional information.
-
Codepen
-
CSS Reference
Use this CSS reference to browse an alphabetical index of all the standard CSS properties, pseudo-classes, pseudo-elements, data types, and at-rules.
-
HTML elements reference
This page lists all the HTML elements, which are created using tags. They are grouped by function to help you find what you have in mind easily.
-
UCLA IoES
-
UCLA IoES on Github
-
Web Accessibility Initiative
-
Web Content Accessibility Guidelines (WCAG) 2.1
-
MDN: Web technology for developers
-
Axe accessibility testing from deque
-
Google's web.dev
Review your site's performance and get detailed guidance on how to improve it.
-
Google Lighthouse
Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.
-
Web Page Speed Test
-
Pingdom Tools
-
A Book Apart
-
Smashing Magazine
