 platform](https://res.cloudinary.com/practicaldev/image/fetch/s--yT5Uc5Hi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1q2n2jahatmgvxzafqjt.png)
Social media are interactive technologies that facilitate the creation and sharing of information, ideas, interests, and other forms of expression through virtual communities and networks.
One of the amazing features social media offers is the ability to connect with people, and make new friends and sometimes even future colleagues. But Generally, before becoming friends or getting to know each other, they generally get an idea of who you are through what is called Your Social Media Profile.
This feature allows you to tell the world more about you, what you like, what you like etc. All social media offer this feature, you can see it on Facebook, Twitter, LinkedIn etc.
Together, we are going to build one of this Social Media Profile components, that you can include in your next project, or maybe in the next biggest social media you will build.😏
Let's go!
Understanding the Task
This is actually easy than you think. It is actually one component, that has different forms based on the size of the screen. Amazing right?
But in this tutorial we won't make it like that, we will just focus on building the different views, then in a different session, we will make it one.
Let's name the different views;
Mobile-View
Tablet-View
Desktop-View
Structure of Code
We can structure our code thus
<body>
<div>
<div>
<!-- Mobile View-->
<div></div>
<!-- Tablet View-->
<div></div>
<!-- Desktop View-->
<div></div>
</div>
</div>
</body>
Mobile View
This is the easiest one. Just straight forward
<div class="w-[20rem] py-10 flex flex-col items-center gap-y-5">
<!--Profile Image-->
<div>
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1677841863722/ui0fi1r4b.png" alt="" class="w-16 rounded-full aspect-square object-cover object-center hover:scale-125 transition-all ease-linear duration-300 cursor-pointer">
</div>
<!--Profile Details-->
<div>
<h2 class="text-xl font-semibold">Mbianou Bradon</h2>
<p class="text-slate-500">@mbianou_bradon</p>
</div>
<!--Follow Button-->
<div class="rounded-3xl border px-7 py-2 hover:bg-[#0e192c] hover:text-white transition-all ease-linear duration-300 cursor-pointer"><h2>Following</h2></div>
</div>
We have a Profile Image, profile details and the call to action button.
Profile Image: Gave a
widthofw-16, with aborder-radiusofrounded-full. we also made it responsive withaspect-square object-center object-cover. We also added the effect ofscale-125onhover.Profile Details: Basic styling was applied, just gave them
font-sizeoftext-xlfor the name and the color oftext-slate-500to the handle.Follow button: Nothing extraordinary here,
padding-inlinepx-7padding-blockpy-2borderand hover effect on both the text and background-color.
Easy right? isn't it?😁
Tablet View
This view has more information than the mobile view. This is how it looks like.
<div class="w-[25rem] px-6 py-10 col-span-2 col-start-3">
<div class="flex items-center justify-between">
<!--Profile Image-->
<div>
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1677841863722/ui0fi1r4b.png" alt="" class="w-16 rounded-full aspect-square object-cover object-center hover:scale-125 transition-all ease-linear duration-300 cursor-pointer">
</div>
<!--Follow Button-->
<div class="rounded-3xl border px-7 py-2 hover:bg-[#0e192c] hover:text-white transition-all ease-linear duration-300 cursor-pointer"><h2>Following</h2></div>
</div>
<!--Profile Details-->
<div>
<h2 class="text-xl font-semibold">Mbianou Bradon</h2>
<p class="text-slate-500">@mbianou_bradon</p>
</div>
<!--Profile About-->
<div class="font-bold"><p>Software developer trainee at @ikniteSpace. Working on @Bradtek in my free time.</p></div>
</div>
Compared to the Mobile view, we have a new part, that's the Profile About. It is simply a paragraph with a font-weight of font-bold. 👌
Desktop View
This view is pretty much similar to the Tablet view, just that it has an extra more detail that the tablet view doesn't have.
<div class="w-[30rem] px-6 py-10 col-span-4 place-self-center">
<div class="flex items-center justify-between">
<!--Profile Image-->
<div>
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1677841863722/ui0fi1r4b.png" alt="" class="w-16 rounded-full aspect-square object-cover object-center hover:scale-125 transition-all ease-linear duration-300 cursor-pointer">
</div>
<!--Follow Button -->
<div class="rounded-3xl px-7 py-2 bg-[#0e192c] text-white hover:border hover:bg-white hover:text-black transition-all ease-linear duration-300 cursor-pointer"><h2>follow</h2></div>
</div>
<!--Profile IDetails-->
<div>
<h2 class="text-xl font-semibold">Mbianou Bradon</h2>
<p class="text-slate-500">@mbianou_bradon</p>
</div>
<!--Profile About-->
<div class="font-bold">
<p>Software developer trainee at @ikniteSpace. Working on @Bradtek in my free time.</p>
</div>
<!--Profile System Details -->
<div class="[&>*>h2>span]:font-semibold [&>*>h2>span]:text-black flex items-center text-slate-600">
<div><h2><span>15K</span> Followers</h2></div>
<div class="flex items-center gap-1 mx-1">
<div class="text-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10s10-4.47 10-10S17.53 2 12 2z"/></svg>
</div>
<h2><span>7K</span> Following</h2>
</div>
<div class="flex items-center gap-1">
<div class="text-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10s10-4.47 10-10S17.53 2 12 2z"/></svg>
</div>
<h2>Since September 30, 2020</h2>
</div>
</div>
</div>
I couldn't find a better name than Profile System Details, hope you don't mind. 😅
This section just tells you more about the number of connections the profile has, and when s/he joined the platform.
And that's it!
Conclusion
As earlier mention, we will just build individual views, I will for sure make a session where we will join everything together as one. Better still, you can take it as a challenge, and join it together as one. Trust me it is not difficult. But it is not easy either.
You can have a Live preview on Codepen or find the code on GitHub.
Don't hesitate to share with me if you were able to complete the tutorial on your end, I'd be happy to see any additional styling you added.
If you have any worries or suggestions, don't hesitate to leave them in the comment section! 😊
See ya! 👋
Top comments (2)
Nice designs. How would do you manage different viewports?
Hello @vincentdorian
I am happy you like the designs.
To answer you question. Each of the cards represents the profile at different screen sizes. So we can join all 3 profiles in such a way that, some information are visible at some screen size. Media queries is the perfect tool to help us do that.