1. HTML/CSS (Extended)

Semantic HTML

• Use semantic elements like <header>, <nav>, <section>, <article>, and <footer> for better accessibility and SEO.
• Improve the structure of your code by making it easier for browsers and developers to understand the content's meaning.
• Example: Replace <div> or <span> with elements like <main> for the main content and <aside> for sidebars.

CSS Basics

• Flexbox: Simplify your layout by using display: flex; to align and distribute space among items within a container. Flexbox makes it easier to create dynamic, responsive layouts.
• CSS Grid: Create advanced two-dimensional layouts with the grid system. Control both rows and columns, making complex layouts easier to handle.
• Example: Use grid-template-columns to define columns and grid-template-rows.

Responsive Web Design

• Ensure your web pages look good on all devices (desktops, tablets, phones).
• Use media queries in CSS to apply different styles based on screen size or device characteristics. This makes your design adaptive to various screen sizes without breaking the layout.
• Embrace relative units like percentages, em, rem, or vw for a more flexible, scalable design.
• Example of a media query:

2. JavaScript (Extended)

Core JavaScript Concepts

• Variables: Learn aboutvar,let, andconstfor creating variables. Know how they differ in where they can be used (scope) and whether they can be changed later (reassignability).
• Data Types: Familiarize yourself with primitive data types such as string, number, boolean, null, undefined, and complex data types like objects and arrays.
• Functions: Understand how to create and use functions to modularize and reuse code. Explore function expressions, function declarations, and arrow functions (introduced in ES6).
• Control Flow: Use if, else, and switch statements to control the flow of your program based on conditions.
• Loops: Learn looping structures like for, while, and forEach() to iterate over arrays or other data structures.
• Scope: Understand how variable scope works in JavaScript, focusing on block-level scope (with let and const) and function-level scope (with var).
• Example:

DOM Manipulation

• Selecting Elements: Learn how to select elements in the DOM using methods like getElementById(), querySelector(), and querySelectorAll().
• Modifying Content: Use innerHTML and textContent to dynamically update content on the webpage.
• Event Handling: Add interactivity by attaching event listeners to DOM elements using addEventListener(). Learn about event types (click, hover, etc.) and how to handle them.
• Classes and Styles: Use JavaScript to add, remove, or toggle classes and inline styles on elements to dynamically change their appearance.

ES6+ Features

• Arrow Functions: A shorter syntax for writing functions, often used in callbacks and cleaner code.
• Example:

• Template Literals: Use backticks ( ) to create strings with embedded variables and expressions for more readable code.
• Example:

• Destructuring: Easily extract values from objects or arrays into individual variables.
• Example:

• Promises: Handle asynchronous operations like API requests or timeouts. Learn the difference between resolve, reject, and the then() and catch() methods.
• Example:

Async/Await (A more modern way to handle asynchronous operations introduced in ES8)

• Simplifies working with promises by allowing you to write asynchronous code in a synchronous manner.
• Example:

3. Version Control (Git) (Extended)

Basic Git Commands

• git init: Initializes a new Git repository in your project directory, creating a .git folder to track changes.

git add: Stages changes for the next commit. You can specify individual files or use . to stage all changes.

git commit: Creates a snapshot of the staged changes with a message describing the commit. This is essential for version history.

git status: Displays the state of the working directory and the staging area. It shows changes that are staged for the next commit and those that aren’t.

git log: Shows the commit history for the project, allowing you to see the history of changes.

git push: Uploads local commits to a remote repository (like GitHub or GitLab).

git pull: Fetches and merges changes from a remote repository into your local branch, keeping your code up to date.

Branching and Merging

• git branch: List, create, or delete branches. Branching allows you to work on features or bug fixes in isolation without affecting the main project.
  • Create a new branch:

Switch to the branch:

Or create and switch in one step:

• git merge: Combine the changes from one branch into another. Often, you merge feature branches into the main or development branch.
  • Example: Merge feature-login into main:

Resolving Merge Conflicts: When two branches modify the same parts of the code, Git may not be able to automatically merge them. You’ll need to manually resolve conflicts, choose which changes to keep, and mark the conflict as resolved:

Working with Remote Repositories

• git remote add: Add a remote repository (like GitHub) to push your changes to or pull updates from. Typically, the remote is named origin.

git clone: Copy an existing repository from a remote source to your local machine. It also sets up the remote so you can push and pull changes.

Undoing Changes

• git reset: Reverts changes to the working directory or resets the commit history. Be cautious with this command, as it can rewrite history.

 

git revert: Creates a new commit that undoes changes from a specific commit without rewriting history. It’s a safer alternative to reset in shared repositories.

Stashing Changes

• git stash: Temporarily saves changes that are not ready for commit, allowing you to switch branches or pull new changes without losing your work. You can apply or discard stashed changes later.

Collaborating with Others

• Forking and Pull Requests: In open-source or shared repositories, forking creates a copy of the repository under your own account. You can then push changes to this copy and submit a pull request (PR) to the original repository to merge your changes.
• Code Reviews: Git’s collaboration model supports code reviews. Team members can review changes in PRs and comment on lines of code before merging.

Best Practices for Version Control

• Use Descriptive Commit Messages: Clearly describe what changes you’ve made in each commit. Avoid vague messages like fix bugs; instead, use fix login redirect issue.
• Commit Often, But Meaningfully: Make small, logical commits instead of one massive commit. This ensures each change is easier to review and understand.
• Create Feature Branches: Always work on new features or bug fixes in separate branches to keep the main branch clean and stable.
• Sync Regularly: Regularly pull changes from the remote repository to ensure your code is up to date and avoid conflicts.

4. Package Managers (npm/yarn) (Extended)

Managing JavaScript Dependencies

• Introduction to Package Managers: Package managers like npm (Node Package Manager) and yarn help you manage dependencies, which are libraries and tools your project relies on.
  • npm comes bundled with Node.js, and it’s widely used in JavaScript projects.
  • yarn is an alternative to npm, designed for faster and more reliable dependency management.
• Installing Dependencies: When you initialize a new project, the package.json file lists the libraries and their versions. Use the following commands to install dependencies:
  • Install all dependencies listed in package.json:

Install a specific package:The -save flag adds the package to your project’s package.json file, so others can easily install it.

• Package Versions: Learn how versioning works in package.json. You’ll see version numbers like ^1.0.0 or ~1.0.0. The caret (^) allows minor version updates, while the tilde (~) allows patch updates. You can also specify an exact version by omitting the caret or tilde.

  Example from package.json:

Creating a New Project

• npm init/yarn init: Initializes a new project and creates a package.json file that contains metadata about your project and its dependencies.During initialization, you’ll be prompted to enter details such as the project’s name, version, and description. Alternatively, you can use y to skip the prompts and use default settings.

Global vs Local Packages

• Global Packages: Installed across your system and can be used from any project. These packages are useful for tools like eslint or prettier that you want to use in multiple projects.
  • Install a global package:

• Local Packages: Installed only for the specific project and listed in package.json. Use local installation for project-specific dependencies.
  • Install a local package:

Scripts for Running and Building Projects

• npm scripts/yarn scripts: You can define custom scripts in the package.json file to automate tasks like running tests, starting a development server, or building the project for production. These scripts are run with the npm run or yarn run command. Example package.json with scripts:

Scripts for Running and Building Projects

• npm scripts/yarn scripts: You can define custom scripts in the package.json file to automate tasks like running tests, starting a development server, or building the project for production. These scripts are run with the npm run or yarn run command. Example package.json with scripts:

To run the scripts:

• Popular Scripts:
  • start: Often used to start a development server or application.
  • test: Runs tests using a testing framework like jest.
  • build: Prepares the project for production by bundling and minifying files.

Managing DevDependencies

• devDependencies: Packages used only during development, such as linters, testing frameworks, or build tools. These packages won’t be included in the final build when deploying the application.
  • Install a dev dependency:

In package.json, these dependencies are listed under devDependencies:

\

Updating and Removing Dependencies

• Updating Dependencies: Ensure your project uses the latest versions of dependencies to benefit from bug fixes, security patches, and new features.
  • Update a single package:

Update all packages:

Removing Dependencies: If a dependency is no longer needed, you can uninstall it and remove it from package.json:

Lock Files

• package-lock.json (npm)/yarn.lock (yarn): Lock files ensure that all developers working on a project install the exact same versions of dependencies, even if the dependencies' versions in package.json are flexible.
  • These files are automatically generated and updated when you install or update dependencies. They are essential for ensuring consistency across different environments.

Best Practices for Package Management

• Use lock files: Always commit the lock file (package-lock.json or yarn.lock) to your version control system to ensure consistency in dependencies across different environments.
• Use Semantic Versioning: Follow the rules of semantic versioning (major.minor.patch) when updating packages to avoid breaking changes.
• Organize devDependencies and dependencies: Separate dev tools from production packages by listing them under devDependencies and dependencies accordingly.
• Regularly update dependencies: Keep your project up to date with the latest versions of packages for security and performance improvements. Use tools like npm audit or yarn audit to find vulnerabilities in dependencies.

5. CSS Preprocessors (SASS or LESS) (Extended)

Introduction to CSS Preprocessors

• What are CSS Preprocessors?: CSS preprocessors like SASS and LESS extend the basic functionality of CSS by introducing variables, nesting, mixins, and more. They help write CSS that's more organized, maintainable, and reusable.
• SASS (Syntactically Awesome Style Sheets) and LESS (Leaner Style Sheets) are the two most popular preprocessors. SASS is more widely adopted due to its flexibility and power.

Variables

• CSS preprocessors allow you to define reusable variables, which is especially useful for colors, font sizes, spacing, etc.
• Example in SASS:

Example in LESS:

Nesting

• Preprocessors allow you to nest your CSS selectors, which reflects the HTML structure and improves readability.
• Example in SASS:

Example in LESS:

Mixins

• Mixins allow you to reuse a block of CSS throughout your project. You can define a mixin with parameters to make it even more flexible.
• Example in SASS:

Example in LESS: