-
+
@@ -830,7 +830,7 @@
04:00
-
+
@@ -877,7 +877,7 @@
02:00
-
+
@@ -909,7 +909,7 @@
06:00
I’ll reset the timer when you and your partner should switch roles!
-
+
@@ -1034,7 +1034,7 @@
02:00
-
+
diff --git a/docs/course-materials/materials/github-tools.html b/docs/course-materials/materials/github-tools.html
index 569bea3..0ad71b5 100644
--- a/docs/course-materials/materials/github-tools.html
+++ b/docs/course-materials/materials/github-tools.html
@@ -812,7 +812,7 @@
06:00
-
+
diff --git a/docs/course-materials/materials/readme-guidelines-slides.html b/docs/course-materials/materials/readme-guidelines-slides.html
index b3bae9b..9947b8f 100644
--- a/docs/course-materials/materials/readme-guidelines-slides.html
+++ b/docs/course-materials/materials/readme-guidelines-slides.html
@@ -441,7 +441,7 @@
05:00
-
+
@@ -468,7 +468,7 @@
01:00
-
+
@@ -503,7 +503,7 @@
03:00
-
+
@@ -530,7 +530,7 @@
04:00
-
+
@@ -557,7 +557,7 @@
03:00
-
+
@@ -584,7 +584,7 @@
02:00
-
+
@@ -683,7 +683,7 @@
02:00
-
diff --git a/docs/search.json b/docs/search.json
index 34b64c6..19e1b6c 100644
--- a/docs/search.json
+++ b/docs/search.json
@@ -1047,7 +1047,7 @@
"href": "course-materials/week2-customizing-websites.html#pre-class-prep",
"title": "Customizing Quarto websites",
"section": " Pre-class Prep",
- "text": "Pre-class Prep\n\nA. Create your own personal branding guide\nThis week’s pre-class prep is to create your own personal branding guide – a collection of visual and messaging resources (e.g. colors, fonts, logos, key words) used to create a uniform image of a brand. Here, that brand is you!\nWhy is it important that you consider your brand identity? Bren Teaching Faculty and science communication professional, Alex Phillips, summarizes this nicely in her talk Establishing Your Online Presence. She explains that establishing your brand identity:\n\ngives you more control over your online presence \ncreates consistency, which builds trustworthiness and credibility \nfilters decision-making about your online content \n\n\n\n\n\n\n\nInterested in reading more about the benefits of developing a personal brand? Check out these resources:\n\n\n\n\n\nMany thanks to Miya Scheble (MEDS career Development Program Manager) for sharing these resources!\n\nHow to build your personal brand as a newbie data analyst., by Bright\nBuilding a Personal Brand in Data Science: Your Key to Career Advancement, by Kannan Kasi\nUsing data science to build a personal brand, by Abigail (Abby) Shockley\nHow To Build a Personal Brand: 10 Tips, by Shayna Joubert\nHow to Build a Personal Brand Website: 5 Essentials to Include, by Kathryn Lang\nBuilding a Data Science Brand, by Kate Strachnyi\n\n\n\n\nFill out this personal branding guide template ahead of class. Read through sections I - VI, below, for guidance. Here is my personal branding guide, as an example.\n\nI. Write down your personal branding adjectives and key messages\n\n\n\n\n\n\n Expand for information on branding adjectives and key messages\n\n\n\n\n\nYour personal branding adjectives are words that guide how you present yourself and your brand. While you don’t need to explicitly state these words on your website (though you certainly can!), they serve to:\n\ndefine your brand’s personality\nconnect with your target audience(s)\nshape your tone (in both your writing, visual, and overall aesthetic styles)\n\nWrite down 3-5 adjectives to describe your personal brand.\nConsider:\n\nHow do you want people to perceive you?\nWhat do you want to communicate about yourself?\nWhat are your qualities, motivations, values, strengths? Your personal branding adjectives do not need to describe everything you already are – they can be descriptors of your long-term goals, values, and motivations.\nYou can check out some curated lists as a starting point – see lists by Lead Through Strengths and Branding by Juls, or explore the many others online\n\nOnce you’ve determined your personal branding adjectives, jot down a few key messages that capture the core ideas you want to convey about your brand.\nConsider:\n\nHow do these key messages incorporate / add context to your personal branding adjectives?\nAim for ~2-3 sentences (can be bullet points)\nSimilar to your adjectives, these key messages do not need to be explicitly stated somewhere on your website. However, you may find that they work well as taglines on your landing page (or even your LinkedIn profile), or help you (re)frame your website bio.\n\n\n\n\n\n\nII. Define your target audience(s)\n\n\n\n\n\n\n Expand for information on defining your target audience(s)\n\n\n\n\n\nYour brand does not need to speak to or reach everyone – instead, you should have a target audience(s) in mind. Knowing your audience helps you make decisions on:\n\nwhat types of content you publish\nhow you arrange content\nwhat level or types of details you need to include\nyour tone\n\nWrite down your target audience(s).\nSome examples include:\n\npotential employers (feel free to be more specific here as well, e.g. potential employers in the environmental data science sector)\nearly career data scientists or environmental scientists\nenvironmental data scientists who are also passionate about < fill in the blank > (Jadey Ryan is a great example of this!)\n\n\n\n\n\n\nIII. Select your typefaces / fonts\n\n\n\n\n\n\n Expand for information on selecting typefaces / fonts\n\n\n\n\n\nFirst, a few important definitions:\n\ntypeface (aka font family): the underlying visual design (e.g. Times New Roman, Helvetica, Roboto)\nfont: an implementation / variation of a typeface (e.g. Times New Roman in bold, Times New Roman in italic)\n\nDuring class, we’ll learn how to import font families from Google Fonts for use across our website. Explore the vast selection, and choose 1-2 font families. Add their names and hyperlinks to your personal branding guide.\n\nTips on choosing your font family(ies):\n\nStick to 1-2 font families. Using too many typefaces can overwhelm a reader. You can use one typeface across your entire website, or alternatively, choose one typeface for things like header text and another for body text.\nWhen in doubt, use a sans-serif font family. Sans-serif fonts work great everywhere, but are especially ideal for body text since they’re cleaner and easier to read. If you do want to use a serif font, it’s best to reserve those for any header text.\nMake sure your font family choice(s) have a variety of styles. If your font family doesn’t include bold or italicized styles, you won’t actually be able to apply those styles to your website. For example, Nunito comes in a variety of weights (boldness levels) and italic, where Sen comes in a variety of weights, but not italic.\nCheck out some visually-pleasing font pairings. fontpair has hundreds of Google Font pairings to browse!\n\n\n\n\n\n\n\nIV. Build your color palette\n\n\n\n\n\n\n Expand for information on building color palettes\n\n\n\n\n\nOne of the most exciting parts of building a website is deciding on which colors you’ll use. This can take some time and tweaking, so it’s helpful to think a bit about your palette beforehand. We’ll consider updating colors for the following website elements:\n\nNavigation Bar: navbar background color, foreground (text) color, hover highlight color\nMain Body: body background color, body text color, hyperlink color, in-line code color, inline-code background color\nPage Footer: footer background color\n\nWe’ll be using a language called Sass to create variables for each of the colors we plan to use throughout our websites (more on that soon!).\nIt’s helpful to draft up your color variables ahead of time (and save them to your personal branding guide) so that you easily copy them into your stylesheet during class. Define your color variables using the syntax, $variable-name: value;, where you decide on your variable-name, and value is a HEX color code (htmlcolorcodes.com is my favorite site for grabbing HEX codes).\nFor example, here are the color variables I’ll use for my website during the workshop:\n\n$dark-green: #858E79;\n$light-green: #D1D9CE;\n$cream: #FDFBF7;\n$gray: #64605f;\n$purple: #9158A2;\n$orange: #ad7237;\n\n\nTips on choosing your color palette:\n\nStick to about 3-4 main colors. Choosing too many colors can overwhelm readers. Consider using different shades of the primary color throughout your site, with a couple complementing / contrasting colors for important highlighted text and / or features. A good general rule of thumb is the 60-30-10 rule – your primary color should be used in ~60% of your design, the secondary color should take up ~30%, and your accent color ~10%.\nConsider what emotions your color choices evoke: Colors influence perceptions, emotions, and even behavior. Consider which colors best reflect your branding adjectives and key messages. See this post on color psychology, by HubSpot for guidance.\nUse a random color generator. My favorite is https://coolors.co/ – press the space bar to generate new colors. When you see one (or more) that you like, “lock” them in place by clicking on the lock icon. Continue pressing the space bar to generate new colors in the “unlocked” positions.\nGenerate a color palette from a photo / image. Have an interesting background in your headshot? Consider generating a palette off of it! Check out Color Thief for all your color stealing needs. Alternatively, explore pre-made palettes generated from trending Adobe Stock photos.\nConsider contrast and colorblindness-friendly palettes. I love the Let’s get color blind Google Chrome extension for simulating color deficiencies in the web browser, and the coolers color contrast checker for calculating the contrast ratio of text and background colors (it’ll even suggest modified colors to improve your contrast, if needed).\nGet inspired by other websites. And you don’t need to take inspiration only from Quarto websites. Just a small handful of examples sites with color schemes that I really love:\n\nAngelina Miller\nMeghan Hall\nNicola Rennie\nSylvia Canelón\nEmil Hvitfeldt\nElla Kaye\nRobert Mitchell\nMaya Gans\n\n\n\n\n\n\n\n\nV. (Optional) Create a personal logo and / or favicon\n\n\n\n\n\n\n Expand for information on creating a personal logo\n\n\n\n\n\nQuarto supports adding a personal logo to the top left corner of your website’s navbar (e.g. see my website). While completely optional, logos can be attention-grabbing and memorable, offering a way to distinguish yourself. If you’d like to start workshopping your own logo, consider the following tips and try out some free logo makers:\n\nTips & resources for creating a personal logo:\n\nKeep it simple\nConsider incorporating your name or initials (though not necessarily required)\nColors and fonts should match / complement the rest of your branding guide\nConsider creating a favicon (image displayed in a web browser’s address bar) that matches / complements your logo\nTry out one of these free logo makers:\n\nAdobe Express (this is what I used for my personal logo)\nCanva\nWix\n\n\n\n\n\n\n\n\nVI. Curate potential image assets\n\n\n\n\n\n\n Expand for information on image assets\n\n\n\n\n\nBranding image assets are visual elements that help to define a brand’s identity.\nThese include your logo, headshot, and any other photos / images you plan to use across your website. You might also include images that influence the overall aesthetic of your brand, but that might not necessarily be used as content on your site.\nBegin gathering your image assets and add them to your personal branding guide. You may consider checking out the following image collections for additional or supplementary images:\n\nUC Santa Barbara’s Digital Asset Library\nFree Ocean Landscapes, by Alex Phillips\nUnsplash (though many images do require a paid subscription to access)"
+ "text": "Pre-class Prep\n\nA. Create your own personal branding guide\nThis week’s pre-class prep is to create your own personal branding guide – a collection of visual and messaging resources (e.g. colors, fonts, logos, key words) used to create a uniform image of a brand. Here, that brand is you!\nWhy is it important that you consider your brand identity? Bren Teaching Faculty and science communication professional, Alex Phillips, summarizes this nicely in her talk Establishing Your Online Presence. She explains that establishing your brand identity:\n\ngives you more control over your online presence \ncreates consistency, which builds trustworthiness and credibility \nfilters decision-making about your online content \n\n\n\n\n\n\n\nInterested in reading more about the benefits of developing a personal brand? Check out these resources:\n\n\n\n\n\nMany thanks to Miya Scheble (MEDS career Development Program Manager) for sharing these resources!\n\nHow to build your personal brand as a newbie data analyst., by Bright\nBuilding a Personal Brand in Data Science: Your Key to Career Advancement, by Kannan Kasi\nUsing data science to build a personal brand, by Abigail (Abby) Shockley\nHow To Build a Personal Brand: 10 Tips, by Shayna Joubert\nHow to Build a Personal Brand Website: 5 Essentials to Include, by Kathryn Lang\nBuilding a Data Science Brand, by Kate Strachnyi\n\n\n\n\nFill out this personal branding guide template ahead of class. Read through sections I - VI, below, for guidance. Here is my personal branding guide, as an example.\n\nI. Write down your personal branding adjectives and key messages\n\n\n\n\n\n\n Expand for information on branding adjectives and key messages\n\n\n\n\n\nYour personal branding adjectives are words that guide how you present yourself and your brand. While you don’t need to explicitly state these words on your website (though you certainly can!), they serve to:\n\ndefine your brand’s personality\nconnect with your target audience(s)\nshape your tone (in both your writing, visual, and overall aesthetic styles)\n\nWrite down 3-5 adjectives to describe your personal brand.\nConsider:\n\nHow do you want people to perceive you?\nWhat do you want to communicate about yourself?\nWhat are your qualities, motivations, values, strengths? Your personal branding adjectives do not need to describe everything you already are – they can be descriptors of your long-term goals, values, and motivations.\nYou can check out some curated lists as a starting point – see lists by Lead Through Strengths and Branding by Juls, or explore the many others online\n\nOnce you’ve determined your personal branding adjectives, jot down a few key messages that capture the core ideas you want to convey about your brand.\nConsider:\n\nHow do these key messages incorporate / add context to your personal branding adjectives?\nAim for ~2-3 sentences (can be bullet points)\nSimilar to your adjectives, these key messages do not need to be explicitly stated somewhere on your website. However, you may find that they work well as taglines on your landing page (or even your LinkedIn profile), or help you (re)frame your website bio.\n\n\n\n\n\n\nII. Define your target audience(s)\n\n\n\n\n\n\n Expand for information on defining your target audience(s)\n\n\n\n\n\nYour brand does not need to speak to or reach everyone – instead, you should have a target audience(s) in mind. Knowing your audience helps you make decisions on:\n\nwhat types of content you publish\nhow you arrange content\nwhat level or types of details you need to include\nyour tone\n\nWrite down your target audience(s).\nSome examples include:\n\npotential employers (feel free to be more specific here as well, e.g. potential employers in the environmental data science sector)\nearly career data scientists or environmental scientists\nenvironmental data scientists who are also passionate about < fill in the blank > (Jadey Ryan is a great example of this!)\n\n\n\n\n\n\nIII. Select your typefaces / fonts\n\n\n\n\n\n\n Expand for information on selecting typefaces / fonts\n\n\n\n\n\nFirst, a few important definitions:\n\ntypeface (aka font family): the underlying visual design (e.g. Times New Roman, Helvetica, Roboto)\nfont: an implementation / variation of a typeface (e.g. Times New Roman in bold, Times New Roman in italic)\n\nDuring class, we’ll learn how to import font families from Google Fonts for use across our website. Explore the vast selection, and choose 1-2 font families. Add their names and hyperlinks to your personal branding guide.\n\nTips on choosing your font family(ies):\n\nStick to 1-2 font families. Using too many typefaces can overwhelm a reader. You can use one typeface across your entire website, or alternatively, choose one typeface for things like header text and another for body text.\nWhen in doubt, use a sans-serif font family. Sans-serif fonts work great everywhere, but are especially ideal for body text since they’re cleaner and easier to read. If you do want to use a serif font, it’s best to reserve those for any header text.\nMake sure your font family choice(s) have a variety of styles. If your font family doesn’t include bold or italicized styles, you won’t actually be able to apply those styles to your website. For example, Nunito comes in a variety of weights (boldness levels) and italic, where Sen comes in a variety of weights, but not italic.\nCheck out some visually-pleasing font pairings. fontpair has hundreds of Google Font pairings to browse!\n\n\n\n\n\n\n\nIV. Build your color palette\n\n\n\n\n\n\n Expand for information on building color palettes\n\n\n\n\n\nOne of the most exciting parts of building a website is deciding on which colors you’ll use. This can take some time and tweaking, so it’s helpful to think a bit about your palette beforehand. We’ll consider updating colors for the following website elements:\n\nNavigation Bar: navbar background color, foreground (text) color, hover highlight color\nMain Body: body background color, body text color, hyperlink color, in-line code color, inline-code background color\nPage Footer: footer background color\n\nWe’ll be using a language called Sass to create variables for each of the colors we plan to use throughout our websites (more on that soon!).\nIt’s helpful to draft up your color variables ahead of time (and save them to your personal branding guide) so that you easily copy them into your stylesheet during class. Define your color variables using the syntax, $variable-name: value;, where you decide on your variable-name, and value is a HEX color code (htmlcolorcodes.com is my favorite site for grabbing HEX codes).\nFor example, here are the color variables I’ll use for my website during the workshop:\n\n$dark-green: #858E79;\n$light-green: #D1D9CE;\n$cream: #FDFBF7;\n$gray: #64605f;\n$purple: #9158A2;\n$orange: #ad7237;\n\n\nTips on choosing your color palette:\n\nStick to about 3-4 main colors. Choosing too many colors can overwhelm readers. Consider using different shades of the primary color throughout your site, with a couple complementing / contrasting colors for important highlighted text and / or features. A good general rule of thumb is the 60-30-10 rule – your primary color should be used in ~60% of your design, the secondary color should take up ~30%, and your accent color ~10%.\nConsider what emotions your color choices evoke: Colors influence perceptions, emotions, and even behavior. Consider which colors best reflect your branding adjectives and key messages. See this post on color psychology, by HubSpot for guidance.\nUse a random color generator. My favorite is https://coolors.co/ – press the space bar to generate new colors. When you see one (or more) that you like, “lock” them in place by clicking on the lock icon. Continue pressing the space bar to generate new colors in the “unlocked” positions.\nGenerate a color palette from a photo / image. Have an interesting background in your headshot? Consider generating a palette off of it! Check out Color Thief for all your color stealing needs. Alternatively, explore pre-made palettes generated from trending Adobe Stock photos.\nConsider contrast and colorblindness-friendly palettes. I love the Let’s get color blind Google Chrome extension for simulating color deficiencies in the web browser, and the coolers color contrast checker for calculating the contrast ratio of text and background colors (it’ll even suggest modified colors to improve your contrast, if needed).\nGet inspired by other websites. And you don’t need to take inspiration only from Quarto websites. Just a small handful of examples sites with color schemes that I really love:\n\nAngelina Miller\nMeghan Hall\nNicola Rennie\nSylvia Canelón\nEmil Hvitfeldt\nElla Kaye\nRobert Mitchell\nMaya Gans\n\n\n\n\n\n\n\n\nV. (Optional) Create a personal logo and / or favicon\n\n\n\n\n\n\n Expand for information on creating a personal logo\n\n\n\n\n\nQuarto supports adding a personal logo to the top left corner of your website’s navbar (e.g. see my website). While completely optional, logos can be attention-grabbing and memorable, offering a way to distinguish yourself. If you’d like to start workshopping your own logo, consider the following tips and try out some free logo makers:\n\nTips & resources for creating a personal logo:\n\nKeep it simple\nConsider incorporating your name or initials (though not necessarily required)\nColors and fonts should match / complement the rest of your branding guide\nConsider creating a favicon (image displayed in a web browser’s address bar) that matches / complements your logo\nTry out one of these free logo makers:\n\nAdobe Express (this is what I used for my personal logo)\nCanva\nWix\n\n\n\n\n\n\n\n\nVI. Curate potential image assets\n\n\n\n\n\n\n Expand for information on image assets\n\n\n\n\n\nBranding image assets are visual elements that help to define a brand’s identity.\nThese include your logo, headshot, and any other photos / images you plan to use across your website. You might also include images that influence the overall aesthetic of your brand, but that might not necessarily be used as content on your site.\nBegin gathering your image assets and add them to your personal branding guide. You may consider checking out the following image collections for additional or supplementary images:\n\nUC Santa Barbara’s Digital Asset Library\nFree Ocean Landscapes, by Alex Phillips\nUnsplash (though many images do require a paid subscription to access){target=“_blank”}"
},
{
"objectID": "course-materials/week2-customizing-websites.html#lecture-materials",
+
diff --git a/docs/course-materials/week2-customizing-websites.html b/docs/course-materials/week2-customizing-websites.html
index 97f7af4..520ca99 100644
--- a/docs/course-materials/week2-customizing-websites.html
+++ b/docs/course-materials/week2-customizing-websites.html
@@ -528,9 +528,9 @@
05:00
VI. Cura
These include your logo, headshot, and any other photos / images you plan to use across your website. You might also include images that influence the overall aesthetic of your brand, but that might not necessarily be used as content on your site.
Begin gathering your image assets and add them to your personal branding guide. You may consider checking out the following image collections for additional or supplementary images:
-
-
- UC Santa Barbara’s Digital Asset Library -
- Free Ocean Landscapes, by Alex Phillips -
- Unsplash (though many images do require a paid subscription to access) +
- UC Santa Barbara’s Digital Asset Library +
- Free Ocean Landscapes, by Alex Phillips +
- Unsplash (though many images do require a paid subscription to access){target=“_blank”}