Day 01 , what did learn

Pratik — Sun, 22 Dec 2024 04:21:01 +0000

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

started figma today , learning layers and tools right now .

Pratik — Sat, 16 Nov 2024 03:05:39 +0000

C++ is a game changer , if you want to build logic building

Pratik — Thu, 14 Nov 2024 03:26:07 +0000

**
**. its been 10 days and i feel i am elon , right now i am doing array realated question and i must say it is way better than doing javascript , it's my opinion but i think javscript takes a lot more time to remember stuff i mean if you take function only there are more than 2 types , i know it is easy to work with but for people who are looking for dsa and logic building i will still suggest c++ .

starting my day with some c++

Pratik — Thu, 14 Nov 2024 03:19:53 +0000

what's up fam , its day 01 for me , adding more to my C++ knowledge today and made a mini portfolio that looks hella cool and ez . see you after i do some sh&t #day01 #c++ #javascript

Pratik — Wed, 13 Nov 2024 05:22:36 +0000

Forem: Pratik