DailyCSSImages

Hi! I’ve been working on a daily task of creating an image in css everyday for 50 days. I only use HTML and CSS to create it. Below are some of my favorites, and picked by Codepen.io staff to be featured on their front page!


Bob-omb

I was watching someone on Twitch.tv streaming Super Mario Maker when I got the inspiration to create a Bob-omb in CSS and make it explode with JQuery. I realized if I used .animate() to transition between different CSS classes as if it was pulsing red before the blow, and then hiding the explosion and showing it after a certain amount of time, I could make it seem like it actually exploded.

It was fun to make and let me practice some jquery. I think its silliness led to it being put on the front page by Codepen staff. It now has over 2,000 views, my highest viewed project. How exciting! Check it out below.

See the Pen Bob by Jessica Ciarelli (@jessmc) on CodePen.

Adobe ..Monday? Boombox

Hi! I started this project on Friday like I do all of my Adobe Illustrator tutorials, but this one kind of got away from me. I wasn’t able to finish until today. Which is okay, because I think it came out great and I didn’t want to rush it. This tutorial really put into practice locking layers and grouping things together so that it makes moving and copying the objects easier as it got more involved. I will definitely put that practice into more use in the future. Here is the tutorial I used. 

boombox

Adobe Friday – Succulents!

Today I used this tutorial to make succulents! They are super cute. Who doesn’t love a good bunch of succulents. No fuss plants! This tutorial I had some trouble with the third succulent. I had a hard time getting the anchor into a point just by moving the handles as it instructed. I feel like I was missing something. Otherwise, I think it came out cute!

succulents

#100DaysofCode

Today I started the 100 days of code challenge. I will hold myself accountable to an hour of code each day where I create something new or work on a project. Tutorials/videos do not count. This will be pretty easy for me, as I probably do 8 hours of code Mon-Fri. The hard part will be the weekends. I have a lot of resources though so I just have to force myself to set aside an hour to incorporate them. For example, I just came across the JavaScript30 challenge ( I know, a lot of challenges going on here). This has short videos with projects in each one that I will try to work on. I also have a few books I would like to read and they have projects within them that I will use.

Today I spent my hour working on the below Intermediate Algorithm Scripting lessons of Free Code Camp:

Sum All Primes – I needed to implement the Sieve of Eratosthenes to find the prime numbers

Smallest Common Multiples – I used a do while loop , which I feel I don’t normally use as often.

Finders Keepers – So this one looks through the array and then records an element if its true, or return undefined if not.

To check my daily progress , as I will probably not update here everyday, visit my github and my twitter.

 

Procreate App

So I didn’t end up posting an Adobe tutorial on Friday but I did create some images on Procreate, an app I just downloaded for my Ipad. For Christmas I got a stylus (the Adonit Jot Pro Fine Point Precision Stylus) and used that to draw the below; two of my favorite Pokemon. Nebby being a new favorite from Pokemon Sun/Moon and Oddish , an oldie but goodie. Check them out below! I’m getting the hang of using the software, but I need to go through the manual to figure out everything I can do.

Happy New Year!

NebbyOddish

Adobe Friday – Planets

This one gave me some trouble. I have version 16 of Illustrator and therefore could not follow the Corner Widgets tool (in v. 17 I guess?), making the edges a better round shape per the tutorial. The round corners menu did not want to make the edges actually round and did it to the shape as a whole. I’m wondering if I should have applied it to each box before merging them together. I’ll have to try that next time.

Here is the tutorial I used. Loving the bright neon colors for the planets and I got to play with the shape tool to create stars, similar to the previous project.

planets

Regex

Today I came across Regular Expressions , or Regex in a case where I needed to work with finding vowels in a string. I was able to use the below

var regex = /[aeiou]/gi;

learning that gi stands for global match and case insensitive and the brackets [] will only look for the characters within them.

Here are some helpful links and cheat sheets for regex:

Regexone.com <– Super helpful , I like the practice exercises with each lesson.

Cheat Sheet

Free Code Camp resources on Github