Learning to code is incredibly fun. But how do you become sure of your skillset? If you’ve completed tutorials and built something, why don’t you feel like you know what you’re doing?
For me, that only comes through playing, practicing, and using my skills on my own. When I first began to code, I learned HTML & CSS. I made up several little sites. Now, these were ugly sites. No design at all. They were just boxes. I would change their size, add padding & margin, fill with text or color. I would float and try to push them around. But they gave me a better understanding of how to place elements on a page.
It is something I still do. I recently completed the Advanced CSS class from Skillcrush where I learned a lot about Flexbox and CSS Grid. Below is a pen of boxes that I’ve arranged with CSS grid. I made several of these with different boxes and different positioning. I played with the code seeing what resulted when I changed different properties. No one would ever use this layout on a real page. But it was fun and low stress to create just for that reason. Had I not posted it here, no one would have ever seen it.
I know it can sound boring to practice but it’s often the key to gaining confidence. When I first began to use git, I was pretty nervous about creating repos and pushing to Github. Working in the terminal was new to me and felt powerful and strange. But I knew git would be vital to becoming a developer. So I made repo after repo and pushed them to Github. Along the way, I made mistakes and figured a way out of them. Now it is so much a part of my workflow I can’t imagine creating projects without it. And the first time you realize that you’ve completely messed up your code and it’s ok because it’s on a branch that’s not your master so you can just delete it. That’s a beautiful day.
I used the same practice strategy to become more familiar with databases and sequel statements and creating local WordPress environments. Just do the same thing over and over again until it feels boring. And hope that you make some mistakes. Working yourself out of trouble is a great confidence booster!
As you learn more skills you’ll want to move away from creating ugly blocks and making repo after repo. You’ll want to create something that really shows off your skills. But the thought of building something big feels a little overwhelming. An option is to improve an existing project.*
During the shutdown, Skillcrush gifted us two bonus projects. One was a cute recipe card page and the other was a grid-style vision board. It was a great distraction to code up these two pages. When I was finished I decided they could use some improvements. So I made them responsive and also rewrote the structural CSS with Flexbox and CSS Grid. The weekend before I completed a Scrimba class in CSS animation. So I also added a little fade-in comment to the recipe cards (unfortunately, it doesn’t show up in Github pages). If you refresh the page and scroll to here, you can see the fade-in effect.
Refresh to see a 10 second Fade-in after a 2 second delay.
*I heard this idea on a CodeNewbie podcast (which is a great podcast, btw). I’m sorry, I don’t remember who suggested it.