https://github.com/dalascript/cat-painting

FCC Responsive Web Design Certification | Project 12/20 | Cat Painting
https://github.com/dalascript/cat-painting

cat-painting css freecodecamp html responsive-web-design-certification

Last synced: 8 months ago
JSON representation

FCC Responsive Web Design Certification | Project 12/20 | Cat Painting

• Host: GitHub
• URL: https://github.com/dalascript/cat-painting
• Owner: DalaScript
• Created: 2025-05-25T20:37:05.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2025-05-28T16:21:26.000Z (9 months ago)
• Last Synced: 2025-05-28T17:35:26.536Z (9 months ago)
• Topics: cat-painting, css, freecodecamp, html, responsive-web-design-certification
• Language: CSS
• Homepage: https://dalascript.github.io/cat-painting/
• Size: 26.4 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Cat Painting | FCC Responsive Web Design Certification

**Project 12/20**

A fully CSS-drawn cat head illustration 😺 built using only HTML and CSS. Every part of the cat — from ears to whiskers — is crafted with pure CSS properties like `border`, `transform`, and `border-radius`. This project focuses on precision, creativity, and mastering positioning techniques.

---

## 📚 Table of Contents

- [🔎 Overview](#-overview)

  - [📸 Screenshot](#-screenshot)

  - [🔗 Links](#-links)

  - [📌 Features](#-features)

- [🧠 My process](#-my-process)

  - [🛠️ Built with](#️-built-with)

  - [🎓 What I learned](#-what-i-learned)

  - [🔙 Previous Project](#-previous-project)

  - [🔜 Next Project](#-next-project)

- [👤 Author](#-author)

  - [🌐 Connect with Me](#-connect-with-me)

  - [💻 Coding Profiles](#-coding-profiles)

---

## 🔎 Overview

### 📸 Screenshot

![screenshot of the project's webpage](./assets/screenshot.jpg)

### 🔗 Links

 - [🔴 Live Demo](https://dalascript.github.io/cat-painting/)

 - [🗂️ GitHub Repository](https://github.com/DalaScript/cat-painting)

### 📌 Features

 - ✅ Fully illustrated cat using pure CSS

 - ✅ Custom shapes for ears, eyes, nose, and whiskers

 - ✅ Responsive and centered layout

 - ✅ Smooth gradients and layering with z-index

 - ✅ No images or external graphic assets used

## 🧠 My Process

### 🛠️ Built with

 - HTML5

 - CSS3

### 🎓 What I Learned

 - How to use `border` and `transform` to draw custom shapes

 - Positioning elements precisely with `absolute` and `z-index`

 - Crafting complex visual designs without images

 - Organizing layered components in CSS

 - Enhancing creativity using only core HTML and CSS

  > 🚀 For me, this project was more about **practice** and gaining additional **experience**,  

  > rather than learning something entirely new.  

  >  

  > 👨‍💻 Since I’m not a beginner and already familiar with these technologies,  

  > I approached it with confidence — and still, I truly **enjoyed working on it**.  

  >  

  > 🎯 Overall, I consider this a very **valuable and enjoyable experience**.

### 🔙 Previous Project

 - Balance Sheet | *[Project 11/20]* → [View Repository](https://github.com/DalaScript/balance-sheet)

### 🔜 Next Project

 - Piano | *[Project 13/20]* → [View Repository](https://github.com/DalaScript/piano)

---

## 👤 Author

### 🌐 Connect with Me

 - [Instagram](https://www.instagram.com/DalaScript)

 - [YouTube](https://www.youtube.com/@DalaScript)

### 💻 Coding Profiles

 - [freeCodeCamp](https://www.freecodecamp.org/DalaScript)

 - [FrontendMentor](https://www.frontendmentor.io/profile/DalaScript)

 - [GitHub](https://github.com/DalaScript)

*🙌 Thanks for checking out my project! More coming soon. Stay tuned 🚀*