How to Build a Real-Time Word Counter Tool with HTML, CSS, and JavaScriptBy hgladmin / September 30, 2026 The </code><strong>:</strong> This is the main input box where users will type or paste their content.</p><br /> </li><br /> <li><p><strong>The</strong> <code><script></code> <strong>tag:</strong> This connects your HTML to the logic you will write in the next steps.</p><br /> </li><br /> </ul><br /> <h2 id="heading-step-3-style-the-tool-with-css">Step 3: Style the Tool with CSS</h2><br /> <p>Next, you'll give your tool a modern, professional look. You'll use CSS Grid to align the statistics boxes perfectly.</p><br /> <p>Open your <code>style.css</code> file and add this code:</p><br /> <pre><code class="language-css">:root {<br /> --primary-color: #007bff;<br /> --bg-color: #f8f9fa;<br /> --text-dark: #202124;<br /> --text-muted: #5f6368;<br /> --border-color: #dadce0;<br /> --panel-bg: #ffffff;<br /> }</p> <p>body {<br /> font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;<br /> background-color: var(--bg-color);<br /> color: var(--text-dark);<br /> margin: 0;<br /> padding: 40px 20px;<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> }</p> <p>.header-section {<br /> text-align: center;<br /> margin-bottom: 30px;<br /> }</p> <p>h1 {<br /> font-size: 2.5rem;<br /> margin: 0 0 10px 0;<br /> font-weight: 800;<br /> }</p> <p>p.description {<br /> color: var(--text-muted);<br /> max-width: 600px;<br /> margin: 0 auto;<br /> line-height: 1.6;<br /> font-size: 1.1rem;<br /> }</p> <p>.tool-container {<br /> background-color: var(--panel-bg);<br /> border: 1px solid var(--border-color);<br /> border-radius: 12px;<br /> padding: 24px;<br /> width: 100%;<br /> max-width: 900px;<br /> box-shadow: 0 4px 12px rgba(0,0,0,0.05);<br /> }</p> <p>/* Stats Grid */<br /> .stats-grid {<br /> display: grid;<br /> grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));<br /> gap: 16px;<br /> margin-bottom: 24px;<br /> }</p> <p>.stat-box {<br /> background-color: var(--bg-color);<br /> border: 1px solid var(--border-color);<br /> border-radius: 8px;<br /> padding: 16px;<br /> text-align: center;<br /> }</p> <p>.stat-value {<br /> font-size: 2rem;<br /> font-weight: 700;<br /> color: var(--primary-color);<br /> margin-bottom: 4px;<br /> }</p> <p>.stat-label {<br /> font-size: 0.9rem;<br /> color: var(--text-muted);<br /> text-transform: uppercase;<br /> letter-spacing: 0.5px;<br /> font-weight: 600;<br /> }</p> <p>/* Text Area */<br /> textarea {<br /> width: 100%;<br /> height: 250px;<br /> padding: 16px;<br /> border: 1px solid var(--border-color);<br /> border-radius: 8px;<br /> font-size: 1rem;<br /> line-height: 1.6;<br /> resize: vertical;<br /> box-sizing: border-box;<br /> font-family: inherit;<br /> margin-bottom: 20px;<br /> transition: border-color 0.2s ease;<br /> }</p> <p>textarea:focus {<br /> outline: none;<br /> border-color: var(--primary-color);<br /> }</p> <p>/* Buttons */<br /> .controls {<br /> display: flex;<br /> gap: 12px;<br /> }</p> <p>button {<br /> padding: 10px 20px;<br /> font-size: 1rem;<br /> font-weight: 600;<br /> border-radius: 6px;<br /> cursor: pointer;<br /> border: none;<br /> transition: background-color 0.2s ease;<br /> }</p> <p>.btn-primary {<br /> background-color: var(--primary-color);<br /> color: #ffffff;<br /> }</p> <p>.btn-primary:hover {<br /> background-color: #0056b3;<br /> }</p> <p>.btn-secondary {<br /> background-color: transparent;<br /> color: var(--text-dark);<br /> border: 1px solid var(--border-color);<br /> }</p> <p>.btn-secondary:hover {<br /> background-color: var(--bg-color);<br /> }<br /> </code></pre><br /> <p>Understanding the CSS:</p><br /> <ul><br /> <li><p><strong>CSS Grid:</strong> The <code>.stats-grid</code> class uses <code>grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));</code>. This makes the four stat boxes automatically stack neatly on top of each other if a user views the tool on a small mobile screen.</p><br /> </li><br /> <li><p><strong>CSS Variables:</strong> Using <code>:root</code> at the top allows you to quickly change the brand color later if you want to use something other than the default blue (<code>#007bff</code>).</p><br /> </li><br /> </ul><br /> <p>At this point, the visual design of your tool is complete. Here's what the final Word Counter will look like in your browser:</p><br /> <img src="https://cdn.hashnode.com/uploads/covers/699c7b22cf5def0f6aaf982b/dc292767-ac0f-4e87-b88c-d64fab38f370.png" alt="Word Counter Tool" style="display: block;" width="600" height="400" loading="lazy"></p> <p><h2 id="heading-step-4-add-the-javascript-logic">Step 4: Add the JavaScript Logic</h2><br /> <p>Now you need to make the tool count the text. You'll use an event listener that watches every keystroke. Every time the user types, it recalculates the words, characters, sentences, and paragraphs.</p><br /> <p>Open your <code>script.js</code> file and paste this code:</p><br /> <pre><code class="language-javascript">const textInput = document.getElementById('textInput');<br /> const wordCountDisplay = document.getElementById('wordCount');<br /> const charCountDisplay = document.getElementById('charCount');<br /> const sentenceCountDisplay = document.getElementById('sentenceCount');<br /> const paragraphCountDisplay = document.getElementById('paragraphCount');<br /> const copyBtn = document.getElementById('copyBtn');</p> <p>// 1. Listen for user input in real-time<br /> textInput.addEventListener('input', updateStatistics);</p> <p>// 2. The Core Counting Logic<br /> function updateStatistics() {<br /> const text = textInput.value;</p> <p> // Character Count (includes spaces)<br /> charCountDisplay.textContent = text.length;</p> <p> // Word Count<br /> const words = text.match(/\S+/g) || [];<br /> wordCountDisplay.textContent = words.length;</p> <p> // Sentence Count<br /> const sentences = text.split(/[.!?]+(?=\s|$)/).filter(sentence => sentence.trim().length > 0);<br /> sentenceCountDisplay.textContent = sentences.length;</p> <p> // Paragraph Count<br /> const paragraphs = text.split(/\n+/).filter(paragraph => paragraph.trim().length > 0);<br /> paragraphCountDisplay.textContent = paragraphs.length;<br /> }</p> <p>// 3. Copy functionality<br /> function copyText() {<br /> if (!textInput.value) return;</p> <p> textInput.select();<br /> document.execCommand('copy');</p> <p> // Provide visual feedback<br /> copyBtn.textContent="Copied!";<br /> setTimeout(() => {<br /> copyBtn.textContent="Copy Text";<br /> }, 1500);<br /> }</p> <p>// 4. Clear functionality<br /> function clearText() {<br /> textInput.value="";<br /> updateStatistics(); // Reset counts to zero<br /> }<br /> </code></pre><br /> <p>Understanding the JavaScript:</p><br /> <ul><br /> <li><p><strong>The</strong> <code>input</code> <strong>Event:</strong> <code>textInput.addEventListener('input', ...)</code> is the secret to real-time updates. It triggers the counting function the exact moment a key is pressed or text is pasted.</p><br /> </li><br /> <li><p><strong>Counting Words:</strong> <code>text.match(/\S+/g)</code> is a Regular Expression that looks for unbroken strings of non-whitespace characters. This is much more accurate than just splitting the text by spaces, because it ignores extra empty spaces left by mistake.</p><br /> </li><br /> <li><p><strong>Counting Sentences:</strong> The <code>.split(/[.!?]+(?=\s|$)/)</code> logic cuts the text into pieces every time it sees a period, exclamation mark, or question mark followed by a space.</p><br /> </li><br /> </ul><br /> <h2 id="heading-step-5-test-your-application">Step 5: Test Your Application</h2><br /> <p>You're completely done coding! Now it's time to verify that your logic works correctly.</p><br /> <ol><br /> <li><p>Open your <code>word-counter-app</code> folder.</p><br /> </li><br /> <li><p>Double-click the <code>index.html</code> file to open it in your web browser.</p><br /> </li><br /> <li><p>Type a few sentences into the text area. Watch the numbers at the top update instantly.</p><br /> </li><br /> <li><p>Try adding double spaces or hitting the "Enter" key to make new paragraphs, and ensure the logic counts them accurately.</p><br /> </li><br /> <li><p>Click <strong>Copy Text</strong> to test the clipboard feature, and <strong>Clear</strong> to reset the board.</p><br /> </li><br /> </ol><br /> <p>By completing this project, you've built a fast, client-side utility tool using pure vanilla JavaScript. You learned how to manipulate strings, use Regular Expressions for text analysis, and create responsive UI grids.</p><br /> <p>If you want to see this exact codebase running in a live production environment, you can try out this <a href="https://99tools.net/word-counter/">Online Word Counter</a>. Keep building, and happy coding!</p></p> <p> </section></p> <p> <div class="sidebar"></p> <p> <section class="partner-courses partner-courses-rail" aria-labelledby="partner-courses-label-rail" data-test-label="class-central-course-rail"><br /> <p class="partner-courses-label" id="partner-courses-label-rail">Recommended courses from our partners</p><br /> <div class="partner-courses-card"></p> <p> <div class="partner-courses-disclosure"><br /> <a class="partner-courses-logo-link" href="https://www.classcentral.com/" rel="sponsored noopener noreferrer" target="_blank"><br /> <svg role="img" class="partner-courses-logo" width="128" height="18" viewBox="0 0 1000 140.326" xmlns="http://www.w3.org/2000/svg" fill="currentColor" data-test-label="class-central-logo"><br /> <title>Class Central</title><br /> <g><br /> <g><br /> <path d="M152.461,0H15.246A15.422,15.422,0,0,0,0,15.592V124.735a15.421,15.421,0,0,0,15.246,15.591H152.461a15.421,15.421,0,0,0,15.246-15.591V15.592A15.422,15.422,0,0,0,152.461,0Zm0,124.735H125.936v-7.986c0-2.5-1.532-4.535-3.422-4.535H91.71c-1.89,0-3.422,2.03-3.422,4.535v7.986H15.246V15.592H152.461Z"></path><br /> <path d="M63.585,91.937c7.34,0,13.14-1.721,18.305-6.432l-7.975-9.7a10.918,10.918,0,0,1-8.971,3.808c-6.343,0-11.055-5.8-11.055-13.05,0-7.068,4.531-13.049,11.418-13.049,3.806,0,6.524,1.54,9.243,4.17l7.611-9.878a27.133,27.133,0,0,0-18.213-6.616c-15.042,0-24.919,11.237-24.919,25.373C39.029,81.516,49.087,91.937,63.585,91.937Z"></path><br /> <path d="M110.1,91.937c7.34,0,13.14-1.721,18.305-6.432l-7.974-9.7a10.92,10.92,0,0,1-8.972,3.808c-6.343,0-11.055-5.8-11.055-13.05,0-7.068,4.531-13.049,11.418-13.049,3.806,0,6.524,1.54,9.243,4.17l7.611-9.878a27.131,27.131,0,0,0-18.213-6.616c-15.042,0-24.919,11.237-24.919,25.373C85.546,81.516,95.6,91.937,110.1,91.937Z"></path><br /> </g><br /> <g><br /> <path d="M266.762,105.755c-8.464,7.72-17.965,10.539-29.989,10.539-23.754,0-40.234-17.072-40.234-41.568,0-23.158,16.183-41.567,40.827-41.567A44.456,44.456,0,0,1,267.206,44L254.735,60.18c-4.456-4.308-8.909-6.83-15.143-6.83-11.283,0-18.706,9.8-18.706,21.376,0,11.879,7.72,21.38,18.11,21.38,6.238,0,10.1-1.485,14.7-6.237Z"></path><br /> <path d="M297.491,114.512H273.444V3.174h24.047Z"></path><br /> <path d="M355.983,114.512l-2.227-6.234c-4.748,6.086-13.064,8.016-20.932,8.016-14.846,0-28.8-9.5-28.8-25.681,0-19.3,18.261-25.388,34.441-25.388a61.4,61.4,0,0,1,13.657,1.634v-.593c0-9.205-3.563-14.994-14.546-14.994-8.912,0-16.483,3.267-23.606,6.83l-6.235-16.48a80.278,80.278,0,0,1,35.182-8.463c21.825,0,33.256,12.916,33.256,33.7v47.653Zm-3.86-34.144a44.386,44.386,0,0,0-9.5-1.334c-7.275,0-15.142,3.115-15.142,11.579,0,5.938,5.2,9.649,10.838,9.649s9.8-2.078,13.805-5.789Z"></path><br /> <path d="M433.18,58.547c-4.156-3.86-9.349-6.831-15.587-6.831-2.967,0-6.382,1.486-6.382,4.305,0,4.6,5.345,7.126,11.727,9.8,10.094,4.156,23.162,9.054,23.162,24.644,0,17.517-15.443,25.829-31.178,25.829-12.916,0-24.05-5.045-33.7-14.1l13.065-14.253c6.237,5.938,11.134,9.8,19.3,9.8,3.119,0,8.609-1.482,8.609-5.193,0-5.2-7.124-7.571-14.843-11.135-9.2-4.156-19.15-9.8-19.15-23.606,0-16.328,14.4-24.643,29.392-24.643,10.986,0,20.784,3.711,28.507,11.134Z"></path><br /> <path d="M500.287,58.547c-4.159-3.86-9.353-6.831-15.59-6.831-2.968,0-6.383,1.486-6.383,4.305,0,4.6,5.345,7.126,11.728,9.8,10.093,4.156,23.158,9.054,23.158,24.644,0,17.517-15.439,25.829-31.174,25.829-12.916,0-24.051-5.045-33.7-14.1L461.39,87.939c6.234,5.938,11.135,9.8,19.3,9.8,3.118,0,8.612-1.482,8.612-5.193,0-5.2-7.127-7.571-14.846-11.135-9.2-4.156-19.151-9.8-19.151-23.606,0-16.328,14.4-24.643,29.393-24.643,10.986,0,20.783,3.711,28.5,11.134Z"></path><br /> <path d="M613.111,105.755c-8.461,7.72-17.962,10.539-29.985,10.539-23.755,0-40.234-17.072-40.234-41.568,0-23.158,16.183-41.567,40.826-41.567A44.458,44.458,0,0,1,613.559,44L601.087,60.18c-4.452-4.308-8.908-6.83-15.142-6.83-11.283,0-18.706,9.8-18.706,21.376,0,11.879,7.719,21.38,18.113,21.38,6.234,0,10.094-1.485,14.7-6.237Z"></path><br /> <path d="M654.138,116.294c-23.606,0-40.53-16.18-40.53-40.379s17.52-42.756,40.678-42.756c22.417,0,39.042,15.442,39.042,36.67a72.249,72.249,0,0,1-1.037,10.835H637.955c1.633,9.949,8.016,16.628,17.816,16.628,10.243,0,14.547-4.3,19.744-11.431L690.953,96.4C681.3,109.763,671.507,116.294,654.138,116.294Zm14.843-51.365c-.445-8.908-6.383-13.361-13.954-13.361-9.353,0-14.1,5.493-16.18,13.361Z"></path><br /> <path d="M721.538,34.94l2.078,10.246A29.919,29.919,0,0,1,747.96,33.159c7.723,0,15.294,4.159,20.487,10.542,6.534,8.312,7.127,18.409,7.127,29.543v41.268H751.523V74.134c0-5.2,0-11.283-1.781-15.291s-5.49-5.493-9.5-5.493A17.871,17.871,0,0,0,725.4,61.662v52.85H701.347V34.94Z"></path><br /> <path d="M813.134,54.539v29.1a37.411,37.411,0,0,0,.447,7.126c.593,3.264,2.078,5.345,5.49,5.345a16.923,16.923,0,0,0,8.612-2.229l7.571,17.52c-5.641,3.264-13.805,4.9-20.487,4.9-12.916,0-21.969-7.275-24.643-18.558a56.043,56.043,0,0,1-1.038-12.32V54.539H780.03V34.94h9.056l4.453-17.072h19.6V34.94h19.6v19.6Z"></path><br /> <path d="M865.394,44.442c4.453-6.827,10.391-11.283,17.962-11.283a28.517,28.517,0,0,1,10.69,2.081l-5.938,19.891a16.257,16.257,0,0,0-7.571-1.781,16.459,16.459,0,0,0-13.509,7.275v53.887H842.977V34.94h20.339Z"></path><br /> <path d="M946.554,114.512l-2.23-6.234c-4.749,6.086-13.061,8.016-20.932,8.016-14.843,0-28.8-9.5-28.8-25.681,0-19.3,18.261-25.388,34.441-25.388a61.41,61.41,0,0,1,13.66,1.634v-.593c0-9.205-3.563-14.994-14.55-14.994-8.908,0-16.479,3.267-23.606,6.83L898.3,41.622a80.281,80.281,0,0,1,35.185-8.463c21.821,0,33.252,12.916,33.252,33.7v47.653Zm-3.86-34.144a44.42,44.42,0,0,0-9.5-1.334c-7.275,0-15.143,3.115-15.143,11.579,0,5.938,5.194,9.649,10.835,9.649s9.8-2.078,13.809-5.789Z"></path><br /> <path d="M1000,114.512H975.949V3.174H1000Z"></path><br /> </g><br /> </g><br /> </svg></p> <p> <span class="sr-only">(opens in a new tab)</span><br /> </a><br /> <span class="partner-courses-disclosure-label">ADVERTISEMENT</span><br /> </div></p> <p> <ul class="partner-courses-list" role="list"></p> <p> <li><br /> <a class="partner-courses-course" href="https://www.classcentral.com/course/udemy-html-css-javascript-react-online-certificat-205460?go=1&ref=fcc" rel="sponsored noopener noreferrer" target="_blank"></p> <p> <span class="partner-courses-thumbnail"><br /> <img src="https://d3f1iyfxxz8i1e.cloudfront.net/courses/course_image/38344b83b4d4.jpg" alt="" loading="lazy" decoding="async"><br /> </span></p> <p> <span class="partner-courses-provider">On Udemy</span><br /> <span class="partner-courses-title">HTML, CSS, JavaScript, React - Online Certification Course</span></p> <p> <span class="partner-courses-instructor">YouAccel Training and Blue Digital Media</span></p> <p> <span class="partner-courses-stats"></p> <p> <span class="partner-courses-stat partner-courses-rating"><br /> <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M12 2.5l2.9 6.4 6.9.7-5.2 4.7 1.5 6.8L12 17.6l-6.1 3.5 1.5-6.8-5.2-4.7 6.9-.7z"></path></svg><br /> 4.4<span class="sr-only"> out of 5 stars</span> <span class="partner-courses-rating-count" aria-hidden="true">(1,161)</span><span class="sr-only"> from 1,161 ratings</span><br /> </span></p> <p> <span class="partner-courses-stat"><br /> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 3" stroke-linecap="round"></path></svg><br /> <span aria-hidden="true">15h 48m</span><br /> <span class="sr-only">15 hours 48 minutes</span><br /> </span></p> <p> <span class="partner-courses-stat">Beginner</span></p> <p> <span class="partner-courses-stat"><br /> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><circle cx="12" cy="8" r="5"></circle><path d="M8.5 12.5 7 21l5-2.5L17 21l-1.5-8.5" stroke-linecap="round" stroke-linejoin="round"></path></svg><br /> Certificate<br /> </span></p> <p> </span><br /> <span class="partner-courses-cta"><br /> View course<br /> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6"></path></svg><br /> </span><br /> <span class="sr-only">(opens in a new tab)</span><br /> </a><br /> </li></p> <p> <li><br /> <a class="partner-courses-course" href="https://www.classcentral.com/course/coursera-javascript-project-build-a-color-picker-tool-336569?go=1&ref=fcc" rel="sponsored noopener noreferrer" target="_blank"></p> <p> <span class="partner-courses-thumbnail"><br /> <img src="https://cdn.classcentral.com/courses/6a92a7d909142_cc_img_ibm1j2kpo9be1JVvBky.jpg" alt="" loading="lazy" decoding="async"><br /> </span></p> <p> <span class="partner-courses-provider">On Coursera</span><br /> <span class="partner-courses-title">React Beginner Project: Build a Color Picker Tool</span></p> <p> <span class="partner-courses-instructor">James Q Quick</span></p> <p> <span class="partner-courses-stats"></p> <p> <span class="partner-courses-stat"><br /> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 3" stroke-linecap="round"></path></svg><br /> <span aria-hidden="true">1h 50m</span><br /> <span class="sr-only">1 hour 50 minutes</span><br /> </span></p> <p> <span class="partner-courses-stat">Intermediate</span></p> <p> <span class="partner-courses-stat"><br /> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><circle cx="12" cy="8" r="5"></circle><path d="M8.5 12.5 7 21l5-2.5L17 21l-1.5-8.5" stroke-linecap="round" stroke-linejoin="round"></path></svg><br /> Certificate<br /> </span></p> <p> </span><br /> <span class="partner-courses-cta"><br /> View course<br /> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6"></path></svg><br /> </span><br /> <span class="sr-only">(opens in a new tab)</span><br /> </a><br /> </li></p> <p> <li><br /> <a class="partner-courses-course" href="https://www.classcentral.com/course/udemy-complete-guide-to-front-end-web-development-and-design-26926?go=1&ref=fcc" rel="sponsored noopener noreferrer" target="_blank"></p> <p> <span class="partner-courses-thumbnail"><br /> <img src="https://d3f1iyfxxz8i1e.cloudfront.net/courses/course_image/658b17f0117f.jpg" alt="" loading="lazy" decoding="async"><br /> </span></p> <p> <span class="partner-courses-provider">On Udemy</span><br /> <span class="partner-courses-title">Complete FrontEnd Web Development and Design HTML CSS JS</span></p> <p> <span class="partner-courses-instructor">Laurence Svekis</span></p> <p> <span class="partner-courses-stats"></p> <p> <span class="partner-courses-stat partner-courses-rating"><br /> <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M12 2.5l2.9 6.4 6.9.7-5.2 4.7 1.5 6.8L12 17.6l-6.1 3.5 1.5-6.8-5.2-4.7 6.9-.7z"></path></svg><br /> 4.5<span class="sr-only"> out of 5 stars</span> <span class="partner-courses-rating-count" aria-hidden="true">(1,108)</span><span class="sr-only"> from 1,108 ratings</span><br /> </span></p> <p> <span class="partner-courses-stat"><br /> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 3" stroke-linecap="round"></path></svg><br /> <span aria-hidden="true">22h 10m</span><br /> <span class="sr-only">22 hours 10 minutes</span><br /> </span></p> <p> <span class="partner-courses-stat">Beginner</span></p> <p> <span class="partner-courses-stat"><br /> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><circle cx="12" cy="8" r="5"></circle><path d="M8.5 12.5 7 21l5-2.5L17 21l-1.5-8.5" stroke-linecap="round" stroke-linejoin="round"></path></svg><br /> Certificate<br /> </span></p> <p> </span><br /> <span class="partner-courses-cta"><br /> View course<br /> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6"></path></svg><br /> </span><br /> <span class="sr-only">(opens in a new tab)</span><br /> </a><br /> </li></p> <p> <li><br /> <a class="partner-courses-course" href="https://www.classcentral.com/course/skillshare-code-your-own-portfolio-html-css-basics-45018?go=1&ref=fcc" rel="sponsored noopener noreferrer" target="_blank"></p> <p> <span class="partner-courses-thumbnail"><br /> <img src="https://d3f1iyfxxz8i1e.cloudfront.net/courses/course_image/6af08cceeb48.jpeg" alt="" loading="lazy" decoding="async"><br /> </span></p> <p> <span class="partner-courses-provider">On Skillshare</span><br /> <span class="partner-courses-title">Code your own portfolio – HTML & CSS basics</span></p> <p> <span class="partner-courses-instructor">Aga Naplocha</span></p> <p> <span class="partner-courses-stats"></p> <p> <span class="partner-courses-stat partner-courses-rating"><br /> <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M12 2.5l2.9 6.4 6.9.7-5.2 4.7 1.5 6.8L12 17.6l-6.1 3.5 1.5-6.8-5.2-4.7 6.9-.7z"></path></svg><br /> 4.5<span class="sr-only"> out of 5 stars</span> <span class="partner-courses-rating-count" aria-hidden="true">(188)</span><span class="sr-only"> from 188 ratings</span><br /> </span></p> <p> <span class="partner-courses-stat"><br /> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 3" stroke-linecap="round"></path></svg><br /> <span aria-hidden="true">3h 2m</span><br /> <span class="sr-only">3 hours 2 minutes</span><br /> </span></p> <p> <span class="partner-courses-stat">Beginner</span></p> <p> </span><br /> <span class="partner-courses-cta"><br /> View course<br /> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6"></path></svg><br /> </span><br /> <span class="sr-only">(opens in a new tab)</span><br /> </a><br /> </li></p> <p> </ul></p> <p> <a class="partner-courses-more" href="https://www.classcentral.com/subject/html-css?ref=fcc" rel="sponsored noopener noreferrer" target="_blank"><span>More HTML & CSS courses on Class Central <span aria-hidden="true">→</span></span><span class="sr-only">(opens in a new tab)</span></a></p> <p> </div><br /> </section></p> <p> </div></p> <p> </div><br /> <hr></p> <p> <div class="post-full-author-header" data-test-label="author-header-with-bio"></p> <p> <section class="author-card" data-test-label="author-card"></p> <p> <img srcset="https://cdn.hashnode.com/uploads/avatars/699c7b22cf5def0f6aaf982b/52b20788-3fe0-44ef-aeda-efea46dd814a.jpg 60w" sizes="60px" src="https://cdn.hashnode.com/uploads/avatars/699c7b22cf5def0f6aaf982b/52b20788-3fe0-44ef-aeda-efea46dd814a.jpg" class="author-profile-image" alt="Bansidhar Kadiya" width="864" height="1184" onerror="this.style.display='none'" loading="lazy" data-test-label="profile-image"></p> <p> <section class="author-card-content "><br /> <span class="author-card-name"><br /> <a href="https://www.freecodecamp.org/news/author/99tools/" data-test-label="profile-link"></p> <p> Bansidhar Kadiya</p> <p> </a><br /> </span></p> <p> <p data-test-label="author-bio">Bansidhar Kadiya is a WordPress Developer and SEO specialist focused on building fast, practical web experiences. He is the creator of 99tools.net, a growing collection of free browser-based utilities designed to help developers, creators, and everyday users complete common tasks quickly and efficiently.</p></p> <p> </section><br /> </section></p> <p> </div><br /> <hr></p> <p><p data-test-label="social-row-cta" class="social-row"><br /> If you read this far, thank the author to show them you care. <button id="tweet-btn" class="cta-button" data-test-label="tweet-button">Say Thanks</button><br /> </p></p> <p><div class="learn-cta-row" data-test-label="learn-cta-row"><br /> <p><br /> Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. <a href="https://www.freecodecamp.org/learn" class="cta-button" id="learn-to-code-cta" rel="noopener noreferrer" target="_blank">Get started</a><br /> </p><br /> </div></p> <p> </section></p> <p> <section class="partner-courses partner-courses-banner" aria-labelledby="partner-courses-label-banner" data-test-label="class-central-course-banner"><br /> <p class="partner-courses-label" id="partner-courses-label-banner">Recommended courses from our partners</p><br /> <div class="partner-courses-card"></p> <p> <div class="partner-courses-disclosure"><br /> <a class="partner-courses-logo-link" href="https://www.classcentral.com/" rel="sponsored noopener noreferrer" target="_blank"><br /> <svg role="img" class="partner-courses-logo" width="128" height="18" viewBox="0 0 1000 140.326" xmlns="http://www.w3.org/2000/svg" fill="currentColor" data-test-label="class-central-logo"><br /> <title>Class Central</title><br /> <g><br /> <g><br /> <path d="M152.461,0H15.246A15.422,15.422,0,0,0,0,15.592V124.735a15.421,15.421,0,0,0,15.246,15.591H152.461a15.421,15.421,0,0,0,15.246-15.591V15.592A15.422,15.422,0,0,0,152.461,0Zm0,124.735H125.936v-7.986c0-2.5-1.532-4.535-3.422-4.535H91.71c-1.89,0-3.422,2.03-3.422,4.535v7.986H15.246V15.592H152.461Z"></path><br /> <path d="M63.585,91.937c7.34,0,13.14-1.721,18.305-6.432l-7.975-9.7a10.918,10.918,0,0,1-8.971,3.808c-6.343,0-11.055-5.8-11.055-13.05,0-7.068,4.531-13.049,11.418-13.049,3.806,0,6.524,1.54,9.243,4.17l7.611-9.878a27.133,27.133,0,0,0-18.213-6.616c-15.042,0-24.919,11.237-24.919,25.373C39.029,81.516,49.087,91.937,63.585,91.937Z"></path><br /> <path d="M110.1,91.937c7.34,0,13.14-1.721,18.305-6.432l-7.974-9.7a10.92,10.92,0,0,1-8.972,3.808c-6.343,0-11.055-5.8-11.055-13.05,0-7.068,4.531-13.049,11.418-13.049,3.806,0,6.524,1.54,9.243,4.17l7.611-9.878a27.131,27.131,0,0,0-18.213-6.616c-15.042,0-24.919,11.237-24.919,25.373C85.546,81.516,95.6,91.937,110.1,91.937Z"></path><br /> </g><br /> <g><br /> <path d="M266.762,105.755c-8.464,7.72-17.965,10.539-29.989,10.539-23.754,0-40.234-17.072-40.234-41.568,0-23.158,16.183-41.567,40.827-41.567A44.456,44.456,0,0,1,267.206,44L254.735,60.18c-4.456-4.308-8.909-6.83-15.143-6.83-11.283,0-18.706,9.8-18.706,21.376,0,11.879,7.72,21.38,18.11,21.38,6.238,0,10.1-1.485,14.7-6.237Z"></path><br /> <path d="M297.491,114.512H273.444V3.174h24.047Z"></path><br /> <path d="M355.983,114.512l-2.227-6.234c-4.748,6.086-13.064,8.016-20.932,8.016-14.846,0-28.8-9.5-28.8-25.681,0-19.3,18.261-25.388,34.441-25.388a61.4,61.4,0,0,1,13.657,1.634v-.593c0-9.205-3.563-14.994-14.546-14.994-8.912,0-16.483,3.267-23.606,6.83l-6.235-16.48a80.278,80.278,0,0,1,35.182-8.463c21.825,0,33.256,12.916,33.256,33.7v47.653Zm-3.86-34.144a44.386,44.386,0,0,0-9.5-1.334c-7.275,0-15.142,3.115-15.142,11.579,0,5.938,5.2,9.649,10.838,9.649s9.8-2.078,13.805-5.789Z"></path><br /> <path d="M433.18,58.547c-4.156-3.86-9.349-6.831-15.587-6.831-2.967,0-6.382,1.486-6.382,4.305,0,4.6,5.345,7.126,11.727,9.8,10.094,4.156,23.162,9.054,23.162,24.644,0,17.517-15.443,25.829-31.178,25.829-12.916,0-24.05-5.045-33.7-14.1l13.065-14.253c6.237,5.938,11.134,9.8,19.3,9.8,3.119,0,8.609-1.482,8.609-5.193,0-5.2-7.124-7.571-14.843-11.135-9.2-4.156-19.15-9.8-19.15-23.606,0-16.328,14.4-24.643,29.392-24.643,10.986,0,20.784,3.711,28.507,11.134Z"></path><br /> <path d="M500.287,58.547c-4.159-3.86-9.353-6.831-15.59-6.831-2.968,0-6.383,1.486-6.383,4.305,0,4.6,5.345,7.126,11.728,9.8,10.093,4.156,23.158,9.054,23.158,24.644,0,17.517-15.439,25.829-31.174,25.829-12.916,0-24.051-5.045-33.7-14.1L461.39,87.939c6.234,5.938,11.135,9.8,19.3,9.8,3.118,0,8.612-1.482,8.612-5.193,0-5.2-7.127-7.571-14.846-11.135-9.2-4.156-19.151-9.8-19.151-23.606,0-16.328,14.4-24.643,29.393-24.643,10.986,0,20.783,3.711,28.5,11.134Z"></path><br /> <path d="M613.111,105.755c-8.461,7.72-17.962,10.539-29.985,10.539-23.755,0-40.234-17.072-40.234-41.568,0-23.158,16.183-41.567,40.826-41.567A44.458,44.458,0,0,1,613.559,44L601.087,60.18c-4.452-4.308-8.908-6.83-15.142-6.83-11.283,0-18.706,9.8-18.706,21.376,0,11.879,7.719,21.38,18.113,21.38,6.234,0,10.094-1.485,14.7-6.237Z"></path><br /> <path d="M654.138,116.294c-23.606,0-40.53-16.18-40.53-40.379s17.52-42.756,40.678-42.756c22.417,0,39.042,15.442,39.042,36.67a72.249,72.249,0,0,1-1.037,10.835H637.955c1.633,9.949,8.016,16.628,17.816,16.628,10.243,0,14.547-4.3,19.744-11.431L690.953,96.4C681.3,109.763,671.507,116.294,654.138,116.294Zm14.843-51.365c-.445-8.908-6.383-13.361-13.954-13.361-9.353,0-14.1,5.493-16.18,13.361Z"></path><br /> <path d="M721.538,34.94l2.078,10.246A29.919,29.919,0,0,1,747.96,33.159c7.723,0,15.294,4.159,20.487,10.542,6.534,8.312,7.127,18.409,7.127,29.543v41.268H751.523V74.134c0-5.2,0-11.283-1.781-15.291s-5.49-5.493-9.5-5.493A17.871,17.871,0,0,0,725.4,61.662v52.85H701.347V34.94Z"></path><br /> <path d="M813.134,54.539v29.1a37.411,37.411,0,0,0,.447,7.126c.593,3.264,2.078,5.345,5.49,5.345a16.923,16.923,0,0,0,8.612-2.229l7.571,17.52c-5.641,3.264-13.805,4.9-20.487,4.9-12.916,0-21.969-7.275-24.643-18.558a56.043,56.043,0,0,1-1.038-12.32V54.539H780.03V34.94h9.056l4.453-17.072h19.6V34.94h19.6v19.6Z"></path><br /> <path d="M865.394,44.442c4.453-6.827,10.391-11.283,17.962-11.283a28.517,28.517,0,0,1,10.69,2.081l-5.938,19.891a16.257,16.257,0,0,0-7.571-1.781,16.459,16.459,0,0,0-13.509,7.275v53.887H842.977V34.94h20.339Z"></path><br /> <path d="M946.554,114.512l-2.23-6.234c-4.749,6.086-13.061,8.016-20.932,8.016-14.843,0-28.8-9.5-28.8-25.681,0-19.3,18.261-25.388,34.441-25.388a61.41,61.41,0,0,1,13.66,1.634v-.593c0-9.205-3.563-14.994-14.55-14.994-8.908,0-16.479,3.267-23.606,6.83L898.3,41.622a80.281,80.281,0,0,1,35.185-8.463c21.821,0,33.252,12.916,33.252,33.7v47.653Zm-3.86-34.144a44.42,44.42,0,0,0-9.5-1.334c-7.275,0-15.143,3.115-15.143,11.579,0,5.938,5.194,9.649,10.835,9.649s9.8-2.078,13.809-5.789Z"></path><br /> <path d="M1000,114.512H975.949V3.174H1000Z"></path><br /> </g><br /> </g><br /> </svg></p> <p> <span class="sr-only">(opens in a new tab)</span><br /> </a><br /> <span class="partner-courses-disclosure-label">ADVERTISEMENT</span><br /> </div></p> <p> <ul class="partner-courses-list" role="list"></p> <p> <li><br /> <a class="partner-courses-course" href="https://www.classcentral.com/course/udemy-html-css-javascript-react-online-certificat-205460?go=1&ref=fcc" rel="sponsored noopener noreferrer" target="_blank"></p> <p> <span class="partner-courses-thumbnail"><br /> <img src="https://d3f1iyfxxz8i1e.cloudfront.net/courses/course_image/38344b83b4d4.jpg" alt="" loading="lazy" decoding="async"><br /> </span></p> <p> <span class="partner-courses-provider">On Udemy</span><br /> <span class="partner-courses-title">HTML, CSS, JavaScript, React - Online Certification Course</span></p> <p> <span class="partner-courses-instructor">YouAccel Training and Blue Digital Media</span></p> <p> <span class="partner-courses-stats"></p> <p> <span class="partner-courses-stat partner-courses-rating"><br /> <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M12 2.5l2.9 6.4 6.9.7-5.2 4.7 1.5 6.8L12 17.6l-6.1 3.5 1.5-6.8-5.2-4.7 6.9-.7z"></path></svg><br /> 4.4<span class="sr-only"> out of 5 stars</span> <span class="partner-courses-rating-count" aria-hidden="true">(1,161)</span><span class="sr-only"> from 1,161 ratings</span><br /> </span></p> <p> <span class="partner-courses-stat"><br /> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 3" stroke-linecap="round"></path></svg><br /> <span aria-hidden="true">15h 48m</span><br /> <span class="sr-only">15 hours 48 minutes</span><br /> </span></p> <p> <span class="partner-courses-stat">Beginner</span></p> <p> <span class="partner-courses-stat"><br /> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><circle cx="12" cy="8" r="5"></circle><path d="M8.5 12.5 7 21l5-2.5L17 21l-1.5-8.5" stroke-linecap="round" stroke-linejoin="round"></path></svg><br /> Certificate<br /> </span></p> <p> </span><br /> <span class="partner-courses-cta"><br /> View course<br /> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6"></path></svg><br /> </span><br /> <span class="sr-only">(opens in a new tab)</span><br /> </a><br /> </li></p> <p> <li><br /> <a class="partner-courses-course" href="https://www.classcentral.com/course/coursera-javascript-project-build-a-color-picker-tool-336569?go=1&ref=fcc" rel="sponsored noopener noreferrer" target="_blank"></p> <p> <span class="partner-courses-thumbnail"><br /> <img src="https://cdn.classcentral.com/courses/6a92a7d909142_cc_img_ibm1j2kpo9be1JVvBky.jpg" alt="" loading="lazy" decoding="async"><br /> </span></p> <p> <span class="partner-courses-provider">On Coursera</span><br /> <span class="partner-courses-title">React Beginner Project: Build a Color Picker Tool</span></p> <p> <span class="partner-courses-instructor">James Q Quick</span></p> <p> <span class="partner-courses-stats"></p> <p> <span class="partner-courses-stat"><br /> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 3" stroke-linecap="round"></path></svg><br /> <span aria-hidden="true">1h 50m</span><br /> <span class="sr-only">1 hour 50 minutes</span><br /> </span></p> <p> <span class="partner-courses-stat">Intermediate</span></p> <p> <span class="partner-courses-stat"><br /> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><circle cx="12" cy="8" r="5"></circle><path d="M8.5 12.5 7 21l5-2.5L17 21l-1.5-8.5" stroke-linecap="round" stroke-linejoin="round"></path></svg><br /> Certificate<br /> </span></p> <p> </span><br /> <span class="partner-courses-cta"><br /> View course<br /> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6"></path></svg><br /> </span><br /> <span class="sr-only">(opens in a new tab)</span><br /> </a><br /> </li></p> <p> <li><br /> <a class="partner-courses-course" href="https://www.classcentral.com/course/udemy-complete-guide-to-front-end-web-development-and-design-26926?go=1&ref=fcc" rel="sponsored noopener noreferrer" target="_blank"></p> <p> <span class="partner-courses-thumbnail"><br /> <img src="https://d3f1iyfxxz8i1e.cloudfront.net/courses/course_image/658b17f0117f.jpg" alt="" loading="lazy" decoding="async"><br /> </span></p> <p> <span class="partner-courses-provider">On Udemy</span><br /> <span class="partner-courses-title">Complete FrontEnd Web Development and Design HTML CSS JS</span></p> <p> <span class="partner-courses-instructor">Laurence Svekis</span></p> <p> <span class="partner-courses-stats"></p> <p> <span class="partner-courses-stat partner-courses-rating"><br /> <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M12 2.5l2.9 6.4 6.9.7-5.2 4.7 1.5 6.8L12 17.6l-6.1 3.5 1.5-6.8-5.2-4.7 6.9-.7z"></path></svg><br /> 4.5<span class="sr-only"> out of 5 stars</span> <span class="partner-courses-rating-count" aria-hidden="true">(1,108)</span><span class="sr-only"> from 1,108 ratings</span><br /> </span></p> <p> <span class="partner-courses-stat"><br /> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 3" stroke-linecap="round"></path></svg><br /> <span aria-hidden="true">22h 10m</span><br /> <span class="sr-only">22 hours 10 minutes</span><br /> </span></p> <p> <span class="partner-courses-stat">Beginner</span></p> <p> <span class="partner-courses-stat"><br /> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><circle cx="12" cy="8" r="5"></circle><path d="M8.5 12.5 7 21l5-2.5L17 21l-1.5-8.5" stroke-linecap="round" stroke-linejoin="round"></path></svg><br /> Certificate<br /> </span></p> <p> </span><br /> <span class="partner-courses-cta"><br /> View course<br /> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6"></path></svg><br /> </span><br /> <span class="sr-only">(opens in a new tab)</span><br /> </a><br /> </li></p> <p> <li><br /> <a class="partner-courses-course" href="https://www.classcentral.com/course/skillshare-code-your-own-portfolio-html-css-basics-45018?go=1&ref=fcc" rel="sponsored noopener noreferrer" target="_blank"></p> <p> <span class="partner-courses-thumbnail"><br /> <img src="https://d3f1iyfxxz8i1e.cloudfront.net/courses/course_image/6af08cceeb48.jpeg" alt="" loading="lazy" decoding="async"><br /> </span></p> <p> <span class="partner-courses-provider">On Skillshare</span><br /> <span class="partner-courses-title">Code your own portfolio – HTML & CSS basics</span></p> <p> <span class="partner-courses-instructor">Aga Naplocha</span></p> <p> <span class="partner-courses-stats"></p> <p> <span class="partner-courses-stat partner-courses-rating"><br /> <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M12 2.5l2.9 6.4 6.9.7-5.2 4.7 1.5 6.8L12 17.6l-6.1 3.5 1.5-6.8-5.2-4.7 6.9-.7z"></path></svg><br /> 4.5<span class="sr-only"> out of 5 stars</span> <span class="partner-courses-rating-count" aria-hidden="true">(188)</span><span class="sr-only"> from 188 ratings</span><br /> </span></p> <p> <span class="partner-courses-stat"><br /> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 3" stroke-linecap="round"></path></svg><br /> <span aria-hidden="true">3h 2m</span><br /> <span class="sr-only">3 hours 2 minutes</span><br /> </span></p> <p> <span class="partner-courses-stat">Beginner</span></p> <p> </span><br /> <span class="partner-courses-cta"><br /> View course<br /> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6"></path></svg><br /> </span><br /> <span class="sr-only">(opens in a new tab)</span><br /> </a><br /> </li></p> <p> </ul></p> <p> <a class="partner-courses-more" href="https://www.classcentral.com/subject/html-css?ref=fcc" rel="sponsored noopener noreferrer" target="_blank"><span>More HTML & CSS courses on Class Central <span aria-hidden="true">→</span></span><span class="sr-only">(opens in a new tab)</span></a></p> <p> </div><br /> </section></p> <p> </article><br /> </div><br /> </main></p> <p><footer class="site-footer"><br /> <div class="footer-top"><br /> <div class="footer-desc-col"><br /> <p data-test-label="tax-exempt-status">freeCodeCamp is a donor-supported tax-exempt 501(c)(3) charity organization (United States Federal Tax Identification Number: 82-0779546)</p><br /> <p data-test-label="mission-statement">Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons - all freely available to the public.</p><br /> <p data-test-label="donation-initiatives">Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.</p><br /> <p class="footer-donation" data-test-label="donate-text"><br /> You can <a href="https://www.freecodecamp.org/donate/" class="inline" rel="noopener noreferrer" target="_blank">make a tax-deductible donation here</a>.<br /> </p><br /> </div><br /> <div class="trending-guides" data-test-label="trending-guides"><br /> <h2 id="trending-guides" class="col-header">Trending Books and Handbooks</h2><br /> <ul class="trending-guides-articles" aria-labelledby="trending-guides"><br /> <li><br /> <a href="https://www.freecodecamp.org/news/build-consume-and-document-a-rest-api/" rel="noopener noreferrer" target="_blank">REST APIs<br /> </a><br /> </li><br /> <li><br /> <a href="https://www.freecodecamp.org/news/how-to-write-clean-code/" rel="noopener noreferrer" target="_blank">Clean Code<br /> </a><br /> </li><br /> <li><br /> <a href="https://www.freecodecamp.org/news/learn-typescript-with-react-handbook/" rel="noopener noreferrer" target="_blank">TypeScript<br /> </a><br /> </li><br /> <li><br /> <a href="https://www.freecodecamp.org/news/learn-javascript-for-beginners/" rel="noopener noreferrer" target="_blank">JavaScript<br /> </a><br /> </li><br /> <li><br /> <a href="https://www.freecodecamp.org/news/how-to-build-an-ai-chatbot-with-redis-python-and-gpt/" rel="noopener noreferrer" target="_blank">AI Chatbots<br /> </a><br /> </li><br /> <li><br /> <a href="https://www.freecodecamp.org/news/command-line-for-beginners/" rel="noopener noreferrer" target="_blank">Command Line<br /> </a><br /> </li><br /> <li><br /> <a href="https://www.freecodecamp.org/news/building-consuming-and-documenting-a-graphql-api/" rel="noopener noreferrer" target="_blank">GraphQL APIs<br /> </a><br /> </li><br /> <li><br /> <a href="https://www.freecodecamp.org/news/complete-guide-to-css-transform-functions-and-properties/" rel="noopener noreferrer" target="_blank">CSS Transforms<br /> </a><br /> </li><br /> <li><br /> <a href="https://www.freecodecamp.org/news/how-to-build-scalable-access-control-for-your-web-app/" rel="noopener noreferrer" target="_blank">Access Control<br /> </a><br /> </li><br /> <li><br /> <a href="https://www.freecodecamp.org/news/rest-api-design-best-practices-build-a-rest-api/" rel="noopener noreferrer" target="_blank">REST API Design<br /> </a><br /> </li><br /> <li><br /> <a href="https://www.freecodecamp.org/news/the-php-handbook/" rel="noopener noreferrer" target="_blank">PHP<br /> </a><br /> </li><br /> <li><br /> <a href="https://www.freecodecamp.org/news/the-java-handbook/" rel="noopener noreferrer" target="_blank">Java<br /> </a><br /> </li><br /> <li><br /> <a href="https://www.freecodecamp.org/news/learn-linux-for-beginners-book-basic-to-advanced/" rel="noopener noreferrer" target="_blank">Linux<br /> </a><br /> </li><br /> <li><br /> <a href="https://www.freecodecamp.org/news/react-for-beginners-handbook/" rel="noopener noreferrer" target="_blank">React<br /> </a><br /> </li><br /> <li><br /> <a href="https://www.freecodecamp.org/news/learn-continuous-integration-delivery-and-deployment/" rel="noopener noreferrer" target="_blank">CI/CD<br /> </a><br /> </li><br /> <li><br /> <a href="https://www.freecodecamp.org/news/the-docker-handbook/" rel="noopener noreferrer" target="_blank">Docker<br /> </a><br /> </li><br /> <li><br /> <a href="https://www.freecodecamp.org/news/learn-golang-handbook/" rel="noopener noreferrer" target="_blank">Golang<br /> </a><br /> </li><br /> <li><br /> <a href="https://www.freecodecamp.org/news/the-python-handbook/" rel="noopener noreferrer" target="_blank">Python<br /> </a><br /> </li><br /> <li><br /> <a href="https://www.freecodecamp.org/news/get-started-with-nodejs/" rel="noopener noreferrer" target="_blank">Node.js<br /> </a><br /> </li><br /> <li><br /> <a href="https://www.freecodecamp.org/news/build-crud-operations-with-dotnet-core-handbook/" rel="noopener noreferrer" target="_blank">Todo APIs<br /> </a><br /> </li><br /> <li><br /> <a href="https://www.freecodecamp.org/news/how-to-use-classes-in-javascript-handbook/" rel="noopener noreferrer" target="_blank">JavaScript Classes<br /> </a><br /> </li><br /> <li><br /> <a href="https://www.freecodecamp.org/news/front-end-javascript-development-react-angular-vue-compared/" rel="noopener noreferrer" target="_blank">Front-End Libraries<br /> </a><br /> </li><br /> <li><br /> <a href="https://www.freecodecamp.org/news/the-express-handbook/" rel="noopener noreferrer" target="_blank">Express and Node.js<br /> </a><br /> </li><br /> <li><br /> <a href="https://www.freecodecamp.org/news/python-code-examples-sample-script-coding-tutorial-for-beginners/" rel="noopener noreferrer" target="_blank">Python Code Examples<br /> </a><br /> </li><br /> <li><br /> <a href="https://www.freecodecamp.org/news/clustering-in-python-a-machine-learning-handbook/" rel="noopener noreferrer" target="_blank">Clustering in Python<br /> </a><br /> </li><br /> <li><br /> <a href="https://www.freecodecamp.org/news/an-introduction-to-software-architecture-patterns/" rel="noopener noreferrer" target="_blank">Software Architecture<br /> </a><br /> </li><br /> <li><br /> <a href="https://www.freecodecamp.org/news/what-is-programming-tutorial-for-beginners/" rel="noopener noreferrer" target="_blank">Programming Fundamentals<br /> </a><br /> </li><br /> <li><br /> <a href="https://www.freecodecamp.org/news/learn-to-code-book/" rel="noopener noreferrer" target="_blank">Coding Career Preparation<br /> </a><br /> </li><br /> <li><br /> <a href="https://www.freecodecamp.org/news/become-a-full-stack-developer-and-get-a-job/" rel="noopener noreferrer" target="_blank">Full-Stack Developer Guide<br /> </a><br /> </li><br /> <li><br /> <a href="https://www.freecodecamp.org/news/learn-python-for-javascript-developers-handbook/" rel="noopener noreferrer" target="_blank">Python for JavaScript Devs<br /> </a><br /> </li><br /> </ul><br /> <div class="spacer" style="padding: 15px 0;"></div><br /> <div><br /> <h2 id="mobile-app" class="col-header"><br /> Mobile App<br /> </h2><br /> <div class="min-h-[1px] px-[15px] md:w-2/3 md:ml-[16.6%]"><br /> <ul aria-labelledby="mobile-app" class="mobile-app-container"><br /> <li><br /> <a href="https://apps.apple.com/us/app/freecodecamp/id6446908151?itsct=apps_box_link&itscg=30200" rel="noopener noreferrer" target="_blank"><br /> <img src="https://cdn.freecodecamp.org/platform/universal/apple-store-badge.svg" lang="en" alt="Download on the App Store"><br /> </a><br /> </li><br /> <li><br /> <a href="https://play.google.com/store/apps/details?id=org.freecodecamp" rel="noopener noreferrer" target="_blank"><br /> <img src="https://cdn.freecodecamp.org/platform/universal/google-play-badge.svg" lang="en" alt="Get it on Google Play"><br /> </a><br /> </li><br /> </ul><br /> </div><br /> </div><br /> </div><br /> </div><br /> <div class="footer-bottom"><br /> <h2 class="col-header" data-test-label="our-nonprofit">Our Charity</h2><br /> <div class="our-nonprofit"></p> <p> <a href="https://hashnode.com/" rel="noopener noreferrer" target="_blank" data-test-label="powered-by"><br /> Publication powered by Hashnode<br /> </a><br /> <a href="https://www.freecodecamp.org/news/about/" rel="noopener noreferrer" target="_blank" data-test-label="about"><br /> About<br /> </a><br /> <a href="https://www.linkedin.com/school/free-code-camp/people/" rel="noopener noreferrer" target="_blank" data-test-label="alumni"><br /> Alumni Network<br /> </a><br /> <a href="https://github.com/freeCodeCamp/" rel="noopener noreferrer" target="_blank" data-test-label="open-source"><br /> Open Source<br /> </a><br /> <a href="https://www.freecodecamp.org/news/shop/" rel="noopener noreferrer" target="_blank" data-test-label="shop"><br /> Shop<br /> </a><br /> <a href="https://www.freecodecamp.org/news/support/" rel="noopener noreferrer" target="_blank" data-test-label="support"><br /> Support<br /> </a><br /> <a href="https://www.freecodecamp.org/news/sponsors/" rel="noopener noreferrer" target="_blank" data-test-label="sponsors"><br /> Sponsors<br /> </a><br /> <a href="https://www.freecodecamp.org/news/academic-honesty-policy/" rel="noopener noreferrer" target="_blank" data-test-label="honesty"><br /> Academic Honesty<br /> </a><br /> <a href="https://www.freecodecamp.org/news/code-of-conduct/" rel="noopener noreferrer" target="_blank" data-test-label="coc"><br /> Code of Conduct<br /> </a><br /> <a href="https://www.freecodecamp.org/news/privacy-policy/" rel="noopener noreferrer" target="_blank" data-test-label="privacy"><br /> Privacy Policy<br /> </a><br /> <a href="https://www.freecodecamp.org/news/terms-of-service/" rel="noopener noreferrer" target="_blank" data-test-label="tos"><br /> Terms of Service<br /> </a><br /> <a href="https://www.freecodecamp.org/news/copyright-policy/" rel="noopener noreferrer" target="_blank" data-test-label="copyright"><br /> Copyright Policy<br /> </a><br /> </div><br /> </div><br /> </footer></p> <p> </div></p> <p></body><br /> </html><br /> Source link
