feat/dashboard
Kamran Ahmed
6 months ago
commit
cf743ee618
520 changed files with 4364 additions and 6382 deletions
@ -1,38 +0,0 @@ |
||||
name: Update dependencies |
||||
|
||||
on: |
||||
workflow_dispatch: # allow manual run |
||||
schedule: |
||||
- cron: '0 0 * * 0' # every sunday at midnight |
||||
|
||||
jobs: |
||||
upgrade-deps: |
||||
runs-on: ubuntu-latest |
||||
steps: |
||||
- uses: actions/checkout@v4 |
||||
- uses: actions/setup-node@v3 |
||||
with: |
||||
node-version: 18 |
||||
- uses: pnpm/action-setup@v2.2.2 |
||||
with: |
||||
version: 7.13.4 |
||||
- name: Upgrade dependencies |
||||
run: | |
||||
pnpm install |
||||
npm run upgrade |
||||
pnpm install --lockfile-only |
||||
- name: Create PR |
||||
uses: peter-evans/create-pull-request@v4 |
||||
with: |
||||
delete-branch: false |
||||
branch: "update-deps" |
||||
base: "master" |
||||
labels: | |
||||
dependencies |
||||
automated pr |
||||
reviewers: kamranahmedse |
||||
commit-message: "chore: update dependencies to latest" |
||||
title: "Upgrade dependencies to latest" |
||||
body: | |
||||
Updates all dependencies to latest versions. |
||||
Please review the changes and merge if everything looks good. |
||||
@ -0,0 +1,51 @@ |
||||
name: Upgrade Dependencies |
||||
|
||||
on: |
||||
workflow_dispatch: |
||||
schedule: |
||||
- cron: '0 0 * * 0' |
||||
|
||||
jobs: |
||||
upgrade-deps: |
||||
runs-on: ubuntu-latest |
||||
steps: |
||||
- uses: actions/checkout@v4 |
||||
|
||||
- name: Setup Node.js Version 20 (LTS) |
||||
uses: actions/setup-node@v4 |
||||
with: |
||||
node-version: 20 |
||||
|
||||
- name: Setup pnpm@v9 |
||||
uses: pnpm/action-setup@v4 |
||||
with: |
||||
version: 9 |
||||
|
||||
- name: Install & Upgrade Dependencies |
||||
run: | |
||||
pnpm install |
||||
npm run upgrade |
||||
pnpm install --lockfile-only |
||||
|
||||
- name: Create Pull Request |
||||
uses: peter-evans/create-pull-request@v7 |
||||
with: |
||||
delete-branch: false |
||||
branch: "update-deps" |
||||
base: "master" |
||||
labels: | |
||||
dependencies |
||||
automated pr |
||||
reviewers: kamranahmedse |
||||
commit-message: "chore: update dependencies to latest" |
||||
title: "Upgrade Dependencies To Latest - Automated" |
||||
body: | |
||||
## Updated all Dependencies to Latest Versions. |
||||
|
||||
> [!IMPORTANT] |
||||
> This PR Upgrades the Dependencies to the Latest Their Versions. |
||||
> |
||||
> Commit: ${{ github.sha }} |
||||
> Workflow Path: ${{ github.workflow_ref }} |
||||
|
||||
**Please Review the Changes and Merge the PR if everything is fine.** |
||||
|
After Width: | Height: | Size: 15 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,15 @@ |
||||
import { type APIContext } from 'astro'; |
||||
import { api } from './api.ts'; |
||||
|
||||
export function projectApi(context: APIContext) { |
||||
return { |
||||
listProjectsUserCount: async function (projectIds: string[]) { |
||||
return api(context).post<Record<string, number>>( |
||||
`${import.meta.env.PUBLIC_API_URL}/v1-list-projects-user-count`, |
||||
{ |
||||
projectIds, |
||||
}, |
||||
); |
||||
}, |
||||
}; |
||||
} |
||||
@ -0,0 +1,30 @@ |
||||
import { useState } from 'react'; |
||||
import { X } from 'lucide-react'; |
||||
|
||||
type PaidResourceDisclaimerProps = { |
||||
onClose: () => void; |
||||
}; |
||||
|
||||
export function PaidResourceDisclaimer(props: PaidResourceDisclaimerProps) { |
||||
const { onClose } = props; |
||||
|
||||
return ( |
||||
<div className="relative ml-3 mt-4 rounded-md bg-gray-100 p-3 px-3 text-xs text-gray-500"> |
||||
<button className="absolute right-1 top-1" onClick={onClose}> |
||||
<X size={16} className="absolute right-2 top-2 cursor-pointer" /> |
||||
</button> |
||||
|
||||
<p className="mb-1 font-medium text-gray-800"> |
||||
Note on Premium Resources |
||||
</p> |
||||
<p className="mb-1"> |
||||
These are optional paid resources vetted by the roadmap team. |
||||
</p> |
||||
<p> |
||||
If you purchase a resource, we may receive a small commission at no |
||||
extra cost to you. This helps us offset the costs of running this site |
||||
and keep it free for everyone. |
||||
</p> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,48 @@ |
||||
--- |
||||
title: 'Accessible Form UI' |
||||
description: 'Create an accessible form UI using HTML and CSS.' |
||||
isNew: false |
||||
sort: 7 |
||||
difficulty: 'beginner' |
||||
nature: 'Accessibility' |
||||
skills: |
||||
- 'HTML' |
||||
- 'CSS' |
||||
- 'Layouts' |
||||
- 'Positioning' |
||||
- 'Accessibility' |
||||
seo: |
||||
title: 'Create an Accessible Form UI for a Website Using HTML and CSS' |
||||
description: 'Learn how to create an accessible form component using HTML and CSS.' |
||||
keywords: |
||||
- 'accessible forms' |
||||
- 'css project idea' |
||||
- 'responsive design' |
||||
- 'html and css' |
||||
roadmapIds: |
||||
- 'frontend' |
||||
|
||||
--- |
||||
|
||||
In this project, you are required to create a form UI using only HTML and CSS. The form will include fields for a full name, email, password, and confirm password, along with a button to toggle the visibility of the password text. Additionally, the form will feature a completeness progress bar and a checklist of requirements that must be met for the form to reach 100% completeness. While this version of the form won’t be functional, it will be a static UI component that can be enhanced with JavaScript in the future. |
||||
|
||||
The goal of this project is to not only help you practice your HTML and CSS but also to focus on creating an accessible form that is easy to use for all users, including those with disabilities. Given below is the rough mockup of the form UI that you need to create: |
||||
|
||||
[](https://assets.roadmap.sh/guest/form-components-7t4b3.png) |
||||
|
||||
## Accessibility Guidelines |
||||
|
||||
You should read up on accessibility guidelines and best practices before starting this project. However, here are some key points to keep in mind while creating an accessible form UI: |
||||
|
||||
- **Labeling**: Ensure that each form field has a corresponding `<label>` element that is clearly associated with the field using the `for` attribute. |
||||
- **Focus State**: Style the focus state of each input field so that users navigating with a keyboard can easily see which field is currently active. |
||||
- **Error Messaging**: Consider adding space for error messages that can be displayed when a user inputs invalid data. These messages should be clearly associated with the relevant input field. |
||||
- **ARIA Attributes**: Use ARIA (Accessible Rich Internet Applications) attributes where necessary, such as `aria-required` for required fields and `aria-invalid` for fields with errors. |
||||
- **Color Contrast**: Ensure that the color contrast between text and background is sufficient to meet WCAG (Web Content Accessibility Guidelines) standards, making the form readable for users with visual impairments. |
||||
- **Interactive Elements**: Make sure that the button to show/hide the password is accessible via keyboard and screen readers, providing clear feedback on the current state (e.g., "Password is hidden" or "Password is visible"). |
||||
|
||||
Once done, you can test the form UI using a screen reader or browser extensions like Axe or Lighthouse to check for accessibility issues and make necessary adjustments. |
||||
|
||||
--- |
||||
|
||||
After completing this project, you will have a solid foundation in creating accessible and well-structured forms using HTML and CSS. You can later enhance this form by adding JavaScript to make it fully functional and dynamic in future projects. |
||||
@ -0,0 +1,30 @@ |
||||
--- |
||||
title: 'Accordion' |
||||
description: 'Create an accordion component using HTML, CSS, and JavaScript.' |
||||
isNew: false |
||||
sort: 18 |
||||
difficulty: 'beginner' |
||||
nature: 'JavaScript' |
||||
skills: |
||||
- 'HTML' |
||||
- 'CSS' |
||||
- 'JavaScript' |
||||
- 'DOM Manipulation' |
||||
seo: |
||||
title: 'Build an Accordion Component with JavaScript' |
||||
description: 'Learn how to create a responsive accordion component that allows users to toggle between different sections of content.' |
||||
keywords: |
||||
- 'accordion' |
||||
- 'javascript accordion' |
||||
- 'html and css' |
||||
roadmapIds: |
||||
- 'frontend' |
||||
--- |
||||
|
||||
You are required to create an accordion component that displays a list of questions or headings. When a user clicks on a question, its corresponding answer or content section will expand while collapsing any previously opened section. This allows only one section to be open at a time, keeping the UI clean and organized. |
||||
|
||||
Given below is the mockup showing the accordion in its default and expanded states: |
||||
|
||||
[](https://assets.roadmap.sh/guest/accordion-rbvpo.png) |
||||
|
||||
This project will help you practice DOM manipulation, event handling, and implementing responsive design patterns using JavaScript. |
||||
@ -0,0 +1,35 @@ |
||||
--- |
||||
title: 'Changelog Component' |
||||
description: 'Create a changelog component for a website using HTML and CSS.' |
||||
isNew: false |
||||
sort: 4 |
||||
difficulty: 'beginner' |
||||
nature: 'CSS' |
||||
skills: |
||||
- 'HTML' |
||||
- 'Layouts' |
||||
- 'CSS' |
||||
- 'Flexbox' |
||||
seo: |
||||
title: 'Create a Changelog Component Website Using HTML and CSS' |
||||
description: 'Learn how to create a changelog component for a website using HTML and CSS.' |
||||
keywords: |
||||
- 'basic css' |
||||
- 'css project idea' |
||||
- 'responsive design' |
||||
- 'html and css' |
||||
roadmapIds: |
||||
- 'frontend' |
||||
--- |
||||
|
||||
In this project you are required to create a simple component for a website that displays a changelog. A changelog is a log or record of all notable changes made to a project or software. It is often used to keep users informed about the latest updates and improvements. |
||||
|
||||
The goal of this project is to teach you about positioning and layout in CSS. You will create a simple HTML structure and use CSS to style it into a visually appealing and responsive changelog component. Given below is a rough mockup of the changelog component you need to create. |
||||
|
||||
[](https://assets.roadmap.sh/guest/changelog-component-1m86j.png) |
||||
|
||||
Feel free to customize the design and layout of the component as you see fit. The focus should be on creating a well-structured and responsive component that can be easily integrated into a website. |
||||
|
||||
--- |
||||
|
||||
After completing this project, you will have a good understanding of how to create simple layouts using HTML and CSS. You can further enhance your skills by exploring more complex layouts, such as grids and flexbox, in future projects. |
||||
@ -0,0 +1,32 @@ |
||||
--- |
||||
title: 'Cookie Consent' |
||||
description: 'Create a simple cookie consent banner using JavaScript.' |
||||
isNew: false |
||||
sort: 12 |
||||
difficulty: 'beginner' |
||||
nature: 'JavaScript' |
||||
skills: |
||||
- 'HTML' |
||||
- 'CSS' |
||||
- 'JavaScript' |
||||
- 'DOM Manipulation' |
||||
seo: |
||||
title: 'Create a Cookie Consent Popup Using HTML, CSS, and JavaScript' |
||||
description: 'Learn how to build a cookie consent popup with basic JavaScript for managing user consent.' |
||||
keywords: |
||||
- 'cookie consent' |
||||
- 'javascript popup' |
||||
- 'html and css' |
||||
- 'javascript project' |
||||
roadmapIds: |
||||
- 'frontend' |
||||
|
||||
--- |
||||
|
||||
This project is designed to introduce you to basic DOM manipulation and event handling in JavaScript. |
||||
|
||||
Many websites display a cookie consent popup to inform users about the use of cookies and to obtain their consent. In this project, you will create a simple cookie consent popup that appears when the user visits the page. The popup will include a message and a button to accept the consent. Once accepted, the popup will disappear. Given below is an example of how the popup might look: |
||||
|
||||
[](https://assets.roadmap.sh/guest/cookie-consent-banner-07etz.png) |
||||
|
||||
Bonus points if you persist the user's consent using cookies or local storage and prevent the popup from appearing on subsequent visits. |
||||
@ -0,0 +1,30 @@ |
||||
--- |
||||
title: 'Custom Dropdown' |
||||
description: 'Create a custom dropdown using HTML, CSS, and JavaScript.' |
||||
isNew: false |
||||
sort: 19 |
||||
difficulty: 'intermediate' |
||||
nature: 'JavaScript' |
||||
skills: |
||||
- 'HTML' |
||||
- 'CSS' |
||||
- 'JavaScript' |
||||
- 'DOM Manipulation' |
||||
seo: |
||||
title: 'Build a Custom Dropdown Menu with JavaScript' |
||||
description: 'Learn how to create a fully customizable dropdown menu that allows users to select an item and see the selection reflected in the dropdown.' |
||||
keywords: |
||||
- 'custom dropdown' |
||||
- 'javascript dropdown' |
||||
- 'html and css' |
||||
roadmapIds: |
||||
- 'frontend' |
||||
--- |
||||
|
||||
You will create a custom dropdown menu that lets users select an item from a list. The dropdown should have a default state showing a placeholder text, an open state revealing all options, and a selected state where the chosen item is displayed. When an item is selected, the dropdown closes, and the selected item is highlighted. |
||||
|
||||
Given below is the mockup showing the dropdown in its default, open, and selected states: |
||||
|
||||
[](https://assets.roadmap.sh/guest/dropdown-1f4b3.png) |
||||
|
||||
This project will help you practice DOM manipulation, event handling, and creating responsive and interactive elements with JavaScript. |
||||
@ -0,0 +1,36 @@ |
||||
--- |
||||
title: 'Datepicker UI' |
||||
description: 'Create a simple datepicker UI using HTML and CSS.' |
||||
isNew: false |
||||
sort: 6 |
||||
difficulty: 'beginner' |
||||
nature: 'CSS' |
||||
skills: |
||||
- 'HTML' |
||||
- 'CSS' |
||||
- 'Layouts' |
||||
- 'Positioning' |
||||
seo: |
||||
title: 'Create a Datepicker UI for a Website Using HTML and CSS' |
||||
description: 'Learn how to create a datepicker component using HTML and CSS.' |
||||
keywords: |
||||
- 'basic css' |
||||
- 'css project idea' |
||||
- 'responsive design' |
||||
- 'html and css' |
||||
roadmapIds: |
||||
- 'frontend' |
||||
|
||||
--- |
||||
|
||||
In this project, you are required to create a simple datepicker UI using only HTML and CSS. It will not be a functional datepicker, but a static UI component that you can later enhance with JavaScript. |
||||
|
||||
The goal of this project is to help you practice positioning, layout, and styling techniques in CSS. Below is a rough mockup showing the datepicker UI you need to create. |
||||
|
||||
[](https://assets.roadmap.sh/guest/datepicker-ui-7l480.png) |
||||
|
||||
Feel free to customize the colors, fonts, and overall design to match your style. |
||||
|
||||
--- |
||||
|
||||
While this version won't be functional, it will provide a solid foundation for creating an interactive datepicker in a future project. |
||||
@ -0,0 +1,39 @@ |
||||
--- |
||||
title: 'GitHub Random Repository' |
||||
description: 'Create a GitHub random repository finder using GitHub API.' |
||||
isNew: false |
||||
sort: 25 |
||||
difficulty: 'intermediate' |
||||
nature: 'API Integration' |
||||
skills: |
||||
- 'HTML' |
||||
- 'CSS' |
||||
- 'JavaScript' |
||||
- 'API Integration' |
||||
- 'DOM Manipulation' |
||||
seo: |
||||
title: 'Build a GitHub Repository Finder with JavaScript and GitHub API' |
||||
description: 'Learn how to create a dynamic application that fetches random GitHub repositories based on a chosen language and displays key information like stars, forks, and issues.' |
||||
keywords: |
||||
- 'github api' |
||||
- 'repository finder' |
||||
- 'javascript project' |
||||
roadmapIds: |
||||
- 'frontend' |
||||
|
||||
--- |
||||
|
||||
This project is designed to introduce you to working with external APIs, handling asynchronous requests, and managing different UI states with JavaScript. |
||||
|
||||
You will create a GitHub repository finder that allows users to select a programming language from a dropdown menu. The app will then use the GitHub Repository Search API to fetch and display a random repository that matches the selected language. The displayed information should include the repository name, description, number of stars, forks, and open issues. Users can fetch another random repository with a button click. |
||||
|
||||
[](https://assets.roadmap.sh/guest/github-repo-finder-n2qz4.png) |
||||
|
||||
The application should handle loading, empty, and error states effectively. After successfully fetching a repository, a "Refresh" button should appear to allow users to get another random repository. |
||||
|
||||
Here are the links to the resources you will need for this project: |
||||
|
||||
- [GitHub Repository Search API](https://docs.github.com/en/rest/reference/search#search-repositories) |
||||
- [Programming Language Data](https://raw.githubusercontent.com/kamranahmedse/githunt/master/src/components/filters/language-filter/languages.json) |
||||
|
||||
This project will help you practice API integration, managing asynchronous data, and enhancing user experience with responsive UI states. |
||||
@ -0,0 +1,51 @@ |
||||
--- |
||||
title: 'Image Grid Layout' |
||||
description: 'Create a grid layout of images using HTML and CSS.' |
||||
isNew: false |
||||
sort: 8 |
||||
difficulty: 'beginner' |
||||
nature: 'CSS' |
||||
skills: |
||||
- 'HTML' |
||||
- 'CSS' |
||||
- 'Grid Layout' |
||||
- 'Responsive Design' |
||||
seo: |
||||
title: 'Create an Image Grid Layout for a Website Using HTML and CSS' |
||||
description: 'Learn how to create a responsive grid layout of images using HTML and CSS.' |
||||
keywords: |
||||
- 'css grid' |
||||
- 'image layout' |
||||
- 'responsive design' |
||||
- 'html and css' |
||||
roadmapIds: |
||||
- 'frontend' |
||||
|
||||
--- |
||||
|
||||
In this project, you are required to create a grid layout using HTML and CSS. You will be provided with six images that need to be arranged in a grid pattern based on the provided mockup. The primary focus of this project is to help you learn and practice the CSS Grid layout technique, which is essential for creating responsive and flexible web layouts. |
||||
|
||||
The goal of this project is to give you hands-on experience with CSS Grid, allowing you to create complex layouts with ease. Below is a rough mockup showing the grid layout you need to create along with the six images that you should use. |
||||
|
||||
[](https://assets.roadmap.sh/guest/image-grid.jpg) |
||||
|
||||
You can use the same images provided in the mockup or replace them with your own images. The grid layout should be responsive, meaning it should adapt to different screen sizes and maintain a visually appealing design. |
||||
|
||||
- [A foggy beach with a large rock formation in the foreground](https://unsplash.com/photos/a-foggy-beach-with-a-large-rock-formation-in-the-foreground-TTExgxV06KA) |
||||
- [A living room with a white couch and a round window](https://unsplash.com/photos/a-living-room-with-a-white-couch-and-a-round-window-Wuu6H3mI7UA) |
||||
- [A table topped with plates and bowls of food](https://unsplash.com/photos/a-table-topped-with-plates-and-bowls-of-food-zx8_8jwZ5m8) |
||||
- [A building with a red door and a tree in front of it](https://unsplash.com/photos/a-building-with-a-red-door-and-a-tree-in-front-of-it-uTd-kylh7bE) |
||||
- [A row of white apartment buildings next to a street](https://unsplash.com/photos/a-row-of-white-apartment-buildings-next-to-a-street-f1PzRPbqt0M) |
||||
- [A view of a beach from the top of a hill](https://unsplash.com/photos/a-view-of-a-beach-from-the-top-of-a-hill-SAyIShcE5rs) |
||||
|
||||
Key learning objectives of this project include: |
||||
|
||||
- **Grid Structure**: Understand the fundamentals of CSS Grid, including defining grid containers, rows, columns, and how to place items within the grid. |
||||
|
||||
- **Responsive Design**: Learn how to make the grid layout responsive so that it adapts to different screen sizes. This might involve changing the number of columns or the layout of the images based on the viewport width. |
||||
|
||||
- **Alignment and Spacing**: Explore how to align grid items and manage spacing between them to achieve a clean and visually appealing layout. |
||||
|
||||
--- |
||||
|
||||
By completing this project, you will gain confidence in using CSS Grid to create flexible and responsive layouts. You can further apply these skills to more complex projects as you continue learning web design and development. |
||||
@ -0,0 +1,54 @@ |
||||
--- |
||||
title: 'Personal Portfolio' |
||||
description: 'Convert the previous simple HTML website into a personal portfolio.' |
||||
isNew: false |
||||
sort: 3 |
||||
difficulty: 'beginner' |
||||
nature: 'CSS' |
||||
skills: |
||||
- 'CSS' |
||||
- 'Responsive Design' |
||||
- 'Box Model' |
||||
- 'Typography' |
||||
- 'Flexbox' |
||||
seo: |
||||
title: 'Create a Personal Portfolio Website Using HTML and CSS' |
||||
description: 'Learn how to style a website using CSS by converting a simple HTML website into a personal portfolio.' |
||||
keywords: |
||||
- 'basic css' |
||||
- 'css project idea' |
||||
- 'responsive design' |
||||
- 'html and css' |
||||
roadmapIds: |
||||
- 'frontend' |
||||
|
||||
--- |
||||
|
||||
> The goal of this project is to teach you how to style a website using CSS. You will take the structure from the [previous HTML-only project](/projects/basic-html-website) and apply various CSS techniques to enhance its appearance and responsiveness. |
||||
|
||||
In this project, you will style the HTML website structure you created previously [in a different project](/projects/basic-html-website). The focus will be on learning how to use CSS to create responsive layouts, apply color and typography, and enhance the overall design of your website. |
||||
|
||||
Rough mockups of the website structure for mobile and desctop devices are given below. Do not worry about the design details i.e. colors backgrounds etc at this stage; we are not looking for a beautiful design, but a well-structured and responsive website. Just focus on making the layout same as the mockup and ensuring it looks good on different screen sizes. |
||||
|
||||
[](https://assets.roadmap.sh/guest/portfolio-template-xdhki.png) |
||||
|
||||
## Submission Requirements |
||||
|
||||
Your submission should include: |
||||
|
||||
- A fully styled, responsive website with the same structure as the previous project. |
||||
- Consistent use of a chosen color scheme and typography. |
||||
- Proper use of CSS techniques like Flexbox, media queries, and the box model. |
||||
- A responsive navigation bar and well-styled contact form. |
||||
|
||||
## Bonus Points |
||||
|
||||
For bonus points, you can: |
||||
|
||||
- Use [Google Fonts](https://fonts.google.com/) to enhance the typography of your website. |
||||
- Look into [GitHub Pages](https://pages.github.com/) or [Cloudflare Pages](https://pages.cloudflare.com/) to host your website for free. |
||||
- Add support for dark mode using CSS variables. |
||||
|
||||
--- |
||||
|
||||
After completing this project, you will have a solid understanding of how to style a basic HTML website using CSS. You can move on to more advanced topics, such as CSS animations, transitions, and grid layouts, in future projects. |
||||
@ -0,0 +1,42 @@ |
||||
--- |
||||
title: 'Reddit Client' |
||||
description: 'Create a Reddit client with customizable subreddit lanes.' |
||||
isNew: false |
||||
sort: 26 |
||||
difficulty: 'intermediate' |
||||
nature: 'API Integration' |
||||
skills: |
||||
- 'HTML' |
||||
- 'CSS' |
||||
- 'JavaScript' |
||||
- 'API Integration' |
||||
- 'DOM Manipulation' |
||||
- 'Asynchronous Programming' |
||||
seo: |
||||
title: 'Build a Multi-Lane Reddit Client with JavaScript and Reddit API' |
||||
description: 'Learn how to create a dynamic browser-based Reddit client that allows users to add and view multiple subreddits in customizable lanes.' |
||||
keywords: |
||||
- 'reddit api' |
||||
- 'subreddit viewer' |
||||
- 'javascript project' |
||||
- 'multi-lane client' |
||||
roadmapIds: |
||||
- 'frontend' |
||||
|
||||
--- |
||||
|
||||
You are required to create a browser-based Reddit client that displays multiple subreddits in separate, customizable lanes. You'll work with the Reddit JSON feed to fetch posts from different subreddits and display them in a dynamic, responsive layout. |
||||
|
||||
The application will allow users to add new subreddit lanes by entering a subreddit name. It will verify the existence of the subreddit, fetch its posts, and display them in a new lane. Each lane will show the subreddit's posts, including titles, authors, and vote counts. |
||||
|
||||
[](https://assets.roadmap.sh/guest/reddit-client-o876k.png) |
||||
|
||||
To fetch data from reddit, you can use the JSON feed available at the following URL. You can also use the Reddit API to fetch more details about the posts, such as comments, upvotes, and more. |
||||
|
||||
```plaintext |
||||
https://www.reddit.com/r/{subreddit}.json |
||||
``` |
||||
|
||||
The application should handle loading states while fetching data, display error messages for invalid subreddits or API issues, and provide a smooth user experience when adding or removing lanes. You can use local storage to save the user's custom lanes and restore them when the application is reloaded. |
||||
|
||||
This project will help you practice API integration, state management, asynchronous programming, and creating a responsive, dynamic user interface. It's an excellent opportunity to enhance your skills in frontend development and working with real-time data. |
||||
@ -0,0 +1,29 @@ |
||||
--- |
||||
title: 'Restricted Textarea' |
||||
description: 'Create a textarea with live character count and a max character limit.' |
||||
isNew: false |
||||
sort: 15 |
||||
difficulty: 'beginner' |
||||
nature: 'JavaScript' |
||||
skills: |
||||
- 'HTML' |
||||
- 'CSS' |
||||
- 'JavaScript' |
||||
- 'DOM Manipulation' |
||||
seo: |
||||
title: 'Build a Restricted Textarea with JavaScript' |
||||
description: 'Learn how to create a textarea with live character count and a maximum limit, with visual feedback as the limit is reached.' |
||||
keywords: |
||||
- 'character count' |
||||
- 'textarea limit' |
||||
- 'javascript input' |
||||
- 'html and css' |
||||
roadmapIds: |
||||
- 'frontend' |
||||
--- |
||||
|
||||
You are required to create a textarea that tracks and displays the number of characters typed by the user, along with a maximum character limit. As the user types, the character count will update dynamically. Once the limit is reached, the textarea will prevent further input and the border will turn red to visually indicate the limit has been hit. |
||||
|
||||
[](https://assets.roadmap.sh/guest/textarea-input-vdclr.png) |
||||
|
||||
This project will help you practice manipulating input elements with JavaScript, handling user input events, and providing real-time feedback to enhance user experience. |
||||
@ -0,0 +1,32 @@ |
||||
--- |
||||
title: 'Tabs' |
||||
description: 'Create a simple tabs component using HTML, CSS, and JavaScript.' |
||||
isNew: false |
||||
sort: 10 |
||||
difficulty: 'beginner' |
||||
nature: 'JavaScript' |
||||
skills: |
||||
- 'HTML' |
||||
- 'CSS' |
||||
- 'JavaScript' |
||||
- 'DOM Manipulation' |
||||
seo: |
||||
title: 'Create a Tabs Functionality Using HTML, CSS, and JavaScript' |
||||
description: 'Learn how to build a tabs component with basic JavaScript for switching between content sections.' |
||||
keywords: |
||||
- 'javascript tabs' |
||||
- 'dynamic content' |
||||
- 'html and css' |
||||
- 'javascript project' |
||||
roadmapIds: |
||||
- 'frontend' |
||||
|
||||
--- |
||||
|
||||
This project is designed to introduce you to basic DOM manipulation and event handling in JavaScript. |
||||
|
||||
You are required to create a simple tabs functionality using HTML, CSS, and basic JavaScript. The page will have four tabs, with the first tab being active by default. When the user clicks on another tab, the content of the current tab will be hidden, and the content of the selected tab will be displayed. |
||||
|
||||
[](https://assets.roadmap.sh/guest/simple-tabs-8e6gy.png) |
||||
|
||||
This project will help you practice selecting elements with JavaScript, listen for click events, and manipulate the dom to show or hide relevant tab content. |
||||
@ -0,0 +1,49 @@ |
||||
--- |
||||
title: 'Single-Page CV' |
||||
description: 'Create a single-page HTML CV to showcase your career history' |
||||
isNew: false |
||||
sort: 1 |
||||
difficulty: 'beginner' |
||||
nature: 'HTML' |
||||
skills: |
||||
- 'HTML' |
||||
- 'Semantic HTML' |
||||
- 'Layout' |
||||
- 'SEO' |
||||
seo: |
||||
title: 'Single-Page HTML CV Project' |
||||
description: 'Create a simple single-page HTML CV that displays your education, skills, and career history.' |
||||
keywords: |
||||
- 'html cv' |
||||
- 'single-page cv' |
||||
- 'html resume' |
||||
roadmapIds: |
||||
- 'frontend' |
||||
--- |
||||
|
||||
> The goal of this project is to teach you how to create a structured, single-page CV using only HTML. You will focus on laying out your education, skills, and career history in a clean, semantic manner. Styling will be addressed in a later project. |
||||
|
||||
In this project, you are required to create a single-page CV (Curriculum Vitae) using only HTML. Your webpage should look like the following image: |
||||
|
||||
 |
||||
|
||||
Key requirements for this project: |
||||
|
||||
- **Semantic HTML**: Use appropriate HTML tags to structure your CV. |
||||
- **SEO Meta Tags**: Include essential meta tags for SEO. |
||||
- **Open Graph (OG) Tags**: Add OG tags for better social media sharing. |
||||
- **Favicon**: Add a favicon for your CV page. |
||||
|
||||
The structure of your CV should be easily understandable and ready for styling in a future project. |
||||
|
||||
### Submission Checklist: |
||||
|
||||
- Semantically correct HTML structure. |
||||
- Single-page layout with sections for education, skills, and career history. |
||||
- SEO meta tags in the head section. |
||||
- OG tags for better social media sharing. |
||||
- A favicon linked in the head section. |
||||
|
||||
<hr /> |
||||
|
||||
By completing this project, you'll gain a solid understanding of how to create a single-page CV using HTML, apply basic SEO principles, and prepare your webpage for future styling. This foundation will enable you to move on to styling the CV using CSS in subsequent projects. |
||||
@ -0,0 +1,34 @@ |
||||
--- |
||||
title: 'Task Tracker' |
||||
description: 'Create a task tracker with a to-do list using JavaScript.' |
||||
isNew: false |
||||
sort: 22 |
||||
difficulty: 'intermediate' |
||||
nature: 'JavaScript' |
||||
skills: |
||||
- 'HTML' |
||||
- 'CSS' |
||||
- 'JavaScript' |
||||
- 'DOM Manipulation' |
||||
seo: |
||||
title: 'Build a Task Tracker with JavaScript' |
||||
description: 'Learn how to create a dynamic task tracker that allows users to add, complete, and delete tasks with real-time updates.' |
||||
keywords: |
||||
- 'task tracker' |
||||
- 'to-do list' |
||||
- 'javascript project' |
||||
roadmapIds: |
||||
- 'frontend' |
||||
--- |
||||
|
||||
You are required to create a task tracker that lets users add new tasks, mark them as complete, or delete them. Completed tasks will be moved to the end of the list and will have strikethrough, and users can unmark tasks to return them to the pending list. |
||||
|
||||
Here is the mockup of the task tracker: |
||||
|
||||
[](https://assets.roadmap.sh/guest/task-tracker-2diba.png) |
||||
|
||||
## Hint |
||||
|
||||
Store your tasks in an array of objects, where each object represents a task with properties like description and status (completed or not). Whenever a new task is added, updated, deleted, or marked as complete/uncomplete, update the tasks array. Write a function `renderTasks` which will remove all tasks from the DOM and re-render them based on the updated tasks array. |
||||
|
||||
This project will help you practice array manipulation, event handling, and dynamic DOM updates using JavaScript. |
||||
@ -0,0 +1,33 @@ |
||||
--- |
||||
title: Temperature Converter |
||||
description: Build a temperature converter that converts between different units. |
||||
isNew: false |
||||
sort: 27 |
||||
difficulty: intermediate |
||||
nature: JavaScript |
||||
skills: |
||||
- HTML |
||||
- CSS |
||||
- JavaScript |
||||
- DOM Manipulation |
||||
seo: |
||||
- title: Build a Temperature Converter with JavaScript |
||||
- description: Learn how to create an interactive temperature converter that converts between Celsius, Fahrenheit, and Kelvin using JavaScript. |
||||
- keywords: |
||||
- 'temperature converter' |
||||
- 'javascript project' |
||||
- 'unit conversion' |
||||
- 'html and css' |
||||
roadmapIds: |
||||
- 'frontend' |
||||
--- |
||||
|
||||
This project is designed to help you practice DOM manipulation, form handling, and basic calculations in JavaScript. |
||||
|
||||
You will create a temperature converter that allows users to enter a temperature value, select the unit they want to convert from, and select the unit they want to convert to. The "Convert" button should only be enabled when all three fields are filled in. Once the user clicks "Convert," the tool will display the converted temperature below the form. |
||||
|
||||
Here is a mockup of what the temperature converter might look like: |
||||
|
||||
[](https://assets.roadmap.sh/guest/temperature-converter-8omel.png) |
||||
|
||||
This project will help you gain experience with handling user input, conditionally enabling form elements, and performing simple calculations using JavaScript. |
||||
@ -0,0 +1,37 @@ |
||||
--- |
||||
title: 'Testimonial Cards' |
||||
description: 'Create testimonial cards for a website using HTML and CSS.' |
||||
isNew: false |
||||
sort: 5 |
||||
difficulty: 'beginner' |
||||
nature: 'CSS' |
||||
skills: |
||||
- 'HTML' |
||||
- 'CSS' |
||||
- 'Layouts' |
||||
- 'Flexbox' |
||||
- 'Positioning' |
||||
seo: |
||||
title: 'Create Testimonial Cards for a Website Using HTML and CSS' |
||||
description: 'Learn how to create testimonial components using HTML and CSS.' |
||||
keywords: |
||||
- 'basic css' |
||||
- 'css project idea' |
||||
- 'responsive design' |
||||
- 'html and css' |
||||
roadmapIds: |
||||
- 'frontend' |
||||
|
||||
--- |
||||
|
||||
In this project, you are required to create a bunch of testimonial cards. Testimonials are quotes or statements from satisfied customers or users, often used on websites to build credibility and trust. |
||||
|
||||
The goal of this project is to teach you about positioning and layout in CSS. Below is a rough mockup showing some testimonial cards. Each card is designed to help you understand different layout and positioning techniques. |
||||
|
||||
[](https://assets.roadmap.sh/guest/testimonials-min-3j2j4.png) |
||||
|
||||
Feel free to use any content and images you like for the testimonials. |
||||
|
||||
--- |
||||
|
||||
After completing this project, you will have a good understanding of how to create layouts using HTML and CSS. You can further enhance your skills by exploring more complex projects as you progress. |
||||
@ -0,0 +1,34 @@ |
||||
--- |
||||
title: 'Tooltip UI' |
||||
description: 'Create a tooltip for navigation items using only HTML and CSS.' |
||||
isNew: false |
||||
sort: 9 |
||||
difficulty: 'beginner' |
||||
nature: 'CSS' |
||||
skills: |
||||
- 'HTML' |
||||
- 'CSS' |
||||
- 'Positioning' |
||||
- 'Hover Effects' |
||||
seo: |
||||
title: 'Create a CSS Tooltip for Navigation Items' |
||||
description: 'Learn how to create a tooltip that appears above navigation items on hover using only HTML and CSS.' |
||||
keywords: |
||||
- 'css tooltip' |
||||
- 'hover effects' |
||||
- 'navigation menu' |
||||
- 'html and css' |
||||
roadmapIds: |
||||
- 'frontend' |
||||
|
||||
--- |
||||
|
||||
In this project, you are required to create a tooltip that appears above navigation items when hovered, using only HTML and CSS. A tooltip is a small pop-up box that provides additional information about a navigation item when a user hovers over it. This project will focus on mastering CSS positioning, hover effects, and creating visually appealing tooltips without relying on JavaScript. |
||||
|
||||
The goal of this project is to help you understand how to use CSS for dynamic UI effects. You will learn how to position elements relative to each other, create smooth transitions, and make your navigation more interactive and user-friendly. Below is a rough mockup showing the tooltip appearing above a navigation item. |
||||
|
||||
[](https://assets.roadmap.sh/guest/tooltip-zh8gm.png) |
||||
|
||||
Bonus points for different animations for the tooltip, such as fade-in, slide-in, or scale-in effects. |
||||
|
||||
After completing this project, you will have a better understanding of CSS positioning, hover effects, and creating interactive UI elements without JavaScript. |
||||
@ -0,0 +1,7 @@ |
||||
# Frame Layout |
||||
|
||||
**FrameLayout** is a simple ViewGroup subclass in Android that is designed to hold a single child view or a stack of overlapping child views. It positions each child in the top-left corner by default and allows them to overlap on top of each other, which makes it useful for situations where you need to layer views on top of one another. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Android developers: Frame Layout](https://developer.android.com/reference/android/widget/FrameLayout) |
||||
@ -0,0 +1,9 @@ |
||||
# LinearLayout |
||||
|
||||
**LinearLayout** is a view group that aligns all children in a single directioni, vertically or horizontally. You can specify the layout direction with the `android:orientation` attribute. |
||||
|
||||
**LinearLayout** was commonly used in earlier Android development, but with the introduction of ConstraintLayout, it’s less frequently used in modern apps. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Android developers: Linear Layout](https://developer.android.com/develop/ui/views/layout/linear) |
||||
@ -0,0 +1,9 @@ |
||||
# RelativeLayout |
||||
|
||||
A **RelativeLayout** in Android is a type of ViewGroup that allows you to position child views relative to each other or relative to the parent layout. It's a flexible layout where you can arrange the child views in relation to one another based on certain rules, making it suitable for creating complex UI designs. |
||||
|
||||
**RelativeLayout** was commonly used in earlier Android development, but with the introduction of `ConstraintLayout`, it's less frequently used in modern apps. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Android developers: Relative Layout](https://developer.android.com/develop/ui/views/layout/relative) |
||||
@ -1 +1,18 @@ |
||||
# Communication |
||||
|
||||
Angular components can communicate with each other using `@Input()` and `@Output()` decorators. These decorators facilitate data exchange between parent and child components. |
||||
|
||||
- **@Input()**: This decorator allows a parent component to pass data to a child component, enabling the child to receive and use the data. |
||||
- **@Output()**: This decorator allows a child component to emit events to a parent component, enabling the parent to respond to changes or actions within the child component. |
||||
|
||||
Additionally, **model inputs** are a special type of input that enable two-way data binding. This means that changes in the child component can be propagated back to the parent component, ensuring synchronization between the two. Model inputs automatically create a corresponding output, typically named by appending “Change” to the input’s name, to facilitate this two-way communication. |
||||
|
||||
To facilitate communication between unrelated components, it’s most effective to trigger events using `EventEmitter` and have the components listen for these events. This approach ensures a decoupled and flexible architecture, allowing components to interact seamlessly without direct dependencies. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Official Website - Inputs](https://angular.dev/guide/components/inputs) |
||||
- [@official@Angular Official Website - Outputs](https://angular.dev/guide/components/outputs) |
||||
- [@official@Angular Official Docs - Model Inputs](https://angular.dev/guide/signals/model) |
||||
- [@official@Custom events with outputs](https://angular.dev/guide/components/outputs) |
||||
- [@video@Non-Related Component Communication | Angular Component & Directives](https://www.youtube.com/watch?v=aIkGXMJFTzM) |
||||
@ -1 +1,10 @@ |
||||
# Developer Tools |
||||
|
||||
Angular offers a suite of powerful developer tools designed to streamline and enhance the development process. These include the Angular CLI for efficient project setup and management, the Angular DevTools extension for advanced debugging and profiling, and the Angular Language Service for improved code editing and completion. Leveraging these tools will significantly improve your ability to write high-quality Angular code. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Official Docs - devtools](https://angular.dev/tools/devtools) |
||||
- [@official@Angular Official Docs - CLI](https://angular.dev/tools/cli) |
||||
- [@official@Language Service Docs](https://angular.dev/tools/language-service) |
||||
- [@opensource@VS Code NG Language Service](https://github.com/angular/vscode-ng-language-service) |
||||
@ -1 +1,10 @@ |
||||
# Locales by ID |
||||
|
||||
Angular uses the Unicode locale identifier (Unicode locale ID) to find the correct locale data for internationalization of text strings. A locale ID specifies the language, country, and an optional code for further variants or subdivisions. A locale ID consists of the language identifier, a hyphen (-) character, and the locale extension. By default, Angular uses `en-US` as the source locale of your project. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Official Docs - Refer to locales by ID](https://angular.dev/guide/i18n/locale-id) |
||||
- [@opensource@Angular locales](https://github.com/angular/angular/tree/main/packages/common/locales) |
||||
- [@official@Codes arranged alphabetically by alpha-3/ISO 639-2 Code](https://www.loc.gov/standards/iso639-2/php/code_list.php) |
||||
- [@official@Unicode CLDR Specifications](https://cldr.unicode.org/index/cldr-spec) |
||||
@ -1 +1,9 @@ |
||||
# Localize Package |
||||
|
||||
To take advantage of the localization features of Angular, use the Angular CLI to add the `@angular/localize` package to your project. If `@angular/localize` is not installed and you try to build a localized version of your project (for example, while using the i18n attributes in templates), the Angular CLI will generate an error, which would contain the steps that you can take to enable i18n for your project. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Official Docs - Add the localize package](https://angular.dev/guide/i18n/add-package) |
||||
- [@video@Learn to Internationalize Your Angular Apps with @angular/localize](https://www.youtube.com/watch?v=5h7HPY1OMfU) |
||||
- [@video@Multi-Language Support in Angular: A Guide to Localization and Internationalization](https://www.youtube.com/watch?v=ouI21AyJ9tE) |
||||
|
||||
@ -1,3 +1,13 @@ |
||||
# Testing Angular Apps |
||||
|
||||
In any software development process, Testing the application plays a vital role. If Bugs and crashes are not figured out and solved they can defame the development company as well as hurt the clients too. But, Angular’s architecture comes with built-in testability features. As soon as you create a new project with Angular CLI, two essential testing tools are installed.They are: Jasmine and Karma. Jasmine is the testing library which structures individual tests into specifications (“specs”) and suites. And Karma is the test runner, which enables the different browsers to run the tests mentioned by Jasmine and the browsers will finally report the test results back. |
||||
In any software development process, testing the application plays a vital role. If bugs and crashes are not figured out and solved they can defame the development company as well as hurt the clients too. But, Angular’s architecture comes with built-in testability features. As soon as you create a new project with Angular CLI, two essential testing tools are installed. They are: Jasmine and Karma. Jasmine is the testing library which structures individual tests into specifications (“specs”) and suites. And Karma is the test runner, which enables the different browsers to run the tests mentioned by Jasmine and the browsers will finally report the test results back. |
||||
|
||||
You can also unit test an Angular application with other testing libraries and test runners. Each library and runner has its own distinctive installation procedures, configuration, and syntax. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Official Docs - Testing](https://angular.dev/guide/testing) |
||||
- [@official@Jasmine Official Docs](https://jasmine.github.io/) |
||||
- [@official@Karma Official Docs](https://karma-runner.github.io/latest/index.html) |
||||
- [@article@Testing Angular - A Guide to Robust Angular Applications](https://testing-angular.com/) |
||||
- [@video@Introduction | Angular Unit Testing Made Easy: A Comprehensive Introduction](https://www.youtube.com/watch?v=emnwsVy8wRs) |
||||
@ -1 +1,9 @@ |
||||
# Translation Files |
||||
|
||||
After you prepare a component for translation, use the `extract-i18n` Angular CLI command to extract the marked text in the component into a source language file. The marked text includes text marked with `i18n`, attributes marked with `i18n`-attribute, and text tagged with `$localize`. The `extract-i18n` command creates a source language file named `messages.xlf` in the root directory of your project. If you have multiple language files, add the locale to the file name, like `messages.{locale}.xlf`. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Official Docs - Translation Files](https://angular.dev/guide/i18n/translation-files) |
||||
- [@official@Angular Official Docs - Extract i18n](https://angular.dev/cli/extract-i18n) |
||||
- [@article@Angular i18n: internationalization & localization with examples](https://lokalise.com/blog/angular-i18n/) |
||||
@ -1 +1,11 @@ |
||||
# Typed Forms |
||||
|
||||
Since Angular 14, reactive forms are strictly typed by default. You don't have to define extra custom types or add a ton of type annotations to your form declarations to benefit from this extra type safety, as Angular will infer types from the default value of a form control. Non-typed forms are still supported. To use them, you must import the `Untyped` symbols from `@angular/forms`. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Official Docs - @let](https://angular.dev/api/core/@let) |
||||
- [@article@Angular Strictly Typed Forms (Complete Guide)](https://blog.angular-university.io/angular-typed-forms/) |
||||
- [@video@Getting started with typed reactive forms in Angular](https://www.youtube.com/watch?v=mT3UR0TdDnU) |
||||
- [@video@Angular TYPED Forms: Are You Using Them Correctly?](https://www.youtube.com/watch?v=it2BZoIvBPc) |
||||
- [@video@Knowing this makes Angular typed forms WAY less awkward](https://www.youtube.com/watch?v=xpRlijg6spo) |
||||
@ -1 +1,8 @@ |
||||
# Using Libraries |
||||
|
||||
Libraries are published as `npm packages`, usually together with schematics that integrate them with the Angular CLI. To integrate reusable library code into an application, you need to install the package and import the provided functionality in the location you use it. For most published Angular libraries, use the `ng add <lib_name>` Angular CLI command. A published library typically provides a `README` file or other documentation on how to add that library to your application. A library is able to be updated by the publisher, and also has individual dependencies which need to be kept current. To check for updates to your installed libraries, use the `ng update` Angular CLI command. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Official Docs - Using Libraries](https://angular.dev/tools/libraries/using-libraries) |
||||
- [@official@npm](https://www.npmjs.com/) |
||||
@ -1,19 +1,11 @@ |
||||
# JavaScript |
||||
|
||||
Apart from being used in the browser, JavaScript is also used in backend e.g. using [Node.js](https://nodejs.org/) or [Deno](https://deno.land/) for writing server-side code in JavaScript. |
||||
|
||||
If you pick up JavaScript for the Backend, my personal recommendation would be to learn [JavaScript](/javascript) and then go with [Node.js](/nodejs) as it is the most popular and widely used option. Also, I would recommend learning TypeScript later on as you continue with your backend development Journey; it's a superset of JavaScript and is used in many projects. |
||||
JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@roadmap@Visit Dedicated JavaScript Roadmap](/javascript) |
||||
- [@article@W3Schools – JavaScript Tutorial](https://www.w3schools.com/js/) |
||||
- [@article@The Modern JavaScript Tutorial](https://javascript.info/) |
||||
- [@article@Eloquent Javascript - Book](https://eloquentjavascript.net/) |
||||
- [@opensource@You Dont Know JS Yet (book series) ](https://github.com/getify/You-Dont-Know-JS) |
||||
- [@video@JavaScript Crash Course for Beginners](https://youtu.be/hdI2bqOjy3c) |
||||
- [@roadmap@Visit Dedicated Node.js Roadmap](/nodejs) |
||||
- [@video@Node.js Crash Course](https://www.youtube.com/watch?v=fBNz5xF-Kx4) |
||||
- [@video@Node.js Tutorial for Beginners](https://www.youtube.com/watch?v=TlB_eWDSMt4) |
||||
- [@official@Official JavaScript Documentation](https://www.javascript.com/) |
||||
- [@video@JavaScript Crash Course for Beginners](https://youtu.be/hdI2bqOjy3c?t=2) |
||||
- [@article@Build 30 Javascript projects in 30 days](https://javascript30.com/) |
||||
- [@feed@Explore top posts about JavaScript](https://app.daily.dev/tags/javascript?ref=roadmapsh) |
||||
|
||||
@ -0,0 +1,8 @@ |
||||
# ACL |
||||
|
||||
An Access Control List (ACL) is a security mechanism used to define which users or system processes are granted access to objects, such as files, directories, or network resources, and what operations they can perform on those objects. ACLs function by maintaining a list of permissions attached to each object, specifying the access rights of various entities—like users, groups, or network traffic—thereby providing fine-grained control over who can read, write, execute, or modify the resources. This method is essential in enforcing security policies, reducing unauthorized access, and ensuring that only legitimate users can interact with sensitive data or systems. |
||||
|
||||
Learn more from the following resources: |
||||
|
||||
- [@article@Access Control List: Definition, Types & Usages](https://www.okta.com/uk/identity-101/access-control-list/) |
||||
- [@video@Access Control Lists](https://www.youtube.com/watch?v=IwLyr0mKK1w) |
||||
@ -1,39 +1,8 @@ |
||||
# ACLs |
||||
|
||||
Access Control Lists (ACLs) act as an essential part of an organization's security infrastructure by helping to manage access rights to resources and maintain security between users, groups, and systems. |
||||
An Access Control List (ACL) is a security mechanism used to define which users or system processes are granted access to objects, such as files, directories, or network resources, and what operations they can perform on those objects. ACLs function by maintaining a list of permissions attached to each object, specifying the access rights of various entities—like users, groups, or network traffic—thereby providing fine-grained control over who can read, write, execute, or modify the resources. This method is essential in enforcing security policies, reducing unauthorized access, and ensuring that only legitimate users can interact with sensitive data or systems. |
||||
|
||||
In this section, we will discuss the following: |
||||
Learn more from the following resources: |
||||
|
||||
- What are Access Control Lists |
||||
- Types of ACLs |
||||
- How to implement and administer ACLs |
||||
|
||||
## What are Access Control Lists |
||||
|
||||
Access Control Lists are rule sets that define which user, group, or system has access to specific resources and determine what type of access they have (e.g., read or write). ACLs act as a barrier to prevent unauthorized access to sensitive data and systems; this can help maintain confidentiality, integrity, and availability of your organization's critical assets. |
||||
|
||||
## Types of ACLs |
||||
|
||||
There are two primary types of ACLs: Discretionary and Mandatory. |
||||
|
||||
- **Discretionary Access Control Lists (DACLs)** |
||||
DACLs allow the owner of a resource to determine who can gain access to the resource, and the level of access they can have. For example, a user or a group of users may have read access rights to a particular file, whereas another group may have full control over the file. |
||||
|
||||
- **Mandatory Access Control Lists (MACLs)** |
||||
MACLs rely on predefined security labels or classifications to enforce access control. In this case, resources are assigned security labels, and users or systems are given security clearances. Access is granted only if the user's security clearance level matches the resource label. |
||||
|
||||
## Implementing and Administering ACLs |
||||
|
||||
Here are some best practices you can follow when implementing and administering Access Control Lists: |
||||
|
||||
- **Define clear access policies**: Establish clear rules and guidelines for accessing resources, such as who can access specific resources and what type of access they can have. |
||||
|
||||
- **Use Role-Based Access Control (RBAC)**: Assign permissions to roles instead of individual users. This will help simplify the ACL management process. |
||||
|
||||
- **Regular audits and reviews**: Periodically review and update the ACLs to ensure that access permissions are aligned with business requirements and security policies. |
||||
|
||||
- **Apply the principle of least privilege**: Grant users the minimum privileges they need to perform their tasks. |
||||
|
||||
- **Maintain a change management process**: Document all changes to ACLs, including the date of change, the reason for the change, and the individual responsible for executing the change. |
||||
|
||||
Remember that a well-implemented and maintained ACL system can significantly reduce the risks associated with unauthorized access to your organization's critical assets. |
||||
- [@article@Access Control List: Definition, Types & Usages](https://www.okta.com/uk/identity-101/access-control-list/) |
||||
- [@video@Access Control Lists](https://www.youtube.com/watch?v=IwLyr0mKK1w) |
||||
@ -0,0 +1,8 @@ |
||||
# Anti-malware |
||||
|
||||
Anti-malware is a type of software designed to detect, prevent, and remove malicious software, such as viruses, worms, trojans, ransomware, and spyware, from computer systems. By continuously scanning files, applications, and incoming data, anti-malware solutions protect devices from a wide range of threats that can compromise system integrity, steal sensitive information, or disrupt operations. Advanced anti-malware programs utilize real-time monitoring, heuristic analysis, and behavioral detection techniques to identify and neutralize both known and emerging threats, ensuring that systems remain secure against evolving cyber attacks. |
||||
|
||||
Learn more from the following resources: |
||||
|
||||
- [@video@How Does Antivirus and Antimalware Software Work?](https://www.youtube.com/watch?v=bTU1jbVXlmM) |
||||
- [@article@What is antimalware?](https://riskxchange.co/1006974/cybersecurity-what-is-anti-malware/) |
||||
@ -0,0 +1,8 @@ |
||||
# Antivirus |
||||
|
||||
Antivirus software is a specialized program designed to detect, prevent, and remove malicious software, such as viruses, worms, and trojans, from computer systems. It works by scanning files and programs for known malware signatures, monitoring system behavior for suspicious activity, and providing real-time protection against potential threats. Regular updates are essential for antivirus software to recognize and defend against the latest threats. While it is a critical component of cybersecurity, antivirus solutions are often part of a broader security strategy that includes firewalls, anti-malware tools, and user education to protect against a wide range of cyber threats. |
||||
|
||||
Learn more from the following resources: |
||||
|
||||
- [@video@What is an antivirus and how does it keep us safe?](https://www.youtube.com/watch?v=jW626WMWNAE) |
||||
- [@article@What is antivirus software?](https://www.webroot.com/gb/en/resources/tips-articles/what-is-anti-virus-software) |
||||
@ -0,0 +1,8 @@ |
||||
# ANY.RUN |
||||
|
||||
ANY.RUN is an interactive online malware analysis platform that allows users to safely execute and analyze suspicious files and URLs in a controlled, virtualized environment. This sandbox service provides real-time insights into the behavior of potentially malicious software, such as how it interacts with the system, what files it modifies, and what network connections it attempts to make. Users can observe and control the analysis process, making it a valuable tool for cybersecurity professionals to identify and understand new threats, assess their impact, and develop appropriate countermeasures. ANY.RUN is particularly useful for dynamic analysis, enabling a deeper understanding of malware behavior in real-time. |
||||
|
||||
Learn more from the following resources: |
||||
|
||||
- [@official@ANY.RUN Website](https://any.run/) |
||||
- [@video@Malware analysis with ANY.RUN](https://www.youtube.com/watch?v=QH_u7DHKzzI) |
||||
@ -1,32 +1,12 @@ |
||||
# arp |
||||
# ARP |
||||
|
||||
ARP is a crucial network protocol used to map IP addresses to their corresponding MAC (Media Access Control) addresses. This mapping is crucial, as devices on a network use MAC addresses to communicate with one another. As IP addresses are easier to remember and utilize for humans, ARP helps in converting these logical addresses to physical addresses that devices can understand. |
||||
ARP is a protocol used by the Internet Protocol (IP) to map an IP address to a physical address, also known as a Media Access Control (MAC) address. ARP is essential for routing data between devices in a Local Area Network (LAN) as it allows for the translation of IP addresses to specific hardware on the network. |
||||
|
||||
## Why ARP is important |
||||
When a device wants to communicate with another device on the same LAN, it needs to determine the corresponding MAC address for the target IP address. ARP helps in this process by broadcasting an ARP request containing the target IP address. All devices within the broadcast domain receive this ARP request and compare the target IP address with their own IP address. If a match is found, the device with the matching IP address sends an ARP reply which contains its MAC address. |
||||
|
||||
In a network, when a device wants to send data to another device, it needs to know the recipient's MAC address. If the sender only knows the IP address, it can use ARP to determine the corresponding MAC address. The mapping is stored in the device's ARP cache, which holds a record of both the IP and MAC addresses. This allows devices to quickly identify and communicate with others on the network. |
||||
The device that initiated the ARP request can now update its ARP cache (a table that stores IP-to-MAC mappings) with the new information, and then proceed to send data to the target's MAC address. |
||||
|
||||
## ARP Request and Reply |
||||
Learn more from the following resources: |
||||
|
||||
Here are the basic steps involved in the ARP process: |
||||
|
||||
- The sender creates an ARP request packet with its own IP and MAC addresses, and the recipient's IP address. The packet is broadcast to all devices on the local network. |
||||
- Each device on the network receives the ARP request, checks if the IP address is its own, and replies to the sender as needed. |
||||
- The sender receives the ARP reply containing the recipient's MAC address and updates its ARP cache with the new information. |
||||
- Finally, the sender uses the MAC address to transmit data packets to the intended recipient. |
||||
|
||||
## Troubleshooting with ARP |
||||
|
||||
If you're having issues with network communication or want to investigate your network, the ARP table can be a helpful tool. You can view your device's ARP cache using commands specific to your operating system: |
||||
|
||||
- **Windows**: Open Command Prompt and type `arp -a` |
||||
- **Linux**: Open Terminal and type `arp` |
||||
- **macOS**: Open Terminal and type `arp -a` |
||||
|
||||
The output will display the IP and MAC addresses of devices on the network that the system has interacted with. |
||||
|
||||
## ARP Spoofing and Security Concerns |
||||
|
||||
As crucial as ARP is, it can be exploited by attackers for malicious purposes. ARP spoofing, also known as ARP poisoning, is a form of cyberattack in which an attacker sends fake ARP requests to a network to link their MAC address with an IP address that legitimately belongs to another device. This enables the attacker to intercept and manipulate network traffic or launch denial-of-service (DoS) attacks. |
||||
|
||||
To mitigate ARP spoofing, consider implementing security measures such as monitoring ARP traffic, using a static ARP table, or employing security solutions like intrusion detection and prevention systems. Additionally, maintaining a secure and up-to-date network infrastructure can help reduce potential vulnerabilities. |
||||
- [@video@ARP Explained](https://www.youtube.com/watch?v=cn8Zxh9bPio) |
||||
- [@article@What is Address Resolution Protocol?](https://www.fortinet.com/resources/cyberglossary/what-is-arp) |
||||
@ -1,41 +1,9 @@ |
||||
# Bash |
||||
|
||||
Bash (**B**ourne **A**gain **Sh**ell) is a widely-used Unix shell and scripting language that acts as a command-line interface for executing commands and organizing files on your computer. It allows users to interact with the system's operating system by typing text commands, serving as an alternative to the graphical user interface (GUI). Bash, created as a free and improved version of the original Bourne Shell (`sh`), is the default shell in many Unix-based systems, including Linux, macOS, and the Windows Subsystem for Linux (WSL). |
||||
Bash (Bourne Again Shell) is a widely-used Unix shell and scripting language that acts as a command-line interface for executing commands and organizing files on your computer. It allows users to interact with the system's operating system by typing text commands, serving as an alternative to the graphical user interface (GUI). Bash, created as a free and improved version of the original Bourne Shell (`sh`), is the default shell in many Unix-based systems, including Linux, macOS, and the Windows Subsystem for Linux (WSL). |
||||
|
||||
## Bash Scripting |
||||
Learn more from the following resources: |
||||
|
||||
Bash scripting is an essential skill for anyone engaged in cyber security. It allows you to automate simple tasks, monitor system activities, and manage multiple files and directories with ease. With Bash scripts, you can develop tools, automate repetitive tasks, or even develop security testing tools. |
||||
|
||||
## Key Features |
||||
|
||||
- **Variables**: Variables can store data in the form of strings or numbers, which can be used and manipulated throughout your script. |
||||
|
||||
- **Control Structures**: Bash supports loops (`for`, `while`) and conditional statements (`if`, `case`) to build more robust scripts with decision-making capabilities. |
||||
|
||||
- **Functions**: Create reusable code blocks that can be called with specified parameters, making your script more modular and easier to maintain. |
||||
|
||||
- **User Input**: Bash scripts allow you to interact with the user by accepting input or choosing options. |
||||
|
||||
- **File Management**: Create, modify, or analyze files using built-in commands such as `ls`, `cp`, `mkdir`, and `grep`. |
||||
|
||||
## Learning Bash |
||||
|
||||
As a cyber security expert, having a strong foundation in Bash can save you time and help you better understand the inner workings of a system. Invest time in learning Bash essentials, such as basic commands, file manipulation, scripting, and processing text data. |
||||
|
||||
- Basic Commands: Start by learning some of the most commonly used Bash commands: `cd`, `mv`, `cp`, `rm`, `grep`, `find`, `sort`, etc. |
||||
|
||||
- File and Directory Management: Explore the use of commands, like `mkdir`, `rmdir`, `touch`, `chmod`, `chown`, and `ln`, to create, modify, and delete files and directories. |
||||
|
||||
- Text Processing: Learn to use commands like `cat`, `less`, `head`, `tail`, and `awk` to analyze and manipulate text data. |
||||
|
||||
- Scripting: Start by understanding the syntax and structure of Bash scripts, and learn how to create, debug, and execute scripts. |
||||
|
||||
Some resources to begin your journey with Bash are: |
||||
|
||||
- [@article@GNU Bash Manual](https://www.gnu.org/software/bash/manual/bash.html): A comprehensive guide to Bash, provided by the GNU project. |
||||
- [@article@Bash Beginner's Guide](http://www.tldp.org/LDP/Bash-Beginners-Guide/html/): A beginner-friendly guide that covers the basics of Bash scripting. |
||||
- [@official@Bash Academy](https://www.bash.academy/): An interactive platform to start learning Bash from scratch. |
||||
- [@article@Learn Shell](https://www.learnshell.org/): An online resource with tutorials and exercises to help you practice your Bash skills. |
||||
- [@feed@Explore top posts about Bash](https://app.daily.dev/tags/bash?ref=roadmapsh) |
||||
|
||||
Bash scripting is a versatile tool in the cybersecurity toolkit, and mastering it will provide you with greater control over the systems you protect. |
||||
- [@video@Bash in 100 Seconds](https://www.youtube.com/watch?v=I4EWvMFj37g) |
||||
- [@course@Beginners Guide To The Bash Terminal](https://www.youtube.com/watch?v=oxuRxtrO2Ag) |
||||
- [@course@Start learning bash](https://linuxhandbook.com/bash/) |
||||
|
||||
@ -1,39 +1,12 @@ |
||||
# Basics and Concepts of Threat Hunting |
||||
|
||||
Threat hunting is the proactive process of identifying and mitigating potential threats and vulnerabilities within a network, before they can be exploited by an attacker. To perform effective threat hunting, security professionals must use their knowledge, skills, and the latest threat intelligence to actively search for previously undetected adversaries and suspicious activities within a network. |
||||
Threat hunting is a proactive approach to cybersecurity where security professionals actively search for hidden threats or adversaries that may have bypassed traditional security measures, such as firewalls and intrusion detection systems. Rather than waiting for automated tools to flag suspicious activity, threat hunters use a combination of human intuition, threat intelligence, and advanced analysis techniques to identify indicators of compromise (IoCs) and potential threats within a network or system. |
||||
|
||||
## Key Objectives of Threat Hunting |
||||
The process involves several key concepts, starting with a **hypothesis**, where a hunter develops a theory about potential vulnerabilities or attack vectors that could be exploited. They then conduct a **search** through logs, traffic data, or endpoint activity to look for anomalies or patterns that may indicate malicious behavior. **Data analysis** is central to threat hunting, as hunters analyze vast amounts of network and system data to uncover subtle signs of attacks or compromises. If threats are found, the findings lead to **detection and mitigation**, allowing the security team to contain the threat, remove malicious entities, and prevent similar incidents in the future. |
||||
|
||||
- **Detect**: Identify unknown threats and suspicious behavior that traditional security tools may miss. |
||||
- **Contain**: Quickly isolate and remediate threats before they can cause significant damage. |
||||
- **Learn**: Gather valuable insights about the adversary, their techniques, and the effectiveness of existing security measures. |
||||
Threat hunting also involves **continuous learning** and adapting, as hunters refine their techniques based on evolving attack methods and the latest threat intelligence. This approach improves an organization’s overall security posture by identifying sophisticated or previously unknown threats that might evade conventional security measures. |
||||
|
||||
## Threat Hunting Techniques |
||||
Learn more from the following resources: |
||||
|
||||
There are several practical approaches to threat hunting, such as: |
||||
|
||||
- **Hypothesis-driven hunting**: Develop hypotheses about potential threats and validate them through data analysis and investigation. |
||||
- **Indicator of Compromise (IoC) hunting**: Leverage existing threat intelligence and IoCs to search for matches within your environment. |
||||
- **Machine learning-driven hunting**: Utilize algorithms and advanced analytics tools to automatically detect anomalies and other suspicious patterns of behavior. |
||||
- **Situational awareness hunting**: Understand the normal behavior and baseline of the environment and look for deviations that may indicate malicious activity. |
||||
|
||||
## Tools & Technologies for Threat Hunting |
||||
|
||||
Some common tools and technologies used for threat hunting include: |
||||
|
||||
- **Security information and event management (SIEM) systems**: Provide a centralized platform for detecting, alerting, and investigating security incidents and events. |
||||
- **Endpoint detection and response (EDR) solutions**: Deliver real-time monitoring, analysis, and remediation capabilities for endpoints. |
||||
- **Threat intelligence platforms (TIPs)**: Aggregate and analyze global threat data and indicators of compromise (IoC) to provide actionable intelligence. |
||||
- **User and entity behavior analytics (UEBA) tools**: Apply advanced analytics algorithms to detect potential threats by analyzing the behavior of users, devices, and applications. |
||||
|
||||
## Essential Skills for Threat Hunters |
||||
|
||||
Successful threat hunters should possess a strong combination of technical skills, critical thinking, and situational awareness. Some essential skills include: |
||||
|
||||
- **Understanding of networks and protocols**: Deep knowledge of network architecture, protocols, and communication patterns. |
||||
- **Familiarity with operating systems**: Ability to navigate, investigate, and analyze various operating systems, including Windows, Linux, and macOS. |
||||
- **Scripting and programming**: Proficiency in scripting languages (e.g., Python, PowerShell) and automation tools to streamline the threat hunting process. |
||||
- **Knowledge of common attacker tactics, techniques, and procedures (TTPs)**: Awareness of the latest TTPs, ensuring that you stay ahead of potential threats. |
||||
- **Critical thinking and problem-solving**: Ability to analyze complex scenarios and think creatively to identify potential threats and vulnerabilities. |
||||
|
||||
By developing a strong foundation in threat hunting concepts and techniques, security professionals are better equipped to proactively identify and mitigate potential attacks, thereby strengthening their organization's overall cybersecurity posture. |
||||
- [@article@What is Threat Hunting](https://www.ibm.com/topics/threat-hunting) |
||||
- [@video@Cyber Security Threat Hunting explained](https://www.youtube.com/watch?v=VNp35Uw_bSM) |
||||
@ -1,56 +1,17 @@ |
||||
# Basics of Computer Networking |
||||
|
||||
Computer networking refers to the practice of connecting two or more computing devices, creating an infrastructure in which they can exchange data, resources, and software. It is a fundamental part of cyber security and IT skills. In this chapter, we will cover five aspects of computer networking, including networking devices, network types, network protocols, IP addresses, and the OSI model. |
||||
Computer networking involves connecting multiple computers and devices to share resources, such as data, applications, and internet connections. Networks can range from small local area networks (LANs) to large-scale wide area networks (WANs), such as the internet. The basic components of a network include devices (computers, servers, routers), transmission media (wired or wireless), and network protocols, which govern communication between devices. |
||||
|
||||
## Networking Devices |
||||
Key concepts in networking include: |
||||
|
||||
Several devices enable and facilitate communication between different devices. Common networking devices include: |
||||
1. **IP Addressing**: Every device on a network has a unique Internet Protocol (IP) address, which allows it to be identified and communicate with other devices. |
||||
2. **Subnetting**: This involves dividing a network into smaller, manageable sections to optimize performance and security. |
||||
3. **Routing**: Routers are used to forward data between different networks, ensuring that information reaches the correct destination. |
||||
4. **DNS**: The Domain Name System translates human-readable domain names into IP addresses, enabling easier navigation and communication on the internet. |
||||
5. **TCP/IP Protocol**: The Transmission Control Protocol/Internet Protocol (TCP/IP) suite is the foundation of most networks, handling how data is broken into packets, transmitted, and reassembled. |
||||
|
||||
- **Hubs**: Devices that connect different devices together, transmitting data packets to all devices on the network. |
||||
- **Switches**: Similar to hubs, but transmit data packets only to specific devices instead of broadcasting to all. |
||||
- **Routers**: Devices that direct data packets between networks and provide the best path for data packets to reach their destination. |
||||
- **Firewalls**: Devices or software that monitor and filter incoming and outgoing network traffic, allowing only authorized data to pass through. |
||||
Learn more from the following resources: |
||||
|
||||
## Network Types |
||||
|
||||
There are various types of networks based on the distance they cover, and the number of devices they connect. A few common network types are: |
||||
|
||||
- **Personal Area Network (PAN)**: Connects devices within an individual workspace, typically within a range of 10 meters. |
||||
- **Local Area Network (LAN)**: Covers a small geographical area, such as a home or office, connecting multiple computers and other devices. |
||||
- **Wide Area Network (WAN)**: Covers a larger geographical area, interconnecting different LANs, often using leased telecommunication lines or wireless links. |
||||
- **Virtual Private Network (VPN)**: A secure network established over the public internet, encrypting the data transferred and restricting access to authorized users only. |
||||
|
||||
## Network Protocols |
||||
|
||||
Protocols are sets of rules that govern the communication between devices within a network. Some of the most common protocols include: |
||||
|
||||
- **Transmission Control Protocol (TCP)**: Ensures the reliable transmission of data and establishes connections between devices. |
||||
- **Internet Protocol (IP)**: Facilitates the transmission of data packets, assigning unique IP addresses to identify devices. |
||||
- **User Datagram Protocol (UDP)**: A lightweight, fast, but less reliable protocol compared to TCP, often used for streaming and gaming applications. |
||||
|
||||
## IP Addresses |
||||
|
||||
An IP address is a unique identifier assigned to every device in a network. There are two types of IP addresses: |
||||
|
||||
- **IPv4**: Uses a 32-bit addressing system, allowing for approximately 4.3 billion unique IP addresses. |
||||
- **IPv6**: Uses a 128-bit addressing system, providing a significantly larger number of available IP addresses. |
||||
|
||||
IP addresses can also be categorized as dynamic or static, depending on whether they change over time or remain constant for a device. |
||||
|
||||
## OSI Model |
||||
|
||||
The Open Systems Interconnection (OSI) model is a conceptual framework used to understand and describe how different network protocols interact. It divides networking functions into seven distinct layers: |
||||
|
||||
- **Physical Layer**: Deals with the physical connection between devices, including cabling and hardware. |
||||
- **Data Link Layer**: Handles the communication between adjacent devices on the same network. |
||||
- **Network Layer**: Identifies the best route for data packets and manages IP addresses. |
||||
- **Transport Layer**: Ensures the reliable transmission of data, including error checking and flow control. |
||||
- **Session Layer**: Establishes, maintains, and terminates connections between applications on different devices. |
||||
- **Presentation Layer**: Translates data into a format that is suitable for transmission between devices. |
||||
- **Application Layer**: Represents the user interface with which applications interact. |
||||
|
||||
Mastering the basics of computer networking is key to understanding and implementing effective cyber security measures. This chapter has covered essential networking concepts, but it is important to continually expand your knowledge in this ever-evolving field. |
||||
|
||||
- [@article@What is Computer Networking?](https://tryhackme.com/room/whatisnetworking) |
||||
- [@video@Learn Networking in 3 hours (basics for cybersecurity and DevOps)](https://www.youtube.com/watch?v=iSOfkw_YyOU\&t=1549s) |
||||
- [@feed@Explore top posts about Networking](https://app.daily.dev/tags/networking?ref=roadmapsh) |
||||
- [@article@Networking basics - What you need to know](https://www.cisco.com/c/en/us/solutions/small-business/resource-center/networking/networking-basics.html) |
||||
- [@video@Computer Networking in 100 seconds](https://www.youtube.com/watch?v=keeqnciDVOo) |
||||
- [@video@Computer Networks: Crash Course Computer Science #28](https://www.youtube.com/watch?v=3QhU9jd03a0) |
||||
@ -1,36 +1,11 @@ |
||||
# Basics of NAS and SAN |
||||
|
||||
Network Attached Storage (NAS) and Storage Area Network (SAN) technologies play a crucial role in managing data within an organization and serve as the building blocks for a more comprehensive IT infrastructure. |
||||
Network Attached Storage (NAS) and Storage Area Network (SAN) are both technologies used for storing and managing data, but they operate in different ways and serve different purposes. NAS is a dedicated file storage device that connects to a network, allowing multiple users and devices to access files over a shared network. It operates at the file level and uses standard networking protocols such as NFS or SMB/CIFS, making it easy to set up and manage, especially for small to medium-sized businesses. NAS devices are ideal for sharing files, providing backups, and enabling centralized data access across multiple users in a local network. |
||||
|
||||
## Network Attached Storage (NAS) |
||||
SAN, on the other hand, is a high-performance, specialized network designed to provide block-level storage, which means it acts as a direct-attached storage device to servers. SAN uses protocols such as Fibre Channel or iSCSI and is typically employed in large enterprise environments where fast, high-capacity, and low-latency storage is critical for applications like databases and virtualized systems. While NAS focuses on file sharing across a network, SAN is designed for more complex, high-speed data management, enabling servers to access storage as if it were directly connected to them. Both NAS and SAN are vital components of modern data storage infrastructure but are chosen based on the specific performance, scalability, and management needs of the organization. |
||||
|
||||
NAS is a high-capacity storage solution that operates on a data file level, allowing multiple users and clients to access, store, and retrieve data from a centralized location over a network. NAS devices are generally connected to a local area network (LAN) and use various file-sharing protocols, such as NFS (Network File System), SMB/CIFS (Server Message Block/Common Internet File System), or AFP (Apple Filing Protocol). |
||||
Learn more from the following resources: |
||||
|
||||
Some key features of a NAS system include: |
||||
|
||||
- **Ease of Deployment**: NAS devices are simple to install and configure, facilitating quick integration into existing network infrastructures. |
||||
- **Scalability**: NAS systems can be easily expanded to accommodate growing storage needs by adding more drives or units. |
||||
- **Data Protection**: Most NAS devices offer data protection features such as RAID (Redundant Array of Independent Disks), data backup, and data encryption. |
||||
|
||||
## Storage Area Network (SAN) |
||||
|
||||
SAN is a high-performance, dedicated storage network designed to provide block-level data storage for applications and servers. Unlike NAS, which uses file-sharing protocols, SANs utilize block-based protocols such as Fibre Channel (FC) and iSCSI (Internet Small Computer System Interface) to handle storage requests. |
||||
|
||||
SANs offer several advantages in terms of performance, reliability, and scalability: |
||||
|
||||
- **Performance**: SANs can handle low-latency, high-speed data transfers, providing optimal performance for mission-critical applications and large-scale virtualization. |
||||
- **Fault Tolerance**: SANs are designed to provide redundancy and failover capabilities, ensuring continued access to data in the event of hardware failures. |
||||
- **Scalability**: SANs can be easily scaled by adding more disk arrays, switches, or connections to meet growing storage demands. |
||||
|
||||
## NAS vs. SAN: Choosing the Right Solution |
||||
|
||||
When it comes to deciding between NAS and SAN, there are several factors to consider: |
||||
|
||||
- **Cost**: NAS devices are generally more affordable than SANs, making them an attractive option for smaller organizations or environments with limited budgets. |
||||
- **Infrastructure**: NAS solutions can be more easily integrated into existing network infrastructures, whereas SANs may require dedicated hardware, connections, and management tools. |
||||
- **Performance Requirements**: If you need high-performance storage for intensive applications, SANs may be a more appropriate choice than NAS. |
||||
- **Data Management**: While NAS solutions excel in handling file-based storage, SANs provide better support for block-level storage and can deliver improved performance for virtualized environments and database applications. |
||||
|
||||
It's essential to evaluate your organization's specific needs and requirements to determine which storage solution is the most appropriate fit. As you expand your knowledge in cyber security, a solid understanding of both NAS and SAN technologies will prove invaluable in implementing secure and efficient data storage systems. |
||||
|
||||
- [@video@NAS vs SAN](https://youtu.be/3yZDDr0JKVc) |
||||
- [@video@What is a NAS](https://www.youtube.com/watch?v=ZwhT-KI16jo) |
||||
- [@video@What is a Storage Area Network](https://www.youtube.com/watch?v=7eGw4vhyeTA) |
||||
- [@article@NAS vs SAN - What are the differences?](https://www.backblaze.com/blog/whats-the-diff-nas-vs-san/) |
||||
@ -1,48 +1,10 @@ |
||||
# Basics of Reverse Engineering |
||||
|
||||
Reverse engineering is the process of analyzing a system, component, or software to understand how it works and deduce its design, architecture, or functionality. It is a critical skill in cybersecurity, as it helps security professionals uncover the potential attack vectors, hidden vulnerabilities, and underlying intentions of a piece of software or hardware. |
||||
Reverse engineering is the process of deconstructing a system, software, or hardware to understand its internal workings, design, and functionality without having access to its source code or original documentation. In cybersecurity, reverse engineering is often used to analyze malware or software vulnerabilities to uncover how they operate, allowing security professionals to develop defenses, patches, or detection methods. This involves breaking down the binary code, disassembling it into machine code, and then interpreting it to understand the logic, behavior, and intent behind the program. |
||||
|
||||
In this section, we will cover the basic concepts and techniques of reverse engineering that every cybersecurity professional should be familiar with. |
||||
Reverse engineering can also be used in hardware to investigate a device's design or performance, or in software development for compatibility, debugging, or enhancing legacy systems. The process typically includes static analysis, where the code is examined without execution, and dynamic analysis, where the program is executed in a controlled environment to observe its runtime behavior. The insights gained through reverse engineering are valuable for improving security, fixing bugs, or adapting systems for different uses. However, it’s important to be aware of the legal and ethical boundaries, as reverse engineering certain software or hardware can violate intellectual property rights. |
||||
|
||||
## Static Analysis Vs. Dynamic Analysis |
||||
Learn more from the following resources: |
||||
|
||||
There are two main approaches to reverse engineering: static analysis and dynamic analysis. Static analysis involves examining the code and structure of a software without executing it. This includes analyzing the source code, if available, or examining the binary executable using disassemblers or decompilers. |
||||
|
||||
Dynamic analysis, on the other hand, involves executing the software while observing and monitoring its behaviors and interactions with other components or systems. This analysis is typically performed in controlled environments, such as virtual machines or sandbox environments, to minimize potential risks. |
||||
|
||||
Both approaches have their merits and limitations, and combining them is often the most effective way to gain a comprehensive understanding of the target system. |
||||
|
||||
## Disassemblers and Decompilers |
||||
|
||||
Disassemblers and decompilers are essential tools in reverse engineering, as they help transform binary executables into a more human-readable format. |
||||
|
||||
- **Disassemblers** convert machine code (binary executable) into assembly language, a low-level programming language that is more human-readable than raw machine code. Assembly languages are specific to the CPU architectures, such as x86, ARM, or MIPS. |
||||
- **Decompilers** attempt to reverse-engineer binary executables into high-level programming languages, such as C or C++, by interpreting the structures and patterns in the assembly code. Decompilation, however, is not always perfect and may generate code that is more difficult to understand than assembly. |
||||
|
||||
Some popular disassemblers and decompilers are: |
||||
|
||||
- [@article@IDA Pro](https://www.hex-rays.com/products/ida/) |
||||
- [@article@Ghidra](https://ghidra-sre.org/) |
||||
- [@article@Hopper](https://www.hopperapp.com/) |
||||
|
||||
## Debuggers |
||||
|
||||
Debuggers are another essential tool for reverse engineering, as they allow you to execute a program and closely monitor its behavior during runtime. Debuggers provide features such as setting breakpoints, stepping through code, and examining memory contents. |
||||
|
||||
Some popular debuggers include: |
||||
|
||||
- [@article@OllyDbg](http://www.ollydbg.de/) |
||||
- [@article@GDB](https://www.gnu.org/software/gdb/) |
||||
- [@article@x64dbg](https://x64dbg.com/) |
||||
|
||||
## Common Reverse Engineering Techniques |
||||
|
||||
Here are some basic reverse engineering techniques: |
||||
|
||||
- **Control flow analysis:** Understanding the execution flow of a program, such as loops, branches, and conditional statements, to determine how the program behaves under certain conditions. |
||||
- **Data flow analysis:** Analyzing how data is passed between different parts of a program and tracing the origin and destination of data. |
||||
- **System call analysis:** Examining system calls made by a program to understand how it interacts with the operating system, hardware, or external resources. |
||||
- **Cryptographic analysis:** Identifying and analyzing encryption and decryption algorithms used within a program or analyzing any cryptographic keys or certificates that may be present. |
||||
- **Pattern recognition:** Identifying common patterns, structures, or routines in code that may indicate the use of known algorithms or frameworks. |
||||
|
||||
Remember that mastering the art of reverse engineering takes time and practice. As you delve deeper into the world of reverse engineering, you will develop the ability to recognize patterns, understand complex systems, and ultimately, better defend against cyber threats. |
||||
- [@course@Reverse Engineering for Everyone!](https://0xinfection.github.io/reversing/) |
||||
- [@video@What is reverse engineering?](https://www.youtube.com/watch?v=gh2RXE9BIN8) |
||||
@ -1,53 +1,11 @@ |
||||
# Basics of Subnetting |
||||
|
||||
Subnetting is the process of dividing an IP network into smaller sub-networks called subnets. It allows better allocation of IP addresses and provides better organization, control, and security for the network. Here we go through some of the basic concepts of subnetting and why it's crucial for cybersecurity. |
||||
Subnetting is a technique used in computer networking to divide a large network into smaller, more manageable sub-networks, or "subnets." It enhances network performance and security by reducing broadcast traffic and enabling better control over IP address allocation. Each subnet has its own range of IP addresses, which allows network administrators to optimize network traffic and reduce congestion by isolating different sections of a network. |
||||
|
||||
## IP Addresses and Subnet Masks |
||||
In subnetting, an IP address is split into two parts: the network portion and the host portion. The network portion identifies the overall network, while the host portion identifies individual devices within that network. Subnet masks are used to define how much of the IP address belongs to the network and how much is reserved for hosts. By adjusting the subnet mask, administrators can create multiple subnets from a single network, with each subnet having a limited number of devices. Subnetting is particularly useful for large organizations, allowing them to efficiently manage IP addresses, improve security by segmenting different parts of the network, and control traffic flow by minimizing unnecessary data transmissions between segments. |
||||
|
||||
An IP address is a unique identifier for devices on a network. It consists of two parts: the network address and the host address. The network address indicates the network to which a device belongs, while the host address identifies the specific device within that network. |
||||
Learn more from the following resources: |
||||
|
||||
Subnet masks are used to define which portion of an IP address is the network address and which is the host address. For example, in the IP address `192.168.1.5`, and subnet mask `255.255.255.0`, the network address is `192.168.1.0`, and the host address is `5`. |
||||
|
||||
## Why Subnetting? |
||||
|
||||
Subnetting has several advantages, including: |
||||
|
||||
- **Improved Network Performance**: Breaking a large network into smaller subnets helps reduce congestion and improve overall performance. |
||||
- **Enhanced Security**: By isolating different parts of a network, you can control access and limit the spread of potential threats. |
||||
- **Easier Administration**: Smaller networks are easier to manage and maintain, as it's simpler to track issues and allocate resources. |
||||
|
||||
## Subnetting Process |
||||
|
||||
The process of subnetting involves the following steps: |
||||
|
||||
- **Choose the Appropriate Subnet Mask**: Determine the right subnet mask for your network based on the number of required subnets and hosts. The more subnets you need, the more bits you will "borrow" from the host portion of the IP address. |
||||
|
||||
- **Divide the Network into Subnets**: Calculate the subnet addresses by incrementing the network portion of the IP address by the value of the borrowed bits. |
||||
|
||||
- **Determine Host Ranges**: Calculate the valid host addresses within each subnet by identifying the first and last usable IP addresses. Remember that the first address in a subnet is the network address, and the last address is used for broadcasting. |
||||
|
||||
- **Assign IP Addresses**: Allocate IP addresses to devices within their respective subnets, and configure devices with the correct subnet mask. |
||||
|
||||
## Example |
||||
|
||||
Let's suppose we have the network `192.168.1.0` with a subnet mask of `255.255.255.0`. We want to create four smaller subnets. Here's how we can do it: |
||||
|
||||
- `255.255.255.0` in binary is `11111111.11111111.11111111.00000000`. We can borrow 2 bits from the host portion to create four subnets: `11111111.11111111.11111111.11000000`, which is `255.255.255.192` in decimal format. |
||||
|
||||
- Our subnets will have the following network addresses: |
||||
|
||||
- `192.168.1.0` |
||||
- `192.168.1.64` |
||||
- `192.168.1.128` |
||||
- `192.168.1.192` |
||||
|
||||
- The valid host ranges within each subnet are: |
||||
|
||||
- `192.168.1.1 - 192.168.1.62` |
||||
- `192.168.1.65 - 192.168.1.126` |
||||
- `192.168.1.129 - 192.168.1.190` |
||||
- `192.168.1.193 - 192.168.1.254` |
||||
|
||||
- Allocate IP addresses from these host ranges to devices within their respective subnets, and configure devices with the correct subnet mask (`255.255.255.192`). |
||||
|
||||
Understanding the basics of subnetting is essential to properly configuring and securing your network. By efficiently dividing your network into smaller subnets, you can optimize performance, organization, and security. |
||||
- [@article@Networking Basics: What is IPv4 Subnetting?](https://www.cbtnuggets.com/blog/technology/networking/networking-basics-what-is-ipv4-subnetting) |
||||
- [@video@Lets subnet your home network!](https://www.youtube.com/watch?v=mJ_5qeqGOaI&list=PLIhvC56v63IKrRHh3gvZZBAGvsvOhwrRF&index=6) |
||||
- [@video@Subnetting for hackers](https://www.youtube.com/watch?v=o0dZFcIFIAw) |
||||
@ -1,42 +1,10 @@ |
||||
# Basics of Threat Intel, OSINT |
||||
|
||||
Open Source Intelligence (OSINT) is a crucial part of cyber threat intelligence (CTI). It refers to the collection and analysis of publicly available information from various sources to identify potential threats to an organization's information security. |
||||
Threat Intelligence (Threat Intel) and Open-Source Intelligence (OSINT) are both critical components in cybersecurity that help organizations stay ahead of potential threats. Threat Intelligence refers to the collection, analysis, and dissemination of information about potential or current attacks targeting an organization. This intelligence typically includes details on emerging threats, attack patterns, malicious IP addresses, and indicators of compromise (IoCs), helping security teams anticipate, prevent, or mitigate cyberattacks. Threat Intel can be sourced from both internal data (such as logs or past incidents) and external feeds, and it helps in understanding the tactics, techniques, and procedures (TTPs) of adversaries. |
||||
|
||||
## Why is OSINT important for threat intelligence? |
||||
OSINT, a subset of Threat Intel, involves gathering publicly available information from open sources to assess and monitor threats. These sources include websites, social media, forums, news articles, and other publicly accessible platforms. OSINT is often used for reconnaissance to identify potential attack vectors, compromised credentials, or leaks of sensitive data. It’s also a valuable tool in tracking threat actors, as they may leave traces in forums or other public spaces. Both Threat Intel and OSINT enable organizations to be more proactive in their cybersecurity strategies by identifying vulnerabilities, understanding attacker behavior, and implementing timely defenses based on actionable insights. |
||||
|
||||
OSINT plays a significant role in achieving comprehensive threat intelligence by offering valuable insights into various threat actors, their tactics, techniques, and procedures (TTPs). By leveraging OSINT, security teams can: |
||||
Learn more from the following resources: |
||||
|
||||
- Identify and track adversaries targeting their organization |
||||
- Gain knowledge about the latest attack strategies and trends |
||||
- Evaluate the effectiveness of existing security measures |
||||
- Develop proactive defense strategies to mitigate potential threats |
||||
|
||||
## Key OSINT Sources |
||||
|
||||
There are numerous sources of OSINT data that can be valuable for threat intelligence. Some of the main sources include: |
||||
|
||||
- **Publicly accessible websites and blogs**: Security researchers, hackers, and threat actors frequently share information about their findings, tools, and techniques in their blogs and websites. |
||||
|
||||
- **Social media platforms**: Social media platforms like Twitter, Reddit, and LinkedIn offer a wealth of information about threat actors' activities and can act as a valuable resource for threat intelligence. |
||||
|
||||
- **Security-related conference materials**: Many industry conferences and workshops publish their research papers, video recordings, and presentations online, allowing you to gather valuable insights from experts in the field. |
||||
|
||||
- **Online forums and chat rooms**: Hacker forums, online chat rooms, and bulletin boards often contain discussions related to the latest vulnerabilities, exploits, and attack techniques. |
||||
|
||||
- **Pastebin and GitHub**: These platforms offer code snippets and repositories that may contain working hacking tools or proof-of-concept exploits, making them valuable sources of OSINT. |
||||
|
||||
## Best Practices for OSINT Collection |
||||
|
||||
Collecting and analyzing OSINT for threat intelligence may seem like a daunting task, but by following these best practices, you can effectively incorporate it into your cyber defense strategies: |
||||
|
||||
- **Set clear goals and objectives**: Define what you want to achieve with your OSINT collection efforts and how it contributes to your organization's threat intelligence initiatives. |
||||
|
||||
- **Establish a methodology**: Develop a structured approach and process for searching, collecting, and analyzing OSINT data. |
||||
|
||||
- **Filter your data**: As the volume of data available from OSINT sources can be overwhelming, it's essential to filter the data gathered effectively. Prioritize information that is relevant to your organizational context and specific intelligence requirements. |
||||
|
||||
- **Maintain up-to-date knowledge**: Regularly review newly available OSINT and stay current with the latest tactics, techniques, and procedures utilized by threat actors. |
||||
|
||||
- **Collaborate and share with peers**: The security community is known for collaboration and knowledge sharing. Engage with other security professionals to benefit from their knowledge and experience. |
||||
|
||||
In conclusion, OSINT is a significant aspect of threat intelligence that helps organizations identify and mitigate potential security threats. By effectively collecting and analyzing OSINT, you can gain a better understanding of the ever-evolving threat landscape and develop more effective strategies to protect your organization. |
||||
- [@article@OSINT Framework](https://osintframework.com/) |
||||
- [@course@Open-Source Intelligence (OSINT) in 5 Hours](https://www.youtube.com/watch?v=qwA6MmbeGNo&t=457s) |
||||
@ -1,24 +1,12 @@ |
||||
# Basics of Vulnerability Management |
||||
|
||||
Vulnerability management is a crucial aspect of cybersecurity, as it helps organizations to identify, prioritize, and remediate potential risks in their networks, systems, and applications. It involves continuous processes and practices designed to protect sensitive data by reducing the attack surface and minimizing the likelihood of a breach. |
||||
Vulnerability management is the process of identifying, evaluating, prioritizing, and mitigating security vulnerabilities in an organization's systems, applications, and networks. It is a continuous, proactive approach to safeguarding digital assets by addressing potential weaknesses that could be exploited by attackers. The process begins with **vulnerability scanning**, where tools are used to detect known vulnerabilities by analyzing software, configurations, and devices. |
||||
|
||||
## Importance of Vulnerability Management |
||||
Once vulnerabilities are identified, they are **assessed and prioritized** based on factors such as severity, potential impact, and exploitability. Organizations typically use frameworks like CVSS (Common Vulnerability Scoring System) to assign risk scores to vulnerabilities, helping them focus on the most critical ones first. |
||||
|
||||
- **Prevent cyberattacks**: By addressing vulnerabilities before they can be exploited, organizations reduce the chances of successful attacks and protect their critical assets. |
||||
- **Comply with regulations**: Organizations must adhere to various data protection standards and regulations, such as GDPR, HIPAA, or PCI DSS. A robust vulnerability management program can help meet these requirements. |
||||
- **Maintain customer trust**: Frequent security breaches can lead to reputational damages, making it vital to prioritize vulnerability management as a means to safeguard customer data. |
||||
- **Save costs**: Proactively identifying and mitigating vulnerabilities reduces the financial implications of dealing with a security breach, including the costs of incident response, legal liabilities, and penalties. |
||||
Next, **remediation** is carried out through patching, configuration changes, or other fixes. In some cases, mitigation may involve applying temporary workarounds until a full patch is available. Finally, continuous **monitoring and reporting** ensure that new vulnerabilities are swiftly identified and addressed, maintaining the organization's security posture. Vulnerability management is key to reducing the risk of exploitation and minimizing the attack surface in today's complex IT environments. |
||||
|
||||
## Components of Vulnerability Management |
||||
Learn more from the following resources: |
||||
|
||||
- **Vulnerability Assessment**: Regular vulnerability assessments are essential to identify security weaknesses. This includes scanning networks, system components, software, and applications to identify existing vulnerabilities. |
||||
|
||||
- **Risk Analysis**: After identifying vulnerabilities, it is essential to assess their potential risks. This involves determining the likelihood and impact of each vulnerability, prioritizing them based on severity, and deciding which vulnerabilities to address first. |
||||
|
||||
- **Remediation**: The remediation process involves implementing patches, updates, or configuration changes to address the identified vulnerabilities. It is crucial to regularly review and ensure that patches have been applied effectively to prevent further exploitation. |
||||
|
||||
- **Verification**: After remediation, organizations must verify that the implemented solutions have effectively eliminated the risk posed by the vulnerability. Verification processes may include re-scanning and penetration testing. |
||||
|
||||
- **Reporting**: Maintaining comprehensive and accurate records of vulnerability management activities is essential for regulatory compliance and informing key stakeholders about the organization's security posture. Regular reporting can also aid in identifying problem areas and trends, allowing decision-makers to allocate resources and plan accordingly. |
||||
|
||||
By implementing a thorough vulnerability management program, organizations can significantly reduce their risk exposure and improve their overall cybersecurity posture. In today's digital landscape, proactively managing vulnerabilities is a critical step in safeguarding sensitive information and maintaining customer trust. |
||||
- [@article@What is vulnerability management?](https://www.rapid7.com/fundamentals/vulnerability-management-and-scanning/) |
||||
- [@video@Vulnerability Management explained by experts](https://www.youtube.com/watch?v=RE6_Lo2wSIg) |
||||
|
||||
@ -1,21 +1,8 @@ |
||||
# Bluetooth |
||||
|
||||
**Bluetooth** is a wireless technology used to transfer data between devices over short distances. It operates in the 2.4 GHz frequency band and offers a reasonably secure means of communication between devices like smartphones, computers, headphones, and more. |
||||
Bluetooth is a short-range wireless technology standard used for exchanging data between fixed and mobile devices over short distances. While it offers convenience for connecting peripherals and transferring information, it also presents several security concerns in the cybersecurity landscape. Bluetooth vulnerabilities can potentially allow attackers to intercept communications, execute malicious code, or gain unauthorized access to devices. Common attacks include bluejacking, bluesnarfing, and bluebugging. To mitigate these risks, cybersecurity professionals recommend regularly updating device firmware, using the latest Bluetooth protocols, enabling encryption, and turning off Bluetooth when not in use. Despite ongoing security improvements, Bluetooth remains an attack vector that requires vigilant monitoring and protection in both personal and enterprise environments. |
||||
|
||||
Below are some key points about Bluetooth: |
||||
Learn more from the following resources: |
||||
|
||||
- **Short-range communication**: Bluetooth typically works within a radius of 10 meters (33 feet), giving it a significant advantage in terms of power consumption when compared to other wireless technologies such as Wi-Fi. The short range also reduces the chances of interference between devices. |
||||
|
||||
- **Low power consumption**: Bluetooth devices are designed to use relatively low power compared to other wireless technologies. This aspect contributes to their widespread adoption in battery-powered devices like wearable gadgets and IoT sensors. |
||||
|
||||
- **Convenience**: Bluetooth allows for easy, automatic connection between devices once they have been paired. This 'pair and play' functionality ensures users can quickly establish connectivity between their devices with minimal effort. |
||||
|
||||
- **Security**: Bluetooth includes security features like encryption and authentication, which ensure secure communication between paired devices. However, users must remain vigilant in terms of keeping their devices up-to-date with the latest Bluetooth security patches and protocols. |
||||
|
||||
- **Potential vulnerabilities**: Despite its built-in security measures, Bluetooth is not immune to cyber attacks. Some common risks include "bluejacking" (unauthorized sending of messages or files), "bluesnarfing" (unauthorized access to device data), and "BlueBorne" (an attack vector that exploits Bluetooth connections to infiltrate devices and spread malware). Users should be cautious in their usage of Bluetooth and follow best practices like not accepting unknown connection requests and turning off Bluetooth when not in use. |
||||
|
||||
In conclusion, Bluetooth offers a convenient means of connecting devices wirelessly. While it provides reasonably secure communication, users must stay informed about potential vulnerabilities and follow good security practices to safeguard their devices. |
||||
|
||||
- [@article@Bluetooth security risks to know (and how to avoid them)](https://us.norton.com/blog/mobile/bluetooth-security) |
||||
- [@official@Bluetooth security best practices from official website](https://www.bluetooth.com/learn-about-bluetooth/key-attributes/bluetooth-security/) |
||||
- [@feed@Explore top posts about Bluetooth](https://app.daily.dev/tags/bluetooth?ref=roadmapsh) |
||||
- [@article@Bluetooth in Cyber Security](https://www.zenarmor.com/docs/network-basics/what-is-bluetooth) |
||||
- [@video@Everything about Bluetooth Security](https://www.youtube.com/watch?v=i9mzl51ammA) |
||||
|
||||
@ -1,24 +1,7 @@ |
||||
# Box |
||||
|
||||
[Box](https://www.box.com/) is a popular cloud storage service that provides individuals and businesses with a platform to securely store, share, and access files and documents from any device. Box is known for its emphasis on security and collaboration features, making it an ideal choice for businesses who want a secure way to share and collaborate on files with their teams. |
||||
Box is a popular cloud storage service that provides individuals and businesses with a platform to securely store, share, and access files and documents from any device. Box is known for its emphasis on security and collaboration features, making it an ideal choice for businesses who want a secure way to share and collaborate on files with their teams. |
||||
|
||||
## Features |
||||
Learn more from the following resources: |
||||
|
||||
- **Security:** Box ensures the data stored within their platform is secure by implementing various security measures, such as encryption (in-transit and at-rest), multi-factor authentication, and granular access controls. |
||||
- **Collaboration:** Users can easily invite collaborators, assign permissions, and share files via secure links within Box. It also features real-time document editing and file version history. |
||||
- **Integrations:** Box integrates with several other applications and services, such as Microsoft Office 365, Google Workspace, Salesforce, Slack, and more. |
||||
- **Box Drive:** With Box Drive, users can access and work on their files directly from the desktop, without downloading them locally, making it easy to keep files up-to-date. |
||||
|
||||
## Pricing |
||||
|
||||
Box offers a [variety of pricing plans](https://www.box.com/pricing), catering to different user requirements. These include: |
||||
|
||||
- **Individual Plan:** Free, with limited storage and features. |
||||
- **Personal Pro Plan:** $10/month, includes 100GB storage, larger file size support, and additional features. |
||||
- **Business Plans:** Starting at $5/user/month, tailored to meet the needs of small to enterprise-level businesses, with increased storage, advanced security, and much more. |
||||
|
||||
## Privacy & Compliance |
||||
|
||||
Box is compliant with various international privacy laws and regulations, such as GDPR, HIPAA, and FedRAMP. It also undergoes third-party audits and assessments to verify the efficacy of their security measures. |
||||
|
||||
In conclusion, Box is a highly secure and feature-rich cloud storage service that is specifically designed for businesses and individuals who require advanced security and collaboration functionality. |
||||
- [@official@Box Website](https://www.box.com/en-gb/home) |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue