Lab Overview HTML/CSS
Section Task Concepts Covered
Create an [Link] WebForms
1. Setting Up the Project Master Pages, Solution Structure
project
2. Creating the Master Define a shared layout Master Pages,
Page (navigation, footer) ContentPlaceHolder
Display introduction, profile
3. Building the Home Page Static content, linking images
image
4. Developing the About
Add biography and skills Text formatting, lists
Page
5. Creating the Projects Showcase projects in a
Grid layout, data binding
Page responsive layout
6. Implementing the [Link] form controls,
Create a contact form
Contact Page validation
7. Styling with External Apply custom styles to all CSS styling, layout, and
CSS pages responsiveness
Debugging, ensuring
8. Running & Testing Test the website in a browser
responsiveness
� Section 1: Setting Up the Project
� Task: Create the [Link] Web Application
1. Open Visual Studio.
2. Click File > New > Project.
3. Select [Link] Web Application (.NET Framework).
4. Name the project StudentPortfolio.
5. Choose Empty Web Forms template and click Create.
6. Inside Solution Explorer, create the following files and folders:
StudentPortfolio/
│── [Link] (Master Layout)
│── [Link] (Home Page)
│── [Link] (About Page)
│── [Link] (Projects Page)
│── [Link] (Contact Page)
│── Styles/
│ └── [Link] (External CSS file)
│── Images/ (Folder for images)
✅ Concepts Covered: [Link] Web Forms structure, Master Pages.
� Section 2: Creating the Master Page
� Task: Build [Link]
1. Right-click the project → Add > New Item.
2. Select Master Page and name it [Link].
3. Replace the existing HTML code with:
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><asp:ContentPlaceHolder ID="PageTitle"
runat="server"></asp:ContentPlaceHolder> | My Portfolio</title>
<link rel="stylesheet" type="text/css" href="Styles/[Link]">
</head>
<body>
<form id="form1" runat="server">
<header>
<h1>Welcome to My Portfolio</h1>
<nav>
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">About</a></li>
<li><a href="[Link]">Projects</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
</nav>
</header>
<div class="container">
<asp:ContentPlaceHolder ID="MainContent"
runat="server"></asp:ContentPlaceHolder>
</div>
<footer>
<p>© <%: [Link] %> My Portfolio. All rights
reserved.</p>
</footer>
</form>
</body>
</html>
✅ Concepts Covered: Master Pages, reusable navigation, footer.
� Section 3: Building the Home Page
� Task: Build [Link]
1. Right-click the project → Add > Web Form with Master Page.
2. Name it [Link] and select [Link].
3. Replace the content inside <asp:Content> with:
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<section id="home">
<img src="Images/[Link]" alt="Profile Picture" class="profile-
img">
<h2>Hello, I'm [Your Name]!</h2>
<p>I'm a passionate [Your Field] student looking to showcase my
skills to potential employers.</p>
</section>
</asp:Content>
✅ Concepts Covered: Linking images, ContentPlaceHolder.
� Section 4: Developing the About Page
� Task: Build [Link]
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<h2>About Me</h2>
<p>I am a [Your Major] student at [Your University], passionate about
[Your Interests].</p>
<h3>Skills:</h3>
<ul>
<li>Web Development (HTML, CSS, JavaScript, [Link])</li>
<li>Programming Languages (Python, C#, Java)</li>
<li>Database Management (SQL, MongoDB)</li>
</ul>
</asp:Content>
✅ Concepts Covered: Lists, content formatting.
� Section 5: Creating the Projects Page
� Task: Build [Link]
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<h2>My Projects</h2>
<div class="project">
<h3>Project 1: Web Application</h3>
<p>Developed a web app for student project tracking.</p>
</div>
<div class="project">
<h3>Project 2: Machine Learning Model</h3>
<p>Built a predictive model using Python and Scikit-Learn.</p>
</div>
</asp:Content>
✅ Concepts Covered: Grid layout, project display.
� Section 6: Implementing the Contact Page
� Task: Build [Link]
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<h2>Contact Me</h2>
<asp:Label runat="server" Text="Name:"></asp:Label>
<asp:TextBox runat="server" ID="txtName" CssClass="form-
control"></asp:TextBox>
<asp:Label runat="server" Text="Email:"></asp:Label>
<asp:TextBox runat="server" ID="txtEmail" CssClass="form-
control"></asp:TextBox>
<asp:Label runat="server" Text="Message:"></asp:Label>
<asp:TextBox runat="server" ID="txtMessage" TextMode="MultiLine"
CssClass="form-control"></asp:TextBox>
<asp:Button runat="server" ID="btnSubmit" Text="Send Message"
CssClass="btn-submit" />
</asp:Content>
✅ Concepts Covered: [Link] controls, form submission.
� Section 7: Styling with External CSS
� Task: Style [Link]
/* General Styles */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
/* Header */
header {
background: green;
color: white;
text-align: center;
padding: 20px;
}
/* Navigation */
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 15px;
}
nav ul li a {
text-decoration: none;
color: white;
}
/* Contact Form */
.form-control {
width: 100%;
padding: 10px;
margin: 5px 0;
}
✅ Concepts Covered: External CSS, layout styling.