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.

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 

Create a Modern Profile Card in HTML & CSS
1.40 GEEK