Tech | Ahmad

CSS - Cascading Style Sheets

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 - The Language of the Web

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>  <html lang="en">  <head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>  </head> <body>   </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. ...

Becoming a Full-Stack Web Developer in 2025

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. ...

Markdown Cheat Sheet

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. ...