My Website Development Cheat Sheet

My personal record of web development journey. You can use it as a Cheat Sheet.

1 - HTML
2 - CSS
3 - JavaScript

Other Cheat Sheets

Emmet Cheat Sheet

1 - HTML

1.1 - Fancy page break

HTML:

<div style="justify-content: center;display:flex;">
<hr style="border: 5px solid rgba(0, 0, 0, 0.619); border-radius: 5px;margin-left: 150px;margin-right: 150px;margin-bottom: 50px;min-width: 200px;width:50%;max-width: 500px;;">
</div>

Symbol	Hex (starts with & or &#)
<	`<`
>	`>`
{	`{`
}	`}`
(	`(`
)	`)`
[	`[` or `[`
]	`]` or `]`
/	`/`
\	`\`
" " (white space)	` `
→	`→`
←	`←`
–	`–` or ``
—	`—` or ``
−	`−` or `−`

1.3 - Logo / icon sources

Vector image (.svg) converter https://vectormagic.com/
https://www.svgrepo.com/
Font Awesome icon <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"> | Search

1.4 - Link Redirect

<meta http-equiv="refresh" content="3;url=oopGame.php">

2 - CSS

2.0 - References
2.1 - SCSS
2.2 - Clicking on id=”#...” stops mid screen
2.3 - HIDE SCROLLBAR
2.4 - HTML Zoom
2.5 - Disable link click effect
2.6 - Pseudo Element styling
2.7 - Bad Practices ⭐
2.8 - Overflow Fixes
2.9 - Overflow Direction
2.10 - Pseudo Elements
2.11 - CDN Links
2.12 - Media Query
2.13 - Smooth Scrolling

2.0 - References

MDN: CSS, Pseudo Classes, Pseudo Elements, At-Rules, Functions, Datatypes

2.1 - SCSS

width: -webkit-fit-content;
width: -webkit-fill-available;
.class::-webkit-scrollbar{ display:none;} // hides scrollbar

Libraries: Awesome SCC

2.2 - Clicking on id=”#...” stops mid screen

CSS:

.idUITSstopMidScreen, #UITS { /*both class and id work*/
scroll-margin-top: 40vh;
/* 50vh = half the viewport height */
}

HTML:

<a href="#UITS">UITS</a>
<div class="idUITSstopMidScreen" id="UITS">UITS</div>

2.3 - HIDE SCROLLBAR

::-webkit-scrollbar {
  display: none;
}

2.4 - HTML Zoom

CSS: source

html {zoom: 160%;}

2.5 - Disable link click effect

-moz-user-select: none;
-ms-user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
-khtml-user-select: none;

But these 3 lines cause the texts to be unselectable (remove them when you want your links to be selectable):

-webkit-user-select: none;
user-select: none;
-khtml-user-select: none;

2.6 - Pseudo Element styling

You can style the properties inside the elements called "Pseudo Elements". Example: Placeholder → Pseudo element (Text inside input fields (i.e search bar, form name))

    input[type="tel"]::placeholder{color: red;}

2.7 - Bad Practices ⭐

2.7.1 - Multiple elements with same class name: a.textformat , div.textformat , h1.textformat

  <a class=”textformat”></a>
  <div class=”textformat”></div>
  <h1 class=”textformat”></h1>

2.8 - Overflow Fixes

Property	Purpose
`word-wrap`	Break long words
`overflow-wrap`	Same as `word-wrap` (modern)
`white-space`	Controls space and line breaks
`flex-wrap`	Wrap flex items
`grid-template-columns` with `auto-fit/fill`	Auto-wrap grid items
`text-wrap`	Experimental text balancing
`word-break`	Force break anywhere in word
`hyphens`	Add hyphens in wrapped words

Logic: "overflow-x"'s direction: "ltr" or "rtl" works horizontally, and "overflow-y"'s direction: "ltr" or "rtl" works vertically. There is no "utd" (up-to-down) or "ttb" (top-to-bottom) for vertical overflow.

2.10 - Pseudo Elements

js alts for easy implementations

Doc links: MDN

2.11 CDN Links

font awesome <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

2.12 - Media Query

Doesn’t work without meta viewport

2.13 - Smooth Scrolling

	html {
		scroll-behavior: smooth;
	}

3 - JavaScript

my js note

3.1 - Google's tracker link remover

Google adds their trackers, and clicking on links gives a redirect notice. It’s Google’s safety feature they add when google doc is converted into HTML page. How to remove it:
JS:

<script> 
document.querySelectorAll('a[href*="www.google.com/url?q="]').forEach(link => {
const url = new URL(link.href);
const realUrl = new URLSearchParams(url.search).get('q');
if (realUrl) link.href = realUrl;
});
</script>

3.2 - adding target="_blank" for link onlys

changing <a> properties when it cannot contain target="_blank". For example, inside <select> tag's value="".

<label for="linkDropdown">Go to:</label>
  <select id="linkDropdown">
    <option value="">-- Select a page --</option>
    <option value="https://example.com">Example</option>
  </select>

  <script>
    const dropdown = document.getElementById('linkDropdown');

    dropdown.addEventListener('change', function () {
      const url = this.value;
      if (url) {
	window.open(url, '_blank'); // or use _self for same tab
      }
    });
  </script>

b1tranger/WebDevRecord.md

Select an option

No results found