This article will teach you how to break complex coding concepts into the simplest terms.

Let's get started 💃

The Feynman Technique Of Learning

Richard Feynman, a Nobel Prize-winning physicist, created the Feynman method for learning. He enjoyed explaining complex topics in simpler terms.

In Feynman's view, the best way to study an idea was to ask hard questions and fully understand it.

For more information about Richard Feynman, see this article.

"If you want to learn something, read about it. If you want to understand something, write about it. If you want to master something, teach it." - Yogi Bhajan.

Feynman's technique, in a nutshell, revolves around the belief that you can't explain something well if you do not know it well yourself.

When you try to explain what you know to someone who doesn't know anything about it, you'll notice the flaws in your understanding. The goal is to communicate what you've learned in a simple way that a child can understand.

What Are the Benefits of Using the Feynman Technique?

Here are a few of the benefits of using Feynman's learning techniques:

• It helps you gain a thorough understanding of what you're learning. If you're having trouble understanding JavaScript loops, for example, try this learning method.
• It helps you learn new ideas. This technique allows you to learn new things fast, recall what you have learned, and be more productive.
• It helps you become a better teacher. You get better at teaching when you keep sharing your knowledge with others.
• It improves your critical thinking ability. You will be able to reason in an organized manner to explain complex stuff in simpler terms.

The Four Steps of the Feynman Technique

The Feynman Technique is made up of four significant steps:

• Choose a topic you want to learn about.
• Explain it to a 12-year-old.
• Review your explanation.
• Simplify.

Step 1 - Choose a topic you want to learn about

First, you should come up with a subject or topic you would like to learn and then write it at the top of a piece of paper.

For example, if you want to study JavaScript loops, write it as a heading on a blank piece of paper. As you keep learning about JavaScript loops, write whatever you know on that piece of paper. Write it so that someone who knows nothing about JavaScript loops will understand it.

Notes on JavaScript Loops

Loops allow us to repeatedly run a code block until we meet a specific condition. We call this condition the stop condition.

Types of loops

• for loop
• for-of loop
• for-in loop
• While loop
• Do-while loop

For loop

For loop allows us to repeat a series of actions until a specific condition is false. When a stop condition is true, the for loop runs, and when it is false, it stops running.

For loop syntax:

for (initialExpression; stopCondition; incrementExpression) {
  // code block to be executed
}

Example of a for loop:

for (let i = 1; i<=10; i++) {
   console.log(i);
}  // 1,2,3,4,5,6,7,8,9,10

While loop

The while loop continues to run as long as the stop condition is true. It will stop running if the condition resolves to false.

We use a while loop when we are unsure of the number of times the loop will run before it starts running.

While loop syntax:

while (stop condition) {
   // code block to be executed
}

Example of a While loop:

let i = 1;

while(i <=10) {
   console.log(i);
   i++
}  // 1,2,3,4,5,6,7,8,9,10

Do-while loop

Do-while loops run a block of code (loop's body) at least once before rerunning if the stop condition is true or false.

Do-while loop syntax:

do {   
  // code to be executed 
} while(stop condition)

Example of a Do-while loop:

let i = 1;
do {
  console.log(i);
  i++;
} while(i <= 10) // 1,2,3,4,5,6,7,8,9,10

Check out this article for a detailed explanation of JavaScript Loops.

Before moving on to step 2, do more research on JavaScript loops or take a practice test to see how good you are.

Check out this article for resources to help you practice web development.

Once you have a firm understanding of the topic (JavaScript loops), proceed to step 2.

Also, just a note – paper can be anything you use for writing, such as your phone's notebook app to any other app you use every day.

Step 2 - Explain it to a 12-year-old

Now that you have a clear understanding of JavaScript loops, it's time to explain it to a 12-year-old.

You don't have to look for an actual 12-year-old to teach. All you have to do is explain loops in the most basic terms possible, such that even a child can understand.

Explanation of loops to a 12year old

Imagine you have a box of 20 candies and want to give them to your schoolmates. Each time there is still candy in the candy box, someone gets one until there is none left.

A classmate gets candy as long as there's candy in your box. If there's no candy left in the box, no one gets candy. To keep sharing sweets with more of your friends, you'll need to go out and buy more.

JavaScript loops help to make a series of activities repeat themselves. It allows you to run a code block repeatedly until we meet a specific condition and it stops running.

Loops operate similarly to your candy box. The code block must meet a specific condition to run or stop running.

• If the condition is true, your code runs

• If the condition is false, your code stops running

for (let candyBox = 1; candyBox <=20; candyBox++) {
   console.log(candyBox);
}  // 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20

• let candyBox = 1 means that your code should start counting at 1

• candyBox <= 20 is the condition that must be met for your code to run. It means that your code should stop counting when it gets to 20.

• candyBox++ means that your code should increase by 1 for every time it runs

There's a saying that using complex terms to explain a topic masks your lack of understanding. So your ability to explain loops in the simplest terms possible means you know what you are saying through and through.

How to explain your code – when you don't have a 12 year old to talk to

I know some of you reading this article are thinking, but what if I don't have somebody to explain what I'm learning?

That's not a problem. You can use a variety of methods to explain what you've learned, including:

Technical writing: You don't have to be a great writer to start writing. All you have to do is start getting knowledge down on paper, so to speak.

Open platforms like dev.to, Hashnode, and Medium make it easy to share what you learn. So sign up for one of the platforms and begin writing. Also, you can check out Google's free technical writing course.

Join online communities: Join online communities to share what you have learned. When you join online developer groups, you'll meet people who share your interests. This can help you become comfortable sharing and answering questions.

A fantastic developer community to join is the freeCodeCamp online forum. You can also use social media platforms like YouTube, TikTok, Twitter, and so on.

You can also join my community for developers on Twitter to ask questions, share ideas, and more.

Another way you can explain what you've learned is by doing it in front of an imaginary audience. Pretend you're teaching a group of 12-year-olds about JavaScript loops.

Teaching to an imaginary audience might be fun, but they cannot ask questions. This learning method works best when you use a real audience because they can ask questions.

When your audience asks you questions, you get to identify areas in which you need to improve.

Fun tip: you can also try out the rubber duck technique, where you explain your code to a rubber duck (or another inanimate object) to make sure you've thought it through clearly.

Step 3 - Review Your Explanation

Step 2 will help you identify specific areas where you need to improve. And then in step 3, you can review how you explained the topic to see what you could do better.

Review your loop explanation and identify areas where you think it fell short. Now that you know where you fell short, go back over your learning material to understand better.

Consider using other learning resources if possible. Study until everything you couldn't explain before is clearer to you.

Step 3's goal is to change your areas of weakness into your areas of strength.

Step 4 - Simplify Your Explanation

As a result of step 3, you now have a better knowledge of JavaScript loops. Step 4 requires you to practice step 2 again with your new understanding of loops.

Take up your notes and simplify every area of loops you couldn't explain before. Rewrite your loops article or give someone else a better explanation.

You can also pretend you're teaching a group of 12-year-olds again about JavaScript loops. If you cannot explain a particular part of the topic, go back to step 3 to understand it better.

This method of learning works best for topics that are tough to understand. It is not an effective learning method if you already understand a concept.

Conclusion

This learning style is all about understanding a topic to the point where you can explain it in your own words. When you describe it, act as though you're educating a child to see how well you know the subject.

Also, keep in mind that you can use this learning method to study any concepts that you find difficult.

Thank you for reading. I hope you enjoyed the article! If you have any questions or a learning strategy you would love to share? Send a message on Twitter or LinkedIn.

Resources

Here are some resources that may be useful to you:

• What are the different JavaScript Loops?
• Twitter Community for Developers
• Learning From the Feynman Technique
• Getting work done with the Pomodoro Technique

And you might see a color scheme or font on a specific website that you want to incorporate into your blog or web app. But you'll need a browser extension to see the website's color scheme and other CSS features.

The CSS overview feature in Chrome Dev Tools lets you see these CSS properties.

In this post, we'll go over how to use the CSS overview feature in Chrome Developer Tools. We'll also learn how to use CSS overview to get the colors and other CSS properties you want to use in creating a web page.

Let's get started. 💃

What is the CSS overview panel?

The CSS overview panel is one of the newest features of Chrome Developer Tools. It serves as a preview tool that allows you to see the different CSS properties used in creating a web page.

It displays CSS properties such as:

• The colors used on a web page.
• The line height of each element used on a web page.
• The font-size of each element used on a web page
• The font-families of each element on a web page.
• The font weights of each element used on a web page.

What are Chrome Developer Tools?

Chrome Developer Tools is also known as Chrome Dev Tools.

Chrome Dev Tools are a suite of web developer tools that come pre-installed in the Chrome browser.

Check out this article to know more about Chrome developer tools.

Here are some of the advantages of using Chrome Dev Tools:

• It enables you to create better websites in a shorter amount of time.

• It enables you to make changes to your code, test it, and inspect it.

• Chrome Dev Tools give developers more control over their web applications and browsers.

• It enables you to assess the general performance of a website.

How to Access Chrome Developer Tools in Your Browser

You can access Chrome Developer tools in three different ways:

1. Chrome’s Menu:

2. Click on the three vertical dots located on the top right corner of your chrome browser. It will bring up a drop-down menu with more tools at the bottom of the screen.

3. Click on more tools.

4. Click on developer tools.

2. Inspect:

3. Right-click on the chrome browser.

4. Click on inspect.

3. Shortcuts:

4. For Windows - CTRL + Shift + I OR F12.

5. For Mac - CMD + Shift + I.

Once you click on the shortcut keys, the developer tools open.

When you press CTRL + Shift + I, it displays the last panel you opened by default. It shows the element, console, network, or performance panel, among other things.

CTRL + Shift + C opens the element panel first by default.

How to Use CSS Overview in Chrome Dev Tools

The steps below will walk you through how to use the CSS overview feature to get the CSS properties used on a web page.

Step 1 - Open Chrome Dev tools

We've already covered the various methods for accessing Chrome developer tools. You should be familiar with them now.

As a quick reminder, you can open Chrome dev tools by pressing Ctrl + Shift + I on Windows and Linux. Use CMD + Option + I on Mac.

Step 2 - Click on More tools

Click on the three vertical dots located on the top-right of Chrome dev tools.

Select "More Tools" from the drop-down menu.

You'll discover a variety of options when you click "More Tools." From the various options, select the CSS overview feature.

Step 3 - Click on Capture Overview

When you click on CSS Overview, you'll see a list of its functions.

Functions such as:

• Capture an overview of your page's CSS.

• Identify potential CSS improvements.

• Locate the affected elements in the element panel.

Click on the Capture Overview button.

A menu with five sections appears after clicking the Capture Overview button.

The five sections are:

• Overview summary
• Colors
• Font info
• Unused declarations
• Media queries

Let's go over each of the five sections one by one to see how they work.

CSS Overview Summary

The Overview summary contains a list of the CSS elements used in building the web page.

The Overview summary displays a summary of the CSS on your website, such as:

• The number of elements used on the web page.
• The different types of selectors used in creating the web page.
• The number of inline style elements used on the web page.
• The number of external stylesheets used on the web page.

An Illustration of the overview summary.

The example above shows the various CSS elements used to build the web page.

Colors

The color panel displays all the colors used in creating the web page. It has a palette of colors for the background, text, fill, and borders. It also highlights low-contrast texts issues on the web page.

An illustration of the color panel.

The image above shows you the different colors used in creating the web page.

The beauty of the Color panel is that each color is clickable. If you click on a particular color in the Color panel, a list of elements that use that color appears. When you click on each element, it takes you to the element panel for inspection.

I clicked on color #49FCD4 in the image above, and it brought up a list of elements with that color.

You can also hover over an element in the lists of elements displayed. When you move your cursor over the element, it highlights the element on the web page.

When I hover my mouse over the header element in the image above, it highlights the header on the web page.

Just a quick note: hovering refers to moving your cursor over anything. It means to place a cursor over text, an image, or other objects on the screen without clicking on them.

Font Info

The font info panel displays the typefaces used in the development of the website. It shows you the font-size, line-height, font-weight, and font families used in creating the website. If you click on the occurrences, you will see a list of the affected elements.

An illustration of the font info panel.

The above image shows you the different typefaces used in creating the web page.

Unused Declarations

You can find CSS styles that do not affect the web page by using unused declarations.

An illustration of the unused declaration panel.

The image above shows the number of unused declarations on the web page. The vertical alignment applied to the element that isn't inline or a table cell will not affect the page.

You can also click on the occurrences to see a list of elements affected, like the font info and color panel.

Media Queries

The media query panel displays a list of all the media queries used in creating the web page. You will be able to examine the various widths and screen resolutions used in creating the web page.

An illustration of the media query panel.

The above example displays the number of media queries used in creating the web page. It lists the screen resolutions used in order of occurrence, from highest to lowest. If you click on the occurrences, you will see a list of the affected elements.

Conclusion

When it comes to evaluating CSS attributes on a web page, the CSS overview tool comes in handy. It allows front-end developers and designers to inspect the CSS properties on a web page.

Thank you for reading 💙. If you would like to chat or have any questions, please feel free to contact me anytime on Twitter: @cessss_ and linkedIn: Success.

Also, follow my blog to read some of my other stuff @cesscode.

Happy coding! 💙

Because of this, it's important that you stick to good coding practices. If you don't follow the best practices, you will create a bad user experience for the web user.

There's always something new to learn in HTML, whether you're a coding newbie or an experienced pro.

In this article, we will talk about the basic best practices of HTML.

Let's get started. 💃

HTML Best Practices

HTML best practices are rules that help you create websites that are easy to maintain and read.

Here are some guidelines to keep in mind when building an HTML-based website:

Use only one

element for one code sheet

There are six different heading tags in HTML, <h1> to <h6>. The <h1> tag is the main heading (subject of the web page) while the <h6> tag is the least important heading.

The <h1> tag is bigger than the <h2> tag, the <h2> tag is bigger than the <h3>tag, all the way down to the <h6> tag. Each of the headings decreases in size according to its importance.

It is important to avoid using more than one <h1> element for one code sheet.

Don't do this ⬇️:

<main>
<div>
<h1>Can Coding be fun?</h1>
<p>The more you code the better you become</p>
</div>

<div>
<h1>Coding is fun</h1>
<p>It is always better when you have fun coding</p>
</div>
</main>

In the above example, we used the <h1> tag on the first and second <div>. Coding this way will work, but although you will achieve the same goal, this is not the best practice.

Do this instead ⬇️:

<main>

<div>
<h1>Can coding be fun?</h1>
<p>The more you code the better you become</p>
</div>

<div>
<h2>Coding is fun</h2>
<p>It is always better when you have fun coding</p>
</div>

</main>

Having only one <h1> element on a web page is vital for Search Engine Optimization (SEO). It helps search engines understand what a web page is all about (the main idea of a web page).

Do not skip heading levels in HTML

When using the header tags, it's vital to proceed from <h1> to <h2> to <h3> to <h4> and so on...

Don't use <h1> and then jump to <h3> when using header tags. It's difficult for web visitors using a screen reader to understand the contents of your web page when you skip heading levels.

A screen reader is a technology that helps people who have difficulty seeing access and interact with digital content, like websites or applications via audio or touch. The main users of screen readers are people who are blind or have very limited vision.

You can read a little introduction to screen readers here.

Don't do this ⬇️:

<h1>Coding is fun</h1>
<h3>It is always better when you have fun coding</h3>
<h5>Consistency is Key</h5>

Do this instead ⬇️:

<h1>Can coding be fun?</h1>
<h2>The more you code the better you become</h2>
<h3>Coding is fun</h3>

Use the figure element to add captions to your images in HTML

It's advisable to use the <figure> element when adding captions to your images. It is important to use the <figcaption> element along with the <figure> element for it to work.

Don't do this ⬇️:

<div>
<img src=“a-man-coding.jpg” alt=“A man working on his computer”>
<p>This is a picture of a man working on his computer</p>
</div>

The above example will work as expected but is not the best way to go about it. In a situation where the image fails to load you will have the alt text and the text on the <p> element showing on the screen. It will be difficult for a web visitor using a screen reader to tell the difference between the <p> and alt text.

Always keep in mind that just because your code works doesn't mean you're following best practices.

Do this instead ⬇️:

<figure>
<img src=“a-man-coding.jpg” alt=“A man working on his computer”>
<figcaption> This is a picture of a man working on his computer</figcaption>
</figure>

The above example is the best way to add captions to your images.

It is important to add captions to your images this way for:

• Search engine optimization: It is easier to find your images on search engines.
• It will be easier for web visitors who use screen readers to understand the content of your web page.

Do not use divs to create headers and footers – use semantic elements instead

HTML semantic elements mark up the structure of a document in a more meaningful way on a webpage. It is best practice to use HTML semantic elements for the proper assembly of your web page.

Avoid using <divs> in place of HTML semantics. Do not use <div> elements to show headers and footers on your web page. Use semantic <header> and <footer> elements instead.

The <header> element shows the navigation or the opening part of the web page.

The <footer> element shows copyright information or navigation links about the web page.

Don't do this ⬇️:

<div class="header">
<a href="index.html">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>

<div class="footer">
<a href="index.html">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>

In the above example, we used the <div> tag as a container for the <header> and <footer>. Coding this way will work, but although you will achieve the same goal, this is not the best practice.

Do this instead ⬇️:

<header>
<h1></h1>
</header>

<footer>
<a href="index.html">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</footer>

The above example is the best way to add <footers> and <headers> to your web page.

It is important to add <footer> and <header> using HTML semantic elements because:

• Using semantic elements for your header and footer makes your code easier to read.

• It provides a better user experience for web visitors. It will be easier for web visitors who use screen readers to understand the content of your web page.

Checkout this article to know more about HTML semantic elements.

Avoid using <b> and <i> to bold and italicize texts on a web page

The <b> and <i> tags are also known as the bold and italics tag. They are both used to highlight words in a text on a web page.

You shouldn't use <b> and <i> for bolding and italics because they have no semantic meaning. Use the font-weight CSS property or use the <strong> and the <em> tags instead.

You use the <strong> tag to make a text on a webpage important. It highlights or bolds a text on a webpage. The <em> tag emphasizes the text in a webpage. It also displays the text in italics like the <i> tag.

Don't do this ⬇️:

<p><i>Code at your own pace</i><p>

<p><b>code at your own pace</b><p>

The displayed texts will be bold and italicized in the example above. It will be of no importance to the web user using a screen reader. It has no semantic meaning.

The HTML5 specification says that the <b> and <i> tags should only be used as a last resort if no other tag is available.

Do this instead ⬇️:

 <p><strong>Code at your own pace</strong><p>

<p><em>code at your own pace</em><p>

Don't place block-level element within inline elements

Block-level elements start in a new line on a web page. By default, they stretch from the beginning of the line to the end on a web page. You won't be able to add more content inline to a block element without using CSS.

The <p>, <h1>-<h6>, and the <div> elements are some of the examples of a block level element.

The inline element covers the smallest area on a web page. They do not start on a new line on a web page.

The <span>, <em>, and the <a> elements are some of the examples of inline elements.

You cannot place block elements inside inline elements.

Don't do this ⬇️:

<a href="#" >

    <p> Visit freecodecamp </p>

</a>

You cannot wrap <p> inside a <a> element because <p> is a block-level element and <a> is an inline element.

Do this instead ⬇️:

<p>
Visit <a href="www.freecodecamp. org" target="_blank">FreecodeCamp</a> 
to learn Javascript
</p>

The above example is the best way to nest inline elements inside a block-level element.

It is important to note that:

• The block-level element cannot be nested inside an inline element.
• The inline element can be nested inside a block-level element.
• The inline and the block-level element can be nested inside the block-level element.

Just a quick note: nested, in the above example, means to place inside. So when I say it can't be nested, I'm referring to the fact that it can't be placed inside.

I hope you understand these three simple rules used for nesting elements.

It is also possible to convert block-level elements to inline elements and vice versa using CSS. Use display: inline-block and display: inline to convert from block-level to inline element.

It's important to remember that just because your code works doesn't mean you're following best practices.

This is why I always recommend using the W3C markup validation service to double-check your codes.

This validator checks the markup validity of web documents in HTML, XHTML, SMIL, MathML, etc: W3c markup validation service.

You can double-check your code by copying its URL and pasting it on the site or uploading your HTML file.

Conclusion

I hope this article helped you learn a thing or two about HTML best practices. I tried to include only the most useful tips so you can start using them right away!

If you have any other questions or comments, please feel free to contact me anytime on Twitter: @cessss_ and LinkedIn: Success

I'll try to respond as soon as possible! Thank you for reading 💙.