<?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>Forem: leo 👨🏻‍💻</title>
    <description>The latest articles on Forem by leo 👨🏻‍💻 (@leomjaques).</description>
    <link>https://forem.com/leomjaques</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%2F301309%2F08cd97c2-a4e6-4e4c-a234-a9bdeafab5e9.png</url>
      <title>Forem: leo 👨🏻‍💻</title>
      <link>https://forem.com/leomjaques</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/leomjaques"/>
    <language>en</language>
    <item>
      <title>From 0 to 100 Followers on Twitter. How I Grew My Developer Account 🥳</title>
      <dc:creator>leo 👨🏻‍💻</dc:creator>
      <pubDate>Mon, 07 Dec 2020 14:01:04 +0000</pubDate>
      <link>https://forem.com/leomjaques/from-0-to-100-followers-on-twitter-how-i-grew-my-developer-account-5h7g</link>
      <guid>https://forem.com/leomjaques/from-0-to-100-followers-on-twitter-how-i-grew-my-developer-account-5h7g</guid>
      <description>&lt;p&gt;Content is king 👑&lt;/p&gt;

&lt;p&gt;There's no escaping it, and if there is one final outtake to this whole post, it's probably this one - you should produce content.&lt;/p&gt;

&lt;p&gt;Any form and format. I don't think it matters. What I do think matters is that when you do create something, you do it out of wisdom, not hard work. I will explain that in a minute.&lt;/p&gt;

&lt;p&gt;First, let me present you with some context.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;If you don't know me, which is quite likely, I'm Leo, a guy sharing his journey on becoming a master coder 🌈&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;It all began a year ago when I started learning HTML, CSS, and everything else. I can share details on the path I took and the resources I'm using to learn everyday if any of you wants it. But that's for some other time.&lt;/p&gt;

&lt;p&gt;As I started to dive deeper into tech, I realized I needed some sort of authority on social media.&lt;/p&gt;

&lt;p&gt;After all, there's no better brand than your name.&lt;/p&gt;

&lt;p&gt;And the best place to start would be good old Twitter.&lt;/p&gt;

&lt;h2&gt;
  
  
  Building a following 🦺
&lt;/h2&gt;

&lt;p&gt;My goals, clear as paper, were:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;💅🏻 Setup a pretty account.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;🕺🏻 Become huge somehow.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;👔 Get loads of job offers.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Seems easy, heh.&lt;/p&gt;

&lt;p&gt;The new account would be for my developer life. I would follow tech topics, cool engineers, and some founders.&lt;/p&gt;

&lt;p&gt;After setting it up, I had something like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--oxARly8t--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/oyqoqikbk8ql78b1pyqt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--oxARly8t--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/oyqoqikbk8ql78b1pyqt.png" alt="Alt Text" width="800" height="483"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;That's how it looks right now. But I change it all the time, lol.&lt;/p&gt;

&lt;p&gt;Anyway, I believe I grew to 100 followers in about a month. And there's no harder time to grow when you have no social proof or backup of who you are online.&lt;/p&gt;

&lt;p&gt;For example, if you receive a notification that someone followed you, and you go check the person out and they have 1522 followers, you might feel incline to follow them back.&lt;/p&gt;

&lt;p&gt;It happens because they have social proof of some sort. In this case, its numbers. But if the person has 4 followers? Yeah, not so much strength on hitting that following back button.&lt;/p&gt;

&lt;p&gt;So my primary objective was growing my social proof aka my following.&lt;/p&gt;

&lt;p&gt;And how did I achieve those 100 followers?&lt;/p&gt;

&lt;p&gt;Milking the shit out of a blog post I created 😈 😈&lt;/p&gt;

&lt;h2&gt;
  
  
  Milking the traction 🐮
&lt;/h2&gt;

&lt;p&gt;I don't understand organic growth on Twitter, and I wouldn't leave it for luck.&lt;/p&gt;

&lt;p&gt;So after brainstorming a bit, I decided I would write an article, but not a technical one. I didn't want to spend a lot of time on it.&lt;/p&gt;

&lt;p&gt;I would write one of those "Top Resources You Should Know" lists you see everywhere. But mine would have actual great resources because I'm a favoriting/bookmarking god. I had tons of it.&lt;/p&gt;

&lt;p&gt;Where to post it?&lt;/p&gt;

&lt;p&gt;Well, I would spam on anywhere I could.&lt;/p&gt;

&lt;p&gt;I found a forum called DEV (hi) that had some interesting engagement. It seemed to have a good rotation of "trending" posts, and so I created an account on it. I would also post on &lt;a href="https://leonardojaques.com/blog"&gt;my blog&lt;/a&gt;, although I knew it would get me zero views.&lt;/p&gt;

&lt;h2&gt;
  
  
  The content
&lt;/h2&gt;

&lt;p&gt;I finished writing the article in about 50 minutes.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--qcCNArFM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/tajhjo58gqhlsjsv4o9m.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--qcCNArFM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/tajhjo58gqhlsjsv4o9m.png" alt="Alt Text" width="800" height="390"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I think I organized a well-constructed clickbait with a nice image, and because of that, it got #1 of the week on the same day and #2 of the month a while later.&lt;/p&gt;

&lt;p&gt;Of course, I did my research. I used the most populated tags on the forum and read a few trending posts to catch the gist of it.&lt;/p&gt;

&lt;p&gt;So I made a post that got 1k likes. Yay. Where are my followers? 💰&lt;/p&gt;

&lt;p&gt;This is where you work wiser and not harder.&lt;/p&gt;

&lt;p&gt;The post itself gave me zero followers. The important catch here is that I received 200 followers on DEV. I guess it lacked that sort of content and some people just dropped a click on the follow button.&lt;/p&gt;

&lt;p&gt;Your profile in there is irrelevant, people don't care about it. But here lied the trick: when I followed them back, the platform allowed us to chat privately 🤾🏻&lt;/p&gt;

&lt;p&gt;Bingo. I could harass people. I mean chat.&lt;/p&gt;

&lt;p&gt;And so I did. 200 times.&lt;/p&gt;

&lt;p&gt;I guess it was hard work... well whatever.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--uPR-YT7K--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/p9dza9b7e23nk1nk1uop.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--uPR-YT7K--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/p9dza9b7e23nk1nk1uop.png" alt="Alt Text" width="800" height="211"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I was impressed by the number of replies I got.&lt;/p&gt;

&lt;p&gt;Yes, I'm not proud of copy and pasting a bunch of messages, but I had no real idea if I would even get a single reply, so I just went with it.&lt;/p&gt;

&lt;p&gt;I think it was about 60% of respondents, with is NUTS. My theory is that no one uses DM here, so when that new blue icon pops up, they get curious and open up.&lt;/p&gt;

&lt;p&gt;I probably spent two hours sending DMs to people and telling them to follow me on Twitter.&lt;/p&gt;

&lt;p&gt;I grew to 100 followers on the same day. Easy.&lt;/p&gt;

&lt;p&gt;But that wasn't enough. The seat was still warm and I felt I could capitalize some more while I could. So I built a Newsletter to see how many I could convert on that riding wave.&lt;/p&gt;

&lt;h2&gt;
  
  
  A Newsletter 🍬
&lt;/h2&gt;

&lt;p&gt;I built it using Next.js and Mailchimp, and I plan on writing about how I did it soon. You can check &lt;a href="https://bubblegum.dev/"&gt;the final product here&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;It probably took me a solid week to build, buy a domain, and deploy. I used the numbers I got from the post to boost social proof on the Newsletter, even tho I had none.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--nZzXHgZ7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/xsa6cuqugsnmv8jtbf7a.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--nZzXHgZ7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/xsa6cuqugsnmv8jtbf7a.png" alt="Alt Text" width="800" height="419"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I then got back to those DM's and also reached out to some new followers I got, still results from that post. I invited everyone to subscribe to this new thing.&lt;/p&gt;

&lt;p&gt;Oh, my poor test subjects 🧑🏻‍⚕️&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--kq-DdjY3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/ujmna4g5b41dj4x0we12.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--kq-DdjY3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/ujmna4g5b41dj4x0we12.png" alt="Alt Text" width="800" height="247"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Na0nmQdl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/mb1s0j66s3lfv4pgvu2q.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Na0nmQdl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/mb1s0j66s3lfv4pgvu2q.png" alt="Alt Text" width="800" height="216"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After reaching out to those people, I got 45 subscribers. Which is not an amazing number by any means - but so isn't 100 followers on Twitter.&lt;/p&gt;

&lt;p&gt;But again, context.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--yn0FVhst--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/h4sfev5yi4vh97ddktvi.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--yn0FVhst--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/h4sfev5yi4vh97ddktvi.png" alt="Alt Text" width="684" height="294"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I knew no one in the tech field and had a brand new account.&lt;br&gt;
That's some pretty solid results if you ask me.&lt;/p&gt;

&lt;p&gt;I also published the Newsletter on Product Hunt, but it flopped. I got 1 upvote, and it was from my cousin. Obviously. You need a proper plan to launch it on PH, which I didn't.&lt;/p&gt;

&lt;p&gt;And that's about it. &lt;/p&gt;

&lt;p&gt;I had a lot of fun chatting on the DMs with everyone here on DEV.&lt;/p&gt;

&lt;p&gt;I hope you got any useful knowledge out of this gigantic mess. If you did, maybe you should... follow me on &lt;a href="https://twitter.com/leokindacodes"&gt;Twitter&lt;/a&gt;?&lt;/p&gt;

&lt;p&gt;Don't forget, everyone: Content is king.&lt;/p&gt;

&lt;p&gt;Why do you think I even wrote this?&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>beginners</category>
      <category>react</category>
      <category>productivity</category>
    </item>
    <item>
      <title>By Popular Demand, Bubblegum.dev 🍬 is Live. Glycerin Levels Going Up.</title>
      <dc:creator>leo 👨🏻‍💻</dc:creator>
      <pubDate>Tue, 06 Oct 2020 15:01:29 +0000</pubDate>
      <link>https://forem.com/leomjaques/by-popular-demand-bubblegum-dev-is-live-glycerin-levels-going-up-20b0</link>
      <guid>https://forem.com/leomjaques/by-popular-demand-bubblegum-dev-is-live-glycerin-levels-going-up-20b0</guid>
      <description>&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fd3kxyjpqr95yxcsuhc1i.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fd3kxyjpqr95yxcsuhc1i.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://bubblegum.dev/" rel="noopener noreferrer"&gt;Click here if you drink water ( ͡° ͜ʖ ͡°)&lt;/a&gt;&lt;br&gt;
&lt;a href="https://bubblegum.dev/" rel="noopener noreferrer"&gt;Click here if you breathe air ( ͡° ͜ʖ ͡°)&lt;/a&gt;&lt;br&gt;
&lt;a href="https://bubblegum.dev/" rel="noopener noreferrer"&gt;Click here if you eat stuff ( ͡° ͜ʖ ͡°)&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hi.&lt;/p&gt;

&lt;p&gt;After a silly resources post got 1000+ reactions, we knew what was about to happen.&lt;/p&gt;

&lt;p&gt;✨ Another Newsletter Made ✨&lt;/p&gt;

&lt;p&gt;Yep. And we did it proudly. After all, who doesn't like shiny, new stuff 💎?&lt;/p&gt;

&lt;p&gt;So &lt;strong&gt;Bubblegum.dev&lt;/strong&gt; was created. This one is all about those &lt;em&gt;sweet, sweet&lt;/em&gt; hidden gems. The ones you were craving for and didn't even know. &lt;br&gt;
The &lt;em&gt;wow, I need it&lt;/em&gt; kind.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Maybe it's useful 🏆&lt;/li&gt;
&lt;li&gt;Maybe it's pretty ☀️&lt;/li&gt;
&lt;li&gt;Maybe it's fun 🥳&lt;/li&gt;
&lt;li&gt;Maybe it's &lt;a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" rel="noopener noreferrer"&gt;the best newsletter ever created and the one that will forever be remembered on the heart of over half a million talented developers&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Maybe it's all of it. We don't follow a strict rule.&lt;/p&gt;

&lt;p&gt;We find something and we use the hell out of it. If we're addicted &lt;em&gt;and can't stop using&lt;/em&gt;, we shout it out. It's that simple.&lt;/p&gt;

&lt;p&gt;With that being said - give us your email &lt;a href="https://bubblegum.dev/" rel="noopener noreferrer"&gt;here&lt;/a&gt; 🔫 🔫 🔫&lt;/p&gt;

&lt;p&gt;We're also live on Product Hunt. We would appreciate a thumbs up there :)&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F046fifaofmntlp0l0eu3.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F046fifaofmntlp0l0eu3.gif" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://bubblegum.dev/" rel="noopener noreferrer"&gt;Click here if you know how to click here ( ͡° ͜ʖ ͡°)&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>react</category>
      <category>productivity</category>
    </item>
    <item>
      <title>My favorite resources being a freelancer as a side hustle 💎</title>
      <dc:creator>leo 👨🏻‍💻</dc:creator>
      <pubDate>Wed, 05 Aug 2020 13:01:20 +0000</pubDate>
      <link>https://forem.com/leomjaques/my-fav-resources-being-a-freelancer-as-a-side-hustle-15ml</link>
      <guid>https://forem.com/leomjaques/my-fav-resources-being-a-freelancer-as-a-side-hustle-15ml</guid>
      <description>&lt;p&gt;I've read tons of resources collections. &lt;/p&gt;

&lt;p&gt;So have you, I imagine.&lt;/p&gt;

&lt;p&gt;This is why I am writing this, in the hopes it can &lt;em&gt;actually&lt;/em&gt; help you with creating new quality stuff, quicker. &lt;/p&gt;

&lt;p&gt;&lt;em&gt;Because ‘better’ will always be a losing game for your brand.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;You just need to be wiser while building, making more 💵 , and spending less ⏳ on it as a consequence.&lt;/p&gt;

&lt;p&gt;So no bullshit here 💩.&lt;/p&gt;

&lt;p&gt;✨ Let's go straight to the point ✨&lt;/p&gt;

&lt;p&gt;&lt;code&gt;If you like any of this, react with 💕 and I will make more&lt;/code&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  📦 &lt;a href="https://vercel.com/" rel="noopener noreferrer"&gt;Vercel&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;I can't recommend this enough. I also use Netlify, but changed to Vercel because the UI is slicker. It's free, you host your project in a few clicks, and it also gives you an SSL certificate, so you won't have the &lt;em&gt;site not secured&lt;/em&gt; tag.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fnid692jj47x02tvkipwy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fnid692jj47x02tvkipwy.png" alt="Vercel screenshot"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;or &lt;a href="https://tiiny.host/" rel="noopener noreferrer"&gt;Tiiny.host&lt;/a&gt; if you're prototyping. No registration, just drag the folder and it gives you a link. Up for 3 days and then it's gone.&lt;/p&gt;

&lt;h2&gt;
  
  
  🧪 &lt;a href="https://t.co/QIntHWjRlJ?amp=1" rel="noopener noreferrer"&gt;Hoverify&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;This is paid but worth it. Cheaper than other ones ($18) and amazing. I use the color picker and grid system all the time when building something or just scrolling through a website, to see how the divs are positioned.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F47zgxzhicc6ttvpz1vi3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F47zgxzhicc6ttvpz1vi3.png" alt="Unflop screenshot"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🎀 &lt;a href="https://csslayout.io/patterns" rel="noopener noreferrer"&gt;Csslayout.io&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;Never seen this one on other collections. Super good and fast code snippets for making layouts, navs, headers, etc. Shout-out to fellow Dev member &lt;a href="https://dev.to/phuocng"&gt;phuocng&lt;/a&gt; who made this.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fz7giljlcwuuhzph0ujya.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fz7giljlcwuuhzph0ujya.png" alt="Css Layout screenshot"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🔑 &lt;a href="https://www.niceverynice.com/components" rel="noopener noreferrer"&gt;NiceVeryNice&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;This site itself is a compilation of really good resources. What I use the most is their Components part, where I often go to when looking for reference. Need to build a hero? Go there and check hero examples. I use it with &lt;a href="https://t.co/QIntHWjRlJ?amp=1" rel="noopener noreferrer"&gt;Hoverify&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F6lq3thyvc0ggqeeds074.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F6lq3thyvc0ggqeeds074.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🧲 &lt;a href="https://bansal.io/pattern-css#introduction" rel="noopener noreferrer"&gt;Paatern.css&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;This is something I only superficially used but I like it. Background and background-image patterns to add complexity to your designs.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fw06js4x7gihuirwmb27k.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fw06js4x7gihuirwmb27k.png" alt="Paatern Screenshot"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🧷 &lt;a href="https://tablericons.com/" rel="noopener noreferrer"&gt;Tabler Icons&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;Of all the thousands of icon provider websites, this is my favorite. It's all SVG, color, size and thickness customizable.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fgtsv27lv0k43szjfhlpa.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fgtsv27lv0k43szjfhlpa.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🔋 &lt;a href="https://tailwindcss.com/" rel="noopener noreferrer"&gt;Tailwind CSS&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;Okay, this one is just because I love it. You probably already know it. Super easy building stuff with Tailwind. Its a utility-first, mobile-first CSS framework that's been ranking up on users recently. I share the hype.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fx7lpfsm94gzoklftmgh8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fx7lpfsm94gzoklftmgh8.png" alt="Tailwind CSS screenshot"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🔮 &lt;a href="https://designsystemsrepo.com/design-systems-recent/" rel="noopener noreferrer"&gt;Design Systems Repo&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;A project repo that counts with a giant list of design systems, style guides, and pattern libraries. Sometimes I just scroll here to see if I want to try something out of my comfort zone.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F7sdq6tod3kd9428hamf3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F7sdq6tod3kd9428hamf3.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🎁 &lt;a href="https://treact.owaiskhan.me/" rel="noopener noreferrer"&gt;Treact&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;This is GOLD. I built a fully responsive, beautiful React website with it, so I know its good. He also uses &lt;a href="https://tailwindcss.com/" rel="noopener noreferrer"&gt;Tailwind&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fqcuud2a0dllmxins9wlo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fqcuud2a0dllmxins9wlo.png" alt="Treact screenshot"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🚒 &lt;a href="https://mertjf.github.io/tailblocks/" rel="noopener noreferrer"&gt;Tailblocks&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;By this point, you know I like &lt;a href="https://tailwindcss.com/" rel="noopener noreferrer"&gt;Tailwind&lt;/a&gt;. I built a responsive personal portfolio in one hour with &lt;a href="https://mertjf.github.io/tailblocks/" rel="noopener noreferrer"&gt;Tailblocks&lt;/a&gt; hosting it in &lt;a href="https://vercel.com/" rel="noopener noreferrer"&gt;Vercel&lt;/a&gt;. Very well structured and easy to use.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fmkm5q067t1aocq348tz4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fmkm5q067t1aocq348tz4.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🎣 &lt;a href="https://open.cruip.com/" rel="noopener noreferrer"&gt;Open&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;Was a bit reluctant to put this one here, because it costs $49 and I never bought it. But I like the visuals and a friend of mine used it, so here it is.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F6icv2f0abaowh5tvoxy0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F6icv2f0abaowh5tvoxy0.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  ⚾️ &lt;a href="https://web.dev/" rel="noopener noreferrer"&gt;Web.dev&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;Always use this when finishing a website. It scores your SEO, accessibility, how fast it is, etc. Must check it out if you already didn't.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F2axutqwstzil7zr2dekj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F2axutqwstzil7zr2dekj.png" alt="Web.dev screenshot"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🎨 &lt;a href="https://projector.com/" rel="noopener noreferrer"&gt;Projector&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;I think this one is fairly new. I use this to create quick presentations for my clients. You don't have to, but it feels nice not to just send your client their website link.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fw9qzva25alpuxwlhom00.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fw9qzva25alpuxwlhom00.png" alt="Projector screenshot"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🧸 &lt;a href="https://public-apis.io/" rel="noopener noreferrer"&gt;Public APIs&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;An amazing list of public APIs for using. This is huge and it's amazing how many different types of APIs there is to experiment with.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fv05e130330knarwthhch.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fv05e130330knarwthhch.png" alt="Public API screenshot"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  That's it, dear fellow members.
&lt;/h3&gt;

&lt;h3&gt;
  
  
  Please, if you liked any of this, react a bit with 💕 and I will make more.
&lt;/h3&gt;

&lt;h3&gt;
  
  
  Also, follow me on &lt;a href="https://twitter.com/intent/follow?original_referer=https%3A%2F%2Fplatform.twitter.com%2F&amp;amp;ref_src=twsrc%5Etfw&amp;amp;screen_name=leokindacodes&amp;amp;tw_p=followbutton" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt; and let's hang out there 🏓
&lt;/h3&gt;

</description>
      <category>webdev</category>
      <category>beginners</category>
      <category>productivity</category>
      <category>react</category>
    </item>
  </channel>
</rss>
