VKranendonk: /* Class 5 */

Welcome to the course Text and Code.

In this series of classes from the Publication Station we will use code to load and layout large bodies of text on the web. The visitor of your online publication will be given the option to display the text in several ways.

We will also make the publication interactive, allowing the user to find, filter and highlight the text. As a final touch we work on creating animated SVG’s exported from Illustrator.

[[File:Text-and-code-alice-underground.png|Screenshot website Alice's Adventures in the Undergound]]

== Program ==
=== Class 1 ===
'''Demos'''
# HTML/CSS
# CSS grid

'''Setup'''

During the classes we will work in groups of 3.

We will work in Visual Studio Code. [[Visual_Studio_Code|Download and install Visual Studio Code]].

To help you out with this project we have created some starter files.
# Go to the [https://gitlab.com/wdk-academy/text-and-code/ files]
# Click the arrow pointing downwards <br/> [[File:Gitlab-download-button.png]]
# Select "zip"
# This will download the files
# Unzip the files
# Open the folder in Visual Studio Code

'''Tasks'''

1. Use the [https://www.webscraper.io/ WebScraper.io] extension to scrape [https://www.gutenberg.org/files/11/11-h/11-h.htm Alice in Wonderland] or any other book you like.
* Follow [[Web_scraping|instructions]] on web scraping
* Place the JSON into your web project

2. Add a CSS grid
* Read the introduction on [[CSS_Grid]] and apply to your own website

3. Creating and adding images
* Create images with [https://www.craiyon.com/ Dall-E Mini]
* Add images via the `JSON` files

=== Class 2 ===

This class you will practice the art of reading documentation by adding fonts, filters and animations.
Next to this we practice reading and stealing code by adding filters (and a search) to your project.

# Add highlight functionality AND/OR a search
## Check out the example code in the /final folder
## Add highlight buttons AND/OR search field to your own project
## Create a nice looking menu with CSS Grid
# Make the grid responsive
## Check out the example code in the /final folder
## Change the CSS grid so that it is responsive
# Loading of fonts
## Pick some nice [https://fonts.google.com Google Fonts]
## You can also use [http://fontmap.ideo.com/ FontMap] to explore Google fonts
## Read [https://www.freecodecamp.org/news/how-to-use-google-fonts-in-your-next-web-design-project-e1ad48f1adfa/ this documentation] on implementation
## Add the fonts to your project
# '''Bonus:''' CSS filters and animations
## Read the [https://developer.mozilla.org/en-US/docs/Web/CSS/filter filters documentation]
## Read the [https://developer.mozilla.org/en-US/docs/Web/CSS/animation animation documentation]
## Add an animation to your own project

=== Class 3 ===

'''Duration'''
2 hours

'''Demos'''
# Steal code options with [https://www.gutenberg.org/files/28885/28885-h/28885-h.htm Alice in Wonderland]:
## View source
## View selection source
## Save page
# Working with anchors
# Creating an index

'''Tasks'''
# Copy the source of your own book
## Find your book on Gutenberg
## Check [[Stealing_A_Website|Stealing a Website]] and find the source
## Place the source via [[Visual_Studio_Code|Visual Studio Code in an index.html]] file.
# Separate the CSS from between the <style> tags in a CSS file, see [https://www.freecodecamp.org/news/how-to-link-css-to-html/ How to link CSS to HTML]
# Create your own index with anchors, see [[Hyperlink#Linking_withing_a_page|Linking within a page]]

'''Extra'''

# Add images (Search for: "How to add image HTML")
# Add fonts and style your document
## Pick some nice [https://fonts.google.com Google Fonts]
## You can also use [http://fontmap.ideo.com/ FontMap] to explore Google fonts
## Read [https://www.freecodecamp.org/news/how-to-use-google-fonts-in-your-next-web-design-project-e1ad48f1adfa/ this documentation] on implementation
## Add the fonts to your project
# Apply CSS grid
## Read the introduction on [[CSS_Grid]] and apply to your own website
# '''Bonus:''' Create an index with Javascript

=== Class 4 ===

'''Demos'''
# Show element with JS on mouseover
# Show multiple elements with JS

'''Tasks'''
# Use the JS functions to show images (or other elements) on hover
# Create a navigation with images

'''Extra'''

# Add images (Search for: "How to add image HTML")
# Add fonts and style your document
## Pick some nice [https://fonts.google.com Google Fonts]
## You can also use [http://fontmap.ideo.com/ FontMap] to explore Google fonts
## Read [https://www.freecodecamp.org/news/how-to-use-google-fonts-in-your-next-web-design-project-e1ad48f1adfa/ this documentation] on implementation
## Add the fonts to your project

=== Class 5 ===

For this class we will use [https://www.linkedin.com/learning/ LinkedIn Learning]. You can login to [https://www.linkedin.com/learning/ LinkedIn Learning] with your school account.

'''Tasks'''
# Not sure what an SVG is? Watch the video [https://www.linkedin.com/learning/learning-svg/what-is-svg?autoplay=true&resume=false&u=57693369 What is SVG?]
# Try drawing and SVG '''with 2 shapes''' using only code - [https://www.linkedin.com/learning/learning-svg/svg-shapes-overview?autoplay=true&resume=false&u=57693369 3. Creating SVGs in code]
# Open the SVG you made with Joseph in the browser and use the inspector to inspect and modify the SVG. Watch [https://www.linkedin.com/learning/learning-svg/svg-as-code?autoplay=true&resume=false&u=57693369 SVG as code].
# Add your SVG to your existing or new web project, see [https://www.linkedin.com/learning/learning-svg/add-svg-to-a-web-document?autoplay=true&resume=false&u=57693369 Add SVG to a web document].
# Animate your SVG with CSS, see video [https://www.linkedin.com/learning/css-animation-14153685/animating-svg-with-css?autoplay=true&u=57693369]. You might first want to understand CSS animations by watching [https://www.linkedin.com/learning/css-animation-14153685/css-keyframe-animation-fundamentals?autoplay=true&resume=false&u=57693369 2. Understanding CSS animations].

''Online tools are available as well to make SVG animations. Try out for example Vivus Instant''
# Make your own animated SVGs with [https://maxwellito.github.io/vivus-instant/ Vivus Instant]. For more advanced usage, check the [https://maxwellito.github.io/vivus/ Vivus] JavaScript library.
# Add the animated SVGs made with Vivus to your project

'''Extra'''

# [https://www.linkedin.com/learning/svg-clipping-masking-and-filters/clipping-masking-and-filtering-svg?autoplay=true&u=57693369 ]Clipping and masking with SVGs

== Tools overview ==

=== Explore ===
* [https://tropy.org/ Tropy]
* [https://openai.com/ Open-AI]

=== Used during classes ===
* [https://www.webscraper.io/ WebScraper]
* [https://csvjson.com/csv2json CSV2JSON]
* [https://cssgridgarden.com/ CSS Grid Garden]
* [https://huggingface.co/spaces/dalle-mini/dalle-mini Dall-E Mini]

Text And Code: Alice's Adventures in Computerland

2022-10-04T08:36:46Z

VKranendonk: /* Class 5 */

Welcome to the course Text and Code.

In this series of classes from the Publication Station we will use code to load and layout large bodies of text on the web. The visitor of your online publication will be given the option to display the text in several ways.

We will also make the publication interactive, allowing the user to find, filter and highlight the text. As a final touch we work on creating animated SVG’s exported from Illustrator.

[[File:Text-and-code-alice-underground.png|Screenshot website Alice's Adventures in the Undergound]]

== Program ==
=== Class 1 ===
'''Demos'''
# HTML/CSS
# CSS grid

'''Setup'''

During the classes we will work in groups of 3.

We will work in Visual Studio Code. [[Visual_Studio_Code|Download and install Visual Studio Code]].

To help you out with this project we have created some starter files.
# Go to the [https://gitlab.com/wdk-academy/text-and-code/ files]
# Click the arrow pointing downwards <br/> [[File:Gitlab-download-button.png]]
# Select "zip"
# This will download the files
# Unzip the files
# Open the folder in Visual Studio Code

'''Tasks'''

1. Use the [https://www.webscraper.io/ WebScraper.io] extension to scrape [https://www.gutenberg.org/files/11/11-h/11-h.htm Alice in Wonderland] or any other book you like.
* Follow [[Web_scraping|instructions]] on web scraping
* Place the JSON into your web project

2. Add a CSS grid
* Read the introduction on [[CSS_Grid]] and apply to your own website

3. Creating and adding images
* Create images with [https://www.craiyon.com/ Dall-E Mini]
* Add images via the `JSON` files

=== Class 2 ===

This class you will practice the art of reading documentation by adding fonts, filters and animations.
Next to this we practice reading and stealing code by adding filters (and a search) to your project.

# Add highlight functionality AND/OR a search
## Check out the example code in the /final folder
## Add highlight buttons AND/OR search field to your own project
## Create a nice looking menu with CSS Grid
# Make the grid responsive
## Check out the example code in the /final folder
## Change the CSS grid so that it is responsive
# Loading of fonts
## Pick some nice [https://fonts.google.com Google Fonts]
## You can also use [http://fontmap.ideo.com/ FontMap] to explore Google fonts
## Read [https://www.freecodecamp.org/news/how-to-use-google-fonts-in-your-next-web-design-project-e1ad48f1adfa/ this documentation] on implementation
## Add the fonts to your project
# '''Bonus:''' CSS filters and animations
## Read the [https://developer.mozilla.org/en-US/docs/Web/CSS/filter filters documentation]
## Read the [https://developer.mozilla.org/en-US/docs/Web/CSS/animation animation documentation]
## Add an animation to your own project

=== Class 3 ===

'''Duration'''
2 hours

'''Demos'''
# Steal code options with [https://www.gutenberg.org/files/28885/28885-h/28885-h.htm Alice in Wonderland]:
## View source
## View selection source
## Save page
# Working with anchors
# Creating an index

'''Tasks'''
# Copy the source of your own book
## Find your book on Gutenberg
## Check [[Stealing_A_Website|Stealing a Website]] and find the source
## Place the source via [[Visual_Studio_Code|Visual Studio Code in an index.html]] file.
# Separate the CSS from between the <style> tags in a CSS file, see [https://www.freecodecamp.org/news/how-to-link-css-to-html/ How to link CSS to HTML]
# Create your own index with anchors, see [[Hyperlink#Linking_withing_a_page|Linking within a page]]

'''Extra'''

# Add images (Search for: "How to add image HTML")
# Add fonts and style your document
## Pick some nice [https://fonts.google.com Google Fonts]
## You can also use [http://fontmap.ideo.com/ FontMap] to explore Google fonts
## Read [https://www.freecodecamp.org/news/how-to-use-google-fonts-in-your-next-web-design-project-e1ad48f1adfa/ this documentation] on implementation
## Add the fonts to your project
# Apply CSS grid
## Read the introduction on [[CSS_Grid]] and apply to your own website
# '''Bonus:''' Create an index with Javascript

=== Class 4 ===

'''Demos'''
# Show element with JS on mouseover
# Show multiple elements with JS

'''Tasks'''
# Use the JS functions to show images (or other elements) on hover
# Create a navigation with images

'''Extra'''

# Add images (Search for: "How to add image HTML")
# Add fonts and style your document
## Pick some nice [https://fonts.google.com Google Fonts]
## You can also use [http://fontmap.ideo.com/ FontMap] to explore Google fonts
## Read [https://www.freecodecamp.org/news/how-to-use-google-fonts-in-your-next-web-design-project-e1ad48f1adfa/ this documentation] on implementation
## Add the fonts to your project

=== Class 5 ===

For this class we will use [https://www.linkedin.com/learning/ LinkedIn Learning]. You can login to [https://www.linkedin.com/learning/ LinkedIn Learning] with your school account.

'''Tasks'''
# Not sure what an SVG is? Watch the video [https://www.linkedin.com/learning/learning-svg/what-is-svg?autoplay=true&resume=false&u=57693369 What is SVG?]
# Try drawing and SVG '''with 2 shapes''' using only code - [https://www.linkedin.com/learning/learning-svg/svg-shapes-overview?autoplay=true&resume=false&u=57693369 3. Creating SVGs in code]
# Open the SVG you made with Joseph in the browser and use the inspector to inspect and modify the SVG. See [https://www.linkedin.com/learning/learning-svg/svg-as-code?autoplay=true&resume=false&u=57693369 SVG as code].
# Add your SVG to your existing or new web project [https://www.linkedin.com/learning/learning-svg/add-svg-to-a-web-document?autoplay=true&resume=false&u=57693369 Add SVG to a web document]
# Animate your SVG with CSS, see video [https://www.linkedin.com/learning/css-animation-14153685/animating-svg-with-css?autoplay=true&u=57693369]. You might first want to understand CSS animations by watching [https://www.linkedin.com/learning/css-animation-14153685/css-keyframe-animation-fundamentals?autoplay=true&resume=false&u=57693369 2. Understanding CSS animations]

''Online tools are available as well to make SVG animations. Try out for example Vivus Instant''
# Make your own animated SVGs with [https://maxwellito.github.io/vivus-instant/ Vivus Instant]. For more advanced usage, check the [https://maxwellito.github.io/vivus/ Vivus] JavaScript library.
# Add the animated SVGs made with Vivus to your project

'''Extra'''

# [https://www.linkedin.com/learning/svg-clipping-masking-and-filters/clipping-masking-and-filtering-svg?autoplay=true&u=57693369 ]Clipping and masking with SVGs

== Tools overview ==

=== Explore ===
* [https://tropy.org/ Tropy]
* [https://openai.com/ Open-AI]

=== Used during classes ===
* [https://www.webscraper.io/ WebScraper]
* [https://csvjson.com/csv2json CSV2JSON]
* [https://cssgridgarden.com/ CSS Grid Garden]
* [https://huggingface.co/spaces/dalle-mini/dalle-mini Dall-E Mini]