Editing Text And Code: Alice's Adventures in Computerland (section)

== 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 ===

'''Duration'''
2 hours

'''Videos'''

Videos for the double scroll and positioning paragraphs are available [https://hrnl-my.sharepoint.com/:f:/g/personal/kranv_hr_nl/EkXfK-yko7NCiJMk_H-FmLcBSomuBHpXAYTktS9u3ekkcg?e=xDp72c here]

'''Demos'''
# Making a double scroll page with anchors
# Position paragraphs with float left and position absolute
# Modify classes on elements after user events

'''Tasks'''
# Follow along coding sessions

'''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 one SVG '''with two shapes''' using only code by watching some of the videos in [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 an HTML file in Visual Studio Code, 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 Animating SVG with CSS]. 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]