Learn how to create a modern profile card using HTML and CSS. This tutorial is perfect for beginners and will show you how to create a simple yet effective profile card that can be used for social media, websites, or any other application.
Create a 🧑💼Profile Card using HTML & CSS, step-by-step from scratch.
______________________________________________________________
⏱️Chapters:
00:00:00 Intro
00:00:34 Boilerplate
00:01:21 HTML - Creating Section with DIVs
00:03:13 HTML - Creating Social DIV and its Icons
00:04:15 html - Creating Skills Div and LIs
00:05:06 CSS - Import google fonts, creating a css reset and explaining it
00:06:02 CSS - Setting Rules like layout and positioning to the body tag
00:07:00 CSS - Setting Size | Position and shadows to the Section
00:07:53 CSS - Setting Rules to Personal and Skills DIVs
00:09:28 CSS - Styling the IMG
00:10:10 CSS - Set Pro Badge size and position
00:11:13 CSS - Name, Country and Profession
00:12:06 CSS - Dealing with the Buttons
00:13:58 CSS - Applying Style to the Skill DIV
00:16:42 CSS - Social Media Icons
#css #html #javascript