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="http://miracleart.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 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!