Logo

dev-resources.site

for different kinds of informations.

Day 01 , what did learn

Published at
12/22/2024
Categories
webdev
frontend
devjournal
javascript
Author
coderkun
Main Article
https://dev.to/coderkun/day-01-what-did-learn-3hj6
Categories
4 categories in total
webdev
open
frontend
open
devjournal
open
javascript
open
Author
8 person written this
coderkun
open
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
devjournal Article's
30 articles in total
Favicon
DRY
Favicon
Maximizing Productivity: The Benefits of Planning Your Day as a Software Engineer
Favicon
GitHub as a CMS
Favicon
npx life@2024 preview: How Missing Flights, Finding Love, and Building Svelte Apps Changed Everything
Favicon
[Boost]
Favicon
366 days of launch weeks
Favicon
How to Enhance Notion Templates with AI for Smarter Workflows
Favicon
Retro’ing and Debugging 2024 - A year of learning and fun
Favicon
Title: Coffee Sales Order Analysis with Excel: Dashboard, Pivot Table & Insights
Favicon
Week 1-4
Favicon
Day 01 , what did learn
Favicon
The Mind Is A Stateless Machine
Favicon
Learning in Reverse: How I Would Learn ASP. Net Core and Entity Framework If I Could Go Back In Time
Favicon
33rd day of my CP journey
Favicon
55th day of my CP journey
Favicon
59th day of my CP journey
Favicon
How My Old Laptop Taught Me More About Coding Than Any Course Ever Could
Favicon
Initial commit
Favicon
AWS Community: How User Groups Transformed My Cloud Career
Favicon
I Got A Perfect (100%) Score in My College-Level Python Course!
Favicon
Exploring the when guards feature in Kotlin 2.1
Favicon
My December Adventure (of code)
Favicon
A Promising Vision For Redefining The Way People Build...
Favicon
⚡️The Best Postman Alternative for IntelliJ Every Developer Will Want to Know! 🔥
Favicon
🎯 Track, Plan, Succeed: A Guide to 2025 Goal-Setting
Favicon
</2024>
Favicon
Our external realities have advanced far more than our internal cognitive level...
Favicon
CREATING AGELESS CONTENT
Favicon
I built a library of code snippets for developers
Favicon
Frequently asked questions on launch weeks

Featured ones:

Favicon
Open
abubakersiddique761
Favicon
Open
0x3d_site
Favicon
Open
0x2e_tech
Favicon
Open
0x4c-quest
Favicon
Open
gittech