SAVEETHA SCHOOL OF ENGINEERING
SAVEETHA INSTITUTE OF MEDICAL AND TECHNICAL SCIENCES
COMPUTER SCIENCE AND ENGINEERING
Course Code: CSA4302 Course Name: Internet Programming for Live Site
Exercise 3
1. Styling a Personal Profile Card
Objective: Create a personal profile card using HTML and CSS. This exercise will help you learn the
basics of CSS, such as layout, colors, fonts, and spacing.
Instructions:
1. HTML Structure:
○ Create a new HTML file.
○ Add the following elements inside a <div> with a class profile-card:
■ An img tag for the profile picture.
■ An h2 tag for the name.
■ A p tag for a short bio.
■ Three href tags (or buttons) for social media links.
2. CSS Styling:
○ Create a new CSS file and link it to your HTML file.
○ Style the profile-card to have a fixed width, centered on the page.
○ Add padding and margin to space out the elements.
○ Use a border-radius to give the profile picture rounded edges.
○ Apply a background color and box-shadow to the profile-card.
○ Change the font-family of the text to something more appealing.
○ Style the social media links (or buttons) to have a consistent look with hover effects.
3. JavaScript, AJAX, and JSON:
● Create a new JavaScript file and link it to your HTML file.
● Write JavaScript code to fetch profile data (such as name, bio, profile picture, and social links)
from a JSON file using AJAX.
● Parse the JSON data and dynamically update the content of the profile card.
4. Testing:
● Test the page in a browser to ensure the profile card loads the JSON data correctly.
● Experiment by changing the JSON data to see how it affects the profile card.
