CodeLab
Tutorials For Everyone
Run
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Welcome to Codelab Editor</title> <style> body { font-family: 'Inter', sans-serif; background: linear-gradient(to bottom, #111827, #000000); color: white; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 1rem; margin: 0; } .container { background-color: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border-radius: 0.75rem; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); padding: 2rem; text-align: center; max-width: 80rem; width: 100%; } .heading-gradient { font-size: 2.25rem; font-weight: 600; background-image: linear-gradient(to right, #6366F1, #8B5CF6); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 1.5rem; } .paragraph { font-size: 1.125rem; color: #D1D5DB; margin-bottom: 2rem; } .button-group { display: flex; justify-content: center; gap: 1rem; } .gradient-button { background-image: linear-gradient(to right, #8B5CF6, #3B82F6); text-decoration: none; color: white; font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease-in-out, background-image 0.3s ease-in-out; cursor: pointer; border: none; display: inline-flex; align-items: center; justify-content: center; } .gradient-button:hover { transform: translateY(-2px); background-image: linear-gradient(to right, #7E5AF0, #2563EB); } .secondary-gradient-button { background-image: linear-gradient(to right, #EC4899, #FCD34D); color: #1F2937; } .secondary-gradient-button:hover { background-image: linear-gradient(to right, #DB2777, #FBBF24); } .preview-card { margin-top: 2rem; text-align: center; padding: 1.5rem; background-color: rgba(0, 0, 0, 0.5); border-radius: 0.5rem; border: 1px solid rgba(255, 255, 255, 0.05); } .preview-title { font-size: 1.5rem; font-weight: 600; color: #86EF7D; margin-bottom: 1rem; } .preview-text { color: white; } .code-block { font-size: 0.75rem; color: #D1D5DB; margin-top: 0.5rem; padding: 1rem; border-radius: 0.375rem; background-color: rgba(0, 0, 0, 0.2); overflow-x: auto; text-align: left; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .more-button { background-image: linear-gradient(to right, #6b7280, #374151); color: white; font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease-in-out, background-image 0.3s ease-in-out; cursor: pointer; border: none; display: inline-flex; align-items: center; justify-content: center; } .more-button:hover { transform: translateY(-2px); background-image: linear-gradient(to right, #4b5563, #1f2937); } </style> </head> <body class="bg-gradient-to-br from-gray-900 to-black text-white flex justify-center items-center min-h-screen p-4"> <div class="container"> <h1 class="heading-gradient"> Welcome to Codelab Editor </h1> <p class="paragraph"> Start typing HTML, CSS, and JavaScript, jQuery to see your code come to life. This editor is designed to help you learn, experiment, and build amazing things for the web. </p> <div class="button-group"> <a href="html/" target="_blank" class="gradient-button"> Learn HTML </a> <a href="css/" target="_blank" class="gradient-button secondary-gradient-button"> Explore CSS </a> <a href="/" target="_blank" class="gradient-button more-button"> More.. </a> </div> <div class="preview-card"> <h2 class="preview-title">Live Preview Example</h2> <p class="preview-text"> Type some HTML on left side and see the output in real-time on right side! </p> </div> </div> </body> </html>
Editor Commands
Ctrl
F
Find
Ctrl
G
Find Next
Ctrl
⇧
G
Find Previous
Ctrl
⇧
F
Find & Replace
Ctrl
]
Indent Code Right
Ctrl
[
Indent Code Left
⇧
Tab
Auto Indent Code
Ctrl
/
Line Comment
Ctrl
Alt
/
Block Comment
TutsInsider Actions
Alt
S
Run Code
Ctrl
C
Copy Editor Code
Ctrl
A
Select All Editor Code
Ctrl
S
Save/Download
Ctrl
Alt
X
Rotate
Ctrl
Alt
T
Switch Theme
Ctrl
⇧
C
Open Console
Esc
Close Console