# Review a CSS Art Tutorial with CodeHS! Published: 2024-02-13 Category: Newsletter Category URL: https://codehs.com/blog/category/newsletter Tags: Course Insider Tag URLs: Course Insider (https://codehs.com/blog/tag/course-insider) URL: https://codehs.com/blog/review-a-css-art-tutorial-with-codehs-cm397diki000655sh3o3gv0r6 ​ [Visit the ReadWriteCode Blog](https://readwritecode.blog/inspector-debug-7c9d0d10a1b3) ​ ![undefined](https://prod.superblogcdn.com/site_cuid_cm264m3an0084qegvyd7aetst/images/tnl-tmqqjhhvvwewu9cln0pm8lkxewxcvaiq2je8jjwouwuna7tk6pmsyrt1juipoqhp6cuaxnuxxnpnsjudcpkxwjshecg0pdzczjdmlm1w8s5lpwmmzoni4saqqiqgfsco4fkpvgaehgc2oeyxbg-1731099009813-compressed.tnL-tm_QqjHhvVWewu9clN0pM8lkXEwxcVAiq2Je8jJWoUWUnA7tk6pmSyrt1jUipoqhP6cUAxNuXxNpnsJUdCPKXwjShECG0PDzCzJdMlM1w8s5LpWmMzoNI4sAQQiQGfSCO4FkpVGAeHGc2oeyxbg) ## 🎨 **CSS Art** Cascading Style Sheets (CSS) has become a powerful styling language for web designers and developers. Web designers use CSS to manipulate shapes, colors, and typography. CSS rules can create animated sequences and visual effects. They can even provide web users with visual feedback when they interact with a web element, such as a button or menu. [![undefined](https://prod.superblogcdn.com/site_cuid_cm264m3an0084qegvyd7aetst/images/2fir0jhskttur5e06izcxgigvzkzsuoeeyqsus15cw7kbdpgbevwnogwaypqj76pwg7n6hdzwylcirzpwxudnsudwqa65uk67zilyl6tk28arht3yrx-jwdom6gbzyapnf8tivvuo2ktjixo7nre-1731099042358-compressed.2Fir0j_HSKTTuR5E06izCXgigvZkZsUoEeYQsus15CW7KBDPGbEvWnoGwAYpqJ76pwG7N6HDZwylC_irZpWxuDnsUDWQA65uk67ZiLyl6tk28aRHt3yrX--JwDom6gbzyapnF8tIvvuO2ktjIxo7nRE)](https://codepen.io/anniebombanie/pen/jOWYder) _[Madeline Floating in the Sky (pure CSS)](https://codepen.io/anniebombanie/pen/jOWYder) \- by anniebombanie_ Creative coders can use a variety of languages to produce incredible art. With a little HTML and some CSS, artists and designers create fun, interactive, and sometimes realistic visuals for the web. Some web designers have created fully interactive sites using CSS animations. Check out this [amazing site](https://martingauer.com/) by Martin Gauer that uses CSS and some JavaScript to create an online handheld gaming emulator. Your students can start creating their own CSS art in their CodeHS Sandbox. This [CSS Art tutorial](https://codehs.com/tutorial/mattarnold/css-art) includes some basic snippets of CSS to get them started with making shapes, color gradients, and basic animations. The tutorial helps students practice styling, positioning, and animating various shapes in CSS to create a fun emoji. Challenges are presented at the end of the tutorial to get students thinking about other ways they can customize their emoji and ideas for creating their own CSS art! [CSS Art Tutorial](https://codehs.com/tutorial/mattarnold/css-art) ![undefined](https://prod.superblogcdn.com/site_cuid_cm264m3an0084qegvyd7aetst/images/ccrwfssvth948705gnlv5nf9r0et-tqm8uuynmcs6m91sj2iitutvmaec12n-uhfsolw1cs9xuzssiros7xdaeppujlspnei8nkcqdxlh1hddxv2umtnp0tmjnxo7gfejfvly-g-1731099115935-compressed.CcrWFSsVth948705GNlV5NF9R0ET-TqM8_UUYNmcS6M91SJ2IItUTvmaeC12N-UHfsOLw1cs9xuZsSirOS7XdAeppuJLSpnei8NKcqDXlh1HDDxv2UMTnp0tmjnxo7GfEJfVlY-g) ## **🪤 Catch Me Project** Level-up your HTML and CSS skills with this additional web design project on the CodeHS Project Catalog. Students create a web-based game using HTML and CSS (plus JavaScript code that’s given to them). The object of the game is to click on a moving image to gain points. [Explore Here](https://codehs.com/curriculum/projects/17913) ![undefined](https://prod.superblogcdn.com/site_cuid_cm264m3an0084qegvyd7aetst/images/ccrwfssvth948705gnlv5nf9r0et-tqm8uuynmcs6m91sj2iitutvmaec12n-uhfsolw1cs9xuzssiros7xdaeppujlspnei8nkcqdxlh1hddxv2umtnp0tmjnxo7gfejfvly-g-1731099162011-compressed.CcrWFSsVth948705GNlV5NF9R0ET-TqM8_UUYNmcS6M91SJ2IItUTvmaeC12N-UHfsOLw1cs9xuZsSirOS7XdAeppuJLSpnei8NKcqDXlh1HDDxv2UMTnp0tmjnxo7GfEJfVlY-g) ## **🔍 Inspector Debug** Stuck trying to figure out where your students’ CSS went awry? Web page layouts are easier to debug using Chrome’s built-in Dev Tools! In this blog, you’ll learn more about how to identify potential problems when reviewing web pages and leverage the Chrome browser’s Developer Tools Inspector. [Visit the ReadWriteCode Blog](https://readwritecode.blog/inspector-debug-7c9d0d10a1b3) ![undefined](https://prod.superblogcdn.com/site_cuid_cm264m3an0084qegvyd7aetst/images/ccrwfssvth948705gnlv5nf9r0et-tqm8uuynmcs6m91sj2iitutvmaec12n-uhfsolw1cs9xuzssiros7xdaeppujlspnei8nkcqdxlh1hddxv2umtnp0tmjnxo7gfejfvly-g-1731099213437-compressed.CcrWFSsVth948705GNlV5NF9R0ET-TqM8_UUYNmcS6M91SJ2IItUTvmaeC12N-UHfsOLw1cs9xuZsSirOS7XdAeppuJLSpnei8NKcqDXlh1HDDxv2UMTnp0tmjnxo7GfEJfVlY-g) ## **2024 Virtual Teacher Conference** [![undefined](https://prod.superblogcdn.com/site_cuid_cm264m3an0084qegvyd7aetst/images/2024virtualconferenceemailbanner-1731099227044-compressed.png)](http://codehs.com/virtualcon2024-register) Registration for the CodeHS Virtual Teacher Conference is now open! We have an amazing lineup of speakers, including CS teachers from across the country and experts from CodeHS. Attendees will receive a CodeHS Pro Trial through June 30th, 2024, a $20 Amazon gift card, and a digital swag bag! Explore session topics and register at [codehs.com/virtualcon2024-register](https://codehs.com/virtualcon2024-register). [Register Today](http://codehs.com/virtualcon2024-register) ![undefined](https://prod.superblogcdn.com/site_cuid_cm264m3an0084qegvyd7aetst/images/ccrwfssvth948705gnlv5nf9r0et-tqm8uuynmcs6m91sj2iitutvmaec12n-uhfsolw1cs9xuzssiros7xdaeppujlspnei8nkcqdxlh1hddxv2umtnp0tmjnxo7gfejfvly-g-1731099270416-compressed.CcrWFSsVth948705GNlV5NF9R0ET-TqM8_UUYNmcS6M91SJ2IItUTvmaeC12N-UHfsOLw1cs9xuZsSirOS7XdAeppuJLSpnei8NKcqDXlh1HDDxv2UMTnp0tmjnxo7GfEJfVlY-g) ## **🧠 CodeHS Pro Tool Highlight: AI Hints** AI is a powerful tool that can help teachers identify learning needs, streamline their workflows, and provide targeted feedback. CodeHS has recently launched [AI Hints](https://help.codehs.com/en/articles/8263364-codehs-ai-hints) on Pro! This new tool identifies student errors and allows teachers to generate suggested hints they can provide students. CodeHS AI tools are currently in beta for Pro teachers. [Learn More](https://help.codehs.com/en/articles/8263364-codehs-ai-hints) ​ _[Upgrade to Pro today](https://codehs.com/learnmore?c=WebDesignInsider_2.13.24) to explore how the power of AI can help your students learn._ ​ ![undefined](https://prod.superblogcdn.com/site_cuid_cm264m3an0084qegvyd7aetst/images/ccrwfssvth948705gnlv5nf9r0et-tqm8uuynmcs6m91sj2iitutvmaec12n-uhfsolw1cs9xuzssiros7xdaeppujlspnei8nkcqdxlh1hddxv2umtnp0tmjnxo7gfejfvly-g-1731099323511-compressed.CcrWFSsVth948705GNlV5NF9R0ET-TqM8_UUYNmcS6M91SJ2IItUTvmaeC12N-UHfsOLw1cs9xuZsSirOS7XdAeppuJLSpnei8NKcqDXlh1HDDxv2UMTnp0tmjnxo7GfEJfVlY-g) ## 📅 PD Webinars & Workshops Throughout the year, we host free webinars and workshops designed to help teachers learn more about the CodeHS platform and additional tools that can be used in the classroom. Stay tuned for upcoming webinars and workshops [on our website](http://codehs.com/freepd), but in the meantime, you can browse our available content on our YouTube channel. [Available Webinars](https://www.youtube.com/playlist?list=PLUEYQSaHI9SJ_0Eh9SM-gK-HBBEueyj0v) ![undefined](https://prod.superblogcdn.com/site_cuid_cm264m3an0084qegvyd7aetst/images/ccrwfssvth948705gnlv5nf9r0et-tqm8uuynmcs6m91sj2iitutvmaec12n-uhfsolw1cs9xuzssiros7xdaeppujlspnei8nkcqdxlh1hddxv2umtnp0tmjnxo7gfejfvly-g-1731099367318-compressed.CcrWFSsVth948705GNlV5NF9R0ET-TqM8_UUYNmcS6M91SJ2IItUTvmaeC12N-UHfsOLw1cs9xuZsSirOS7XdAeppuJLSpnei8NKcqDXlh1HDDxv2UMTnp0tmjnxo7GfEJfVlY-g) ## 📈 Coding in the Wild Blog The [Coding the Wild](http://codinginthewild.com/) posts are great for showcasing how professionals use computer science across multiple disciplines. They're great to use for supplemental material or extra credit in class. _“Be inquisitive. Don’t be afraid to start experimenting and tinkering with code," shares Steven Tidd, Software Engineer for the federal government._ [Coding for Government](https://codinginthewild.com/coding-for-government-1f932adbc46b) ![undefined](https://prod.superblogcdn.com/site_cuid_cm264m3an0084qegvyd7aetst/images/ccrwfssvth948705gnlv5nf9r0et-tqm8uuynmcs6m91sj2iitutvmaec12n-uhfsolw1cs9xuzssiros7xdaeppujlspnei8nkcqdxlh1hddxv2umtnp0tmjnxo7gfejfvly-g-1731099402660-compressed.CcrWFSsVth948705GNlV5NF9R0ET-TqM8_UUYNmcS6M91SJ2IItUTvmaeC12N-UHfsOLw1cs9xuZsSirOS7XdAeppuJLSpnei8NKcqDXlh1HDDxv2UMTnp0tmjnxo7GfEJfVlY-g) ## Stay connected 1. Follow us on [Twitter](https://twitter.com/CodeHS) and [Instagram](http://instagram.com/codehs) 2. Chat with others in the [CodeHS Educators Facebook Group](https://www.facebook.com/groups/CodeHSEducators/) 3. Explore the [CodeHS Web Design Hub](https://codehs.com/curriculum/web-design)! Happy Coding! ​ -Matt Arnold ​ _Curriculum Developer, CodeHS_ _​_ ​ ​ ​ ​ --- This blog is powered by Superblog. Visit https://superblog.ai to know more. ---