Want to get better at code? Teach someone CSS.

Recently, a friend asked me for programming guidance. She is an absolute beginner who knows nothing about programming. I decided to start with my own starting point: HTML and CSS. We use CodePen and start copying and modifying existing code snippets. Soon, a learning path was clearly presented to us.

The purpose of this article is not to teach the basics of CSS to readers who have mastered the basics of CSS, but to focus on content that inspires beginners to learn and hopefully inspires you to pass on knowledge to others when you have the opportunity. It’s so gratifying to help others, and in turn, I’ve learned some valuable experiences that have changed the way I think about code. Win-win!

Here are five lessons I learned after teaching others CSS:

Lesson 1: Don't start from scratch

When I started learning web programming 12 years ago, I started with layouts – using floats, margins, fills, and position declarations for positioning. This may seem a bit dated these days, but that's where I started with my new programming partner at the time.

The result is not ideal.

As you might guess, starting with "This is how to locate an empty box in the center of the screen" is a mistake. How boring! Although I was impressed with my ability to demonstrate how Flexbox positioned elements in the center of the screen (more on that later), I immediately faced many other problems that were not related to location.

"So how to change the color?"

“Can it change shape when hovering?”

“What fonts can be used on the web page?”

I thought it would take us a few more weeks to learn this.

So my plan to teach 12 columns of grids was put on hold, we brought up Chris' named color table along with a few copied code snippets and started trying. First, we changed the color of the Cassidy Williams Netflix/Netlify logo. Wow! It instantly attracted her attention.

<code><a href="https://www.php.cn/link/2080dd731c0a27c6944f58acae270b81" target="_blank"> 
</a></code>
<div></div>
<div></div>
<div></div>

<div>Prettier</div>

Then some simple tweaks to CSS:

 <code>body { background: #F9F2DB; color: #092935; font-size: 50px; } a { color: #092935; } .logo .uno, .dos, .tres { background: #C61561; } .logo .dos { box-shadow: 0 0 20px #F9F2DB; } .logo::before { background: #F9F2DB; } .name { letter-spacing: 8px; }</code>

Within minutes, my friend was fascinated! There is no boring positioning to worry about, just a few simple lines of code can turn familiar things into something completely different.

Then she realized that she could change the color of anything! We loaded some well-known websites in our browser and changed some text and background colors using DevTools, all of which were done in a few minutes. The mission is completed! My friend was fascinated.

Lessons learned: Don't worry about trying to build from scratch. Try using existing resources!

Lesson 2: Comments

This is not part of my plan for the course, but the question arises about why some CSS sections start with / and end with / so we discuss this.

This made me start thinking about my work. I really didn't write enough code comments. Observing a new programmer annotating everything (I mean everything ) made me realize how useful the comments are, not only for yourself, but for a wider team, and even for you in the future . (Sarah Drasner has a great speech on this topic).

Here's the thing: Before that, I thought I had been quite diligent in writing comments. However, observing others doing this made me realize how many times I looked at a piece of code (especially JavaScript) and wish I had added a line or two there to remind myself what I was doing at the time. A ten-second task might save me five minutes (or more) of time. This accumulates, and now is where I am working to improve.

Lessons learned: Write more notes.

Lesson 3: Positioning

We started with some basic HTML and honestly, I almost immediately lost my glory when I saw my friend's eyes. (Unlike editing pre-written CSS) It looks too boring when you can't see it work right away. However, we persevered and achieved results.

Trust me, don't use 1 pixel border around empty

The element is positioned. You will lose your audience's attention very quickly. Put a picture of the dog—or baby Yoda or pizza—as long as it’s not empty. Then we turned to Flexbox. At first we found out that there were a bit too many CSS Grids. We briefly looked at the CSS Grid, but when reading a lot of articles about it, it's obvious that many people assume that readers are already familiar with CSS, especially Flexbox. My friend decided to start with Flexbox.

I admit: I'm so used to using UI frameworks (especially Bootstrap) that I seldom write CSS myself for positioning. I know how it works and (mostly) statements, but I still rarely write it out myself, even in relatively easy situations. Teaching made me think about my dependence on UI frameworks. Yes, they are undoubtedly great and save a lot of time on our project, but I remember using Bootstrap in a recent project that basically only has two pages and probably doesn't need it at all!

Lessons learned: If the project is small and the number of elements that need to be positioned is minimal, consider giving up the framework and writing code from scratch! The end result will be lighter, faster, and more satisfying!

Lesson 4: Typesetting

I like typography. I've been lucky enough to work with great designers over the past few years, and it really helped me grasp the nuances of typography. It’s amazing how changes to things like line height and word spacing can lift the design from normal to excellent. This is something I want the freshmen I long to learn to master. Well, I don't have to bother because the only thing I was interested in initially was changing the fonts, and then, what was crucial to me was the number of fonts we could use. The choice is almost limitless, the services that provide web fonts and foundries have surged to the point where anything is possible in the past few years, at a very fast pace and have a small impact on loading time.

But the thing about designers (and front-end developers like me) is this: we may be a little narrow-minded when it comes to font selection. Designs tend to stick to the same fonts (Roboto and Open Sans?) of the same service, because we know they are easy to implement and work. Exploring fonts with a newbie forced me to go beyond old standards and try something new. I'm now looking for new combinations and tweaking how they work on the screen and the impact on the overall look and feel of the design. In short, teaching others about typography has improved my own typography history, which may have been stuck around 2017.

Lessons learned: Keep up with the latest updates in typography.

Lesson 5::hover makes everything fun

So far, everything is going well, but as you might imagine, things are still fairly static. Without real plans, we accidentally added the hover effect of the element, which immediately caught her attention, like the first time changing the color!

Hover adds interactions and makes it easy to impress, which makes them perfect for beginners to try. Scale objects, change the box from square to circle, hide content – ​​all of which can be done easily, so hovering is the ideal way for new programmers to get instant results. Here's the thing: "'play like this'" will open other doors. "What if I just do this?" This is a question that many of us rarely ask ourselves in our daily work. With clear designs, there are few opportunities to play, and there are also few opportunities to experiment.

So, here’s the last lesson: Make time to play. Just being asked, “How do you make this thing do that?” forces me to learn new things, learn new things about CSS, and understand what I can bring back in my daily routine. Experiment (or better yet, play) makes me a better designer and I will do more.

Lessons learned: Make time to play.

in conclusion

If my time teaching newbie CSS has taught me anything, it is that I rarely write code from scratch again. Code snippets and autocomplete saved me hours of time, but it was these conveniences that made me forget something very basic. Something I should know. By teaching others, my coding has improved overall even if it only takes 15 minutes occasionally, and my horizon is open to new ideas and techniques that may not have been considered before.

As for my friends? Well, she was so obsessed with CSS for a short time we were together that she was now taking an online course that included HTML, and now that she knew what HTML could do, it didn't seem so boring!

The above is the detailed content of Want to get better at code? Teach someone CSS.. For more information, please follow other related articles on the PHP Chinese website!