Home >Web Front-end >JS Tutorial >Day , what did learn

Day , what did learn

Linda HamiltonOriginal: 2024-12-24 05:03:13905browse

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

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:

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

Array Methods:
- map(), filter(), reduce(), forEach()

  selector {
    property: value;
  }

React.js (Basics)

Creating a Component:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row; /* or column */
}

JSX Syntax:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

State and Props:

  div {
    margin: 10px;
    padding: 20px;
    border: 1px solid #000;
  }

useEffect Hook:

  @media screen and (max-width: 768px) {
    .container {
      display: block;
    }
  }

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 - Install a package
- npm start - Start the application
Code Formatter:
- Prettier - Auto-format code
- ESLint - Linting to catch potential errors

The above is the detailed content of Day , what did learn. For more information, please follow other related articles on the PHP Chinese website!

JavaScript css html npm Static Array for foreach format catch Filter auto class Event map JS dom href margin padding border ul li git Access Game

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How Can I Effectively Compare Objects for Equality in JavaScript?Next article：How Can I Effectively Compare Objects for Equality in JavaScript?

See more

Day , what did learn

HTML (HyperText Markup Language)

-

, , , , , , ,

CSS (Cascading Style Sheets)

JavaScript

React.js (Basics)

Version Control (Git)

Common Tools

Related articles

,
, , ,