i am learning C++ to become a game dev but i thought why not learn web dev with it so i started learning front end and will be posting my journey from now on .
Here is a Single-Page Front-End Development Cheat Sheet for quick reference:
HTML (HyperText Markup Language)
- Basic Structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
</head>
<body>
<header></header>
<main></main>
<footer></footer>
</body>
</html>
-
Elements:
- Basic Tags:
<div>,<span>,<h1> - <h6>,<p>,<a>,<img>,<button>,<ul>,<ol>,<li>
- Basic Tags:
-
Common Attributes:
-
id,class,src,href,alt,style
-
CSS (Cascading Style Sheets)
- Syntax:
selector {
property: value;
}
-
Selectors:
-
element,.class,#id,element.class,element#id - Pseudo-classes:
:hover,:active,:focus - Pseudo-elements:
::before,::after
-
-
Layout Techniques:
- Flexbox:
.container { display: flex; justify-content: center; align-items: center; flex-direction: row; /* or column */ }- Grid:
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } -
Positioning:
-
static,relative,absolute,fixed,sticky
-
-
Box Model:
- Margin, Padding, Border, Content
div {
margin: 10px;
padding: 20px;
border: 1px solid #000;
}
- Media Queries (for Responsiveness):
@media screen and (max-width: 768px) {
.container {
display: block;
}
}
JavaScript
- Variables:
let variable = "value"; // Mutable
const constant = "value"; // Immutable
- Functions:
function myFunction() {
console.log("Hello");
}
const myArrowFunction = () => console.log("Hello");
-
DOM Manipulation:
- Access and modify elements:
const el = document.getElementById('id'); el.style.color = "red"; el.innerHTML = 'New Content'; Event Handling:
button.addEventListener('click', () => {
alert('Button Clicked');
});
-
Array Methods:
-
map(),filter(),reduce(),forEach()
-
const arr = [1, 2, 3];
const doubled = arr.map(num => num * 2);
React.js (Basics)
- Creating a Component:
import React from 'react';
const MyComponent = () => {
return <div>Hello React!</div>;
};
export default MyComponent;
- JSX Syntax:
return (
<div>
<h1>Hello</h1>
<p>World</p>
</div>
);
- State and Props:
const [count, setCount] = useState(0); // useState hook
<MyComponent propName="value" /> // Passing Props
- useEffect Hook:
useEffect(() => {
// Runs after component renders
}, [dependencies]); // Rerun based on dependencies
Version Control (Git)
-
Basic Commands:
-
git init- Initialize repository -
git status- Check current status -
git add .- Stage all changes -
git commit -m "Message"- Commit changes -
git push- Push to remote repository -
git pull- Fetch updates
-
Common Tools
-
npm (Node Package Manager) Commands:
-
npm install <package>- Install a package -
npm start- Start the application
-
-
Code Formatter:
- Prettier - Auto-format code
- ESLint - Linting to catch potential errors
Top comments (0)