Breaking Down CSS Art

As the year wraps up I thought I would go back and explain some of the things I have learned this year.

One of the things I get asked about the most is how I make art with CSS.

So I am going to the share my process for creating images with CSS and hopefully inspire you to create your own.

One of the first things I do after finding the image I want to recreate is attempt to draw the image myself. This is a personal preference. I have found it helps me to break down the image into smaller basic shapes if I draw the image first.

Note: these drawings don’t have to be fancy. You can keep them pretty basic. You just need to get the idea of the shapes you will be making.

Roy Lichtenstein's 1962 painting Spray

Once I have the basic shapes picked out I use coolors.co to pick out the colors from the original image. I use Sass to create color variables from the colors I generate so I can easily reference them while developing the image. Using Sass isn’t necessary but helps make the tedious task of creating these images a little easier.

coolors.co color generator

Pug

My CSS images are made from a lot of <div> tags. To save my own sanity when creating these images I have chosen to use Pug so I don’t have to write out all of the individual opening and closing <div> tags. If you want to learn more about Pug you can check out the getting started with Pug here.

Again using Pug isn’t necessary. I didn’t use Pug for a lot of my images. But once I learned how to, it was a big time saver.

Template

Most of the images I create start with the same basic template.

See the Pen cf53a89d299032acd7c65f4e93dc50fd by Christina Gorton (@cgorton) on CodePen.28314

I set up a frame with a plain background to start. The only thing I change depending on the image is the width and height of the frame. From here I start to build the image one div at a time. In the image below you can see this process. If you were to open the dev tools and hover over each part of the image you can see the simple shapes that make up the whole image. This particular image is made up of mostly rectangular divs with varying border-radius. While the complete picture can look overwhelming at first, breaking it down in to these smaller shapes makes it manageable.

Tip: A great way to find out how to make some of these shapes is to browse CodePen and look at the code from other developers who have made CSS images. All those amazing images you see really can be broken down easily. Looking at other people’s code is probably one of the fastest ways I leveled up my CSS images. All those crazy shapes I saw were a lot easier to understand when I opened up the dev tools and hovered over different parts of the image.

breaking down a CSS image

Piecing it all together

There isn’t a right or wrong way to create CSS images (it’s art after all). I have looked through the code of a lot of other CSS images and everyone has a different way of putting it all together.

For me, when I find images other people create to be intimidating, I start with something simple. I break it down into basic shapes and start piecing them together in CSS like a puzzle. This process has also worked well for other coding related problems I encounter. With a little time and practice any one can make CSS art. Try it out for yourself and feel free to reach out to me on twitter if you have any questions, need some encouragement, or want to show off the cool stuff you make!

 

 

 

The Developer Question : Should I ask for help?

When my kids struggle with a task I tell them to ask for help. I could let them continue to struggle for hours. Or, I could offer a little advice that would help them continue to figure out their task so they succeed.

As a new developer, I often struggle with tasks that other developers could easily solve. And while I am tempted to keep quiet and continue to struggle, I have learned the value in asking for help.

Guy spending hours debugging his code without help.
Don’t be this guy

I have only been a front-end developer for a few months but I have been fortunate enough to have coworkers that allow me to ask a lot of questions. We even have a separate Slack channel now called front-end help where I can put them all.

asking questions

My coworkers might answer my questions but I was curious to know how they and other senior developers really feel about juniors asking questions.  So I asked both my coworkers and my twitter feed these three questions.

How do you feel about junior developers asking questions about or for help on an unfamiliar task?

They all answered unanimously. Every developer thought juniors should be asking questions. They even said it was the fastest way to go from a junior to a senior.

“1: IMHO it’s essential; experienced developers must create an environment where asking questions is comfortable and encouraged.”-

How long do you think a junior developer should spend looking for an answer before they ask for help?

I was surprised by the answer for this one. Almost everyone who answered said that developer’s shouldn’t be searching for answers for more than 15 to 30 minutes before asking for help. I now employ the Pomodora technique when I am stumped. I set a timer for 25 minutes and search for information on the problem I am having. If after 25 minutes, I still haven’t found an answer, I ask for help.

“If it’s been a half hour, ask for guidance. Even if it’s just to direct yourself to another bout of searches. Searching is a useful skill!” –

What would you tell a junior developer who is afraid to ask for help?

These answers were very encouraging. Here are a few.

“ Remind people that they were already hired for their smarts, and that asking questions is how we all get even smarter”

“Don’t be afraid. The devs who learn the fastest are the ones who ask questions when they need to.”

“Don’t be afraid. Even senior devs have questions. We all deal with something unfamiliar.”

See all the answers here.

Help me
Ask for help

I am no longer shy about asking questions. I quickly realized I wouldn’t succeed in my job if I wasn’t willing to ask for help. It’s not easy to admit you don’t know something but I hope reading these answer will encourage you to speak up and get help sooner rather than later. “Even senior devs have questions.”-  . None of us know everything but we can all learn something from each other. So, speak up. Asking for help is how we grow. And soon enough you will find you are the one answering questions.

Front-end Development: So simple a mom can do it?

Stay at home mom to remote front-end developer.

Dilbert Comic
So simple a mom can do it

Moms often get a bad rap in marketing and in the tech world. When we want to explain how easy something is we say, “So simple a mom could do it.” As if moms are somehow less intelligent than the average person. Nine months ago, I had zero knowledge of computer programming. This week I accepted an offer to work as a remote front-end developer. Don’t count out moms in the tech world.

Here is how I went from a stay at home mom to a work at home mom/web developer.

What’s a mom to do?

I like my kids. They are some of my favorite people. After becoming a mom, I tried to think of different ways to make money while still being able to stay home with them. Multilevel marketing companies like DoTerra or LuLaRoe help many moms achieve that goal. This type of work never appealed to me though and I knew there had to be an alternative.

 My father-in-law suggested programming as a career because my family wanted options that wouldn’t require us to go into debt. Neither my husband nor I thought we were technical enough to actually code. However, 9 months ago we were crazy enough to start believing a career in Web Development might be an option for us both. For us, a career in tech would mean better financial security without school loans. It also offered the possibility of working from home.

 We listened to stories of people switching careers to become web developers. We planned on it taking us at least two years to study and then apply for jobs. We also assumed it would take us at least a year or more in a Junior Developer role before we could find remote work.  I managed to do it in nine months. So, what changed?

 

A sprinkle of coding and a dash of passion.

 I knew as a mom of three young kids who like to wake up at ungodly hours, I wouldn’t be able to stay up until 3 am coding. I already survive most days hyped up on way too much coffee.

 

Princess leia
My only hope.

 The hustle life was not the life for me.  I had to have a more stable plan. I have written about how I juggle learning to code and raising a family. If you would like more details check out my post  Programming and Parenting: leveling up while raising a family. In short, I turned coding into my new hobby. I love sewing and crocheting. But while I was learning to code I didn’t have time to pursue my other hobbies. I had to make coding as interesting for me to trick my brain into believing it wasn’t a chore to learn but a fun new hobby. This made it much easier to spend my free time learning to code. I found creative coding and used it to learn new coding concepts. 

 I also did what those before me said to do. I started a blog. I joined twitter where I communicated with people learning to code. I documented my journey on Instagram. I worked on a portfolio. I worked on side projects I was actually interested in and that kept me wanting to learn more. These things gave me something to talk about during my interview. It was obvious that I enjoyed coding. 

Resources

Find your people.

Genie and friends group hug
Find your people.

 After my second was born, I struggled with post-partum mood disorder. When I found moms, who were going through the same thing, I found strength in the community.  So one of the first things I did after I started learning to code was search out a community of others doing the same.  Hear are a few of the awesome communities I joined:

 

  • CodeNewbie: This is an amazing community. They don’t lie when they say they are “the most supportive community of programmers and people learning to code.” They have a weekly Twitter chat which is great for sharing your ups and downs when learning to code. The CodeNewbie podcast has a lot of great stories of people learning to code. It also has talks with people who are already working in the tech community. 
  • freeCodeCamp: This was actually my first exposure to coding. I’m glad it was because it taught me to “read, search, ask” whenever I was stuck with a coding problem. The curriculum is great to get your feet wet in the programming world. Or advance beyond a beginner if you are willing to keep at it. The forum and chat room almost always has someone to answer any questions you have.
  • #100daysofcode: This is an individual challenge. But there is a great Twitter community. You work on coding projects everyday for 100 days and document it on Twitter and GitHub. This is one of the challenges that helped me build my portfolio. 
  • codingartist.io #dailycssimages challenge: This is the challenge I enjoyed the most . Whenever someone asks me how I learned CSS I point to this website. It also got me interested in logo design and SVG. Almost all my featured pens on CodePen.io are from prompts I got from this challenge. Most of my portfolio projects are either from this challenge or inspired by it like. There is a great Facebook and Twitter group for this challenge as well.
  • Chingu cohorts: I am going to quote the site here because it explains the cohort better than I can.”Here is what we do: put motivated people with similar goals together in an environment that gives them the opportunity to level-up in a way they couldn’t otherwise. Friendships, level ups and hijinks ensue. This project aims to create more of a bootcamp style community, but with more flexibility.”I have met a lot of encouraging people in this cohort. I also gained valuable experience working on a project in a remote setting.

This last resource is one I paid for.

  • Advance beginner Challenge: This is the challenge that helped me out every other challenge together and level up. Dain gave me sound advice for updating my website and portfolio. He encouraged me to start applying when I did not think I was ready. The member’s only slack group and podcast was also an encouraging resource.

Stand Out

red umbrella in sea of black umbrellas
Stand out

As a stay at home mom my resume was not impressive. I almost didn’t apply for the job when I saw they wanted a resume and a portfolio. Instead of giving up I decided to do something different. I redid the company’s website as my resume. You can see it here. This helped me stand out from the applicant pool. It also helped me become familiar with the company, their brand, and their code.

Landing the Job

I am still receiving private messages asking how I got this job.  There is no magic formula. I listened to good advice from people working in tech. I worked on projects I was passionate about. I surrounded myself with encouraging and inspiring communities. And I took a chance. I still have a lot of learning to do. That is the frustrating and wonderful side of programming. I will always feel like a CodeNewbie. Programming is not easy. But I learned this mom can do it.

#100DaysofCode: A look back.

 

What can be accomplished in 100 days.

About a month ago I posted about my experience with #1ooDaysofCode. You can read about it here.

This week I hit 100 days. Now I can show you what I accomplished.

[ta-da]

When I started the challenge I was all over the place. I didn’t really have any direction except I thought I would try to work on freeCodeCamp challenges.

Soon after I started, I found the codingartist.io ‘s #dailycssimages challenge and started working on those to improve my knowledge of CSS. I was quickly hooked.

Most of my 100 days have been spent on expanding my knowledge of CSS. When I initially went to complete the JavaScript challenges on freeCodeCamp I realized I was having all kinds of trouble with the layouts of my pages. Developers often complain about CSS and all it’s faults but I realized I just didn’t have enough of an understanding of how CSS worked.

and now…

I love CSS and all it’s perceived problems. Some might think it was a waste of time to spend most of the 100 days learning CSS but diving into CSS and playing around with all it can do has kept me coming back and wanting to learn more about programming.

I have delved into the world of creative coding and I am having a lot of fun with it. Here are some examples of what I created.

My first CSS image was pretty basic. But I was really proud of it and because I posted it and got feedback I wanted to keep learning more.

See the Pen Daily CSS image day1 Cub by Christina Gorton (@cgorton) on CodePen.28314

At some point I decided to learn CSS animations. I took Val Head’s CSS Animation course on Lynda.com and began applying what I learned there to my images. Here are a few of my more popular animations and some of my personal favorites.

This was my first pen to be featured on CodePen. I was probably a little to excited but it was a great motivator to keep learning more.

See the Pen Daily CSS Image: Doctor Who Adipose by Christina Gorton (@cgorton) on CodePen.28314

See the Pen Daily CSS Images 25: Captain America by Christina Gorton (@cgorton) on CodePen.28314

See the Pen Daily CSS Images 38: Cat vs. Monitor by Christina Gorton (@cgorton) on CodePen.28314

This is currently my most popular pen. I just had the idea running through my head one day and had to code it up.

See the Pen House Points Hourglasses by Christina Gorton (@cgorton) on CodePen.28314

Along with starting to add animations, one of the things I started doing to expand my knowledge of CSS was to look at other peoples’ code and research anything I didn’t understand. This helped me learn gradients, SCSS, Pug, pseudo selectors and elements, and many more aspects of CSS as you can see in these pens.

I was determined to learn @mixins so I coded this pen.

See the Pen #dailycssimages: 33 Awesome-Vue by Christina Gorton (@cgorton) on CodePen.28314

The other project I have been working on to learn more advanced CSS is my Paint with CSS (formally #weeklycsspainting). I am recreating art whenever their is a new part of CSS I want to dive deeper in. I alreadly shared my first painting here and have since remade one more painting.

See the Pen Paint with CSS: Spray by Christina Gorton (@cgorton) on CodePen.28314

I have also used this challenge to learn CSS Grid. I started taking some crochet graphs I use and recreated them with Grid to get a better understanding of what Grid can do. If you haven’t heard about Grid yet or haven’t played around with it, check out this website.

See the Pen Paint with CSS Grid: Luna Lovegood by Christina Gorton (@cgorton) on CodePen.28314

What would I change?

The only thing I would try to do differently if I were to do the 100 days again is commit to GitHub more often. It was the one area I slacked on when doing this challenge. I am now making up for it by spending a few days pushing my code to my repositories.

So again, was #100DaysofCode worth it?

I have developed a way to learn that has been working great for me(creative coding) and I have built the habit of coding everyday. My 100 days are over but I am still spending each day coding. My goals now are to use creative coding to Learn JavaScript and Vue.js. Keep checking in to see how I progress.

As a side note, thank you to everyone who has participated in the challenge and encouraged me along the way. It was a great community to be a part of.

 

Programming and Parenting [images]

Leveling up while raising a family:

Recently I read a thread on Hacker News where someone asked “Developers with Kids, how do you skill up?” . I was a little surprised to see so many childless individuals and parents think it would be almost impossible for parents to really learn to code while they have little ones running around, keeping them up, sucking all the fun from their lives… Yeah some of these comments were a bit dramatic. So…

How do parents level up?

The short answer?

[Magic]

But in all seriousness, learning to code while raising a family is feasible. I would say the biggest step to learning any new skill while you are also keeping little people alive is figuring out your priorities. And my husband and I have made learning to code a priority for our family.

When do I find time to code?

This is something I get asked often. I really like what this person answered on the Hacker News Forum:

” Be honest.. before kids, how many nights did you
“stay up working on stuff and exploring new technologies?”
My bet is most of your time pre-kids was “wasted” on non-career things.
If you were actually spending many nights studying then having kids won’t
really stop you from learning. My anecdotal story: Before my kid, I spent roughly 80% of my time outside work
“wasting” playing video games,
watching youtube, twitch, going out, things like that. The other 20% was spent
learning and progressing my skills.
Since having a kid, I haven’t really touched video games nor really miss them,
though I may pick up a switch soon.
I tend to spend about the same time, maybe more now, on studying and picking up new skills.
What i did find is having a kid helped me sharpen my focus when I do study and helped me put
my life in perspective of his. *I use “wasted” as you used it, but I personally don’t think that time was actually wasted.”
-eazenberg

I wake up early now. (My kids are up early anyway.) I spend my kids’ nap time studying instead of reading novels (no more Jane Austen stories for the 100th time), sewing, or watching Netflix like I used to. I keep articles of things I want to learn up on my phone so I can read them when I sit to nurse my youngest or finally escape to the bathroom. I stay up late studying. All those little moments where I used to constantly check Facebook or “waste” time some other way really add up and I try to use each of those moments to study. I am by no means perfect. My kids are still not sleeping through the night so there are many days I do just sit and check Facebook or do anything that doesn’t require too much thinking. 

However, overall I have learned to manage my time more efficiently because I have made programming a priority. I have also learned to simplify all of the less important things parents often get caught up in.

How to simplify your life and learning.

Like so many moms I love Pinterest. I wanted to be a Pinterest mom. But after my 3rd was born, reality set in.

[^accurate]

I cannot do everything. My kids don’t get reindeer-shaped treats (at least not often) but they do have a mom whose mental health is a lot better now that I am not trying to do ALL THE THINGS. As a side bonus, I have noticed that their creativity has flourished now that I am not telling them exactly what to do with my various Pinterest crafts. It frees up my time and allows them to learn how to enjoy their own imaginative play.

I have also learned to simplify my learning. I took Coursera’s Learning How to Learn Class early on in my programming journey. I have learned to study in smaller chunks instead of trying to cram. I often spend a good amount of time playing with my kids and then set a timer for 20 minutes and tell them that is my study time. More recently I picked one challenge to focus on to help me level up. See my previous article on #100daysofcode. Before I spent a lot of time jumping from tutorial to tutorial and trying to do to much without really focusing and deeply learning anything. Once I took the time to pick one challenge and stick with it I saved a lot of time and have progressed a lot quicker.

So can you learn to program while you have a family?

I would say yes. Of course you can. You may not live the hustle life while you have children but you can steadily progress and achieve your goals if you take the time to figure out your priorities, organize, and simplify your life.

 

100 Days of Code. Is it worth it?

What is the #100daysofcode challenge?

On January 3rd, 2017 I joined a multitude of coding newbies and seasoned programmers for the 100 Days of Code challenge. The rules were pretty straight-forward. We would work on coding projects for one hour every day for 100 days. In addition to the projects we would log our progress on GitHub and post about it on twitter to keep each other accountable. Study time and work projects did not count toward our hour. The complete set of rules and guidelines can be found here.

Is it worth it?

For me #100daysofcode has been a great motivation to actually create projects with code. I began my coding journey in August 2016 with
freeCodeCamp. I powered through the HTML and CSS sections and completed the first two projects quickly. But I soon became lost and stuck on the basic JavaScript section. This definitely put a damper on my motivation. I kept going back and doing tutorials for HTML and CSS on various websites because it was familiar and easy for me. I realized my coding was becoming static.

Around December 2016 I saw a job listing I was interested in. To my dismay my portfolio was seriously lacking projects. So I rushed to build a few web apps to show the prospective job what I knew. This was not the best idea but it did push me to get out of my comfort zone and gave me the desire to build projects. Shortly after this experience, I read about the #100daysofcode challenge. It really got me excited to level up agian. I liked how Alexander Kallaway (the guy behind #100daysofcode) suggested taking a few days to think about the challenge and not just rush into it. I know I have a tendency to jump in and start a project when my interst is piqued but my motivation usually fizzles out quickly (as my many half-finished crocheted projects can attest). So I took his advice and prepared myself for the next 100 days. I worked on understanding line command, git, and GitHub because I thought they would be important to use during the challenge (they have been). I also talked a lot about it with family and friends so that I really didn’t have a choice to back out.

I am now 60+ days into the challenge and I would say it has completely been worth it. Through this challenge’s twitter group I found the #dailycssimages challenges that really sparked my desire to code fun and exciting projects. I have a better understanding of advanced CSS like animations and transition. I have learned how to deploy sites with Jeykll to GitHub pages. I contributed to my first open source project and I am currently learning Vue.js. Best of all, I now have a lot of projects to add to my portfolio.

Should you join?

If you are feeling stuck with your programming progress or if you just want motivation to work on side projects #100daysofcode is a great challenge to join. The community is very encouraging, even for code newbies. So if you want to level up, join. You won’t regret it.

 

Weekly CSS Paintings

Week 1: CSS gradients and The Son of Man

Inspired by how much I have learned from the #dailycssimages challenge by the Coding Artist , I decided to start a new challenge for myself. Each week I will try to recreate famous painting with CSS. I will try to focus on an area of CSS I want to improve on. I might also begin to add SVG or Canvas as I progress so I can learn how to use these tools as well.

For my first CSS painting, I chose The Son of Man by Rene Magritte.

Here is my interpretation

See the Pen Paint with CSS: Son of Man by Christina Gorton (@cgorton) on CodePen.28314

For this painting I wanted to tackle CSS gradients. I have used gradients on many of my #dailycssimages but I didn’t really understand how to create stops and manipulate the colors exactly how I wanted them. I thought this painting would be a good one play around with.

For my background, I set percentages to create the look of an ocean, sunlight, and the sky. I also used repeating-linear-gradients to get the look of stone blocks for the wall. I even used a stop on the jacket to get the look of the seam running down the middle of the jacket.

I had a lot of fun with this image and now have a better understanding of gradients. If you want to learn more about CSS gradients check out Mozilla developer docs  and themarklee.com

Also if you are interested in learning more about creating pure CSS images check out the Coding Artist  and  #dailycssimages. They are a great place for tutorials, inspirations and a 50 day email challenge if you want to join along.