What is CSS?

Advanced: CSS in 5 Minutes 📹

HTML - CSS 📹

CSS: Cascading Style Sheet

• You can either use Inline or a CSS Stylesheet for your portfolio website

• Create a special presentation for your links

• Use colors to enhance the visual appeal and coherence of the website

Final Touches

• More HTML Tags

<p> paragraph tag

<h1-6> headline tag

Text:

<i> Italic

<em> emphasize

<b> bold

<strong> strong

Lists:

<ul>
<li>text 1</li>

<li>text 2</li>

<li>text 3</li> bulleted list

(replace with <ol> and <li> for numbered list)

Hyperlinks: <a href="https://www.cuny.edu">Cuny</a>

Images:  <img src="..." width="..."> (no closing tag)

<br> line break (no closing tag)

• Images sizes: <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

• CSS:

body {

  background-color: lightblue;

}

h1 {

  color: white;

  text-align: center;

}

p {

  font-family: verdana;

  font-size: 20px;

}

• Background colors

• Fonts colors, fonts size

• Responsive website across different devices

• Best advice for coding: ChatGPT, Claude, and so on.

your GIFS (homework #8, part I)

Required Viewing: “Photoshop 2024 Essential Training” 🔗 🖼️ 

ch. 8 Color and Brush Essentials

ch. 11 Local Pixel Editing and Retouching

ch. 15 Essential Transformation

.ch 24 Animating Images

✨ Photoshop Puppet Warp ✨ https://www.youtube.com/watch?v=xRGt7byhS50 🔗

Beyond the video tutorials above, these technical references may be helpful: 

“Create frame animations” https://helpx.adobe.com/photoshop/using/creating-frameanimations.html 🔗

“Animation Panel Overview” https://helpx.adobe.com/photoshop/using/videoanimation-overview.html#switch_animation_modes 🔗

“How to Make an Animated GIF” https://helpx.adobe.com/photoshop/how-to/makeanimated-gif.html 🔗

Homework #8
Part II: Gif Cut Up Cinema (Example 🔗) 

• Use photographs of yourself or a friend(s). Be sure to choose a photograph against a high-contrast solid background to make it easier to “pull off” the figure.

• In Photoshop, cut the person out of the image to create a digital puppet.

• Use Puppet Warp Tool to animate the cropped photography

• Duplicate your person into various frames.

• In each frame, create variations of the person using the ✨ Puppet Warp tool ✨.

• Open the Timeline panel and create a “Frame Animation”.

• By presenting each layer on different frames, create an animation of you or a friend in various positions.

• Add background layers, or more people, or text… Have fun with it.

Upload to your site, on the same page as Homework #8 part I.