Scribd
Upload
5 views

Frontend Dev

The document discusses the basics of frontend web development including HTML to structure content, CSS to style and lay out elements, and common elements like headings, paragraphs, links, images, lists, tables and forms. It also covers CSS concepts like selectors, the box model, text styling, positioning, backgrounds, flexbox, transitions and animations.

Uploaded by

Tahreem Feroz
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

Frontend Dev

The document discusses the basics of frontend web development including HTML to structure content, CSS to style and lay out elements, and common elements like headings, paragraphs, links, images, lists, tables and forms. It also covers CSS concepts like selectors, the box model, text styling, positioning, backgrounds, flexbox, transitions and animations.

Uploaded by

Tahreem Feroz
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

FRONTEND WEB DEVELOPMENT

HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<!-- ... -->
<p>This is a paragraph.</p>
<a href="https://www.example.com">Link Text</a>
<img src="image.jpg" alt="Image Description">

<ul>
<li>List Item 1</li>
<li>List Item 2</li>
</ul>

<ol>
<li>Ordered List Item 1</li>
<li>Ordered List Item 2</li>
</ol>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
</body>
</html>

CSS:
/* Selectors */
selector {
property: value;
}

/* Example of using selectors */


h1 {
color: red;
}

/* Common CSS Properties */

/* Text Styling */
color: #ff0000; /* Text color */
font-size: 16px; /* Font size */
font-family: Arial, sans-serif; /* Font family */
font-weight: bold; /* Font weight (bold) */
text-decoration: underline; /* Text decoration (underline) */

/* Box Model */
width: 300px; /* Width of the element */
height: 200px; /* Height of the element */
padding: 10px; /* Padding inside the element */
margin: 20px; /* Margin outside the element */
border: 1px solid #000000; /* Border */

/* Display and Positioning */


display: block; /* Display type (block) */
position: relative; /* Positioning type (relative) */
top: 20px; /* Offset from the top */
left: 10px; /* Offset from the left */

/* Backgrounds */
background-color: #f0f0f0; /* Background color */
background-image: url("image.jpg"); /* Background image */
background-size: cover; /* Background image size */

/* Flexbox */
display: flex; /* Enables flexbox layout */
justify-content: center; /* Horizontal alignment of flex items */
align-items: center; /* Vertical alignment of flex items */

/* Transitions and Animations */


transition: all 0.3s ease; /* Transition effect */
animation: spin 2s linear infinite; /* Animation effect */

/* Pseudo-classes */
selector:hover {
property: value;
}

/* Example of using pseudo-classes */


a:hover {
color: blue;
}

You might also like