DEV Community

Pratik
Pratik

Posted on

Day 01 , what did learn

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>
Enter fullscreen mode Exit fullscreen mode
  • 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;
  }
Enter fullscreen mode Exit fullscreen mode
  • 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;
  }
Enter fullscreen mode Exit fullscreen mode
  • Media Queries (for Responsiveness):
  @media screen and (max-width: 768px) {
    .container {
      display: block;
    }
  }
Enter fullscreen mode Exit fullscreen mode

JavaScript

  • Variables:
  let variable = "value"; // Mutable
  const constant = "value"; // Immutable
Enter fullscreen mode Exit fullscreen mode
  • Functions:
  function myFunction() {
    console.log("Hello");
  }

  const myArrowFunction = () => console.log("Hello");
Enter fullscreen mode Exit fullscreen mode
  • 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');
  });
Enter fullscreen mode Exit fullscreen mode
  • Array Methods:
    • map(), filter(), reduce(), forEach()
  const arr = [1, 2, 3];
  const doubled = arr.map(num => num * 2);
Enter fullscreen mode Exit fullscreen mode

React.js (Basics)

  • Creating a Component:
  import React from 'react';

  const MyComponent = () => {
    return <div>Hello React!</div>;
  };

  export default MyComponent;
Enter fullscreen mode Exit fullscreen mode
  • JSX Syntax:
  return (
    <div>
      <h1>Hello</h1>
      <p>World</p>
    </div>
  );
Enter fullscreen mode Exit fullscreen mode
  • State and Props:
  const [count, setCount] = useState(0);  // useState hook
  <MyComponent propName="value" />         // Passing Props
Enter fullscreen mode Exit fullscreen mode
  • useEffect Hook:
  useEffect(() => {
    // Runs after component renders
  }, [dependencies]);  // Rerun based on dependencies
Enter fullscreen mode Exit fullscreen mode

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

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

Visualizing Promises and Async/Await 🤓

async await

☝️ Check out this all-time classic DEV post on visualizing Promises and Async/Await 🤓

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay