<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Jay oh Why</title>
    <description>The latest articles on DEV Community by Jay oh Why (@joyobaidu).</description>
    <link>https://dev.to/joyobaidu</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1035442%2Fe4c31867-2fe7-4503-8eee-da465e05261e.jpg</url>
      <title>DEV Community: Jay oh Why</title>
      <link>https://dev.to/joyobaidu</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/joyobaidu"/>
    <language>en</language>
    <item>
      <title>😎5 Quick LinkedIn Hacks to Find Jobs Faster (Step-by-Step)</title>
      <dc:creator>Jay oh Why</dc:creator>
      <pubDate>Sun, 28 Sep 2025 13:41:01 +0000</pubDate>
      <link>https://dev.to/joyobaidu/5-quick-linkedin-hacks-to-find-jobs-faster-step-by-step-8m4</link>
      <guid>https://dev.to/joyobaidu/5-quick-linkedin-hacks-to-find-jobs-faster-step-by-step-8m4</guid>
      <description>&lt;p&gt;Use these 5 exact actions to get fresher jobs, less-crowded LinkedIn jobs and apply faster.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Filter by number of applicants (beat the crowd)##
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Open Jobs → enter role (e.g.,_ Frontend Developer_).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Click Filters → sort or filter by Number of applicants (click &lt;strong&gt;"&lt;em&gt;under 10 applicants&lt;/em&gt;")&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Scan listings with fewer applicants and apply first.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7kbcjtaeur3ffad1pk6s.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7kbcjtaeur3ffad1pk6s.png" alt="Filter number of applicants" width="800" height="407"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Show only very fresh jobs — edit the URL &lt;strong&gt;(900 seconds = 15 min)&lt;/strong&gt;
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;After searching, apply Past 24 hours.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Click the browser address bar and find "86400" (24 hours in a day).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Replace it with 900 and press Enter (now shows last 15 minutes).&lt;br&gt;
&lt;code&gt;...&amp;amp;f_TP=86400... → after: ...&amp;amp;f_TP=900...&lt;br&gt;
&lt;/code&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Facvkoi5ts7ypk6ovie5i.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Facvkoi5ts7ypk6ovie5i.png" alt="Filter time in link address" width="800" height="363"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Hunt hidden posts with hashtags
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;In LinkedIn search, type #hiringwebdeveloper (or #hiring + your role).&lt;/li&gt;
&lt;li&gt;Switch to "Posts" tab to see recruiters’ posts (often not in Jobs tab).&lt;/li&gt;
&lt;li&gt;Like/comment to engage; DM if recruiter is visible.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fev154v0mka9oy4kgouy4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fev154v0mka9oy4kgouy4.png" alt="Make use of job search" width="800" height="484"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Use Google to pull LinkedIn jobs fast
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Go to Google and type: &lt;code&gt;site:linkedin.com/jobs "frontend developer"&lt;/code&gt;(Replace keyword for your role)&lt;/li&gt;
&lt;li&gt;Click "Search tools"&lt;/li&gt;
&lt;li&gt;Click "Advanced Search"&lt;/li&gt;
&lt;li&gt;Write "&lt;em&gt;Fresher&lt;/em&gt; , &lt;em&gt;Location&lt;/em&gt;"&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh8v0ao54k193vybift53.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh8v0ao54k193vybift53.png" alt="Advanced Search" width="800" height="483"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe16b40x5maxaupqfquzg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe16b40x5maxaupqfquzg.png" alt="Location" width="800" height="275"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Use quotes for exact role matches
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Search with quotes: "Social media manager"&lt;/li&gt;
&lt;li&gt;This returns exact-title matches (fewer false positives).&lt;/li&gt;
&lt;li&gt;Combine with location or remote (e.g., "Social media manager" remote).&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F15z22vw4cxz47peefwy8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F15z22vw4cxz47peefwy8.png" alt="With Quote" width="800" height="524"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Result with quote&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0qd4nol80o62tycciter.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0qd4nol80o62tycciter.png" alt="Without quote" width="800" height="506"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Result without quote&lt;/em&gt;&lt;/p&gt;

</description>
      <category>linkedin</category>
      <category>remote</category>
    </item>
    <item>
      <title>Build Your First Web Page</title>
      <dc:creator>Jay oh Why</dc:creator>
      <pubDate>Wed, 09 Jul 2025 22:33:55 +0000</pubDate>
      <link>https://dev.to/joyobaidu/build-your-first-web-page-5hn8</link>
      <guid>https://dev.to/joyobaidu/build-your-first-web-page-5hn8</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;If you’ve ever wondered how websites are made, you’re in the right place.&lt;/p&gt;

&lt;p&gt;HTML is the foundation of every web page on the internet. In this guide, I’ll show you what HTML is, why it matters, and how to write your first web page—even if you’ve never written a single line of code before.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is HTML?
&lt;/h2&gt;

&lt;p&gt;HTML stands for HyperText Markup Language. It’s the language that gives structure to web pages.&lt;/p&gt;

&lt;p&gt;You can think of HTML as the skeleton of a website. It tells the browser how to organize and display content like text, images, and links.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Learn HTML?
&lt;/h2&gt;

&lt;p&gt;It’s the first step in becoming a web developer.&lt;/p&gt;

&lt;p&gt;It’s easy to learn, even with no coding experience.&lt;/p&gt;

&lt;p&gt;It helps you understand how the web works behind the scenes.&lt;/p&gt;

&lt;p&gt;It’s the foundation for learning CSS (for styling) and JavaScript (for interactivity).&lt;/p&gt;

&lt;h2&gt;
  
  
  How HTML Works
&lt;/h2&gt;

&lt;p&gt;HTML uses tags to structure content. Tags tell the browser what something is.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example&lt;/strong&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;h1&amp;gt;Hello, World!&amp;lt;/h1&amp;gt;
&amp;lt;p&amp;gt;This is my first web page.&amp;lt;/p&amp;gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; creates a big heading.&lt;/li&gt;
&lt;li&gt;&lt;p&gt; creates a paragraph of text.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  The Basic Structure of an HTML Page
&lt;/h2&gt;

&lt;p&gt;Here’s what a simple HTML page looks like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html&amp;gt;
  &amp;lt;head&amp;gt;
    &amp;lt;title&amp;gt;My First Web Page&amp;lt;/title&amp;gt;
  &amp;lt;/head&amp;gt;
  &amp;lt;body&amp;gt;
    &amp;lt;h1&amp;gt;Welcome to My Web Page&amp;lt;/h1&amp;gt;
    &amp;lt;p&amp;gt;This is a paragraph of text.&amp;lt;/p&amp;gt;
  &amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/code&gt; tells the browser you’re using HTML5.&lt;/li&gt;
&lt;li&gt; is the root of the page.&lt;/li&gt;
&lt;li&gt; holds information about the page, like its title.&lt;/li&gt;
&lt;li&gt; sets the text in the browser tab.&lt;/li&gt;
&lt;li&gt; holds all the content people see on the page.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Build Your First Web Page
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Step 1&lt;/strong&gt;: Open a Text Editor&lt;br&gt;
You can use VS Code, Sublime Text, or even Notepad.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 2&lt;/strong&gt;: Create a New File&lt;br&gt;
Save it as index.html.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 3&lt;/strong&gt;: Add This Code&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html&amp;gt;
  &amp;lt;head&amp;gt;
    &amp;lt;title&amp;gt;My First Web Page&amp;lt;/title&amp;gt;
  &amp;lt;/head&amp;gt;
  &amp;lt;body&amp;gt;
    &amp;lt;h1&amp;gt;Hello, World!&amp;lt;/h1&amp;gt;
    &amp;lt;p&amp;gt;I just built my first web page!&amp;lt;/p&amp;gt;
  &amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Step 4&lt;/strong&gt;: View It&lt;br&gt;
Double-click the file to open it in your web browser.&lt;/p&gt;

&lt;p&gt;You’ve just built your first website!&lt;/p&gt;

&lt;h2&gt;
  
  
  Common HTML Tags to Know
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt;- Heading  &lt;code&gt;&amp;lt;h1&amp;gt;Title&amp;lt;/h1&amp;gt;&lt;/code&gt;&lt;br&gt;&lt;br&gt;
 &lt;code&gt;&amp;lt;p&amp;gt;&lt;/code&gt; - Paragraph &lt;code&gt;&amp;lt;p&amp;gt;Text here&amp;lt;/p&amp;gt;&lt;/code&gt;&lt;br&gt;&lt;br&gt;
 &lt;code&gt;&amp;lt;a&amp;gt;&lt;/code&gt; -Link  &lt;code&gt;&amp;lt;a href="https://example.com"&amp;gt;Visit&amp;lt;/a&amp;gt;&lt;/code&gt; &lt;br&gt;
 &lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt;- Image &lt;code&gt;&amp;lt;img src="image.jpg" alt="Description"&amp;gt;&lt;/code&gt;&lt;br&gt;
&lt;code&gt;&amp;lt;ul&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;li&amp;gt;&lt;/code&gt; - List &lt;code&gt;&amp;lt;ul&amp;gt;&amp;lt;li&amp;gt;Item 1&amp;lt;/li&amp;gt;&amp;lt;/ul&amp;gt;&lt;/code&gt; &lt;/p&gt;

&lt;h2&gt;
  
  
  Tips for Learning HTML
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Practice often—even simple pages help.&lt;/li&gt;
&lt;li&gt;Use online editors like CodePen to test your code.&lt;/li&gt;
&lt;li&gt;Don’t worry about memorizing everything. Look up tags as you need them.&lt;/li&gt;
&lt;li&gt;Try small projects: personal bio page, simple blog layout, portfolio page.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;HTML is the gateway to web development. It’s simple, beginner-friendly, and essential for anyone who wants to build websites.&lt;/p&gt;

&lt;p&gt;If you can type, you can learn HTML.&lt;/p&gt;

&lt;p&gt;Follow me for more step-by-step web development tutorials for beginners. Let’s keep learning together!&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>html</category>
      <category>webdev</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>[Boost]</title>
      <dc:creator>Jay oh Why</dc:creator>
      <pubDate>Thu, 03 Jul 2025 02:41:12 +0000</pubDate>
      <link>https://dev.to/joyobaidu/-309d</link>
      <guid>https://dev.to/joyobaidu/-309d</guid>
      <description>&lt;div class="ltag__link--embedded"&gt;
  &lt;div class="crayons-story "&gt;
  &lt;a href="https://dev.to/joyobaidu/frontend-dev-jobs-that-can-make-you-daily-income-for-real-517m" class="crayons-story__hidden-navigation-link"&gt;Frontend Dev Jobs That Can Make You Daily Income — For Real&lt;/a&gt;


  &lt;div class="crayons-story__body crayons-story__body-full_post"&gt;
    &lt;div class="crayons-story__top"&gt;
      &lt;div class="crayons-story__meta"&gt;
        &lt;div class="crayons-story__author-pic"&gt;

          &lt;a href="/joyobaidu" class="crayons-avatar  crayons-avatar--l  "&gt;
            &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1035442%2Fe4c31867-2fe7-4503-8eee-da465e05261e.jpg" alt="joyobaidu profile" class="crayons-avatar__image"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;a href="/joyobaidu" class="crayons-story__secondary fw-medium m:hidden"&gt;
              Jay oh Why
            &lt;/a&gt;
            &lt;div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"&gt;
              
                Jay oh Why
                
              
              &lt;div id="story-author-preview-content-2537828" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"&gt;
                &lt;div class="gap-4 grid"&gt;
                  &lt;div class="-mt-4"&gt;
                    &lt;a href="/joyobaidu" class="flex"&gt;
                      &lt;span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"&gt;
                        &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1035442%2Fe4c31867-2fe7-4503-8eee-da465e05261e.jpg" class="crayons-avatar__image" alt=""&gt;
                      &lt;/span&gt;
                      &lt;span class="crayons-link crayons-subtitle-2 mt-5"&gt;Jay oh Why&lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="print-hidden"&gt;
                    
                      Follow
                    
                  &lt;/div&gt;
                  &lt;div class="author-preview-metadata-container"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

          &lt;/div&gt;
          &lt;a href="https://dev.to/joyobaidu/frontend-dev-jobs-that-can-make-you-daily-income-for-real-517m" class="crayons-story__tertiary fs-xs"&gt;&lt;time&gt;May 28 '25&lt;/time&gt;&lt;span class="time-ago-indicator-initial-placeholder"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="crayons-story__indention"&gt;
      &lt;h2 class="crayons-story__title crayons-story__title-full_post"&gt;
        &lt;a href="https://dev.to/joyobaidu/frontend-dev-jobs-that-can-make-you-daily-income-for-real-517m" id="article-link-2537828"&gt;
          Frontend Dev Jobs That Can Make You Daily Income — For Real
        &lt;/a&gt;
      &lt;/h2&gt;
        &lt;div class="crayons-story__tags"&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/frontend"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;frontend&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/freelance"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;freelance&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/webdev"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;webdev&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/remote"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;remote&lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="crayons-story__bottom"&gt;
        &lt;div class="crayons-story__details"&gt;
          &lt;a href="https://dev.to/joyobaidu/frontend-dev-jobs-that-can-make-you-daily-income-for-real-517m" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"&gt;
            &lt;div class="multiple_reactions_aggregate"&gt;
              &lt;span class="multiple_reactions_icons_container"&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
              &lt;/span&gt;
              &lt;span class="aggregate_reactions_counter"&gt;1&lt;span class="hidden s:inline"&gt; reaction&lt;/span&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/a&gt;
            &lt;a href="https://dev.to/joyobaidu/frontend-dev-jobs-that-can-make-you-daily-income-for-real-517m#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"&gt;
              Comments


              &lt;span class="hidden s:inline"&gt;Add Comment&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="crayons-story__save"&gt;
          &lt;small class="crayons-story__tertiary fs-xs mr-2"&gt;
            2 min read
          &lt;/small&gt;
            
              &lt;span class="bm-initial"&gt;
                

              &lt;/span&gt;
              &lt;span class="bm-success"&gt;
                

              &lt;/span&gt;
            
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;


</description>
      <category>frontend</category>
      <category>freelance</category>
      <category>webdev</category>
      <category>remote</category>
    </item>
    <item>
      <title>Top Free Websites to Create and Optimize Your Resume or Portfolio in 2025</title>
      <dc:creator>Jay oh Why</dc:creator>
      <pubDate>Fri, 13 Jun 2025 20:55:43 +0000</pubDate>
      <link>https://dev.to/joyobaidu/top-free-websites-to-create-and-optimize-your-resume-or-portfolio-in-2025-2m14</link>
      <guid>https://dev.to/joyobaidu/top-free-websites-to-create-and-optimize-your-resume-or-portfolio-in-2025-2m14</guid>
      <description>&lt;p&gt;Would you be able to land your next job or freelance gig? Whether you’re a developer, designer, or student, having a strong resume or portfolio website is essential. But what if you don’t have the budget for premium tools?&lt;/p&gt;

&lt;p&gt;Good news—there are several free websites to create resumes and portfolios that also offer built-in optimisation tools to help you stand out and pass ATS (Applicant Tracking Systems) filters.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why Optimization Matters for Your Resume or Portfolio&lt;/strong&gt;&lt;br&gt;
Before we dive into tools, let’s clarify why optimization is critical:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;ATS compatibility : Most recruiters use software to scan resumes before a human sees them. If your resume isn’t optimized, it may never be read.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;** Keyword matching**: Including relevant industry terms increases your visibility.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Responsive design&lt;/strong&gt;: Portfolios should look great on both desktop and mobile.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Clear messaging&lt;/strong&gt; : Optimised resumes highlight your impact, not just your duties.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Best Free Resume Builders with Built-In Optimization Tools
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;&lt;a href="https://dev.toZety%20Resume%20Builder"&gt;Zety&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Offers keyword suggestions and formatting guidance&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Templates designed to pass ATS filters&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Free to create and preview (PDF download may require signup)&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;SEO Keywords: free resume builder, ATS-friendly resume, optimize resume online&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;2.&lt;a href="https://novoresume.com/" rel="noopener noreferrer"&gt;Novoresume&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;Best for: Clean, professional resumes tailored by job title&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Optimizes content for recruiters and HR systems&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Helpful writing examples by profession&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The free version includes essential templates&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;SEO Keywords: modern resume builder, job-winning resume, resume optimization free&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;a href="https://enhancv.com/" rel="noopener noreferrer"&gt;Ehancv&lt;/a&gt;
Best for: Creative professionals and career changers&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Real-time feedback on bullet points and layout&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Visual resume templates with personality&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Drag-and-drop design editor&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;SEO Keywords: creative resume builder, resume feedback online, resume improvement tool&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;a href="https://www.visualcv.com/" rel="noopener noreferrer"&gt;VisualCV&lt;/a&gt;
Best for: Multimedia resumes and portfolio-style CVs&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Embed links, images, and personal projects&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Track who views your resume&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Build once, use for multiple job applications&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;SEO Keywords: online CV builder, portfolio resume, interactive resume free&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;a href="https://resume.io/" rel="noopener noreferrer"&gt;Resume&lt;/a&gt;
Best for: Fast, professional resumes with minimal effort&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Guided templates with writing help&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Built-in keyword and formatting checks&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Free to build, download with account&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;SEO Keywords: professional resume templates, resume builder free download, instant resume generator&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;a href="https://pages.github.com/" rel="noopener noreferrer"&gt;Github Pages&lt;/a&gt;
Best for: Developers who want full control of their personal site&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Host your resume/portfolio for free with custom domain&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Use templates like developerFolio or Awesome-CV&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;SEO and responsiveness are customizable&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;SEO Keywords: free developer portfolio, GitHub resume template, personal website for developers&lt;/p&gt;

&lt;h2&gt;
  
  
  Bonus : &lt;strong&gt;Image Ideas for Your Blog or Portfolio Page&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Use these images to boost SEO (with proper alt tags and filenames):&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Main Hero Image: Illustration of someone building a resume on a laptop alt="Person optimizing resume online for free"&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Comparison Table Screenshot: Chart comparing features of tools alt="Free resume builder feature comparison 2025"&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Portfolio UI Mockup: Sample developer portfolio layout alt="Responsive developer portfolio example using GitHub Pages"&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Final Thoughts: &lt;strong&gt;Build, Optimize, Stand Out&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Your resume and portfolio are often your first impression — make it count. These free tools let you create beautiful, optimized, job-ready resumes and portfolios without needing to hire a pro.&lt;/p&gt;

&lt;p&gt;** Quick Recap**:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Use Zety, Novoresume, or Rezi for smart, optimized resumes&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Use GitHub Pages or Webflow for polished personal portfolios&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Always optimize for ATS, SEO, and clarity&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Need help creating or optimizing your resume or portfolio? (&lt;a href="//joyobaidu@gmail.com"&gt;Email me&lt;br&gt;
&lt;/a&gt;) I’d help!&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>beginners</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>[Boost]</title>
      <dc:creator>Jay oh Why</dc:creator>
      <pubDate>Wed, 28 May 2025 20:23:27 +0000</pubDate>
      <link>https://dev.to/joyobaidu/-c17</link>
      <guid>https://dev.to/joyobaidu/-c17</guid>
      <description>&lt;div class="ltag__link--embedded"&gt;
  &lt;div class="crayons-story "&gt;
  &lt;a href="https://dev.to/joyobaidu/frontend-dev-jobs-that-can-make-you-daily-income-for-real-517m" class="crayons-story__hidden-navigation-link"&gt;Frontend Dev Jobs That Can Make You Daily Income — For Real&lt;/a&gt;


  &lt;div class="crayons-story__body crayons-story__body-full_post"&gt;
    &lt;div class="crayons-story__top"&gt;
      &lt;div class="crayons-story__meta"&gt;
        &lt;div class="crayons-story__author-pic"&gt;

          &lt;a href="/joyobaidu" class="crayons-avatar  crayons-avatar--l  "&gt;
            &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1035442%2Fe4c31867-2fe7-4503-8eee-da465e05261e.jpg" alt="joyobaidu profile" class="crayons-avatar__image"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;a href="/joyobaidu" class="crayons-story__secondary fw-medium m:hidden"&gt;
              Jay oh Why
            &lt;/a&gt;
            &lt;div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"&gt;
              
                Jay oh Why
                
              
              &lt;div id="story-author-preview-content-2537828" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"&gt;
                &lt;div class="gap-4 grid"&gt;
                  &lt;div class="-mt-4"&gt;
                    &lt;a href="/joyobaidu" class="flex"&gt;
                      &lt;span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"&gt;
                        &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1035442%2Fe4c31867-2fe7-4503-8eee-da465e05261e.jpg" class="crayons-avatar__image" alt=""&gt;
                      &lt;/span&gt;
                      &lt;span class="crayons-link crayons-subtitle-2 mt-5"&gt;Jay oh Why&lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="print-hidden"&gt;
                    
                      Follow
                    
                  &lt;/div&gt;
                  &lt;div class="author-preview-metadata-container"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

          &lt;/div&gt;
          &lt;a href="https://dev.to/joyobaidu/frontend-dev-jobs-that-can-make-you-daily-income-for-real-517m" class="crayons-story__tertiary fs-xs"&gt;&lt;time&gt;May 28 '25&lt;/time&gt;&lt;span class="time-ago-indicator-initial-placeholder"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="crayons-story__indention"&gt;
      &lt;h2 class="crayons-story__title crayons-story__title-full_post"&gt;
        &lt;a href="https://dev.to/joyobaidu/frontend-dev-jobs-that-can-make-you-daily-income-for-real-517m" id="article-link-2537828"&gt;
          Frontend Dev Jobs That Can Make You Daily Income — For Real
        &lt;/a&gt;
      &lt;/h2&gt;
        &lt;div class="crayons-story__tags"&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/frontend"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;frontend&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/freelance"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;freelance&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/webdev"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;webdev&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/remote"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;remote&lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="crayons-story__bottom"&gt;
        &lt;div class="crayons-story__details"&gt;
          &lt;a href="https://dev.to/joyobaidu/frontend-dev-jobs-that-can-make-you-daily-income-for-real-517m" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"&gt;
            &lt;div class="multiple_reactions_aggregate"&gt;
              &lt;span class="multiple_reactions_icons_container"&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
              &lt;/span&gt;
              &lt;span class="aggregate_reactions_counter"&gt;1&lt;span class="hidden s:inline"&gt; reaction&lt;/span&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/a&gt;
            &lt;a href="https://dev.to/joyobaidu/frontend-dev-jobs-that-can-make-you-daily-income-for-real-517m#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"&gt;
              Comments


              &lt;span class="hidden s:inline"&gt;Add Comment&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="crayons-story__save"&gt;
          &lt;small class="crayons-story__tertiary fs-xs mr-2"&gt;
            2 min read
          &lt;/small&gt;
            
              &lt;span class="bm-initial"&gt;
                

              &lt;/span&gt;
              &lt;span class="bm-success"&gt;
                

              &lt;/span&gt;
            
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;


</description>
      <category>frontend</category>
      <category>freelance</category>
      <category>webdev</category>
      <category>remote</category>
    </item>
    <item>
      <title>Frontend Dev Jobs That Can Make You Daily Income — For Real</title>
      <dc:creator>Jay oh Why</dc:creator>
      <pubDate>Wed, 28 May 2025 16:05:29 +0000</pubDate>
      <link>https://dev.to/joyobaidu/frontend-dev-jobs-that-can-make-you-daily-income-for-real-517m</link>
      <guid>https://dev.to/joyobaidu/frontend-dev-jobs-that-can-make-you-daily-income-for-real-517m</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F95s7t0aowkz3auea4ua0.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F95s7t0aowkz3auea4ua0.jpeg" alt="remote jobs for Frontend developer" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you’re learning frontend development like I am and wondering “How can this skill pay me every day?”, you’re in the right place. Whether you’re freelancing, job-hunting, or just trying to hustle, these ideas can bring in daily or consistent income — full-time, part-time, or passively.&lt;/p&gt;

&lt;p&gt;🔧 1. Freelance Frontend Developer&lt;/p&gt;

&lt;p&gt;You can start small with:&lt;br&gt;
•Website fixes&lt;br&gt;
•Landing pages&lt;br&gt;
•UI integrations (like forms, sliders, navbars)&lt;/p&gt;

&lt;p&gt;📍 Where to find clients:&lt;br&gt;
    •Upwork&lt;br&gt;
    •Fiverr&lt;br&gt;
    •Freelancer&lt;br&gt;
    •Twitter/LinkedIn (post your work!)&lt;/p&gt;

&lt;p&gt;💡 Pro tip: Specialize! e.g., “I fix layout bugs fast” or “I make fast mobile-friendly sites.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Website Maintenance Services&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Many small businesses don’t have devs — they just want their website to work.&lt;/p&gt;

&lt;p&gt;Offer:&lt;br&gt;
    •Bug fixes&lt;br&gt;
    •Image/content updates&lt;br&gt;
    •Mobile responsiveness&lt;br&gt;
    •Speed optimization&lt;/p&gt;

&lt;p&gt;💸 Get paid daily or weekly on retainer. It’s stable and underrated.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Landing Page Design for Marketers&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Marketers and content creators need sleek landing pages to sell or promote.&lt;/p&gt;

&lt;p&gt;Use:&lt;br&gt;
    •HTML/CSS/JS&lt;br&gt;
    •React/Vite&lt;br&gt;
    •Or even Webflow for faster delivery&lt;/p&gt;

&lt;p&gt;👌Bonus: They usually pay well because a good landing page means more conversions.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Micro Gigs (Quick Wins)&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Platforms like Fiverr, PeoplePerHour, and CodeMentor let you post small gigs:&lt;/p&gt;

&lt;p&gt;Examples:&lt;br&gt;
    •“I will fix one CSS bug for $10”&lt;br&gt;
    •“I will make your nav bar responsive in 24 hrs”&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/..." class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/..." alt="Uploading image" width="800" height="400"&gt;&lt;/a&gt;Do 2–3 per day, and it adds up fast.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Build &amp;amp; Sell Templates&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Create templates in:&lt;br&gt;
    •HTML/CSS&lt;br&gt;
    •Tailwind UI&lt;br&gt;
    •React or Webflow&lt;/p&gt;

&lt;p&gt;Sell them on:&lt;br&gt;
    •ThemeForest&lt;br&gt;
    •Gumroad&lt;br&gt;
    •Creative Market&lt;/p&gt;

&lt;p&gt;✅ This is passive income — make once, sell forever (if you promote it well).&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Teach or Mentor Frontend Dev&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;If you’re confident with your skills:&lt;br&gt;
    •Offer 1-on-1 calls or tutorials&lt;br&gt;
    •Host mini-courses&lt;br&gt;
    •Join Codementor, Superpeer, or even host live sessions&lt;/p&gt;

&lt;p&gt;You can earn per session or course. Some devs make $100–$500 per week from this alone!&lt;/p&gt;

</description>
      <category>frontend</category>
      <category>freelance</category>
      <category>webdev</category>
      <category>remote</category>
    </item>
    <item>
      <title>Kickstart Your Web Development Journey with Fun Projects (Even as a Beginner)</title>
      <dc:creator>Jay oh Why</dc:creator>
      <pubDate>Wed, 23 Apr 2025 16:18:07 +0000</pubDate>
      <link>https://dev.to/joyobaidu/kickstart-your-web-development-journey-with-fun-projects-even-as-a-beginner-339k</link>
      <guid>https://dev.to/joyobaidu/kickstart-your-web-development-journey-with-fun-projects-even-as-a-beginner-339k</guid>
      <description>&lt;p&gt;So, you’ve learned the basics of HTML, CSS, and JavaScript — now what?  Building your first projects is the best way to level up and gain confidence as a web developer. In this post, I’ll show you how to get started with small, beginner-friendly projects that will boost your skills and help you build a portfolio.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;1. Start with a Personal Portfolio&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;It allow you to showcase your skills, but it’s also an opportunity to practice creating a fully responsive, polished website.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;What you’ll learn:&lt;/em&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;HTML &amp;amp; CSS for layout and styling&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Flexbox &amp;amp; CSS Grid for building responsive layouts&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;JavaScript for basic interactions&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;2. Create a Simple Landing Page&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Single-page website that can serve a variety of purposes.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;What you’ll learn:&lt;/em&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;How to structure a webpage&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Best practices for typography and color schemes&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Using images and icons effectively&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Basic animations with CSS&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;3. Build a To-Do List App&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;It’s simple enough to avoid overwhelming you but complex enough to teach essential concepts like handling user input, manipulating the DOM, and saving data (even if it's just temporarily).&lt;/p&gt;

&lt;p&gt;&lt;em&gt;What you’ll learn:&lt;/em&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;JavaScript for interactive features&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;DOM manipulation to add, edit, and delete items&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Local storage (optional) to save your tasks between sessions&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;4. Try a Weather App&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Building a weather app can be a fun way to practice working with APIs. You’ll use an API to fetch live weather data and display it on your page.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;What you’ll learn:&lt;/em&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;How to make HTTP requests using JavaScript&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Using third-party APIs (like OpenWeatherMap)&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Parsing JSON data and displaying it on a webpage&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;5. Make a Blog Page&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;If you love writing or sharing your thoughts, why not create your own blog page?&lt;/p&gt;

&lt;p&gt;&lt;em&gt;What you’ll learn:&lt;/em&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;How to design a content-heavy page&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Structuring text with headings, lists, and paragraphs&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Using JavaScript to enhance the user experience (e.g., a “read more” toggle)&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;Pro tip:&lt;/em&gt;&lt;/strong&gt; Document your journey by writing blog posts, sharing on GitHub, or even recording tutorials. It’s a great way to track your progress and help others along the way!&lt;/p&gt;

&lt;p&gt;Leave your questions in the comment box below👇&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>beginners</category>
      <category>productivity</category>
    </item>
    <item>
      <title>Why I Want to Be a Front-End Developer and How HNG Will Help Me Achieve My Goals 📌</title>
      <dc:creator>Jay oh Why</dc:creator>
      <pubDate>Sat, 01 Feb 2025 03:36:42 +0000</pubDate>
      <link>https://dev.to/joyobaidu/why-i-want-to-be-a-front-end-developer-and-how-hng-will-help-me-achieve-my-goals-3n25</link>
      <guid>https://dev.to/joyobaidu/why-i-want-to-be-a-front-end-developer-and-how-hng-will-help-me-achieve-my-goals-3n25</guid>
      <description>&lt;p&gt;&lt;strong&gt;My Motivation for Becoming a Front-End Developer&lt;/strong&gt;&lt;br&gt;
Although I have always been interested in technology, I am most excited about how people use digital products. I enjoy developing web applications that are user-friendly, aesthetically pleasing, and functional. Front-end development allows me to blend creativity 🎨 with problem-solving 🧩, turning design concepts into interactive and accessible web pages.&lt;/p&gt;

&lt;p&gt;Beyond the aesthetics, I want to build solutions that improve user engagement and accessibility. Whether it’s a dynamic portfolio or a business website, I want to ensure that every digital product I create is efficient and user-friendly.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How HNG Will Help Me Grow in the Field&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The HNG Internship is an incredible opportunity for developers at all levels to gain hands-on experience, work on real-world projects, and collaborate with industry professionals. The structured yet intense nature of the program ensures rapid learning, which aligns perfectly with my growth aspirations.&lt;/p&gt;

&lt;p&gt;HNG provides an environment where I can:&lt;br&gt;
✅ Work on real-world projects that improve my technical skills.&lt;br&gt;
✅ Engage with mentors and experienced developers for guidance.&lt;br&gt;
✅ Improve my ability to work in a team-based, agile environment.&lt;br&gt;
✅ Enhance my problem-solving skills through challenging tasks.&lt;/p&gt;

&lt;p&gt;Moreover, exposure to best practices in React.js⚛️ and JavaScript⚡ development will help me strengthen my front-end development expertise. The demand for skilled front-end developers is constantly rising, as seen in platforms like &lt;a href="https://hng.tech/hire/web-developers" rel="noopener noreferrer"&gt;Hire Web Developers&lt;/a&gt; and &lt;a href="https://hng.tech/hire/reactjs-developers" rel="noopener noreferrer"&gt;Hire React.js Developers&lt;/a&gt;, which showcase industry needs for talented professionals.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;🎯 My Goals for the Internship and How I Plan to Achieve Them&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;To make the most out of the HNG internship, I have set the following goals:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Master JavaScript and React.js I will focus on improving my JavaScript fundamentals and deepening my knowledge of React.js through hands-on projects and peer learning.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Build a strong portfolio. By contributing to real-world projects, I aim to create a diverse portfolio showcasing my front-end development skills.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Improve problem-solving and debugging skills: I will actively participate in coding challenges and debugging sessions to enhance my ability to troubleshoot issues efficiently.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Network and collaborate: Connecting with fellow developers and mentors will help me learn industry best practices and build valuable professional relationships.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Stay consistent and disciplined. I plan to dedicate time daily to coding, research, and documentation to ensure steady progress.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In conclusion, becoming a front-end developer is more than just a career choice for me—it is a passion that I am eager to refine through continuous learning 📖 and real-world application. The HNG internship offers me a fantastic chance to advance in this industry more quickly. With dedication, persistence, and the right guidance, I am confident that this journey will set me on the path to becoming a skilled front-end developer.&lt;/p&gt;

&lt;p&gt;Are you also on the journey to becoming a front-end developer? Let’s connect and learn together!&lt;/p&gt;

</description>
      <category>hng</category>
      <category>frontend</category>
      <category>developer</category>
    </item>
    <item>
      <title>Why Join a Tech Community? ✋5 Powerful Reasons for Beginners</title>
      <dc:creator>Jay oh Why</dc:creator>
      <pubDate>Sun, 19 Jan 2025 20:46:14 +0000</pubDate>
      <link>https://dev.to/joyobaidu/why-join-a-tech-community-5-powerful-reasons-for-beginners-4652</link>
      <guid>https://dev.to/joyobaidu/why-join-a-tech-community-5-powerful-reasons-for-beginners-4652</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fehisss5761b3odtwjeb4.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fehisss5761b3odtwjeb4.jpeg" alt=" " width="590" height="416"&gt;&lt;/a&gt;Are you starting your journey in tech and feeling a bit lost? Joining a tech community could be the game-changer you need! From faster learning and career growth to staying updated with trends, tech communities offer a world of opportunities. In this article, we’ll break down the top 5 reasons why every beginner should join one today and how it can supercharge your journey.&lt;/p&gt;

&lt;h2&gt;
  
  
  🚀 1. Learn Faster, Together
&lt;/h2&gt;

&lt;p&gt;Communities are like cheat codes for learning! 🧑‍💻💡&lt;br&gt;
You’ll find people sharing:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Tips &amp;amp; tricks you didn’t even know existed.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Solutions to those frustrating errors.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Resources like tutorials and tools to speed up your progress.&lt;br&gt;
 &lt;em&gt;Why go it alone when you can learn faster with others?&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🤝 2. Network with Like-Minded People
&lt;/h2&gt;

&lt;p&gt;Say hello to your future collaborators, mentors, or even employers! 🌐&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Find people who share your interests (frontend development, backend development, mobile development).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Build connections that can open up career opportunities.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Collaborate on fun projects and learn from each other.&lt;br&gt;
&lt;em&gt;It’s not just about what you know, but who you know!&lt;/em&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  🔥 3. Stay Updated on Trends
&lt;/h2&gt;

&lt;p&gt;Tech moves fast—don’t get left behind! 🕒🚀&lt;br&gt;
Communities help you:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Stay in the loop with the latest tools and industry trends.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Discover events, webinars, and challenges to grow your skills.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;em&gt;Learning from others keeps you ahead of the curve!&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Get Inspired &amp;amp; Stay Motivated
&lt;/h2&gt;

&lt;p&gt;Feeling stuck? Communities will lift you up!&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Watch others share their wins, projects, and challenges.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Celebrate your milestones with people who understand your journey.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;em&gt;Their success stories will remind you—if they can, so can you!&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  💪 5. Build Your Confidence
&lt;/h2&gt;

&lt;p&gt;Starting can feel intimidating—but communities are here to cheer you on! &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Ask “silly” questions without fear of judgment.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Get feedback that helps you improve.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Share your small wins and grow into a confident creator.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;em&gt;Confidence grows when you have people rooting for you!&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Where to Start?
&lt;/h2&gt;

&lt;p&gt;Jump in today! Try these places:&lt;/p&gt;

&lt;p&gt;GitHub communities for developers.&lt;br&gt;
Techies on LinkedIn (&lt;a href="https://lnkd.in/dyMBGAxb" rel="noopener noreferrer"&gt;https://lnkd.in/dyMBGAxb&lt;/a&gt;)&lt;br&gt;
Discord/Slack groups related to your interests.&lt;br&gt;
Attend local or virtual tech meetups.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Ready to Grow?&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;Step 1:&lt;/strong&gt; Search for a community in your niche.&lt;br&gt;
&lt;strong&gt;Step 2:&lt;/strong&gt; Introduce yourself and start engaging.&lt;br&gt;
&lt;strong&gt;Step 3:&lt;/strong&gt; Watch your skills and confidence soar!&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Don’t wait for the perfect moment—your journey starts now. Join a tech community and unlock your potential!&lt;/em&gt;&lt;/p&gt;

</description>
      <category>frontend</category>
      <category>community</category>
      <category>beginners</category>
    </item>
    <item>
      <title>How to Add Tailwind CSS 🎨 to a Project 👩‍💻</title>
      <dc:creator>Jay oh Why</dc:creator>
      <pubDate>Sun, 19 Jan 2025 20:18:33 +0000</pubDate>
      <link>https://dev.to/joyobaidu/how-to-add-tailwind-css-to-a-project-325f</link>
      <guid>https://dev.to/joyobaidu/how-to-add-tailwind-css-to-a-project-325f</guid>
      <description>&lt;p&gt;If you're building a project using HTML, CSS, and vanilla JavaScript and want to take advantage of Tailwind CSS's utility-first approach, you're in the right place. Tailwind can be easily used in a project without React or fancy frameworks. Here’s a step-by-step guide to adding Tailwind CSS to your HTML project using simple and advanced methods.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;The Simplest Way: Use the Tailwind CDN 🌐
The fastest way to start using Tailwind CSS is by adding its Content Delivery Network (CDN) link to your HTML file. This approach is perfect for quick or small projects.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Steps:&lt;br&gt;
Add the following  tag to your HTML file inside the &lt;/p&gt; section:

&lt;p&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;br&gt;
&amp;lt;html lang="en"&amp;gt;&lt;br&gt;
&amp;lt;head&amp;gt;&lt;br&gt;
    &amp;lt;meta charset="UTF-8"&amp;gt;&lt;br&gt;
    &amp;lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&amp;gt;&lt;br&gt;
    &amp;lt;title&amp;gt;Tailwind CSS Example&amp;lt;/title&amp;gt;&lt;br&gt;
    &amp;lt;!-- Tailwind CSS via CDN --&amp;gt;&lt;br&gt;
    &amp;lt;link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.3.2/dist/tailwind.min.css" rel="stylesheet"&amp;gt;&lt;br&gt;
&amp;lt;/head&amp;gt;&lt;br&gt;
&amp;lt;body&amp;gt;&lt;br&gt;
    &amp;lt;h1 class="text-3xl font-bold text-center"&amp;gt;Hello, Tailwind CSS!&amp;lt;/h1&amp;gt;&lt;br&gt;
&amp;lt;/body&amp;gt;&lt;br&gt;
&amp;lt;/html&amp;gt;&lt;/code&gt;&lt;br&gt;
Could you save your file and open it in a browser? You’ll immediately see Tailwind's styling applied!&lt;/p&gt;

&lt;p&gt;Tip: While the CDN is convenient, it includes all Tailwind utilities, which can make the file large. &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;A More Flexible Option: Install Tailwind with NPM
Steps:
Set Up Your Project:&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Create a project folder and initialize it with npm:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;mkdir tailwind-html&lt;br&gt;
cd tailwind-html&lt;br&gt;
npm init -y&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Install Tailwind CSS: Install Tailwind along with PostCSS and Autoprefixer:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;npm install tailwindcss postcss autoprefixer&lt;br&gt;
npx tailwindcss init&lt;/code&gt;&lt;br&gt;
Configure Tailwind:&lt;/p&gt;

&lt;p&gt;In the tailwind.config.js file, specify the location of your HTML files:&lt;br&gt;
javascript&lt;br&gt;
&lt;code&gt;module.exports = {&lt;br&gt;
  content: ["./*.html"],&lt;br&gt;
  theme: {&lt;br&gt;
    extend: {},&lt;br&gt;
  },&lt;br&gt;
  plugins: [],&lt;br&gt;
};&lt;/code&gt;&lt;br&gt;
Add Tailwind Directives to a CSS File:&lt;/p&gt;

&lt;p&gt;Create a style.css file in your project root:&lt;br&gt;
CSS&lt;br&gt;
&lt;code&gt;@tailwind base;&lt;br&gt;
@tailwind components;&lt;br&gt;
@tailwind utilities;&lt;/code&gt;&lt;br&gt;
Generate the Tailwind CSS File:&lt;/p&gt;

&lt;p&gt;Add a build script in package.json:&lt;br&gt;
JSON&lt;br&gt;
&lt;code&gt;"scripts": {&lt;br&gt;
  "build": "npx tailwindcss -i ./style.css -o ./dist/style.css --watch"&lt;br&gt;
}&lt;/code&gt;&lt;br&gt;
Run the build command to generate the compiled CSS:&lt;br&gt;
bash&lt;br&gt;
&lt;code&gt;npm run build&lt;/code&gt;&lt;br&gt;
Link the Generated CSS in Your HTML: Add the compiled CSS file to your HTML:&lt;/p&gt;

&lt;p&gt;html&lt;br&gt;
&lt;code&gt;&amp;lt;link href="./dist/style.css" rel="stylesheet"&amp;gt;&lt;/code&gt;&lt;br&gt;
Start Coding with Tailwind: Use Tailwind classes in your HTML as needed:&lt;/p&gt;

&lt;p&gt;html&lt;br&gt;
&lt;code&gt;&amp;lt;h1 class="text-3xl font-bold text-blue-500"&amp;gt;Hello, Tailwind!&amp;lt;/h1&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;For Command-Line Enthusiasts: Use the Tailwind CLI
The Tailwind CLI is a great alternative if you prefer avoiding npm dependencies while still having a custom build.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Steps:&lt;br&gt;
Install the Tailwind CLI globally:&lt;/p&gt;

&lt;p&gt;bash&lt;br&gt;
Copy code&lt;br&gt;
&lt;code&gt;npm install -g tailwindcss&lt;/code&gt;&lt;br&gt;
Generate a Tailwind CSS File:&lt;/p&gt;

&lt;p&gt;Create an input CSS file (input.css) with the following content:&lt;br&gt;
css&lt;br&gt;
Copy code&lt;br&gt;
&lt;code&gt;@tailwind base;&lt;br&gt;
@tailwind components;&lt;br&gt;
@tailwind utilities;&lt;/code&gt;&lt;br&gt;
Use the CLI to compile the CSS:&lt;br&gt;
bash&lt;br&gt;
Copy code&lt;br&gt;
&lt;code&gt;tailwindcss -i ./input.css -o ./output.css&lt;/code&gt;&lt;br&gt;
Link the compiled CSS in your HTML:&lt;/p&gt;

&lt;p&gt;html&lt;br&gt;
Copy code&lt;br&gt;
&lt;code&gt;&amp;lt;link href="./output.css" rel="stylesheet"&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;When to Use Which Method?&lt;br&gt;
CDN: Ideal for quick experiments and prototypes.&lt;br&gt;
NPM: Best for scalable projects where you want to optimize CSS size.&lt;br&gt;
CLI: Suitable for lightweight setups without the need for a full npm environment.&lt;/p&gt;

&lt;p&gt;Tailwind CSS is incredibly versatile and can be easily adapted for simple HTML projects, whether you're prototyping or building something more advanced. By choosing the method that suits your needs, you can unlock the full potential of Tailwind’s utility-first framework in your workflow.&lt;br&gt;
You can drop any other method that has been tested and worked👇😊&lt;/p&gt;

</description>
      <category>html</category>
      <category>css</category>
      <category>tailwindcss</category>
      <category>javascript</category>
    </item>
    <item>
      <title>How to Add Tailwind CSS 🎨 to a Project 👩‍💻</title>
      <dc:creator>Jay oh Why</dc:creator>
      <pubDate>Fri, 17 Jan 2025 10:20:48 +0000</pubDate>
      <link>https://dev.to/joyobaidu/how-to-add-tailwind-css-to-a-project-45o9</link>
      <guid>https://dev.to/joyobaidu/how-to-add-tailwind-css-to-a-project-45o9</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzbe7l7zzjqb3qffc9mc6.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzbe7l7zzjqb3qffc9mc6.jpeg" alt=" " width="736" height="465"&gt;&lt;/a&gt;If you're building a project using HTML, CSS, and vanilla JavaScript and want to take advantage of Tailwind CSS's utility-first approach, you're in the right place. Tailwind can be easily used in a project without React or fancy frameworks. Here’s a step-by-step guide to adding Tailwind CSS to your HTML project using simple and advanced methods.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. The Simplest Way: Use the Tailwind CDN 🌐
&lt;/h2&gt;

&lt;p&gt;The fastest way to start using Tailwind CSS is by adding its Content Delivery Network (CDN) link to your HTML file. This approach is perfect for quick or small projects.&lt;/p&gt;

&lt;p&gt;Steps:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Add the following  tag to your HTML file inside the  section:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html lang="en"&amp;gt;
&amp;lt;head&amp;gt;
    &amp;lt;meta charset="UTF-8"&amp;gt;
    &amp;lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&amp;gt;
    &amp;lt;title&amp;gt;Tailwind CSS Example&amp;lt;/title&amp;gt;
    &amp;lt;!-- Tailwind CSS via CDN --&amp;gt;
    &amp;lt;link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.3.2/dist/tailwind.min.css" rel="stylesheet"&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;
    &amp;lt;h1 class="text-3xl font-bold text-center"&amp;gt;Hello, Tailwind CSS!&amp;lt;/h1&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Could you save your file and open it in a browser? You’ll immediately see Tailwind's styling applied!&lt;/p&gt;

&lt;p&gt;💡Tip: While the CDN is convenient, it includes all Tailwind utilities, which can make the file large. &lt;/p&gt;

&lt;h2&gt;
  
  
  2. A More Flexible Option: Install Tailwind with NPM 📦
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Set Up Your Project:&lt;/strong&gt;
Create a project folder 🗂️ and initialize it with npm:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;mkdir tailwind-html
cd tailwind-html
npm init -y
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Install Tailwind CSS:&lt;/strong&gt; Install Tailwind along with PostCSS and Autoprefixer:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install tailwindcss postcss autoprefixer
npx tailwindcss init
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;⚙️ &lt;strong&gt;Configure Tailwind:&lt;/strong&gt;
In the tailwind.config.js file, specify the location of your HTML files:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    '{html,js}', // Adjust the path and file extensions as per your project structure
    'index.html' // Include your main HTML file if applicable
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Add Tailwind Directives to a CSS File&lt;/strong&gt;:
Create a style.css file in your project root and add:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;@tailwind base;
@tailwind components;
@tailwind utilities;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Add a build script in the package.json:&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "devDependencies": {
    "autoprefixer": "^10.4.20",
    "postcss": "^8.5.1",
    "tailwindcss": "^3.4.17"
  },
  "scripts": {
    "build": "tailwindcss -i ./style.css -o ./dist/output.css --watch"
  }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Run the build command to generate the compiled CSS:&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm run build
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;🔗Link the generated CSS in Your HTML:&lt;/strong&gt; 
Add the compiled CSS file to your HTML:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;link href="./dist/style.css" rel="stylesheet"&amp;gt;


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;⚡ Start Coding with Tailwind: Use Tailwind classes in your HTML as needed&lt;/strong&gt;
:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;h1 class="text-3xl font-bold text-blue-500"&amp;gt;Hello, Tailwind!&amp;lt;/h1&amp;gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  3. 💻 For Fans of Command-Line: Use the Tailwind CLI
&lt;/h2&gt;

&lt;p&gt;The Tailwind CLI is a great alternative if you prefer avoiding npm dependencies while still having a custom build.&lt;/p&gt;

&lt;p&gt;Steps:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Install the Tailwind CLI globally:&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install -g tailwindcss
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Create an input CSS file (input.css) with the following content:&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;@tailwind base;
@tailwind components;
@tailwind utilities;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Use the CLI to compile the CSS:&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;tailwindcss -i ./input.css -o ./output.css
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Link the compiled CSS in your HTML:&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;link href="./output.css" rel="stylesheet"&amp;gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;When to Use Which Method?&lt;br&gt;
🌐CDN: Ideal for quick experiments and prototypes.&lt;br&gt;
📦NPM: Best for scalable projects where you want to optimize CSS size.&lt;br&gt;
💻CLI: Suitable for lightweight setups without the need for a full npm environment.&lt;/p&gt;

&lt;p&gt;Tailwind CSS is incredibly versatile and can be easily adapted for simple HTML projects, whether you're prototyping or building something more advanced. By choosing the method that suits your needs, you can unlock the full potential of Tailwind’s utility-first framework in your workflow.&lt;/p&gt;

&lt;p&gt;You can drop your questions in the comment section 👇&lt;/p&gt;

</description>
      <category>html</category>
      <category>css</category>
      <category>tailwindcss</category>
      <category>javascript</category>
    </item>
    <item>
      <title>5 Fun Projects to Master ES6 Javascript Basics in 2025 🚀👨‍💻</title>
      <dc:creator>Jay oh Why</dc:creator>
      <pubDate>Wed, 15 Jan 2025 10:10:38 +0000</pubDate>
      <link>https://dev.to/joyobaidu/5-fun-projects-to-master-es6-javascript-basics-in-2025-2j9l</link>
      <guid>https://dev.to/joyobaidu/5-fun-projects-to-master-es6-javascript-basics-in-2025-2j9l</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3j30scc2x9bmjqz85f8v.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3j30scc2x9bmjqz85f8v.jpeg" alt=" " width="720" height="720"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Mastering ES6 is all about practice! Here are 5 beginner-friendly project ideas that will help you solidify your ES6 skills while having fun:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;📝&lt;strong&gt;Build a To-Do List App&lt;/strong&gt; &lt;br&gt;
What You’ll Practice:&lt;br&gt;
👉 Arrow functions for event handlers.&lt;br&gt;
👉 Template literals for rendering tasks dynamically.&lt;br&gt;
👉 Modules for organising task logic.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;🌦️ &lt;strong&gt;Create a Weather App&lt;/strong&gt; &lt;br&gt;
What You’ll Practice:&lt;br&gt;
👉 Promises and async/await to fetch weather data from an API.&lt;br&gt;
👉 Destructuring to extract API response data.&lt;br&gt;
Challenge: Use ES6 default parameters to handle user input errors.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Design a Simple Quiz App&lt;/strong&gt; &lt;br&gt;
What You’ll Practice:&lt;br&gt;
👉 Classes to manage questions and scores.&lt;br&gt;
👉 Spread/rest operators for adding and managing quiz questions.&lt;br&gt;
Challenge: Shuffle questions using ES6’s Array.from() and the spread operator.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;💬&lt;strong&gt;Build a Random Quote Generator&lt;/strong&gt; &lt;br&gt;
What You’ll Practice:&lt;br&gt;
👉 Template literals for displaying quotes.&lt;br&gt;
👉 Modules to separate data and logic.&lt;br&gt;
Challenge: Fetch random quotes from an API using fetch() with async/await.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;🛒&lt;strong&gt;Create a Shopping Cart&lt;/strong&gt; &lt;br&gt;
What You’ll Practice:&lt;br&gt;
=&amp;gt; Arrow functions for event listeners.&lt;br&gt;
👉 Map, filter, reduce to manage cart items and calculate totals.&lt;br&gt;
👉 Default parameters for handling empty cart scenarios.&lt;br&gt;
Challenge: Add a feature to update the cart total dynamically when items are added or removed.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>beginners</category>
      <category>frontend</category>
    </item>
  </channel>
</rss>
