Scribd
Upload
10 views

final wmad lab report

The document outlines a comprehensive guide on mobile and desktop application installation, presentation creation, and web development using HTML, CSS, and Bootstrap. It includes step-by-step instructions for each process, along with code examples and best practices for creating responsive web applications. The conclusion emphasizes the importance of the skills learned for future development in the digital landscape.

Uploaded by

luciferden98
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views

final wmad lab report

The document outlines a comprehensive guide on mobile and desktop application installation, presentation creation, and web development using HTML, CSS, and Bootstrap. It includes step-by-step instructions for each process, along with code examples and best practices for creating responsive web applications. The conclusion emphasizes the importance of the skills learned for future development in the digital landscape.

Uploaded by

luciferden98
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 12

Table of contents page-no

1) Installing mobile app from Appstore or Play store…………..1


2) Download and install Desktop Software……………………..2
3) Making presentation on mobile operating system……………3
4) Making presentation on history of mobile application……….4
5) Learning and implementing HTML code…………………….5
6) Learning and implementing CSS code……………………….6
7) Learning and implementing Bootstrap ………………………7
8) Use icon on web app…………………………………………8
9) Conclusion………………………... ………………………...9
DAY-1
How to install mobile app from play store.
STEP 1: Open the Google Play Store app from the menu.
STEP 2: Search for applications. Use the search bar at the top to
find different apps available on the Google Store.
STEP 3: Select the app you want to download.
STEP 4: Tap install.
STEP 5: Wait until the installation is complete.
STEP 6: Launch the app.
DAY-2
How to install desktop application.
STEP 1: Open Microsoft Store Application.
STEP 2: Search for the Application.
STEP 3: Select the Application.
STEP 4: Click "Get" or "Buy" option.
STEP 5: Wait for the Download to Complete:
STEP 6: Install the Application:
STEP 7: Launch the Application:
DAY-3
Making presentation on mobile operating os /
History of Mobile Application.
STEP 1: Open PowerPoint
STEP 2: Choose a Design
STEP 3: Add Slides
STEP 3: Add Text
STEP 3: Insert Images/Graphics
STEP 3: Add Charts/Graphs
STEP 3: Apply Transitions
STEP 3: Add Animations (Optional)
STEP 3: Save Your Presentation
DAY-4
ALL HTML CODE AND ITS USES.
 <html>: Defines the root of an HTML document.
 <head>: Contains meta-information about the document, such
as its title, scripts, and styles.
 <title>: Sets the title of the document that appears in the
browser's title bar or tab.
 <meta>: Provides metadata about the HTML document, such as
character encoding, viewport settings, etc.
 <link>: Links external resources like CSS stylesheets to the
HTML document.
 <script>: Embeds or links to client-side scripts, such as
JavaScript.
 <body>: Contains the content of the HTML document that is
rendered in the browser.
 <header>: Represents introductory content, typically containing
headings, logos, navigation menus, etc.
 <footer>: Defines a footer for a document or section, usually
containing authorship information, copyright notices, etc.
 <nav>: Defines a section of navigation links.
 <main>: Represents the main content of the document, excluding
header, footer, and navigation.
 <section>: Defines a section in a document, such as chapters,
headers, footers, or any other thematic grouping.
 <article>: Represents a self-contained piece of content that could
be distributed and reused independently, such as blog posts, news
articles, etc.
 <aside>: Defines content aside from the content it is placed in,
such as sidebars, pull quotes, etc.
 <div>: Defines a division or section within an HTML document,
often used for grouping and styling purposes.
 <p>: Represents a paragraph of text.
 <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Defines headings of
different levels, where <h1> is the most important and <h6> is
the least important.
 <img>: Embeds an image into the HTML document.
 <a>: Defines a hyperlink, linking to another document or
resource.
 <ul>, <ol>, <li>: Create unordered and ordered lists, and list
items respectively.
 <table>, <tr>, <th>, <td>: Define a table, table rows, table
headers, and table data cells respectively.
 <iframe>: Embeds another HTML document within the current
one.
DAY-5
MAKING WEBSITE USING HTML AND CSS CODE.

DAY-6
LEARNING BASIC CSS CODE
1) Setting font properties
body {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 1.5;
}
2) Setting text color and alignment
p{
color: #333;
text-align: left;
}
3) Styling links
a{
text-decoration: none;
color: #007bff; /* Link color */
}
a:hover {
text-decoration: underline;
}
4) Setting background color
body {
background-color: #f0f0f0;
}
5) Setting margins and padding
.container {
margin: 20px;
padding: 10px;
}
6) Styling headings
h1 {
font-size: 24px;
font-weight: bold;
}
h2 {
font-size: 20px;
font-weight: bold;
}
h3 {
font-size: 18px;
font-weight: bold;
}
7) Styling borders
.box {
border: 1px solid #ccc;
border-radius: 5px;
}
8) Styling lists
ul {
list-style-type: none;
}
li {
margin-bottom: 5px;
}
9) Setting width and height
.element {
width: 200px;
height: 100px;
10) Centering elements
.container {
display: flex;
justify-content: center;
align-items: center;

DAY-7
Learning and implementing Bootstrap and use
icon on web app.
 Using icons in a web application is a common practice to
enhance user interface elements and provide visual cues.
Here's a step-by-step guide on how to use icons in a web
app using Bootstrap and Font Awesome, which is a popular
icon library.
STEP 1: Include Bootstrap and Font Awesome First,
include the necessary CSS files for Bootstrap and Font
Awesome in the <head> section of your HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>My Web App</title>
<!-- Bootstrap CSS -->
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/cs
s/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.4/css/all.min.css" rel="stylesheet">
</head>
<body>
<!-- Your content goes here -->
</body>
</html>
STEP 2: Choose an Icon Visit the Font Awesome website
or documentation to browse and choose the icon you want
to use. Font Awesome provides a wide range of free icons
that you can use in your web app.
STEP 3: Add the Icon Once you've chosen an icon, add
the appropriate HTML markup to your web page where
you want the icon to appear. You can use <i> or <span>
elements with specific classes to display the icon.
For example,
<i class="fas fa-search"></i>
STEP 4: Style and Customize You can further style and
customize the icon using CSS. For example, you can
change the size, color, or add animation effects to the icon.
For example,
.icon {
font-size: 24px; /* Change icon size */
color: #007bff; /* Change icon color */
}
STEP 5: Use Icons with Bootstrap Components
Bootstrap components often integrate with icons. For
example, you can add icons to buttons, navigation bars,
input fields, etc., by simply including the appropriate Font
Awesome class along with Bootstrap classes.
For example,
<button class="btn btn-primary"><i class="fas
fa-plus"></i> Add Item</button>
STEP 6: Test and Iterate Finally, test your web app to
ensure that the icons are displayed correctly and adjust their
placement, size, or styling as needed.
CONCLUSION

In conclusion, this lab report has provided a comprehensive overview


of web and mobile application development principles and practices.
Through practical exercises and theoretical discussions, we've
explored fundamental concepts such as responsive design, user
interface components, and front-end frameworks like Bootstrap.
Additionally, we've delved into the importance of accessibility, cross-
browser compatibility, and the integration of JavaScript plugins for
enhancing interactivity. By applying these concepts in our lab
exercises, we've gained valuable hands-on experience in building
modern and responsive web and mobile applications. This lab has not
only equipped us with essential skills for web development but also
instilled a deeper understanding of the dynamic and evolving
landscape of digital applications. Moving forward, these insights will
serve as a solid foundation for our continued exploration and growth
in the field of web and mobile application development.
REFERENCE
www.w3school.com
www.openai.com
www.htmlcode.com
www.learncode.com
www.beingdeveloper.com

You might also like