Basics of Web Developement!💪
I am a developer from India! here i will be posting blogs as i will be learning in my development journey! i make pretty much mistakes while writing my programs and i learn majorly through my projects only so will be posting that as well!( yes i will be blogging pretty much every shit i do as a developer:)
You’ve probably heard of HTML, CSS, and JavaScript — the three pillars of web development. If you're a beginner in web dev, don't worry! Here, I’ll share everything I’ve learned(and learning) on my journey from scratch to advanced concepts. Let’s start with the basics first then we’ll dive deep into each of them in this and upcoming blogs:
HTML
CSS
JavaScript
Version Control
Responsive Design
Basic Deployment
Think of web development as building a house: first, you need a structure, then decoration, and finally, functionality. That’s exactly what HTML, CSS, and JavaScript provide. HTML builds the structure of your website, CSS adds the beauty, and JavaScript brings it all to life with interactivity. Let’s start with HTML!
HTML Basics
HTML, or Hypertext Markup Language, is the standard language for creating web pages. It consists mainly of elements and tags that organize content so the browser can interpret it correctly. Let’s break down HTML into four parts, which I’ll cover in detail, along with the best resources I found online:
Introduction to HTML
Basic HTML Document Structure
Essential HTML Elements
Advanced HTML: Forms, Tables, and Semantic Elements
1. Introduction to HTML
So HTML is just a standardized system for structuring web content, using tags that act like containers. Each tag specifies how to display various elements like text, images, or other media, helping browsers interpret the content. Here are some key types of tags:
Defining Content: Tags like
<p>for paragraphs,<img>for images, and<h1>,<h2>, etc., for headings.Creating Structure: Tags such as
<header>,<footer>, and<section>helps in organizing the content.Adding Style and Behavior: Tags like
<div>and<span>are useful for applying CSS and JavaScript and helping in making pages visually appealing and interactive.Improving Accessibility: Tags like
<nav>,<main>, and<article>help screen readers interpret the structure, improving accessibility for users with disabilities.
2. Basic HTML Document Structure
Here's a basic structure for any HTML page:
Let’s understand what each line or tag means:
<!DOCTYPE html>basically just declares the document type as HTML5.<html>is the root element that wraps all content also most of the times we declare the language of the web page in this!<head>contains metadata like the title, links to CSS, and information on screen sizes.<body>holds the main content you see on the page.
3. Essentials of HTML
These essentials only form the core of HTML, fundamental for structuring and displaying the content on web:
Document Structure
<!DOCTYPE html>: Declares the document as HTML5.<html>,<head>,<body>: These tags structure the document and content.
Headings and Text
<h1>to<h6>: These tags just define levels of headings.<p>: used for blocks of text.Formatting tags like
<strong>,<em>, and<small>add emphasis, bold, and italic styles.
Links and Navigation
<a>: Links to pages, sections, or resources. Example:<a href="https://example.com">VisitExample</a>.
Images
<img>: Embeds images using thesrc(source) attribute andaltfor accessibility. Example:<img src="image.jpg" alt="Description of image">.
Lists
<ol>for numbered lists,<ul>for bulleted lists, and<li>for list items.
Tables
<table>,<tr>,<th>,<td>: Used for organizing data.<th>for headers and<td>for data.
Forms
<form>: Collects user input through controls like<input>,<textarea>,<select>, and<button>.
Div and Span
<div>: Block-level container for grouping elements.<span>: Inline container for styling parts of text.
Semantic Elements
- Tags like
<header>,<footer>,<nav>,<article>,<section>, and<aside>help define the layout and improve accessibility.
- Tags like
Comments
<!-- Comment -->: Adds notes within the HTML code without displaying on the page and comments are just added to help other developer understand the meaning of code!(there is a saying that the best code is one which can be understood without/or with minimum comments!!)
- Attributes
- Attributes add extra information, like
id,class,src,href,alt, andstyle.
4. Advanced HTML: Forms, Tables, and Semantic Elements
For complex applications, advanced HTML elements offer more functionality, accessibility, and structure.
Forms:
To create a form, use:
Form Controls:
<input type="text">,<input type="email">,<input type="password">,<input type="file">,<textarea>,<select>,<input type="radio">,<input type="checkbox">,<label>.Validation Attributes:
required,pattern,min,max,minlength,maxlength.
Tables:
Table Sections:
<thead>,<tbody>,<tfoot>.Spanning:
colspanandrowspanattributes for merging cells.
Semantic Elements: Semantic tags make content more understandable for search engines, screen readers, and developers:
<header>: Is used for introductory content, like a logo or navigation.<nav>: Holds navigation links.<main>: Primary document content.<section>,<article>,<aside>,<footer>: Organize and define layout.
I really hope this overview gives you the basics, but at the end the more you build the more you learn! I encourage you to build something with HTML alone and share it on social media — tag me on Twitter or LinkedIn(provided on profile dash board)!
here are some project suggestion for you:
Personal Resume
Simple Recipe Page
Photo Gallery
Book or Movie Recommendation List
Just search on internet if you cant figure out how to make any of the projects, read about the logics and approach different people have, participate in discussions!!
In the upcoming article, we’ll cover CSS in depth. I hope this was helpful and added value to your web development journey! also here are some resources you can refer to(one of the best you can find):
W3 school: https://www.w3schools.com/html/
Odin project: https://www.theodinproject.com/
If you think there are more better resources do share in the comment section!!!