<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Page 1 | Ahmed Nagi</title>
<meta name="generator" content="VuePress 1.9.7">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="alternate" type="application/rss+xml" href="https://ahmednagi.com/rss.xml" title="Ahmed Nagi RSS Feed">
<link rel="alternate" type="application/atom+xml" href="https://ahmednagi.com/feed.atom" title="Ahmed Nagi Atom Feed">
<link rel="alternate" type="application/json" href="https://ahmednagi.com/feed.json" title="Ahmed Nagi JSON Feed"><link rel='canonical' href='https://ahmednagi.com/page/1'/>
<meta name="description" content="Hey I'm Nagi @nagiworks, a full-stack developer and opensource contributor. I share everything I know about making awesome software through my blog, linkedin and twitter.">
<meta property="og:site_name" content="Ahmed Nagi">
<meta property="og:type" content="website">
<meta property="og:url" content="https://ahmednagi.com/page/1">
<meta property="og:image" content="https://ahmednagi.com/uploads/ahmednagi.png">
<meta name="twitter:url" content="https://ahmednagi.com/page/1">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://ahmednagi.com/uploads/ahmednagi.png">
<meta name="twitter:label1" content="Written by">
<meta name="twitter:data1" content="Ahmed Nagi">
<meta name="twitter:creator" content="@nagiworks">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<link rel="preload" href="/assets/css/0.styles.510593ca.css" as="style"><link rel="preload" href="/assets/js/app.43206d0c.js" as="script"><link rel="preload" href="/assets/js/2.019e809d.js" as="script"><link rel="prefetch" href="/assets/js/10.97b156a7.js"><link rel="prefetch" href="/assets/js/11.0511cd16.js"><link rel="prefetch" href="/assets/js/12.3ea304b3.js"><link rel="prefetch" href="/assets/js/13.a374c168.js"><link rel="prefetch" href="/assets/js/14.aaa57086.js"><link rel="prefetch" href="/assets/js/15.759cc4b5.js"><link rel="prefetch" href="/assets/js/16.e9814e83.js"><link rel="prefetch" href="/assets/js/17.f82b711c.js"><link rel="prefetch" href="/assets/js/18.ae331e0a.js"><link rel="prefetch" href="/assets/js/19.13efe01e.js"><link rel="prefetch" href="/assets/js/20.45e65937.js"><link rel="prefetch" href="/assets/js/21.39554aa8.js"><link rel="prefetch" href="/assets/js/22.4a4e2f98.js"><link rel="prefetch" href="/assets/js/23.51487fc7.js"><link rel="prefetch" href="/assets/js/24.c4d2a8f5.js"><link rel="prefetch" href="/assets/js/25.1d6d2d14.js"><link rel="prefetch" href="/assets/js/26.1b9cad85.js"><link rel="prefetch" href="/assets/js/27.b8b038e7.js"><link rel="prefetch" href="/assets/js/28.c5f6a4e3.js"><link rel="prefetch" href="/assets/js/29.90d1942a.js"><link rel="prefetch" href="/assets/js/3.33b34146.js"><link rel="prefetch" href="/assets/js/30.9039f202.js"><link rel="prefetch" href="/assets/js/31.57a10bf0.js"><link rel="prefetch" href="/assets/js/32.ec34a643.js"><link rel="prefetch" href="/assets/js/33.3d6a8cfa.js"><link rel="prefetch" href="/assets/js/34.294b3b18.js"><link rel="prefetch" href="/assets/js/35.f9ce9a88.js"><link rel="prefetch" href="/assets/js/36.1b7c2ca3.js"><link rel="prefetch" href="/assets/js/37.7d94c28c.js"><link rel="prefetch" href="/assets/js/38.e1b4d504.js"><link rel="prefetch" href="/assets/js/39.db08c169.js"><link rel="prefetch" href="/assets/js/4.d0c13512.js"><link rel="prefetch" href="/assets/js/40.252a5388.js"><link rel="prefetch" href="/assets/js/41.6b723d6c.js"><link rel="prefetch" href="/assets/js/42.03b2a7ef.js"><link rel="prefetch" href="/assets/js/43.a5f51fc0.js"><link rel="prefetch" href="/assets/js/44.0179a449.js"><link rel="prefetch" href="/assets/js/45.c60ef3dc.js"><link rel="prefetch" href="/assets/js/46.9886f5b1.js"><link rel="prefetch" href="/assets/js/47.3569e2cc.js"><link rel="prefetch" href="/assets/js/48.ebe9dbe6.js"><link rel="prefetch" href="/assets/js/49.b515a8c3.js"><link rel="prefetch" href="/assets/js/5.76a76254.js"><link rel="prefetch" href="/assets/js/50.7946fd53.js"><link rel="prefetch" href="/assets/js/51.14318b44.js"><link rel="prefetch" href="/assets/js/52.f3e3548a.js"><link rel="prefetch" href="/assets/js/53.9bf02090.js"><link rel="prefetch" href="/assets/js/54.950fbd13.js"><link rel="prefetch" href="/assets/js/55.81a73fc7.js"><link rel="prefetch" href="/assets/js/56.a43e945e.js"><link rel="prefetch" href="/assets/js/57.25c7f5bd.js"><link rel="prefetch" href="/assets/js/58.fe454855.js"><link rel="prefetch" href="/assets/js/59.8e8eed87.js"><link rel="prefetch" href="/assets/js/6.a72cdb01.js"><link rel="prefetch" href="/assets/js/7.2041590a.js"><link rel="prefetch" href="/assets/js/8.fd1d08f8.js"><link rel="prefetch" href="/assets/js/9.871b1e24.js">
<link rel="stylesheet" href="/assets/css/0.styles.510593ca.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="xl:px-4"><div class="fixed inset-0" style="background-size:400% 100%;background-image:linear-gradient(120deg, #15202b, #0077bf, #15202b, #0077bf);width:100%;"></div> <!----> <div class="relative items-center hidden w-full max-w-screen-xl px-5 mx-auto overflow-hidden shadow-lg h-14 md:flex bg-primary xl:my-4 xl:rounded-lg"><div class="flex items-center space-x-3"><a href="/" class="text-lg font-semibold no-underline rtl:ml-3 text-primary hover:text-linkHover hover:underline router-link-active"><img src="/logo.png" lazy="" alt="AhmedNagi.com logo" class="h-12 min-h-12"></a> <a href="/" class="text-lg font-semibold no-underline text-primary hover:text-linkHover hover:underline router-link-active">Home</a> <a href="/tag/laravel" class="text-lg font-semibold text-red-500 no-underline hover:text-linkHover hover:underline">Laravel</a> <a href="/tag/vuejs" class="text-lg font-semibold no-underline text-emerald-600 hover:text-linkHover hover:underline">Vuejs</a> <a href="#" class="text-lg font-semibold no-underline text-primary hover:text-linkHover hover:underline">Search</a> <a href="/snippets" class="text-lg font-semibold no-underline text-primary hover:text-linkHover hover:underline">Snippets</a> <a href="/facebook-group" class="hidden font-semibold no-underline md:text-lg text-primary hover:text-linkHover hover:underline">Join Community</a></div> <div class="flex justify-center ltr:ml-auto rtl:mr-auto"><a href="https://twitter.com/nagiworks" class="mx-2 border-0 text-primary hover:text-blue-500"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-6 h-6 fill-current"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg></a> <a href="https://github.com/nagi1" class="mx-2 border-0 text-primary hover:text-black"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" class="w-6 h-6 fill-current"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a> <a href="https://facbook.com/nagiwork" class="mx-2 border-0 text-primary hover:text-blue-700"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 h-6 fill-current"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path></svg></a> <a href="https://www.linkedin.com/in/ahmednagi/" class="mx-2 border-0 text-primary hover:text-blue-700"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="w-6 h-6 fill-current"><path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path></svg></a></div></div> <div class="relative w-full max-w-screen-xl mx-auto mt-4 overflow-hidden shadow-lg xl:my-6 xl:rounded-lg"><!----> <div class="group menu-button"><div class="w-5 sm:w-6"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon-menu"><path class="secondary" fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path></svg></div></div> <div class="flex flex-col"><div class="flex items-center py-3 bg-body"><div class="flex justify-center w-full"><label id="switch" class="switch rtl:ml-3" data-v-404d9b8e><input type="checkbox" id="slider" data-v-404d9b8e> <span class="slider round" data-v-404d9b8e></span></label> <a href="/ar/" class="text-lg font-semibold no-underline text-secondary hover:text-linkHover hover:underline">اقرأ بالعربي</a></div></div> <div class="bg-primary"><div class="container-xl"><header class="my-10"><button class="flex items-center mb-2 group text-primary focus:outline-none router-link-active"><div class="w-6 h-6 ltr:mr-1 rtl:ml-1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon-arrow-thin-left-circle"><circle cx="12" cy="12" r="10" class="primary"></circle><path class="secondary" d="M9.41 11H17a1 1 0 0 1 0 2H9.41l2.3 2.3a1 1 0 1 1-1.42 1.4l-4-4a1 1 0 0 1 0-1.4l4-4a1 1 0 0 1 1.42 1.4L9.4 11z"></path></svg></div> <div class="text-sm font-semibold tracking-wider uppercase group-hover:text-primary">Home</div></button> <h1 class="text-4xl font-bold leading-relaxed text-primary">Page 1</h1> <!----></header> <div class="flex flex-col"><section class="grid grid-cols-1 gap-8 mb-16 sm:grid-cols-2 lg:grid-cols-3 lg:gap-10"><a href="/add-custom-topbar-to-filament/" class="relative z-10 flex flex-col no-underline rounded-lg cursor-pointer article-card hover:no-underline sm:col-span-2 border-0" style="min-height:16rem;"><figure class="relative overflow-hidden bg-center bg-cover h-full min-h-72 rounded-lg" style="background-image:url(/covers/add-custom-topbar-to-filament.png);"><div class="absolute inset-x-0 bottom-0 p-6 pt-20 text-white" style="background-image:linear-gradient(to top, rgba(74, 85, 104, 0.6) 40%, rgba(0, 0, 0, 0) 100%);"><div class="mb-2 text-xs font-semibold tracking-wider uppercase">filament</div> <div class="font-sans text-2xl font-semibold leading-tight border-0">Add Custom Topbar to Filament</div></div></figure> <!----> <!----></a> <a href="/a-new-journey-in-public/" class="relative z-10 flex flex-col no-underline rounded-lg cursor-pointer article-card hover:no-underline border border-gray-300" style="min-height:16rem;"><figure class="relative overflow-hidden bg-center bg-cover h-48 rounded-t-lg" style="background-image:url(/covers/building-in-public.png);"><!----></figure> <main class="flex flex-col flex-1 p-6 no-underline rounded-b-lg bg-primary"><header><div class="p-1 mb-2 text-xs font-semibold tracking-wider no-underline uppercase hover:no-underline text-ternary">bulding-in-public</div> <div class="mb-2 font-sans text-lg font-semibold leading-tight border-0 text-primary">How I'm Building a Habit of Building in Public</div></header> <section class="font-sans text-ternary">Sharing my process of building a habit of building in public, starting with Twitter.</section></main> <!----></a><a href="/getting-started-with-opensource/" class="relative z-10 flex flex-col no-underline rounded-lg cursor-pointer article-card hover:no-underline border border-gray-300" style="min-height:16rem;"><figure class="relative overflow-hidden bg-center bg-cover h-48 rounded-t-lg" style="background-image:url(/covers/getting-started-with-opensource.png);"><!----></figure> <main class="flex flex-col flex-1 p-6 no-underline rounded-b-lg bg-primary"><header><div class="p-1 mb-2 text-xs font-semibold tracking-wider no-underline uppercase hover:no-underline text-ternary">opensource</div> <div class="mb-2 font-sans text-lg font-semibold leading-tight border-0 text-primary">Getting started with contributing to open source – Real world example</div></header> <section class="font-sans text-ternary">Actionable step by step guide on how to contribute to opensource project using real-world example</section></main> <!----></a><a href="/90-days-to-web-dev-job/" class="relative z-10 flex flex-col no-underline rounded-lg cursor-pointer article-card hover:no-underline border border-gray-300" style="min-height:16rem;"><figure class="relative overflow-hidden bg-center bg-cover h-48 rounded-t-lg" style="background-image:url(/covers/90-days-challenage.png);"><!----></figure> <main class="flex flex-col flex-1 p-6 no-underline rounded-b-lg bg-primary"><header><div class="p-1 mb-2 text-xs font-semibold tracking-wider no-underline uppercase hover:no-underline text-ternary">guide</div> <div class="mb-2 font-sans text-lg font-semibold leading-tight border-0 text-primary">90 Days are all you need to get a web developer job</div></header> <section class="font-sans text-ternary">Actionable guide on how to learn web development and find a job in just 3 months</section></main> <!----></a><a href="/create-skeleton-loader-vuejs/" class="relative z-10 flex flex-col no-underline rounded-lg cursor-pointer article-card hover:no-underline border border-gray-300" style="min-height:16rem;"><figure class="relative overflow-hidden bg-center bg-cover h-48 rounded-t-lg" style="background-image:url(/covers/create-skeleton-loader-vuejs.png);"><!----></figure> <main class="flex flex-col flex-1 p-6 no-underline rounded-b-lg bg-primary"><header><div class="p-1 mb-2 text-xs font-semibold tracking-wider no-underline uppercase hover:no-underline text-ternary">guide</div> <div class="mb-2 font-sans text-lg font-semibold leading-tight border-0 text-primary">Create loading indicators worth waiting using vuejs</div></header> <section class="font-sans text-ternary">Learn how to create skeleton loaders using vuejs and the science behind it</section></main> <!----></a><a href="/oilly-telegram-bot-part-4/" class="relative z-10 flex flex-col no-underline rounded-lg cursor-pointer article-card hover:no-underline border border-gray-300" style="min-height:16rem;"><figure class="relative overflow-hidden bg-center bg-cover h-48 rounded-t-lg" style="background-image:url(/covers/telegram-bot-part4.png);"><!----></figure> <main class="flex flex-col flex-1 p-6 no-underline rounded-b-lg bg-primary"><header><div class="p-1 mb-2 text-xs font-semibold tracking-wider no-underline uppercase hover:no-underline text-ternary">telegram</div> <div class="mb-2 font-sans text-lg font-semibold leading-tight border-0 text-primary">Meet Oilly your friendly Telegram bot that will save your car</div></header> <section class="font-sans text-ternary">Part 4 and chapter of my journey to create a telegram bot that will remind changing my car oil for me using nodejs.</section></main> <!----></a><a href="/oilly-telegram-bot-part-3/" class="relative z-10 flex flex-col no-underline rounded-lg cursor-pointer article-card hover:no-underline border border-gray-300" style="min-height:16rem;"><figure class="relative overflow-hidden bg-center bg-cover h-48 rounded-t-lg" style="background-image:url(/covers/telegram-bot-part3.png);"><!----></figure> <main class="flex flex-col flex-1 p-6 no-underline rounded-b-lg bg-primary"><header><div class="p-1 mb-2 text-xs font-semibold tracking-wider no-underline uppercase hover:no-underline text-ternary">telegram</div> <div class="mb-2 font-sans text-lg font-semibold leading-tight border-0 text-primary">I'm building a telegram bot to remind me changing my car oil part 3</div></header> <section class="font-sans text-ternary">Almost there on my journey to create a telegram bot that will remind changing my car oil for me using nodejs.</section></main> <!----></a><a href="/oilly-telegram-bot/" class="relative z-10 flex flex-col no-underline rounded-lg cursor-pointer article-card hover:no-underline border border-gray-300" style="min-height:16rem;"><figure class="relative overflow-hidden bg-center bg-cover h-48 rounded-t-lg" style="background-image:url(/covers/telegram-bot-part1.png);"><!----></figure> <main class="flex flex-col flex-1 p-6 no-underline rounded-b-lg bg-primary"><header><div class="p-1 mb-2 text-xs font-semibold tracking-wider no-underline uppercase hover:no-underline text-ternary">telegram</div> <div class="mb-2 font-sans text-lg font-semibold leading-tight border-0 text-primary">I'm building a telegram bot to remind me changing my car oil part 1</div></header> <section class="font-sans text-ternary">Walkthrough my journey to create a telegram bot that will remind changing my car oil for me using nodejs.</section></main> <!----></a><a href="/oilly-telegram-bot-part-2/" class="relative z-10 flex flex-col no-underline rounded-lg cursor-pointer article-card hover:no-underline border border-gray-300" style="min-height:16rem;"><figure class="relative overflow-hidden bg-center bg-cover h-48 rounded-t-lg" style="background-image:url(/covers/telegram-bot-part2.png);"><!----></figure> <main class="flex flex-col flex-1 p-6 no-underline rounded-b-lg bg-primary"><header><div class="p-1 mb-2 text-xs font-semibold tracking-wider no-underline uppercase hover:no-underline text-ternary">telegram</div> <div class="mb-2 font-sans text-lg font-semibold leading-tight border-0 text-primary">I'm building a telegram bot to remind me changing my car oil part 2</div></header> <section class="font-sans text-ternary">Continuing my journey to create a telegram bot that will remind changing my car oil for me using nodejs.</section></main> <!----></a><a href="/create-social-media-headers/" class="relative z-10 flex flex-col no-underline rounded-lg cursor-pointer article-card hover:no-underline border border-gray-300" style="min-height:16rem;"><figure class="relative overflow-hidden bg-center bg-cover h-48 rounded-t-lg" style="background-image:url(/covers/create-social-media-headers.png);"><!----></figure> <main class="flex flex-col flex-1 p-6 no-underline rounded-b-lg bg-primary"><header><div class="p-1 mb-2 text-xs font-semibold tracking-wider no-underline uppercase hover:no-underline text-ternary">tailwindcss</div> <div class="mb-2 font-sans text-lg font-semibold leading-tight border-0 text-primary">The Extensive Guide to Create Beautiful Social Media Headers Using Tailwindcss</div></header> <section class="font-sans text-ternary">An extensive guide that will help you create headers that represent you the best on social media using tools other than photoshop</section></main> <!----></a></section> <a href="/all" class="self-center mb-3 text-3xl font-semibold justify-self-center">All Posts</a></div> <div class="flex items-center my-16 text-xl"><!----> <a href="/page/2/" class="flex items-center ltr:ml-auto rtl:ml-auto"><div class="hidden sm:block">Older articles</div> <div class="sm:hidden">Older</div> <div class="w-6 h-6 ml-1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon-arrow-thin-right-circle"><circle cx="12" cy="12" r="10" class="primary"></circle><path class="secondary" d="M14.59 13H7a1 1 0 0 1 0-2h7.59l-2.3-2.3a1 1 0 1 1 1.42-1.4l4 4a1 1 0 0 1 0 1.4l-4 4a1 1 0 0 1-1.42-1.4l2.3-2.3z"></path></svg></div></a></div></div></div></div> <div class="bg-transparent border-t border-borderPrimary"><div class="flex flex-col bg-primary"><div class="flex justify-center mt-5"><a href="https://twitter.com/nagiworks" class="mx-2 border-0 text-primary hover:text-blue-500"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-6 h-6 fill-current"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg></a> <a href="https://github.com/nagi1" class="mx-2 border-0 text-primary hover:text-black"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" class="w-6 h-6 fill-current"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a> <a href="https://facbook.com/nagiwork" class="mx-2 border-0 text-primary hover:text-blue-700"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 h-6 fill-current"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path></svg></a> <a href="https://www.linkedin.com/in/ahmednagi/" class="mx-2 border-0 text-primary hover:text-blue-700"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="w-6 h-6 fill-current"><path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path></svg></a></div> <div class="mt-5 text-center"><p class="text-secondary" style="direction: ltr;">
Ahmed Nagi - Powerd By
<a href="https://Vuepress.vuejs.org" target="_blank">Vuepress</a>
. Hosted with
<a href="https://www.github.com/" target="_blank">GitHub</a>
and
<a href="https://www.netlify.com/" target="_blank">Netlify</a>
.
</p></div></div></div></div></div><div class="global-ui"><div></div></div></div>
<script src="/assets/js/app.43206d0c.js" defer></script><script src="/assets/js/2.019e809d.js" defer></script>
</body>
</html>