Good First Issues in CSS
Explore curated starter issues in high-scoring CSS repositories. Every listed issue belongs to a welcoming repository scored by C-Rankβ’ on PR merge rates, review responsiveness, and first-timer acceptance.
Arm Issue Sniper for fresh CSS beginner issues
Beginner issues in welcoming S/A-Tier repositories get snatched within 15 minutes. Receive instant alerts on Discord, Telegram, or Email the minute a maintainer opens a new task.
Live Good First Issues (30)
Real-Time Open GitHub IssuesFork, Commit, Merge - Medium Issue 3 (JavaScript) Return only the products that are in stock using .filter() method Note: You don't have ask permission to start solving the issue or get assigned, since these issues are supposed to be always open for new contributors. The actions-user bot will reset the file back to previous state for the next contributor after your commit is merged. So you can just simply start working with the issue right away! Issue created by Alshay1833. How to get started Open the tasks/javascript/medium directory from the root of your project. Then open the product-stock.js file and start implementing your solution! Description In this task, you have to return only the products that are in stock using .filter() method. Extra Challenge: Return only the names of the products in stock. Products: const products = [ { name: "Book", inStock: true }, { name: "Pen", inStock: false }, { name: "Phone", inStock: true }, { name: "Mug", inStock: false } ]; Expe
Fork, Commit, Merge - Medium Issue (Ada) Find the min, max, sum, and avg of the numbers in Ada Note: You don't have ask permission to start solving the issue or get assigned, since these issues are supposed to be always open for new contributors. The actions-user bot will reset the file back to previous state for the next contributor after your commit is merged. So you can just simply start working with the issue right away! Issue created by gregpuzzles1. How to get started Open the tasks/ada/medium directory from the root of your project. Then open the number_stats.adb file and start implementing your solution! Description In this task, the goal is to find the min, max, sum, and avg of the Numbers (3, 7, 2, 9, 5, 4). Expected output Sum: 30 Minimum: 2 Maximum: 9 Average: 5.00 How to run Navigate to the correct directory: cd tasks/ada/medium Compile the program: gnatmake number_stats.adb Run the program: .\number_stats.exe (Windows) ./number_stats (Mac, Linux) If you see the cor
Fork, Commit, Merge - Easy Issue 3 (JavaScript) Return a new array with all numbers greater than 10 but less than 20 Note: You don't have ask permission to start solving the issue or get assigned, since these issues are supposed to be always open for new contributors. The actions-user bot will reset the file back to previous state for the next contributor after your commit is merged. So you can just simply start working with the issue right away! Issue created by Alshay1833. How to get started Open the tasks/javascript/easy directory from the root of your project. Then open the greater-than.js file and start implementing your solution! Description In this task, you have to return a new array with all numbers greater than 10 but less than 20. Expected output [12, 15, 19] How to run Navigate to the correct directory: cd tasks/javascript/easy Run the program: node greater-than.js If you see the correct output in the console, you are ready to make a pull request! Check out README.md for m
Fork, Commit, Merge - Easy Issue 2 (JavaScript) Return a new array containing all even numbers using a .filter() method Note: You don't have ask permission to start solving the issue or get assigned, since these issues are supposed to be always open for new contributors. The actions-user bot will reset the file back to previous state for the next contributor after your commit is merged. So you can just simply start working with the issue right away! Issue created by Alshay1833. How to get started Open the tasks/javascript/easy directory from the root of your project. Then open the even-numbers.js file and start implementing your solution! Description In this task, you have to return a new array containing all even numbers using a .filter() method. Expected output [2, 4, 6, 8, 10] How to run Navigate to the correct directory: cd tasks/javascript/easy Run the program: node even-numbers.js If you see the correct output in the console, you are ready to make a pull request! Check out READM
Fork, Commit, Merge - Easy Issue (MATLAB) Create a MATLAB script that adds two numbers Note: You don't have ask permission to start solving the issue or get assigned, since these issues are supposed to be always open for new contributors. The actions-user bot will reset the file back to previous state for the next contributor after your commit is merged. So you can just simply start working with the issue right away! How to get started Navigate to the tasks/matlab/easy directory from the root of your project. Then open a file called addition.m and start implementing your solution! Description MATLAB is primarily used as a desktop application, and VS Code doesn't run MATLAB directly. However, you can use VS Code as an editor for MATLAB scripts. Issue for this task is to create a simple MATLAB script that adds two numbers and prints the result. How to run To test the program you have to first make sure you are in the right directory: cd tasks/matlab/easy Run the program with the command:
Fork, Commit, Merge - Easy Issue (Smalltalk) Create a Smalltalk Program to Calculate Factorial of a Number Note: You don't have ask permission to start solving the issue or get assigned, since these issues are supposed to be always open for new contributors. The actions-user bot will reset the file back to previous state for the next contributor after your commit is merged. So you can just simply start working with the issue right away! How to get started: Open the tasks/smalltalk/easy directory from the root of your project. Then open a file called factorial.st and start implementing your solution! Objective: The aim of this issue is to create a Smalltalk program that calculates the factorial of a given number and prints it to the console. Example output: Factorial of 5: 120 How to run: Make sure you are in the correct directory: cd tasks/smalltalk/easy Run the script: gst factorial.st To work with this issue, you need to have Smalltalk installed to your local machine. Check out READ
Fork, Commit, Merge - Easy Issue (Crystal) Implement a Simple HTTP Server in Crystal Note: You don't have ask permission to start solving the issue or get assigned, since these issues are supposed to be always open for new contributors. The actions-user bot will reset the file back to previous state for the next contributor after your commit is merged. So you can just simply start working with the issue right away! How to get started: Open the tasks/crystal/easy directory from the root of your project. Then open a file called server.cr and start implementing your solution! Objective: The goal of this task is to create a simple HTTP server using Crystal's built-in HTTP::Server module. The server should respond with a "Hello, world!" message for all incoming HTTP requests. How to run: Make sure you are in the correct directory: cd tasks/crystal/easy Run the server: crystal run server.cr You should see an output like Listening on http://127.0.0.1:3000. You can then navigate to this addres
Fork, Commit, Merge - Easy Issue (Vyper) Create a Contract to Manage a String Variable Note: You don't have ask permission to start solving the issue or get assigned, since these issues are supposed to be always open for new contributors. The actions-user bot will reset the file back to previous state for the next contributor after your commit is merged. So you can just simply start working with the issue right away! Navigate to the tasks/vyper/easy directory from the root of your project. Then open a file called StringManager.vy and start implementing your solution! Description: Create a simple Vyper contract that allows users to set, get, and delete a string. The contract should support the following features: Set a string. Get the current string. Delete the string and reset it to an empty string. How to Run: Make sure you are in the correct directory: cd tasks/vyper/easy. Compile the contract: vyper StringManager.vy. If everything goes smoothly, you should see a bytecode printed
Prerequisites I have searched for duplicate or closed issues and checked on main that it still appears. I have read the contributing guidelines Describe the issue In issue #3611, margin-bottom has been removed from .list-unstyled, making some examples being badly displayed, fro example: There are some examples in Tags, but we will have to check all components. Any information that could help to resolve the issue. (window.navigator.userAgent) Chrome 152 What version of the documentation are you using? v1.5
π What's broken? when I open the website then the buttons on the nav bar is not aligned neatly i.e half of the alignment is in left alignment and next half of the alignment is in right alignment 2.when i open the read docs page then also the nav bar looks are not nice π Steps to Reproduce Open the Easy Motion CSS website and in the home page only the alignment of the nav bar is not nice and professional Second issue is in the read docs page open the read docs page and inside the read docs page the nav bar looks are not professional and nice to see β Expected Behavior 1.The buttons in the nav bar must be centre aligned and also it should be added with modern Ui concepts like glass morphism 2.The nav bar in the home page and read docs page is not moving when i scroll to bottom it should be fixed to the top of the desktop which feels interactive and professional β Actual Behavior when I open the website the nav bar looks are interactive Ness is not there. what I will re
The loading spinner in the loading button is currently not vertically and horizontally centered within the button box. Expected behavior: The loading spinner should be positioned exactly in the center of the button, with equal spacing from all four sides. Issue: The spinner appears slightly misaligned instead of being centered within the loading button. Acceptance Criteria: Loading spinner is horizontally centered. Loading spinner is vertically centered. Spinner remains centered across different button sizes. No impact on the alignment of the other button states (Normal/Disabled)
Thew marketplace version of the theme is still the old one that no longer works. If you use the other methods it suggests, it doesn't fully work either. I found the simplest way that DOES work is to just copy the contents of custom.css and simply paste that into your custom.css in logseq which can be accessed from the settings menu. Maybe update the instructions to that for now while the others gets updated? (I assume you prefer a link so that it auto updates for the user)
The repository currently lacks a sleek, floating notification badge component to highlight unread messages, counts, or status alerts. Proposed Fix: Add a responsive glassmorphism notification badge component (ease-badge) with a smooth continuous pulse/bounce animation utility (ease-badge-pulse). I would love to be assigned to this issue and submit a PR!
π What's broken? π Steps to Reproduce Link EaseMotion CSS (specify version or CDN link used) Add this HTML: <element class="ease-..."> ... See the issue β Expected Behavior β Actual Behavior π Reproduction <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/easemotion.css" /> </head> <body> <!-- Your reproduction here --> </body> </html> π Environment Field Value EaseMotion CSS version e.g. 1.0.0 or CDN link Browser e.g. Chrome 124, Safari 17 OS e.g. Windows 11, macOS 14 πΈ Screenshot (optional) Note: Please do not open bug reports for contributions or feature ideas. Use the Feature Request template for those. If you have questions or need help, join our official Discord Server.
Fork, Commit, Merge - Medium Issue 1 (JavaScript) Implement a Simple Countdown Timer Note: You don't have ask permission to start solving the issue or get assigned, since these issues are supposed to be always open for new contributors. The actions-user bot will reset the file back to previous state for the next contributor after your commit is merged. So you can just simply start working with the issue right away! How to get started Open the tasks/javascript/medium/countdownTimer directory from the root of your project. Then open the script.js file and start implementing your solution! Description Create functionality for a countdown timer that counts down from 10 seconds to zero using JavaScript. Acceptance Criteria: The timer should count down to zero, updating the display every second. When the timer reaches zero, display a message saying "Time's up!". Do not modify the code in index.html or styles.css files. javascript-medium.mp4 How to run I
Fork, Commit, Merge - Medium Issue 2 (JavaScript) Implement a Simple Countdown Timer Note: You don't have ask permission to start solving the issue or get assigned, since these issues are supposed to be always open for new contributors. The actions-user bot will reset the file back to previous state for the next contributor after your commit is merged. So you can just simply start working with the issue right away! Issue created by v-hasini. How to get started Open the tasks/javascript/medium/screenTimeWarning directory from the root of your project. Then open the screenTimeWarning.js file and start implementing your solution! Description Create a small JavaScript function called startScreenTimeWarning to track how long a user spends on a webpage. After a set time limit, it should display a friendly reminder in console to take a break. How to run In the tasks/javascript/medium/screenTimeWarning directory, run node screenTimeWarning.js to start the application. Check out README.md for
Fork, Commit, Merge - Easy Issue (Spring Boot) Create a Spring Boot controller to display "Hello, Spring Boot" message Note: You don't have to ask permission to start solving the issue or get assigned, since these issues are supposed to be always open for new contributors. The actions-user bot will reset the file back to previous state for the next contributor after your commit is merged. So you can just simply start working with the issue right away! Description: Your task is to create a GET mapping in the HomeController class that handles requests to the root path ("/") and displays "Hello, Spring Boot" message using Thymeleaf templates. Start by navigating inside of the directory used in this project with the command: cd tasks/spring-boot/easy/hello Then run the following command to build and run the Spring Boot application: ./mvnw spring-boot:run After the application starts, you can open the HomeController.java file inside of src/main/java/org/forkcommitmerge/hello directory, an
Fork, Commit, Merge - Medium Issue (Docker) Multi-Stage Dockerfile for Web Application This task requires creating a multi-stage Dockerfile that builds a web application and serves it using nginx. Requirements: Build Stage: Use Node.js to build the application Production Stage: Use nginx to serve the built application Optimization: Minimize the final image size Configuration: Set proper environment variables and nginx configuration Files: Dockerfile - Multi-stage Dockerfile nginx.conf - Nginx configuration file README.md - This file Expected Outcome: A production-ready Docker image that efficiently builds and serves a web application. Note: You don't have ask permission to start solving the issue or get assigned, since these issues are supposed to be always open for new contributors. The actions-user bot will reset the file back to previous state for the next contributor after your commit is merged. So you can just simply start working with the issue right away! Issue created by .
Fork, Commit, Merge - Hard Issue (Docker) Microservices Architecture with Docker Compose This task requires creating a complete microservices architecture using Docker Compose with multiple services, networks, volumes, and health checks. Architecture Overview: Web Application Service (React/Node.js) - Frontend application API Service (Express.js) - Backend API Database Service (PostgreSQL) - Data persistence Cache Service (Redis) - Caching layer Nginx Reverse Proxy - Load balancing and routing Requirements: Services: Implement all 5 services with proper configuration Networks: Separate frontend and backend networks Volumes: Persistent data storage for database and cache Health Checks: Implement health checks for all services Environment Variables: Proper configuration management Logging: Centralized logging setup Dependencies: Service dependency management Files: docker-compose.yml - Main orchestration file nginx.conf - Reverse proxy configuration init.sql - Database initializatio
Fork, Commit, Merge - Hard Issue (Bash) Automated Backup Script with Rotation This task requires implementing a comprehensive backup script that handles file and database backups with automatic rotation and error handling. Requirements: File Backup: Backup multiple directories (/etc, /home, /var/www) Database Backup: Support PostgreSQL and MySQL databases Compression: Compress archives using tar and gzip Rotation: Automatically remove old backups (keep last 7) Logging: Comprehensive logging of all operations Disk Space Check: Verify sufficient space before backup Error Handling: Robust error handling with notifications Manifest: Create backup manifest with details Features: Error Handling: Uses set -euo pipefail for strict error handling Logging: All operations logged to file and console Notifications: Email notifications on backup failures Space Management: Checks available disk space before backup Rotation: Automatic cleanup of old backups Manifest: Creates detailed backup manifes
Fork, Commit, Merge - Medium Issue (Solid.js) Create a Quote Generator App in Solid.js In this task, you will create a simple web app for generating a quote using the Solid.js framework. This will help you learn the basic handling data fetching in Solid.js. Note: You don't have ask permission to start solving the issue or get assigned, since these issues are supposed to be always open for new contributors. The actions-user bot will reset the file back to previous state for the next contributor after your commit is merged. So you can just simply start working with the issue right away! Issue created by . Getting Started You can start by navigating to the folder ./task/solid/medium Once you are on that folder you can then install the packages that you are going to need to run Solid.js framework, you can do so by running npm i After installing the dependencies you can open the src directory and App.jsx file, and start implementing your solution! All the CSS classes needed in this projec
Fork, Commit, Merge - Easy Issue (Solid.js) Implement a Simple Counter in Solid.js In this task, you will implement a simple counter using the Solid.js framework. This will help you learn the basics of reading and updating signals in Solid.js. Note: You don't have ask permission to start solving the issue or get assigned, since these issues are supposed to be always open for new contributors. The actions-user bot will reset the file back to previous state for the next contributor after your commit is merged. So you can just simply start working with the issue right away! Issue created by . Getting Started You can start by navigating to the folder ./task/solid/easy Once you are on that folder you can then install the packages that you are going to need to run Solid.js framework, you can do so by running npm i After installing the dependencies you can open the src directory and App.jsx file, and start implementing your solution! All the CSS classes needed in this project has already be
Have a question, need help, or want to chat with the community? Please join our official Discord Server for general discussion, support, and help with EaseMotion CSS! If you're encountering a bug or proposing a feature, please use the corresponding templates instead.
Description The issue Often when I type into the code window, it opens a input dropdown where the command palette is. The dropdown says "No active cleanup profile" prompt. This issue happens every 1 to 3 keys that I press. How I know this extension is the problem I ran "Help: Start Extension Bisect" Steps to Reproduce Open any .cs file Click somewhere in the code window to start typing Press a few letter keys, between 1 to 3 is enough, Expected Behavior I expect to be able to type letters using key presses without opening anything. Actual Behavior Opens a drop down after a few keypresses. Extension Version 1.10.15 VS Code Instance VS Code Operating System ArchLinux .NET Version .NET 10.0.111 SDK Run Mode None MTP Enabled? (if testing-related) None C# Dev Tools Output No output Additional Context
Add a new example demonstrating a scroll-reveal animation using EaseMotion CSS. The demo should show how elements can smoothly appear when they enter the viewport, making it easier for developers to understand how EaseMotion CSS can be used for modern scrolling interactions. Requirements Create a new example under: submissions/examples/scroll-reveal-animation/ Add: demo.html style.css README.md Use existing EaseMotion CSS animation/utility classes wherever possible. Include multiple sections/cards so the scrolling effect is clearly visible. Keep the implementation responsive and beginner-friendly. Do not introduce external JavaScript libraries. Include a short README explaining: What the demo demonstrates How to run/view it Which EaseMotion classes are being used Expected Result A polished, responsive webpage where content elements reveal smoothly as the user scrolls through the page. Acceptance Criteria Demo works without console errors. Responsive on desktop and mobile screens. Uses
Issue At the time of writing, humble branch is 380+ commits behind from main branch. ROS humble still has support until 2027/05, so silently unmaintaining it may not be good. Also there's been some work that is specifically targeted to humble e.g. #1039 Related (sub?) issue On the other hand, on the tutorial page https://moveit.picknik.ai/ there may not be a straightforward way to switch to humble. Is that related to #240? (A workaround I found: Modify the URL to moveit.picknik.ai/humble)
Summary In easemotion/engine/parser.js, the token bounce exists in both ANIMATION_NAMES (animation) and EASING_MAP (easing alias mapped to the spring cubic-bezier). Since ANIMATION_NAMES is checked first, em="fade-in bounce" silently replaces the animation with bounce instead of applying bounce easing to fade-in. The EASING_MAP['bounce'] entry can never be reached for any input, and no warning is shown. Static-analysis finding based on reading main; not executed here. Location File: easemotion/engine/parser.js Function: parse() (dispatch order at ~lines 100-110; tables at ~lines 20-45) const EASING_MAP = { ... 'spring': 'cubic-bezier(0.34, 1.56, 0.64, 1)', 'bounce': 'cubic-bezier(0.34, 1.56, 0.64, 1)', }; const ANIMATION_NAMES = new Set([ ..., 'bounce', 'spin', 'ping', 'pulse', ... ]); if (ANIMATION_NAMES.has(token)) { // checked FIRST ast.animation = token; continue; } if (EASING_MAP[token]) { // unreachable for 'bounce' ast.easing = EASING_MAP[token]; Trig
Feature Request Summary feat(examples): Add pure CSS advanced component iteration 124. Adds comprehensive functionality to the EaseMotion-css repository.
Feature Request Summary feat(examples): Add pure CSS advanced component iteration 114. Adds comprehensive functionality to the EaseMotion-css repository.
Top CSS Repositories with Beginner Issues (16)
Updated Daily via GitHub GraphQLChange your GNOME Shell and GTK accent colors dynamically based on your wallpaper.
Fork, Commit, Merge. A project designed to help you familiarize yourself with the open source contribution workflow on GitHub!
OUDS Web is an accessible, ergonomic and Orange branded framework based on Orange Unified Design System and Bootstrap
A collection of themes/skins for 50 selfhosted apps!
A community version of the renowned "Learn You a Haskell" (LYAH) tutorials collection!
A sphinx-based centralized documentation repo for MoveIt 2
A PC client of SoundCloud with improvement made using electronjs
π§π»ββοΈ Dark theme for Logseq
Custom CSS to make the web transparent, beautiful and zen. Main style repo for the Zen Internet add-on
A lightweight, vanilla JS, open source BYOK (Bring Your Own Key) clone of the Google Antigravity UI. It currently features a live xterm.js terminal with direct local file system sync and a sidebar agent capable of running commands and editing files. Built in pure HTML/CSS/JS for maximum speed and zero installation.
Cleans the LinkedIn feed based on keywords and filters.
π Easily create your resume with Markdown on VSCode / Typora / Obsidian
My custom themes and mods for Zen browser
JuliaMono is a monospaced font for scientific and technical users, with comprehensive Unicode support.
cppreference.com html archive converter to microsoft help (for Visual Studio 2012+) and chm help (for Windows)
No repository description available.
How to make your first CSS open-source pull request
Finding approachable Good First Issues in CSS allows you to build real-world software engineering experience. Instead of submitting PRs to abandoned repositories, GetMerged verifies maintainer review speeds and first-timer acceptance rates before you write a single line of code.
Select any issue above to claim it directly on GitHub, or click a repository to inspect full maintainer review turnaround metrics and triage guidance!
Get this week's top welcoming repos + fresh Good First Issues for CSS
Free weekly email, scoped to CSS. No account needed - confirm once and unsubscribe anytime.