saup21 / code-sandbox

A Common HTML/CSS and Js testing platform for users built using HTML, CSS, ReactJs.

Hi 👋, I'm Sauparna Gupta

A passionate and hardworking programmer from India

• 🌱 I’m currently learning Typescript, Ruby, etc.

• 👨‍💻 All of my projects are available at github

• 📫 How to reach me: [email protected]

🛠  Languages and Tools

⚙️  GitHub Analytics

🤝🏻  Connect with Me

code-sandbox's Issues

Set a good background

The journey as a developer and Open Source contributor begins here. You are beginning to work on an amazing app, and this is going to be the first screen the user sees. Your task is to design a great looking home page. This is going to be the main section of our application. Currently the project lacks good UI so lets fix the UI and make it pretty. Once we are done with the basic UI we can move to other sections

What to do?

• Work with color schemes
• Try to keep things dark(dark mode is the thing ;))
• Be creative

happy coding

Design an UI for the project

Hi, I can design the UI for this project which will look intimidating, and developers can do something similar
Please assign me

Redesign the header component

The journey as a developer and Open Source contributor begins here. You are beginning to work on an amazing app, and this is going to be the first screen the user sees. Your task is to design a great looking home page. This is going to be the main section of our application. Currently the project lacks good UI so lets fix the UI and make it pretty. Once we are done with the basic UI we can move to other sections

What to do?

• Work with color schemes
• Try to keep things dark(dark mode is the thing ;))
• Be creative and play with the components to find the perfect fit

happy coding

Integrate monaco editor for react

The monaco-editor is a well-known web technology based code editor that powers VS Code. This library handles the setup process of the monaco-editor and provides a clean API to interact with monaco from any React environment. The editor provides Rich IntelliSense, Validation for languages like HTML, CSS, JavaScript, etc which is perfect for our project.

What to do?

• Go to monaco-editor/react
• Read the docs
• Integrate

happy coding

Redesign the HTML section on monaco

The HTML section needs to be redesigned using the monaco editor.

What to do?

• Go through the docs of monaco
• Integrate the html section using monaco

happy coding

Styled the components and added fontsize functionality

Styled the components and added fontsize functionality
using usestate hook, props and useEffect hook
https://user-images.githubusercontent.com/83169198/151955930-77a186f0-cc5a-42d8-8532-abb2f20bcd7e.mp4