Code Universe

Experiment with HTML, CSS, and JavaScript in one place!

Main HTML:

Live Preview

×

HTML Tips

<h1> to <h6>: Headings
<p>: Paragraph
<a href="">: Link
<img src="" alt="">: Image (always use alt!)
<ul>, <ol>, <li>: Lists
<div>: Generic container
<span>: Inline container
<input>, <form>, <button>: Forms
<table>, <tr>, <td>, <th>: Tables
<meta charset="UTF-8"> for special characters
Use semantic tags: <header>, <nav>, <main>, <footer>, <section>, <article>
Use MDN HTML Reference

CSS Tips

Selectors: body, .class, #id, [attr=value]
Properties: color, background, margin, padding, border, font-size
Box model: width, height, margin, border, padding, content
Flexbox: display: flex; justify-content; align-items
Grid: display: grid; grid-template-columns
Pseudo-classes: :hover, :active, :focus
Responsive: @media (max-width: 600px) { ... }
Animations: @keyframes, animation, transition
Use MDN CSS Reference

JavaScript Tips

console.log('Hello!'); for debugging
document.getElementById('id'), document.querySelector('.class')
let, const, var for variables
function myFunc() { /*...*/ }
Arrow functions: const f = () => {}
Events: element.addEventListener('click', fn)
Loops: for, while, forEach
JSON: JSON.stringify(obj), JSON.parse(str)
Template literals: `Hello ${name}`
Use MDN JS Reference

General Web Dev Tips

Indent your code for readability
Use comments: // for JS, /* ... */ for CSS,  for HTML
Test in multiple browsers
Use HTML Validator
Use Can I use for browser support
Check Google Fonts for web fonts
Use Unsplash for free images
Learn more at MDN Web Docs

×

Add New File

File Name:

Type: