Html and CSS

Introduction

Hey everyone I have started my journey for learning full stack development and I will be posting articles on what I have learned throughout the week till i complete this.

HTML5 Basics to Advanced

HTML (Hypertext Markup Language) is the skeleton of every web page. Here's how I went from basic tags to more advanced and semantic HTML this week.

Basic Tags I Explored:

<h1> to <h6> – Headings
<p> – Paragraph
<a> – Anchor / Links
<img> – Image
<ul>, <ol>, <li> – Lists
<br> and <hr> – Line breaks and horizontal lines
<input>, <label>,<textarea> and <select> for creating basic forms

<h1>Welcome to My Portfolio</h1>
<p>This is a paragraph with <a href="#">a link</a>.</p>
<img src="profile.jpg" alt="My profile picture" /><br>
<form>
<input type="text" id="username"><br>
<textarea id="feedback" name="feedback" rows="4" cols="50" required></textarea><br><br>
</form>

Intermediate to Advanced level tags:

<section>, <article>, <aside>, <nav>, <footer>, <header>
Media: <video>, <audio>, <source>
<div>,<a>,<span> for Inline and block elements.
<section>
<dialog>
<table> ,<tr>,<td>,<th>
<dl>,<dt>,<dd>

HTML DOM (Document Object Model)

The HTML DOM (Document Object Model) is the foundation of modern web interactivity, enabling over 90% of dynamic behavior seen on website today.It acts as a structured representation of an HTML document, allowing developers to programmatically access, modify, and control the content and structure of a web page using Javascript.

CSS

CSS (Cascading Style Sheets) is a language designed to simplify the process of making web pages presentable.

It allows you to apply styles to HTML documents by prescribing colors, fonts, spacing, and positioning.
The main advantages are the separation of content (in HTML) and styling (in CSS) and the same CSS rules can be used across all pages and not have to be rewritten.
HTML uses tags, and CSS uses rule sets.
CSS styles are applied to the HTML element using selectors

Ways to Apply CSS

Inline CSS: Directly within the HTML element using the style attribute.
Internal CSS: Within a <style> tag in the <head> section.
External CSS: The external CSS is the CSS linked to an HTML file using the <link> tag.

Topics I practiced :

Selectors (element, .class, #id, *, descendant)
Box Model (margin, border, padding, content)
Flexbox Basics
Colors and Units (px, em, rem, %)
Typography (font-family, font-size, line-height)
Pseudo-classes (:hover, :focus, :nth-child())

.button1{
            background-color: rgb(109, 109, 196);
            border: 2px;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 26px;
            margin: 4px 2px;
            cursor: pointer;
        }
        .button1:hover:nth-child(n) {
  background-color: lightblue;
}

I have made a GitHub repository where I will be posting all the source code of everything i learned and applied. For this week i have created a HTML file which has all the code which i written to show my progress.

videeshhh/Full-Stack-Development

My learning Source

GeeksforGeeks | Your All-in-One Learning Portal

W3Schools Online Web Tutorials

Week 1: Html Basic to Advanced tags and CSS Essentials

Table of contents