Core Html
Assignment
Solution
Assignment Solution
Build a simple webpage that displays text as shown in the below image.
Solution
<body>
<p>
<b> This text will be bolded. </b>
</p>
<p>
<i> This text will be italic. </i>
</p>
<p>
<ins> This text will be underlined</ins>
</p>
<mark> This text will be highlighted </mark>
<p>
This is normal text<sup> This will be super scripted </sup> This is normal
again
</p>
<p>This is normal text <sub> This text will be subscripted </sub></p>
<p>Normal Text <small> Smal Text </small></p>
<p><del> This text will be deleted</del></p>
</body>
Browser output
Full Stack Web Development
Assignment Solution
Build a simple webpage that helps users navigate different web development-related websites.
Note: On clicking the hyperlink the web pages should open in a new tab. Below is a reference image.
Solution
<body>
<h1>Navigate Me:</h1>
<p>
Take me to
<a href="[Link] target="_blank">PW Skills</a> to buy a
course.
</p>
<p>
Take me to
<a href="[Link] target="_blank"
>MDN docs</a
>
to know more about Web Development.
</p>
<p>
Take me to
<a href="[Link] target="_blank">PW Skills Lab</a> to
practice live coding.
</p>
</body>
Browser output
Full Stack Web Development
Assignment Solution
Build a simple blog web page with 3 pages home, web development, and web design. Each page must
contain hyperlinks to other pages in the top, a heading of the page topic and a paragraph of information.
For the home page you can add some information about yourself.
Solution
[Link]
<title>Web Design</title>
</head>
<body>
<div>
<a href="./[Link]">Home</a> |
<a href="./[Link]">Web Development</a> |
<a href="./[Link]">Web Design</a>
</div>
<div>
<h1>Web Design.</h1>
<p>
Web design refers to the process of designing the visual appearance and
layout of websites. It involves creating a visual concept, planning the
layout of web pages, selecting color schemes, and choosing typography
and images.
<br />
Web designers use various tools and technologies to create visually
appealing and user-friendly websites. These tools include graphic design
software such as Adobe Photoshop, Adobe Illustrator, Sketch, and Figma.
They also use programming languages like HTML, CSS, and JavaScript to
bring their designs to life on the web.
</p>
</div>
</body>
Full Stack Web Development
Assignment Solution
[Link]
<title>Web Development</title>
</head>
<body>
<div>
<a href="./[Link]">Home</a> |
<a href="./[Link]">Web Development</a> |
<a href="./[Link]">Web Design</a>
</div>
<div>
<h1>Web Development</h1>
<p>
Web development refers to the process of creating websites and web applications. This
involves a combination of different technologies and programming languages, such as HTML,
CSS, and JavaScript, to create web
pages and make them interactive.
<br />
Web development can be divided into two main categories: front-end development and
back-end development. Front-end development deals with the visual aspects of a website or
application, including the design, layout, and user interface. This involves working with
HTML, CSS, and JavaScript to create web pages that can be viewed in a browser.
</p>
</div>
</body>
[Link]
<title>Web Design</title>
</head>
<body>
<div>
<a href="./[Link]">Home</a> |
<a href="./[Link]">Web Development</a> |
<a href="./[Link]">Web Design</a>
</div>
<div>
<h1>Web Design.</h1>
<p>
Web design refers to the process of designing the visual appearance and
layout of websites. It involves creating a visual concept, planning the
layout of web pages, selecting color schemes, and choosing typography
and images.
<br />
Web designers use various tools and technologies to create visually
appealing and user-friendly websites. These tools include graphic design
software such as Adobe Photoshop, Adobe Illustrator, Sketch, and Figma.
They also use programming languages like HTML, CSS, and JavaScript to
bring their designs to life on the web.
</p>
</div>
</body>
Full Stack Web Development
Assignment Solution
Browser output
Home Page
Web Development Page
Web design page
Full Stack Web Development
Assignment Solution
Create an ordered list of HTML tags. Each list item must include the tag name and some information about
the tag.
Solution
<body>
<h1>List of Tags.</h1>
<ol>
<li>h1: Defines a heading level 1.</li>
<li>p: Defines a paragraph of text.</li>
<li>div: Defines a container for HTML elements.</li>
<li>table: Defines a table with rows and columns.</li>
<li>ul: Defines an unordered list.</li>
</ol>
</body>
Browser output
create a description list of full stack web development tech stack, using the <dl> tag. Each term should be
a tech stack name and each description should be a brief explanation of what the tech stack is used for.
Solution
<body>
<h1>Full Stack Web Development Tech Stack:</h1>
<dl>
<dt>HTML</dt>
<dd>
HyperText Markup Language is the standard markup language for creating
web pages and other online documents.
</dd>
<dt>CSS</dt>
<dd>
Cascading Style Sheets is a style sheet language used for describing the
presentation of a document written in HTML or XML.
</dd>
<dt>JavaScript</dt>
<dd>
Full Stack Web Development
Assignment Solution
JavaScript is a programming language used to create interactive effects
within web browsers.
</dd>
<dt>[Link]</dt>
<dd>
[Link] is an open-source, cross-platform, JavaScript runtime
environment that executes JavaScript code outside of a browser.
</dd>
<dt>[Link]</dt>
<dd>
[Link] is a web application framework for [Link] designed for
building web applications and APIs.
</dd>
<dt>MongoDB</dt>
<dd>
MongoDB is a NoSQL document-oriented database program that uses
JSON-like documents with optional schemas.
</dd>
<dt>[Link]</dt>
<dd>
[Link] is a JavaScript library for building user interfaces or UI
components.
</dd>
</dl>
</body>
Browser output
Full Stack Web Development
Assignment Solution
Create an ordered list of the full stack web development tech stack HTML, CSS, and JS. For each tech
stack, create a table that lists the tech stack name, its primary use cases, and some key features or
benefits. Below is a reference image.
Eg.
Solution
<body>
<ol>
<li>
<h2>HTML</h2>
<table border="1">
<tr>
<th>Primary Use Cases</th>
<th>Key Features/Benefits</th>
</tr>
<tr>
<td>Building the structure of web pages</td>
<td>
<ul>
<li>Simple and easy to learn</li>
<li>Compatible with all web browsers</li>
<li>Allows for semantic markup</li>
</ul>
</td>
</tr>
</table>
</li>
<li>
<h2>CSS</h2>
<table border="1">
<tr>
<th>Primary Use Cases</th>
<th>Key Features/Benefits</th>
</tr>
<tr>
<td>Styling and layout of web pages</td>
<td>
Full Stack Web Development
Assignment Solution
<ul>
<li>Allows for separation of content and presentation</li>
<li>Enables responsive design</li>
<li>Offers a wide range of styling options</li>
</ul>
</td>
</tr>
</table>
</li>
<li>
<h2>JavaScript</h2>
<table border="1">
<tr>
<th>Primary Use Cases</th>
<th>Key Features/Benefits</th>
</tr>
<tr>
<td>Adding interactivity and functionality to web pages</td>
<td>
<ul>
<li>Can manipulate and modify web page content in real-time</li>
<li>
Offers a wide range of functionality through libraries and
frameworks
</li>
<li>Allows for server-side scripting with [Link]</li>
</ul>
</td>
</tr>
</table>
</li>
</ol>
</body>
Solution
Full Stack Web Development
Assignment Solution
Build a complex nested list structure representing a multi-level table of contents. Use unordered lists
(<ul>) and list items (<li>) with inline-block styling to create a structured layout. Apply formatting tags to
enhance the presentation of list items.
Solution
<body>
<h1>Table of Contents</h1>
<ul>
<li><a href="#">Part 1: Introduction</a></li>
<li><a href="#">Part 2: Getting Started</a>
<ul>
<li><a href="#">2.1 Installing the Software</a></li>
<li><a href="#">2.2 Creating a New Project</a>
<ul>
<li><a href="#">2.2.1 Project Templates</a></li>
<li><a href="#">2.2.2 Customizing Settings</a></li>
</ul>
</li>
<li><a href="#">2.3 Exploring the Interface</a>
<ul>
<li><a href="#">2.3.1 Toolbar Features</a></li>
<li><a href="#">2.3.2 Panel Layout</a>
<ul>
<li><a href="#">[Link] Docking Panels</a></li>
<li><a href="#">[Link] Tabbed Interface</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Part 3: Advanced Topics</a>
<ul>
<li><a href="#">3.1 Working with Plugins</a>
<ul>
<li><a href="#">3.1.1 Installing Plugins</a></li>
<li><a href="#">3.1.2 Plugin Configuration</a></li>
</ul>
</li>
<li><a href="#">3.2 Customizing the UI</a>
<ul>
<li><a href="#">3.2.1 Changing Themes</a></li>
<li><a href="#">3.2.2 Configuring Shortcuts</a></li>
</ul>
</li>
<li><a href="#">3.3 Optimizing Performance</a>
<ul>
<li><a href="#">3.3.1 Caching Strategies</a></li>
<li><a href="#">3.3.2 Resource Minification</a></li>
</ul>
</li>
Full Stack Web Development
</ul>
</li>
<li><a href="#">Part 4: Conclusion</a></li>
</ul>
</body>
Assignment Solution
Browser output
Full Stack Web Development
Assignment Solution
Build a complex nested list structure representing a multi-level table of contents. Use unordered lists
(<ul>) and list items (<li>) with inline-block styling to create a structured layout. Apply formatting tags to
enhance the presentation of list items.
Solution
<body>
<h1>Conference Schedule</h1>
<table border="1" cellpadding="10">
<thead>
<tr>
<th>Time</th>
<th>Room 1</th>
<th>Room 2</th>
<th>Room 3</th>
<th>Room 4</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">9:00 AM - 10:00 AM</td>
<td rowspan="2">Keynote</td>
<td>Session A</td>
<td>Session B</td>
<td rowspan="3">Session C</td>
</tr>
<tr>
<td>Session D</td>
<td>Session E</td>
</tr>
<tr>
<td>10:30 AM - 11:30 AM</td>
<td colspan="2">Session F</td>
</tr>
<tr>
<td>12:00 PM - 1:00 PM</td>
<td colspan="4">Lunch Break</td>
</tr>
<tr>
<td rowspan="2">1:00 PM - 2:00 PM</td>
<td>Session G</td>
<td rowspan="2">Session H</td>
<td>Session I</td>
<td>Session J</td>
</tr>
<tr>
<td>Session K</td>
<td>Session L</td>
<td>Session M</td>
</tr>
</tbody>
</table>
Full Stack Web Development
</body>
Assignment Solution
Browser output
Full Stack Web Development