<h1>Hello, World!</h1>
This message is traditionally the first step in any coding journey. It represents the first functional code and marks the beginning of your adventure in technology.
This is a basic and important exercise, as it is a way to test your development environment, ensuring that everything is set up correctly.
Moreover, it’s a simple reminder that great journeys begin with small steps.
HTML Semantics
This means using elements that clearly describe the purpose of the content they enclose. When used correctly, these elements clearly indicate the function of sections within a page. Using semantic tags improves accessibility, makes the code easier for other developers to understand, and helps search engines better index the content.
Semantic Elements
What are the basics?
<header> for the header of a page.
<nav> for a section of navigation links.
<section> for grouping related content.
<article> for independent content, such as a blog post.
<footer> for the footer of the page.
<aside>
This element may not be used as frequently, but it is part of semantic HTML and can be useful in specific contexts, such as highlighting information related to the main content, a sidebar with links, or citations.
Here’s how to structure this in code
<header>
<h1>My Website</h1>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
<main>
<p>Main content of the page.</p>
</main>
<footer>
<p>© 2024 My Website</p> </footer>Incorporating Images
Images enrich web content, making it more engaging and informative. Use the
<img> tag to insert images into your pages.Images not only enhance web content, making it more attractive and informative, but they can also be adjusted and optimized to improve user experience.
Understanding the Attributes
To insert an image, use the src (source) attribute to specify the image path. The alt (alternative text) attribute provides an alternative description for the image, which is important for accessibility.
Example:
<img src="path/to/image.jpg" alt="Image Description">
Adjusting Size
The size of the image can be controlled using the width and height attributes, adjusting the values as needed. It is considered best practice to separate style (CSS) from structure (HTML), as it makes the code more organized, easier to maintain, and allows for global adjustments more easily.
Example:
.image {
max-width: 100%; height: auto;
}Visual Elements
For vector images, consider using the SVG format. It is scalable and maintains quality at any size. Icons are also widely used to guide users intuitively. A common example is the Font Awesome library, which provides icons for social media, tools, actions, and more.
Example:
<i class="fab fa-instagram"></i>Lists, Tables, and Forms
Lists
Ordered Lists (<ol>): Create a numbered list.
Unordered Lists (<ul>): Create a list with bullet points.
List Items (<li>): Define the items within lists.
Example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>Tables
Table Elements (<table>, <tr>, <td>, <th>): Create tables with rows and columns.
Example:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>Forms
Form (<form>): Contains elements for data collection.
Input Fields (<input>, <textarea>, <select>): Used to receive information.
Buttons (<button>, <input type="submit">): To submit the form.
Example:
<form action="/submit"> <label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Send"> </form>Fundamentals of CSS
Among the essential fundamentals of CSS are element layout and positioning, spacing techniques, dimension control, and manipulation of images and backgrounds. These concepts are important for creating responsive and organized designs, providing a solid foundation for those starting in web development.
Layout and Positioning
Flexbox
A simplified approach to creating layouts that adjust to the available space. It’s great for creating one-dimensional layouts (row or column). Using properties like flex-direction, justify-content, and align-items, you can control the distribution and alignment of elements.
Grid
A two-dimensional system that allows for more complex layouts. It uses rows and columns to organize elements, providing precise control over where elements are positioned. Key properties include grid-template-columns, grid-template-rows, and grid-area.
Position
Element positioning: static, relative, absolute, fixed, and sticky.
Display
Element display types: block, inline, inline-block, none, etc.
Spacing
Margin
External space around an element, creating distance between adjacent elements.
Border
Adds borders around an element. Properties include border-width, border-style, e border-color.
Border-Radius
Rounds the corners of borders, allowing for elements with softened or circular corners.
Padding
Internal space around the content of an element, separating it from the element's own borders.
Dimensions
Width
Width: Defines the width of an element.
Max-width and Min-width: Limit the maximum or minimum width an element can have
Height
Height: Defines the height of an element.
Max-height and Min-height: Limit the maximum or minimum height an element can have.
Backgrounds and Objects
Background Image
Allows you to add a background image to any element. The background-image property sets the path to the image to be used.
Background properties
Background-Repeat: Controls if and how the background image is repeated (repeat, no-repeat, repeat-x, repeat-y).
Background-Position: Defines the initial position of the background image within the element.
Background-Size: Controls the size of the background image (cover, contain, or specific values in units).
Background-Attachment: Determines if the background should scroll with the content (scroll) or remain fixed (fixed).
Object-fit e Object-Position
Object-Fit: Adjusts how an image or video should be fitted inside the container (fill, contain, cover, none, scale-down).
Object-Position: Defines the position of the image or video within the container, especially when it is not fully covering the container.
