Class Assignments Web Design
Work Done In Class
Assignment
Taking an image and editng it to appear different
High Bit Depth
Bit depth refers to the number of bits used to represent the color of a single pixel in an image. For example, an image with high bit depth can display multiple colors with greater accuracy, showcasing subtle shifts in shadows, highlights, and midtones. This means warm and cool colors blend seamlessly, and details in dark or bright areas stand out more clearly. Higher bit depth reduces banding (those unwanted lines between colors) and creates a richer, more dynamic visual experience.
Low Bit Depth
When an image has low bit depth, it is restricted to a very limited number of colors. For example, if an image can only display 12 colors, the full range of natural tones and subtle variations is lost. Instead of smooth gradients, colors jump sharply from one shade to another, creating posterization (blocky or banded color areas). Shadows may appear as solid patches, highlights lack detail, and warm or cool tones look simplified rather than nuanced. With only 12 colors available, the image looks flat and artificial, almost like an old computer graphic or a poster, rather than a smooth, realistic photograph.
Search
Assignment
make a search Bar Header
Assignment
Make a school logo Animate
Animated Logo
Animated “H” Logo
Assignment
Changing the color of text
Your content goes here
. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your content goes here.
Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Assignment
Using AI
Evaluating Generation Z (The Digital Natives) 📱
✨ Strengths & Assets
- **Digital Fluency:** Grew up with the internet and social media, making them highly adaptable to new tech.
- **Social Consciousness:** Tend to be passionate advocates for social justice, climate action, and equality.
- **Pragmatism:** Generally more pragmatic and financially savvy than previous generations.
- **Global Perspective:** Connected to global events and cultures from a young age.
⚠️ Challenges & Areas for Growth
- **Mental Health Burden:** Report higher rates of anxiety and depression, often linked to social media use.
- **Attention Spans:** Navigating complex information can be difficult due to short-form content consumption.
- **Workplace Expectations:** Balancing a desire for flexibility with traditional professional structures.
- **Information Overload:** Struggling to discern reliable information from misinformation.
📝 Summary & Conclusion
Generation Z, born roughly between 1997 and 2012, represents a transformative force. They are the first true **digital natives**, inherently changing how we communicate, consume, and organize. Their evaluation is incomplete without acknowledging the complex intersection of their **technological fluency** and the **social and economic pressures** they face. They are driving change, but they also require support in navigating the relentless digital landscape.
*Data compilation based on various sociological and economic studies.*
Assignment
Make an icon show the name of the the drawings/piece
Assignment
makeing stories through AI generation
The Cloud Painter
Every morning, Leo climbed the tallest hill in town with a backpack full of brushes and jars of colored mist. While everyone else thought clouds were made of water vapor, Leo knew better—they were his canvas.
One morning, he noticed the sky was dull and gray. So, he opened a jar of sunshine yellow and swept his brush across the clouds. They shimmered like melted gold. Then, he added a splash of pink for warmth and a hint of turquoise for magic.
Down below, people stopped to stare at the sky. “What a beautiful day!” they said, not knowing it was Leo’s masterpiece above them.
When night came, he packed up his brushes, leaving behind one last stroke—a streak of silver moonlight across the horizon.
And that’s how the sky learned to smile again.
The Whispering Shell
On a quiet beach, a girl named Maya found a seashell shaped like a heart. When she held it to her ear, instead of hearing the ocean, she heard a voice whisper, “Find me.”
She looked around—no one was there. The next morning, she returned to the same spot, and a trail of shells led down the shore. She followed them until she reached a tide pool glowing faintly blue. Inside, a tiny sea spirit shimmered like moonlight on water.
“Thank you,” it said. “You heard me when no one else did.”
Then, with a swirl of light, the spirit vanished, leaving behind a single pearl. Maya kept it in her pocket, and from that day on, the ocean always sounded like it was saying her name.
Assignment
Using CSS to create boxes that stand out on a page
Example Section One
This is the first example section. The white box stands out against the light blue background, making the text easy to read and cleanly styled.
Example Section Two
This is the second example section. You can add more content boxes like this to create a simple, professional layout that flows smoothly down the page.