A buddy of mine recently asked me personally to teach her to code. The girl was an absolute beginner, having no clue what coding really involves. We decided to start where I began: HTML and CSS. Using CodePen, we started forking Pens plus altering them. Soon, a understanding path started to unravel.
The aim of this informative article is not to teach basic CSS to the people who already know it but rather in order to highlight the things that inspired a newbie and hopefully inspire you to give some knowledge to others when the opportunity arises. It felt great to help someone out and, subsequently, I learned some really useful lessons that have changed the way I believe about my code. Win earn!
So , here we go: 5 lessons I learned from training someone CSS.
Lesson 1: Do not start from scratch
When I starting code for the web 12 years ago, We began with layout — setting with floats, margins, padding plus position declarations. It might seem obsolete these days, but still, this is where I proceeded to go right away with my new code buddy.
It didn’t go that will well.
As you might guess, beginning with something like, “Here is how to placement an empty box in the middle of the display screen, ” was a mistake. How uninspiring! And even though I was impressed with my very own ability to demonstrate how Flexbox may position an element in the center of the display (more on that later), I used to be immediately faced with lots of additional, non-positional questions.
“So how do you change the shades? ”
“Can it change form when hovered over? ”
“What fonts can you use on the web? ”
I believed we were weeks away from all that.
Therefore , my plans of teaching the 12-column grid went out the window and pulled up Chris’ named colour chart alongside a couple of forked Writing instruments and started playing around. First off, we all changed the colors of Cassidy Williams Netflix/Netlify logo. Wow! Immediate hit.
< a class=”container” href=”https://netlify.com” target=”_blank”>
< div class=”logo”>
< div class=”uno”> < /div>
< div class=”dos”> < /div>
< div class=”tres”> < /div>
< /div>
< div class=”name”> Prettier< /div>
< /a>
Then a couple of simple tweaks to the CSS:
entire body
  background: #F9F2DB;
  color: #092935;
  font-size: 50px;

  color: #092935;

. logo. primero,. dos,. tres
  background: #C61561;

. logo. 2
  box-shadow: 0 0 20px #F9F2DB;

. logo:: before
  background: #F9F2DB;

. title
  letter-spacing: 8px;

Within minutes, my friend had been hooked! There was no boring setting to worry about, just a clear example of what sort of few simple lines of program code can change something so familiar straight into something entirely different.
Then it kicked in that you can change the color of anything at all! We loaded up a couple of popular sites in the browser and transformed the colors of some textual content and backgrounds with DevTools, almost all in a couple of minutes. Mission accomplished! My good friend was hooked.
Lesson learned: Do not worry about trying to build something from the beginning. Have a play with what’s already on the market!
Lesson 2: Comments
This isn’t exactly where I had planned to go with the planned class, but the question associated with why some parts of CSS begin with /* and end with */ came up, so we went from it.
This one really had me thinking of my own work. I really do not remark my code enough. Watching a brand new coder comment everything (and I am talking about everything) reminded me just how useful comments are, not only for yourself, but additionally to a wider team, or even upcoming you. (Sarah Drasner has a excellent talk on this topic).
And here could be the thing: until then, I thought I used to be commenting pretty diligently. However , viewing someone else do it made me understand how many times I look at some code (particularly JavaScript) and desire I had put a line or even two in there to remind me personally what I was doing. A ten-second task might have saved me 5 (or perhaps even more) minutes later on. That adds up and is now some thing I am working on.
Lesson learned: Opinion more.
Lesson 3: Positioning
All of us started with some basic HTML, plus honestly, I saw my friend’s eye glazing over almost immediately. This just looks so dull whenever you can’t see it doing anything immediately (unlike editing pre-written CSS). Nevertheless , we stuck with it, and obtained results.
Take my word for this, don’t start by positioning empty < div> elements with 1-pixel edges around them. You’ll lose your own audience very quickly. Put a picture of the dog in there — or child Yoda or a pizza — provided it’s anything other than an empty component.
We then turned to Flexbox. All of us actually found CSS Grid a tad too much at the start. We looked quickly at CSS Grid, but when reading through lots of articles about it, it’s apparent that many assume the reader already offers familiarity with CSS, Flexbox in particular. My good friend decided to start with Flexbox.
An entrance on my part: I am so utilized to using UI frameworks (especially Bootstrap) that I very rarely position anything at all in Flexbox by writing the particular CSS myself. I know how functions and (most of) the declarations, but I still very hardly ever write it out myself, during situations where it would be relatively easy. Training made me think about my reliability on UI frameworks as a whole. Indeed, they are undoubtedly amazing and conserve us tons of time on tasks, but I recalled using Bootstrap on a recent project that was basically two pages and probably did not need it!
Lesson learned: If the task is something small with a minimum number of elements to position, then think about ditching the framework and program code from scratch! The end result will be lightweight, quick, and way more satisfying!
Lesson four: Typography
I love typography. I’ve already been lucky enough to work with great designers in the last few years and that has really allowed me to dial in on the nuances associated with type. It’s amazing how adjustments to things like line-height and letter-spacing can really help lift a design through average to amazing. This was some thing I was keen to impress on my eager new student. Nicely, I needn’t have bothered, since the only thing of interest (initially) has been changing the fonts and then, crucially for me, the sheer number of fonts available for us to use. The choices are usually almost limitless and the services plus foundries offering web fonts have got exploded in the past few years to a stage where anything is possible, at acceleration with little impact on load periods.
But here is the thing about creative designers (and front-end developers like myself): we can be a bit narrow-minded within our font choices. Designs tend to go through the same fonts from the same solutions (Roboto and Open Sans anybody? ) because we know they are simple to implement and that they work. Exploring fonts with someone new to the trade pushed me to look beyond the old staples and try a few new things. I am now looking for new pairings basically together and dialing in about how they work on screen and effect the whole look and feel of a design. To put it briefly, teaching someone else about type provides improved my own journey with kind, which was probably stuck in something similar to 2017.
Lesson learned: Keep up up to now with type.
Lesson 5.: float makes everything fun
Things had been going OK up to this point, yet as you can probably imagine, things had been still pretty static. Without actually planning, we stumbling into including a hover effect on on an component and it was an instant hook, much like it was changing colors for the first time!
Hovers add interaction and easily make an impression on, which makes them great for a newbie to play around with. Scaling items, changing a box from sq . to round, hiding content — these are the types of thing that may all be done so easily that will hovers are an ideal way for a brand new coder to get instant results. Plus here’s the thing: “‘playing” around such as this opens other doors. “What easily just do this? ” is some thing many us rarely get to inquire ourselves in our day-to-day jobs. Along with defined designs to work from, there is usually little chance to play and similarly less chance to experiment.
So , this is actually the final lesson: Make time to play. Simply by being asked, “How do you get this thing do that? ” has pushed me to learn new things, see what is new in CSS, and see the things i can take back into my day-to-day function. Experimenting (or better yet, playing) made me a better designer, and I can be doing more.
Lesson discovered: Make time to play.
If the time teaching CSS to a beginner has taught me anything, it is that I rarely write code from the beginning anymore. Code snippets and autocomplete save me hours, but it is those same conveniences that allow me to forget about some really basic things. Stuff I should know. By training someone else, even if just for 15 minutes occasionally, my coding has generally enhanced and my eyes are open to brand new ideas and techniques that I might not have otherwise considered.
And as intended for my friend? Well, she was therefore taken by CSS in our short time jointly that she is now doing an internet course that includes HTML, which does not seem so dull now that the girl knows what it is capable of doing!