Tailwind CSS is a utility-first CSS framework designed to allow developers to build custom designs quickly. Instead of writing custom styles, Tailwind provides a collection of utility classes that you can use to style elements directly in the HTML. 1. Installation and Setup How to install Tailwind using CDN For quick prototyping, you can include Tailwind directly in your project with a CDN. Add the following to your HTML <head> tag: ...
CSS (Cascadia Styling Sheet) is the style sheet language that’s use to specify how a document written in HTML or XML should be presented and styled. CSS Boilerplate *{ margin: 0; padding: 0; box-sizing: border-box; } html,body{ width: 100%; height: 100%; } How to Link CSS with HTML Add the line after tittle tag in your html file <link rel="stylesheet" href="style.css"> Tips: We use . dot to target class in CSS We use # hash to target id in CSS Also if you want to target tag we can simply target like h3{} Div: box means div and also when e have more than one element and also when there is rectangle shape, very high change there is div ;). Units in CSS px : It is use to define the measurement in pixels. 1px = 1/96th of inch % : It is used to define the measurement as a percentage that is relative to another value (maybe to their parent element). vh : It is relative to the height of the viewpoint(screen). 1vh = 1% or 1/100 of the height of the viewpoint vw : It is relative to the width of the viewpoint(screen). 1vm or 1/100 of the width of the width of viewpoint em : Relative to the font-size of the element 2em means 2 times the size of the current font rem : Relative to font-size of the root element like html tag. vmin : Relative to 1% of viewport’s* smaller dimension vmax : Relative to 1% of viewport’s* larger dimension Tip: There are mainly two type of fonts sans-serif and serif. The difference is the presence of decorative strokes, or serifs at the beginning and end of letters. ...
HTML(Hyper Text Markup Language) is the standard language use to create and structure content on the web. Why learn html: because we need to create website for that we need html, or because of content. Getting with HTML Tip: type - html:5 / ! - for boilerplate code Boilerplate Code <!DOCTYPE html> <!-- tells that we are using HTML5 --> <html lang="en"> <!--The tag represents the root of an HTML document.--> <head> <!-- head is a container for metadata (data about data)--> <meta charset="UTF-8"> <!--tag defines metadata about an HTML document--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!--defines the title of the document.--> </head> <body> <!-- defines the document's body.--> <!-- content added here --> </body> </html> Tags in HTML <h1></h1> - heading tag and Most Importance <h2></h2> - less Importance than h1 <h3></h3> - less Importance than h2 <h4></h4> - less Importance than h3 <h5></h5> - less Importance than h4 <h6></h6> - less Importance than h5 <p></p> - paragraph tag used to add paragraph/text on website <b></b> - used to bold the text <i></i> - used to italic the text <sup></sup> - used for to add super script <sub></sub> - used to add sub script <br></br> - used to break line <hr> - used to add horizontal row <ol></ol> - used to add ordered list <ul></ul> - used to add unordered list <li></li> - used to add items in list <a href ="source"> </a> - used to make text clickable/hyperlink Tip: to open link in new tab use this target="_blank" <img src="source" alt=" "> - used to add image to website <form></form> - used to create the form <label></label> - used to add label to input field <input id ="abc" type="text" placeholder="Name" > - used to add input field <div></div> div is rectangle in his nature with 0 height div is used to combine multiple elements together in html <table></table> - A table in HTML consists of table cells inside rows and columns. <td></td> - Each table cell is defined by a and a tag <tr></tr> - table row starts with a and ends with a tag <th></th> - Defines a header cell in a table Input Types for Input tag text : <input type="text" placeholder="Name"> email : <input type="email" placeholder="Email"> password : <input type="password" placeholder="Password"> checkbox : <input type="checkbox" > radio button : <input type="radio" > Male file : <input type="file" > range : <input type="range" > color: <input type="color" > date : <input type="date" > submit : <input type="submit" > id: id is attribute that is used to assign id to an element. It is very helpful when we have multiple of same type but we need to treat them differently. id must be unique of element. ...
Web development is a continuously evolving field, and becoming a proficient full-stack developer in 2025 requires not only mastering essential basics but also adopting advanced tools and concepts. This roadmap will guide you, step by step, through the skills and technologies you need to become job-ready and adaptable to industry trends. Web Development [Basic] (3 Months) 📄 Topics Covered: 1. HTML & CSS Build at least 100 static landing pages to master the fundamentals and different layouts. 2. Git and GitHub Learn the foundations of version control: Creating repositories Branching and merging workflows Collaborating on platforms like GitHub 3. Basic JavaScript Core Concepts: Variables Functions Control Flow (if/else, loops) Data Structures (objects, arrays) DOM APIs: Event handling DOM manipulation Using browser-native features 4. Build the Following Projects Digital Clock Build a digital clock with accurate timed updates. ...
There comes a time in life when everything around you seems stifling. Every breath becomes a fight; the air seems weighty and pushes against your chest. Until you feel as though you are drowning, the weight of unmet expectations, unresolved grief, and constant disappointment presses down on your soul. Running away is not really an option; you yearn for escape; mountain tops call with promises of seclusion, vast roads whisper freedom into your ears. You thus withdraw inside, running back to yourself as the last haven remaining. ...
This Markdown cheat sheet provides a quick overview of all the Markdown syntax elements. It can’t cover every edge case, so if you need more information about any of these elements, refer to the reference guides for basic syntax and extended syntax. Headings Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Emphasis Emphasis, aka italics, with asterisks or underscores. Strong emphasis, aka bold, with asterisks or underscores. Combined emphasis with asterisks and underscores. Strikethrough with two tildes. Bold and nested italic. All bold and italic. Bold and italic nested. ...