SUMMER INTERNSHIP/MOOC

on

WEB DEVELOPMENT

Submitted by:

Dilpreet Singh

Registration No:12312771

Program Name: CAP368

School of Computer Application Lovely Professional University,

( Phagwara)

(07/MAY/2025 to 31/JUL/2025)
 Acknowledgment

The internship opportunity I had with Freecodecamp was a great chance for learning and professional development. Therefore, I
consider myself as a very lucky individual as I was provided with an opportunity to be a part of it. I am also grateful for having a
chance to learn from professionals who led me through this internship period.
I express my deepest thanks to Training and Placement Coordinator, School of Computer Application, Lovely Professional University
for allowing me to grab this opportunity. I choose this moment to acknowledge his contribution gratefully by giving necessary advices
and guidance to make my internship a good learning experience.

Dilpreet Singh
12312771

Certificate
 Table of contents

Sr No Description Page No.

1 Chapter 1: Introduction to FreeCodeCamp 6

and the Certification

2 7
Chapter 2: Technical Learnings from the
Course

3 8
Chapter 3: Introduction of Mini Project /
Technical Assignments

4 9
Chapter 4. Details of Mini Project

5 43
Chapter 5: Conclusion, Learning
Outcomes, and Future Scope

6 44
Chapter 6: Bibliography and Refrences
 Student Declaration

I, Dilpreet Singh, hereby declare that the work done by me on

1. Surey Form
2. Tribute Page
3. Technical Documentation Page
4. Product Landing Page
5. Personal Portfolio Webpage

from 07/05/25 to 30/07/25, under the supervision of , Sarabjit Kumar ,Head of Department-Training & Placement
Lovely professional University, Phagwara, Punjab, is a record of original work that satisfies the requirements for
certification as a Bachelor in Computer Applications.

Dilpreet Singh
12312771
Date: 30-07-25

Declaration by the supervisor/Mentor

This is to certify that Dilpreet Singh, Number from Lovely Professional University, Phagwara, Punjab, has
completed a Certification in Freecodecamp on “Responsive Web Developement” under my supervision from
01/07/25 to 30/07/25 . It is further stated that the work carried out by the student is a record of original work to
the best of my knowledge for the partial fulfillment of the requirements for the award of the degree, degree name.

Name of Internal Supervisor: Sarabjit Kumar

Designation of the Internal Supervisor: Head of Department-Training & Placement

Dated: 30/07/25

Chapter 1: Introduction to FreeCodeCamp and the Certification

★ Introduction to FreeCodeCamp:

FreeCodeCamp is a well-known non-profit learning platform that aims to give students all around the world access to
free, excellent coding instruction. It provides a thorough curriculum that covers topics including machine learning, data
visualization, and web programming. With a robust community of millions of contributors and learners,
FreeCodeCamp uses a project-based learning methodology that lets students apply ideas to actual projects. Because it is
open-source and free to use, anybody may acquire skills important to the sector, regardless of location or background.

★ Responsive Web Design Certification:

The Responsive Web Design Certification is one of FreeCodeCamp's most popular courses. Mastering HTML and CSS
as well as the fundamentals of building websites that fluidly adjust to various screen sizes and devices are the main
objectives of this certification. Flexbox, grid systems, media queries, CSS styling methods, and semantic HTML
structure are all covered in the course. Students finish a variety of interactive projects that reinforce design,
accessibility, and usability skills, including survey forms, product landing pages, and personal portfolios. These work
 are included in a public portfolio, offering verifiable proof of technical proficiency. By the program's conclusion,
students are skilled in creating user-friendly, responsive websites that adhere to contemporary online standards.

★ Relevance to the Bachelor of Computer Applications (BCA):

The Responsive Web Design Certification has significant academic and professional relevance for BCA students. In the
IT sector, web development is a core competency, and responsive design is now expected of all contemporary
applications. This certification provides practical coding experience, bridging the gap between classroom instruction
and industrial application. It increases comprehension of user experience (UX) concepts, stimulates creativity, and
strengthens problem-solving abilities. Additionally, it ensures that students are better equipped to participate in
professional settings by giving them a competitive edge in internships, freelance work, and entry-level IT positions.
Chapter 2: Technical Learnings from the Course

1. Understanding HTML Structure and Content Creation:

Learning HTML (HyperText Markup Language), the web's basic language, was the first task of the course. I gained knowledge
on how to employ semantic HTML elements to properly organize material through interactive exercises like creating a
registration form and a cat photo app. Headings, paragraphs, lists, links, pictures, and form elements were all included in this.
Additionally, I learned about clean coding standard practices, which enhance search engine optimization and accessibility.

2. Styling with CSS and Advanced Design Techniques:

CSS (Cascading Style Sheets) was added for layout and styling in the next step. Basic styling—fonts, colors, and spacing—was
addressed in early classes like creating a café menu and using a set of colored markers. Through projects like the Nutrition Label
and Balance Sheet, advanced subjects like typography, pseudo-selectors, and the CSS Box Model were investigated. Projects like
City Skyline and Magazine Layout used contemporary methods like CSS Grid and CSS Variables.

3. Responsive Web Design Principles:

Learning how to create responsive web pages for various devices was a primary focus. With the help of CSS Grid (Magazine
Layout) and Flexbox (Photo Gallery project), I improved my abilities to make flexible, flowing layouts. To ensure best usability,
styles were adjusted for desktop, tablet, and mobile devices using media queries.

4. Accessibility and Inclusive Design:

Projects like the Quiz App, where I used ARIA features, relevant alt text, and high contrast color schemes, highlighted
accessibility. This made ensuring that websites adhered to international web accessibility standards and could be used by people
with impairments.

5. Project-Based Applications and Portfolio Building:

The course was project-driven, and I completed multiple certification projects:

● Survey Form – Data collection interface

● Tribute Page – Structured content presentation

● Technical Documentation Page – Instructional layout

● Product Landing Page – Marketing-focused design

● Personal Portfolio – Professional showcase of work

Each project combined multiple technical concepts and served as proof of practical skills.

Chapter 3: Introduction of Mini Project / Technical Assignments

1. Purpose of the Mini Projects

The mini projects and technical assignments in the FreeCodeCamp Responsive Web Design Certification were designed to
provide hands-on application of the concepts learned in the coursework. They served as practical exercises to reinforce skills in
HTML, CSS, responsive design, and accessibility. The primary objective was to bridge the gap between theory and
implementation, ensuring that the learner could independently create functional, aesthetically pleasing, and responsive web
pages.

2. Scope and Nature of the Work

Each project targeted specific technical competencies. Some assignments focused on structuring content with semantic HTML,
while others emphasized styling, layout control, and responsiveness. Accessibility standards were also integrated into the work,
ensuring inclusivity in design. The tasks progressed from basic HTML and CSS applications to more advanced layouts using
Flexbox, CSS Grid, and media queries.
3. Examples of Completed Projects
The certification required completion of several key projects:

● Survey Form – Created to collect structured data from users.

● Tribute Page – A page dedicated to presenting information about a chosen subject.

● Technical Documentation Page – A structured layout for instructional or reference content.

● Product Landing Page – Designed to promote and market a product.

● Personal Portfolio Website – A showcase of my skills, completed projects, and contact information.

4. Learning Outcomes
These assignments helped me develop the ability to plan, design, and implement responsive web pages from scratch. They
improved my problem-solving skills, code optimization practices, and attention to detail. Each project also contributed to
building a professional portfolio that reflects industry-standard practices.

5. Conclusion
The mini projects were instrumental in transforming theoretical knowledge into practical skills. They not only strengthened my
understanding of front-end development but also prepared me for real-world scenarios where adaptability, creativity, and
technical precision are essential.

Chapter 4. Details of Mini Project

Survey Form

4.1 Interfaces Designed

The Survey Form project was designed to collect structured user feedback. The interface featured clearly labeled form fields,
radio buttons, checkboxes, and a submit button. The design ensured high readability with adequate spacing, intuitive field
grouping, and mobile responsiveness. Accessibility was incorporated with descriptive labels and ARIA attributes for assistive
technologies.

4.2 Code Snippets

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<title>Survey Form</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>
 <main>

<h1 id="title">🚀 Feedback Survey</h1>

<p id="description">We'd love your thoughts to keep improving. This won't take more than 2 minutes, promise.</p>

<form id="survey-form">

<label id="name-label" for="name">Name:</label>

<input type="text" id="name" name="name" placeholder="e.g. Elon Tusk" required>

<label id="email-label" for="email">Email:</label>

<input type="email" id="email" name="email" placeholder="e.g. elon@space.com" required>

<label id="number-label" for="number">Age (between 10 and 120):</label>

<input type="number" id="number" name="age" min="10" max="120" placeholder="e.g. 42">

<label for="dropdown">How did you hear about us?</label>

<select id="dropdown" name="referral-source" required>

<option value="">--Select an option--</option>

<option value="internet">Internet Search</option>

<option value="friend">Friend/Colleague</option>

<option value="social">Social Media</option>

</select>

<fieldset>

<legend>How would you rate your experience with us?</legend>

<label><input type="radio" name="experience" value="excellent" required> Excellent</label>

<label><input type="radio" name="experience" value="good"> Good</label>

<label><input type="radio" name="experience" value="meh"> Meh</label>

</fieldset>

<fieldset>
 <legend>What features do you use most? (Select all that apply)</legend>

<label><input type="checkbox" value="analytics"> Analytics</label>

<label><input type="checkbox" value="ai"> AI Tools</label>

<label><input type="checkbox" value="support"> Customer Support</label>

<label><input type="checkbox" value="integration"> API Integrations</label>

</fieldset>

<label for="comments">Any suggestions for us?</label>

<textarea id="comments" name="comments" rows="4" cols="50" placeholder="Fire away... we can take

it."></textarea>

<button type="submit" id="submit">Submit</button>

</form>

</main>

</body>

</html>

The Output:

x
Tribute Page

4.1 Interfaces Designed

The Tribute Page showcased information about a chosen individual. It included a prominent header image, a short biography
section, and a timeline of key events. The interface emphasized typography hierarchy and balanced white space for improved
reading comfort.

4.2 Code Snippets

HTML:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<title>Tribute to Katherine Johnson</title>

<link rel="stylesheet" href="styles.css" />

</head>

<body>

<main id="main">

<h1 id="title">Katherine Johnson</h1>

<p class="subtitle">The human computer who launched America into space.</p>

<div id="img-div">

<img

id="image"

src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Katherine_Johnson_%28NASA%29.jpg/800px-
Katherine_Johnson_%28NASA%29.jpg"

alt="Katherine Johnson at NASA"

/>

<figcaption id="img-caption">

Johnson at NASA Langley in 1966, where her math helped chart a path to the Moon.

</figcaption>

</div>

<section id="tribute-info">

<p>

Katherine Johnson (1918–2020) was a pioneering African-American mathematician whose calculations of orbital mechanics
were critical to the success of the first U.S. crewed spaceflights. Working at NASA during a time of intense racial and gender
discrimination, she stood out not only because of her genius, but because of her persistence and dignity.

</p>
 <p>

Her work helped put John Glenn into orbit and guided the Apollo 11 mission to the Moon. Despite being segregated from
her white male counterparts for much of her career, she consistently broke barriers and was awarded the Presidential Medal of
Freedom in 2015.

</p>

<p>

She is a reminder that brilliance knows no gender or color — and space was just the beginning.

</p>

</section>

<p class="external-link">

Learn more about her <a

id="tribute-link"

href="https://en.wikipedia.org/wiki/Katherine_Johnson"

target="_blank"

>here</a>.

</p>

</main>

</body>

</html>

CSS:

body {

font-family: Georgia, serif;

background-color: #f8f9fa;

margin: 0;

padding: 2rem;
 color: #333;

#main {

max-width: 800px;

margin: auto;

background-color: #ffffff;

padding: 2rem;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

#title {

text-align: center;

font-size: 2.5rem;

color: #2c3e50;

margin-bottom: 0.5rem;

}.subtitle {

text-align: center;

font-style: italic;

color: #555;

margin-bottom: 2rem;

}#img-div {

text-align: center;

margin: 2rem 0;

}
#image {

max-width: 100%;

height: auto;

border-radius: 10px;

display: block;

margin: auto;

}#img-caption {

margin-top: 1rem;

font-size: 0.95rem;

color: #666;

}#tribute-info {

line-height: 1.7;

font-size: 1.1rem;

margin-top: 2rem;

}.external-link {

text-align: center;

margin-top: 2rem;

font-weight: bold;

}#tribute-link {

color: #007bff;

text-decoration: none;

#tribute-link:hover {

text-decoration: underline;
}

The Output:

Technical Documentation Page

4.1 Interfaces Designed

This project was a multi-section instructional page with a fixed navigation bar. Users could click a topic to scroll to the relevant
section. The design prioritized clarity, with a left-side navigation menu and content on the right.

4.2 Code Snippets

HTML:

HTML:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Python Documentation</title>
 <link rel="stylesheet" href="styles.css" />

</head>

<body>

<nav id="navbar">

<header>Python Docs</header>

<a class="nav-link" href="#Introduction">Introduction</a>

<a class="nav-link" href="#Variables_and_Types">Variables and Types</a>

<a class="nav-link" href="#Control_Flow">Control Flow</a>

<a class="nav-link" href="#Functions">Functions</a>

<a class="nav-link" href="#Modules">Modules</a>

</nav><main id="main-doc">

<section class="main-section" id="Introduction">

<header>Introduction</header>

<p>Python is a high-level, interpreted programming language known for its readability and versatility.</p>

<p>It's widely used in web development, data science, automation, and artificial intelligence.</p>

<p>Python uses indentation to define code blocks, unlike many other languages that use braces.</p>

<p>This makes the code clean and human-readable.</p>

<p>Python supports both object-oriented and functional programming paradigms.</p>

<code>print("Hello, world!")</code>

<code># This is a comment in Python</code>

<ul>

<li>Easy to learn</li>

<li>Open-source</li>

<li>Extensive libraries</li>

</ul>
</section>

<section class="main-section" id="Variables_and_Types">

<header>Variables and Types</header>

<p>Python is dynamically typed; you don’t need to declare variable types explicitly.</p>

<p>Common types include int, float, str, and bool.</p>

<p>You can use the type() function to check a variable’s type.</p>

<p>Strings can be defined using single or double quotes.</p>

<p>Lists and dictionaries are powerful built-in data structures.</p>

<code>x = 10</code>

<code>name = "Alice"</code>

<ul>

<li>int - whole numbers</li>

<li>float - decimal numbers</li>

<li>str - text</li>

<li>bool - True or False</li>

</ul>

</section>

<section class="main-section" id="Control_Flow">

<header>Control Flow</header>

<p>Control flow in Python includes if, elif, and else statements.</p>

<p>Loops include for and while.</p>

<p>Python supports loop control statements like break and continue.</p>

<p>List comprehensions are a concise way to write loops.</p>

 <p>Indentation is critical to define blocks of logic.</p>

<code>if x > 5:\n print("x is large")</code>

<code>for i in range(3):\n print(i)</code>

<ul>

<li>if/elif/else</li>

<li>for loops</li>

<li>while loops</li>

<li>break/continue</li>

</ul>

</section>

<section class="main-section" id="Functions">

<header>Functions</header>

<p>Functions in Python are defined using the def keyword.</p>

<p>You can return values using the return statement.</p>

<p>Arguments can have default values.</p>

<p>Lambda functions are small anonymous functions.</p>

<p>Functions can be passed as arguments to other functions.</p>

<code>def greet(name):\n return "Hello " + name</code>

<code>square = lambda x: x * x</code>

<ul>

<li>def for defining functions</li>

<li>return for returning values</li>

<li>lambda for one-liners</li>

<li>args and kwargs for flexible input</li>

 </ul>

</section>

<section class="main-section" id="Modules">

<header>Modules</header>

<p>Modules are Python files with .py extension containing functions and variables.</p>

<p>Use import to include a module.</p>

<p>You can import specific items using from ... import ...</p>

<p>Built-in modules include math, os, and sys.</p>

<p>You can create your own modules easily.</p>

<code>import math</code>

<code>from datetime import datetime</code>

<ul>

<li>math - math functions</li>

<li>os - operating system interaction</li>

<li>sys - system-specific parameters</li>

<li>random - generate random numbers</li>

</ul>

</section>

</main>

</body>

</html>

CSS:

body {

font-family: Arial, sans-serif;

 margin: 0;

padding: 0;

line-height: 1.6;

background-color: #f4f4f4;

#navbar {

position: fixed;

top: 0;

left: 0;

width: 240px;

height: 100%;

background: #2c3e50;

color: white;

padding: 1rem;

overflow-y: auto;

#navbar header {

font-size: 1.5rem;

font-weight: bold;

margin-bottom: 1.2rem;

.nav-link {
 display: block;

color: white;

text-decoration: none;

padding: 0.4rem 0;

border-bottom: 1px solid rgba(255, 255, 255, 0.1);

.nav-link:hover {

background: #34495e;

padding-left: 10px;

transition: 0.2s ease;

#main-doc {

margin-left: 260px;

padding: 2rem;

background-color: #fff;

.main-section {

margin-bottom: 2.5rem;

.main-section header {

font-size: 1.4rem;

font-weight: bold;

margin-bottom: 0.5rem;

color: #2c3e50;
}

code {

display: block;

background-color: #eee;

padding: 0.5rem;

margin: 0.5rem 0;

border-left: 4px solid #2c3e50;

white-space: pre-wrap;

font-family: Consolas, monospace;

ul {

margin: 1rem 0;

padding-left: 1.2rem;

@media (max-width: 768px) {

#navbar {

position: relative;

width: 100%;

height: auto;

}#main-doc {

margin-left: 0;

padding: 1rem;
 }

The Output:
Product Landing Page

4.1 Interfaces Designed

A marketing-focused page with a hero banner, product description, features section, embedded video, and call-to-action buttons.
The interface was optimized for conversions and responsive viewing.

4.2 Code Snippets

HTML:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<title>AeroPods - Next Gen Wireless Audio</title>

<link rel="stylesheet" href="styles.css" />

</head>
<body>

<!-- Header / Navbar -->

<header id="header">

<img id="header-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-

React-icon.svg.png" alt="AeroPods Logo" />

<nav id="nav-bar">

<a class="nav-link" href="#features">Features</a>

<a class="nav-link" href="#how-it-works">How It Works</a>

<a class="nav-link" href="#pricing">Pricing</a>

</nav>

</header>

<!-- Hero / Email CTA -->

<section id="hero">

<h1>Experience Sound. Redefined.</h1>

<p>Join the AeroPods revolution and never look back at wires again.</p>

<form id="form" action="https://www.freecodecamp.com/email-submit" method="post">

<input

type="email"

id="email"

name="email"

placeholder="Enter your email..."

required

/>

<input type="submit" id="submit" value="Get Started" />

</form>

</section>
<!-- Features -->

<section id="features" class="info-section">

<h2>Why AeroPods?</h2>

<div class="features-container">

<div class="feature">

<h3>🚀 Crystal Clear Sound</h3>

<p>Immersive, studio-quality audio at your fingertips.</p>

</div>

<div class="feature">

<h3>🚀 48-Hour Battery</h3>

<p>Charge once, play for days. No interruptions.</p>

</div>

<div class="feature">

<h3>🚀 Universal Pairing</h3>

<p>Works seamlessly with iOS, Android, Windows, and everything in between.</p>

</div>

</div>

</section>

<!-- Video Section -->

<section id="how-it-works" class="info-section">

<h2>See It in Action</h2>

<iframe

id="video"

width="560"

height="315"
 src="https://www.youtube.com/embed/ZxKM3DCV2kE"

title="Product Demo"

frameborder="0"

allowfullscreen

></iframe>

</section>

<!-- Pricing Section -->

<section id="pricing" class="info-section">

<h2>Choose Your Fit</h2>

<div class="pricing-cards">

<div class="card">

<h3>Basic</h3>

<p>$99</p>

<p>Great sound, great value.</p>

</div>

<div class="card">

<h3>Pro</h3>

<p>$149</p>

<p>Noise-canceling, fast charge, and premium case.</p>

</div>

<div class="card">

<h3>Ultra</h3>

<p>$199</p>

<p>Everything Pro has, plus lossless audio and GPS tracking.</p>

 </div>

</div>

</section>

<footer>

<p>© 2025 AeroPods Inc. | Designed with ❤️</p>

</footer>

</body>

</html>

css:

/* Reset and Base */

body {

margin: 0;

font-family: 'Segoe UI', sans-serif;

background-color: #f8f9fa;

color: #333;

scroll-behavior: smooth;

/* Sticky Header */

#header {

position: fixed;

top: 0;

left: 0;

width: 100%;

background: white;
 display: flex;

justify-content: space-between;

align-items: center;

padding: 1rem 2rem;

box-shadow: 0 2px 5px rgba(0,0,0,0.1);

z-index: 1000;

#header-img {

height: 50px;

#nav-bar {

display: flex;

gap: 1.5rem;

.nav-link {

text-decoration: none;

color: #333;

font-weight: 500;

.nav-link:hover {

color: #007BFF;

}
/* Hero Section */

#hero {

margin-top: 100px;

text-align: center;

padding: 3rem 2rem;

background: #e3f2fd;

#hero h1 {

font-size: 2.5rem;

margin-bottom: 0.5rem;

#hero p {

font-size: 1.1rem;

margin-bottom: 1rem;

#form {

display: flex;

flex-direction: column;

gap: 0.5rem;

max-width: 400px;

margin: auto;

#email {

padding: 0.6rem;
 font-size: 1rem;

border: 1px solid #ccc;

border-radius: 4px;

#submit {

padding: 0.6rem;

font-size: 1rem;

background-color: #007BFF;

color: white;

border: none;

border-radius: 4px;

cursor: pointer;

#submit:hover {

background-color: #0056b3;

/* Info Sections */

.info-section {

padding: 3rem 2rem;

text-align: center;

.features-container {
 display: flex;

flex-wrap: wrap;

justify-content: center;

gap: 2rem;

margin-top: 2rem;

.feature {

max-width: 250px;

#how-it-works iframe {

margin-top: 1rem;

max-width: 100%;

border-radius: 8px;

/* Pricing */

.pricing-cards {

display: flex;

justify-content: center;

gap: 2rem;

margin-top: 2rem;

flex-wrap: wrap;

}
.card {

background: #fff;

padding: 1.5rem;

border: 1px solid #ddd;

border-radius: 8px;

max-width: 200px;

box-shadow: 0 1px 5px rgba(0,0,0,0.05);

.card h3 {

margin-top: 0;

/* Footer */

footer {

text-align: center;

padding: 1rem;

background-color: #f1f1f1;

font-size: 0.9rem;

/* Responsive */

@media (max-width: 768px) {

#nav-bar {

flex-direction: column;

align-items: flex-start;
 gap: 1rem;

.features-container, .pricing-cards {

flex-direction: column;

align-items: center;

#form {

width: 100%;

The Output:

Personal Portfolio Webpage

4.1 Interfaces Designed

A professional landing page showcasing my skills, completed projects, and contact information. It included a hero section,
project thumbnails, and a contact form. The design followed a clean, modern layout with responsive adjustments.

4.2 Code Snippets

HTML:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<title>Your Name | Portfolio</title>

<link rel="stylesheet" href="styles.css" />

</head>

<body>

<!-- Navbar -->

<nav id="navbar">

<ul>

<li><a href="#welcome-section">Home</a></li>

<li><a href="#projects">Projects</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</nav>

<!-- Welcome Section -->

<section id="welcome-section">

<h1>Hello, I'm [Your Name]</h1>

<p>Web Developer | Problem Solver | Lifelong Learner</p>

 </section> <!-- Projects Section -->

<section id="projects">

<h2>My Work</h2>

<div class="project-tile">

<a href="https://codepen.io/freeCodeCamp/full/zNqgVx" target="_blank">

<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg" alt="Tribute Project

Thumbnail"/>

<p>Tribute Page</p>

</a>

</div>

<div class="project-tile">

<a href="https://codepen.io" target="_blank">

<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png" alt="Random

Quote Machine"/>

<p>Random Quote Generator</p>

</a>

</div>

</section>

<!-- Contact / GitHub -->

<section id="contact">

<h2>Let's Connect</h2>

<p>Feel free to reach out or explore more of my work.</p>

<a id="profile-link" href="https://github.com/your-username" target="_blank">View GitHub Profile</a>

</section>

<footer>
 <p>© 2025 Your Name | Built with ❤️</p>

</footer>

</body>

</html>

css:

/* Base Styling */

*{

box-sizing: border-box;

margin: 0;

padding: 0;

body {

font-family: 'Segoe UI', sans-serif;

line-height: 1.6;

background-color: #f4f4f4;

color: #333;

a{

text-decoration: none;

color: inherit;

}/* Navbar */

#navbar {

position: fixed;
 top: 0;

width: 100%;

background: #1f1f1f;

padding: 1rem;

z-index: 999;

}#navbar ul {

list-style: none;

display: flex;

justify-content: center;

gap: 2rem;

}#navbar a {

color: white;

font-weight: bold;

transition: color 0.3s;

}#navbar a:hover {

color: #00bcd4;

/* Welcome Section */

#welcome-section {

height: 100vh;

background: linear-gradient(135deg, #1c1c1c, #2e2e2e);

color: white;

display: flex;

flex-direction: column;
 justify-content: center;

align-items: center;

text-align: center;

padding: 2rem;

#welcome-section h1 {

font-size: 3rem;

margin-bottom: 1rem;

#welcome-section p {

font-size: 1.2rem;

/* Projects */

#projects {

padding: 4rem 2rem;

background: #fff;

text-align: center;

#projects h2 {

margin-bottom: 2rem;

font-size: 2rem;

.project-tile {

display: inline-block;

margin: 1rem;
 background: #fafafa;

border-radius: 10px;

box-shadow: 0 2px 8px rgba(0,0,0,0.1);

overflow: hidden;

transition: transform 0.3s;

.project-tile:hover {

transform: scale(1.03);

.project-tile img {

width: 300px;

height: 200px;

object-fit: cover;

.project-tile p {

padding: 1rem;

font-weight: bold;

/* Contact Section */

#contact {

background: #e3f2fd;

padding: 4rem 2rem;

text-align: center;

}
#contact h2 {

margin-bottom: 1rem;

#profile-link {

display: inline-block;

margin-top: 1rem;

padding: 0.7rem 1.5rem;

background: #007bff;

color: white;

border-radius: 5px;

font-weight: bold;

#profile-link:hover {

background: #0056b3;

/* Footer */

footer {

padding: 1rem;

text-align: center;

background: #1f1f1f;

color: white;

/* Responsive Design */

@media (max-width: 768px) {

 #navbar ul {

flex-direction: column;

gap: 1rem;

.project-tile img {

width: 100%;

height: auto;

The Output:
 .Chapter 5: Conclusion, Learning Outcomes, and Future Scope

Conclusion

Completing the FreeCodeCamp Responsive Web Design Certification has been a pivotal step in both my academic journey and
professional growth. This on-the-job training offered a rich, hands-on experience that bridged theory with practical application,
allowing me to immerse myself in the principles of modern web design. Over the course of the program, I successfully developed
all five required projects, each meeting both functional and aesthetic standards across devices. This achievement not only earned
me the certification but also strengthened my self-assurance as a capable front-end developer.

Learning Outcomes

The outcomes of this internship can be categorized into two main areas: technical competencies and professional growth.

Technical Skills: I developed a strong command of essential web technologies, starting with semantic HTML5 for enhanced
accessibility and SEO. My understanding of CSS fundamentals—especially the Box Model—ensured precise spacing and
structure. I also gained considerable experience with advanced layout tools like Flexbox and CSS Grid, both crucial for building
adaptable and visually balanced layouts. In addition, I became adept at implementing media queries to ensure seamless
responsiveness across different devices and screen sizes.

Professional Skills: Beyond coding, this independent learning process strengthened several critical professional traits. Tackling
project requirements and resolving coding issues sharpened my problem-solving ability. Managing my own pace without external
deadlines reinforced self-discipline and time management skills. Furthermore, refining each webpage through multiple iterations
improved my design precision and eye for detail.
Future Scope
The expertise developed through this certification forms a strong base for my future endeavors in web development. My plans
include:

● Personal Projects: Expanding my portfolio with more challenging builds, such as full-stack applications, to connect
my front-end expertise with back-end systems.

● Open-Source Involvement: Applying my responsive design knowledge to open-source collaborations, gaining real-
world exposure and learning from seasoned developers.

● Further Certifications: Progressing to the FreeCodeCamp Front-End Development Libraries Certification, with a focus
on JavaScript frameworks like React, enabling the creation of highly interactive and dynamic user interfaces.

Chapter 6: Bibliography and Refrences

FreeCodeCamp. (n.d.). Responsive Web Design Certification.

https://www.freecodecamp.org/learn/responsive-web-design/

MDN Web Docs. (n.d.). HTML: HyperText Markup Language. Mozilla.

https://developer.mozilla.org/en-US/docs/Web/HTML

MDN Web Docs. (n.d.). CSS: Cascading Style Sheets. Mozilla. https://developer.mozilla.org/en-

US/docs/Web/CSS

W3Schools. (n.d.). HTML and CSS Tutorials. https://www.w3schools.com/