HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials
Getting started

How to Use

A guide to tutorials, tools, Try It Editor, insights, search, dashboard, and certificates—including complete workflows for every browser tool.

01 - Choose your path

Start with your goal

Different sections serve different learning styles and speeds.

  • Tutorials for structured, step-by-step learning
  • Tools for quick developer utilities
  • Try It Editor to write and run code in the browser
  • Insights for articles, guides, and broader support

02 - Tutorials

Structured learning

Follow a clear, ordered path to build real understanding.

  • Open /tutorials and choose a topic
  • Start from lesson one if you are new
  • Move lesson by lesson to keep the path clear
  • Stay logged in for progress tracking and dashboard access

03 - Tools and practice

Practical work

Write, run, and validate code without leaving the browser.

ToolsOpen /tools for formatting, generating, minifying, or validating code.
Try It EditorWrite or paste code, then press Run to preview the result instantly.

04 - Search and dashboard

Save time navigating

Use built-in navigation to jump directly where you need to go.

  • Header search when you know what you need
  • Dashboard to continue your learning path
  • Main menu to browse major site sections

05 - Certificates and help

Certificates and support

Earn verifiable certificates once you complete a supported tutorial flow.

  • Certificates require completing the full tutorial flow
  • Use Certificate Verify to validate any certificate
  • Use the Contact page if anything feels unclear
Complete tools guide

From input to finished result

Every utility runs in your browser. Use this shared workflow, then follow the exact instructions for the tool you need.

1

Add input

Paste content into the left panel. JSON, CSS, and HTML tools also accept a compatible file dropped directly onto the input area.

2

Choose settings

Set the mode, colors, quantities, date interpretation, or visual properties offered by the selected tool.

3

Run the tool

Press the primary action button. Results, validation messages, accessibility checks, or a visual preview appear on the right.

4

Use the result

Copy the output, download it with the appropriate file extension, or select Reset to clear the workspace and start again.

Try It Editor

Write code and run it in an isolated browser preview. Use Combined mode for one document or Split mode to manage HTML, CSS, and scripts separately.

Open Try It Editor
Switch between Combined and Split editing without losing the current source.
Add HTML, CSS, JavaScript, jQuery, React/JSX, or JSON blocks in Split mode.
Use syntax highlighting, then Run to update the sandboxed preview.
Copy source, download it with the matching extension, or reset after confirmation.
Preview Mobile, Tablet, or Laptop widths and drag the divider on desktop.
Share a generated preview link or open the current result in a new browser tab.

Tool 01

JSON Formatter

Validate JSON and turn compact data into readable, indented JSON.

  1. 1Paste JSON or drop a .json file into the left panel.
  2. 2Select Format JSON. Valid data is formatted with two-space indentation.
  3. 3If parsing fails, correct the reported JSON error and run it again.
  4. 4Copy the formatted JSON or download formatted_json.json.
JSON validationFile dropTwo-space formatting.json download

Tool 02

CSS Minifier

Reduce CSS size by removing comments and unnecessary spacing.

  1. 1Paste a stylesheet or drop a .css file into the input panel.
  2. 2Select Minify CSS to create a compact single-output version.
  3. 3Review the result before using it in a production stylesheet.
  4. 4Copy the result or download minified_css.css.
Comment removalWhitespace reductionFile drop.css download

Tool 03

HTML Minifier

Create compact HTML by removing comments and redundant whitespace.

  1. 1Paste HTML or drop an .html or .htm file into the left panel.
  2. 2Select Minify HTML to process the markup.
  3. 3Review the compact result, especially where whitespace is meaningful.
  4. 4Copy the result or download minified_html.html.
HTML comment removalWhitespace reductionFile drop.html download

Tool 04

Base64 Encoder / Decoder

Convert readable text to Base64 or decode Base64 back to text.

  1. 1Paste plain text for encoding or a Base64 value for decoding.
  2. 2Choose Encode to Base64 or Decode from Base64 in the result header.
  3. 3Select Process Base64 and inspect the converted value.
  4. 4Copy the result or download base64_result.txt.
Encode modeDecode modeUTF-8 text support.txt download

Tool 05

URL Encoder / Decoder

Make a value safe for a URL component or restore encoded text.

  1. 1Paste a URL, query value, or encoded string into the input panel.
  2. 2Choose Encode URL or Decode URL from the mode selector.
  3. 3Select Process URL. Invalid encoded sequences are shown as an error.
  4. 4Copy the result or download url_result.txt.
Component encodingPercent decodingError feedback.txt download

Tool 06

UUID Generator

Generate random UUID v4 identifiers for records, APIs, and tests.

  1. 1Set Count from 1 to 50.
  2. 2Choose lowercase or uppercase letter formatting.
  3. 3Select Generate UUIDs to create one UUID v4 per line.
  4. 4Copy the complete list or download generated_uuids.txt.
UUID v41–50 valuesLetter-case controlBulk copy and download

Tool 07

Timestamp Converter

Translate Unix timestamps and date strings into common date formats.

  1. 1Enter Unix seconds, Unix milliseconds, or a recognizable date string.
  2. 2Use Auto Detect, or explicitly choose Seconds, Milliseconds, or Date String.
  3. 3Select Convert Timestamp.
  4. 4Review ISO UTC, UTC text, local time, Unix seconds, and Unix milliseconds.
Auto detectionUTC and local outputSeconds and milliseconds.txt download

Tool 08

CSS Gradient Generator

Build linear or radial two-color gradients with a live preview.

  1. 1Choose Linear or Radial. For a linear gradient, choose its direction or angle.
  2. 2Pick or type the start and end colors.
  3. 3Set both color-stop percentages from 0 to 100.
  4. 4Select Generate Gradient, preview it, then copy or download the CSS.
Linear and radial modesEight directionsColor stopsLive preview

Tool 09

Box Shadow Generator

Compose a CSS box-shadow visually instead of writing each value by hand.

  1. 1Set horizontal and vertical offsets, blur radius, and spread radius.
  2. 2Choose a shadow color and opacity from 0% to 100%.
  3. 3Choose whether the shadow should be inset.
  4. 4Select Generate Shadow, inspect the preview, and copy or download the CSS.
Offsets, blur, and spreadColor and opacityInset shadowsLive preview

Tool 10

Contrast Checker

Measure text/background contrast against WCAG AA and AAA thresholds.

  1. 1Choose or type the foreground text color and background color.
  2. 2Select Check Contrast to calculate the ratio.
  3. 3Review AA and AAA results for normal and large text.
  4. 4Hover the information icon beside a failed check for a suggested foreground color.
Contrast ratioFour WCAG checksPass/fail statesFailure suggestions
Copy any generated result Download results locally Reset the current workspace

Frequently asked questions

Do I need an account to use the website?

No account is required to access tutorials, tools, or insights. However, creating an account lets you track progress across lessons and access your personal dashboard.

When should I use Tutorials instead of Insights?

Use Tutorials when you want a structured, sequential learning experience on a topic. Use Insights when you are looking for articles, tips, or broader context to supplement what you already know.

What is the easiest workflow for a new user?

Pick a topic from /tutorials, start from lesson one, and move through each step in order. Use the Try It Editor alongside any lesson to practice as you go.

Will this page be updated later?

Yes. As new features and sections are added to the site, this guide will be updated to reflect the latest workflows and recommendations.

This guide will keep evolving as the site grows. If something still feels unclear, visit Contact.