FOR TALENT
Blog Explore the trends. Codebrew Stay up to date. Interview Questions Get prepared. Coder Glossary Learn the concepts. Portfolio Showcase your projects. University Preferences Make the right choice. Roadmap Move forward step by step. Cheat Sheets Look up the shortcuts. Free Software Tools Get a hand. Podcast Listen on the go. Salaries Learn what the market pays. AI Tools Explore AI.FOR COMPANIES
Blog HR trends. Codebrew Stay in the loop. HR Webinars Hear from the experts. Case Studies Get inspired. E-book Download the guides. HR Calculation Tools Calculate with ease.
HTML Cheat Sheets
Use this HTML cheat sheet to create web pages faster and more efficiently.
Basic HTML Structure
// HTML Document Structure
// HTML Structure Resources
Elements and Attributes
// Common HTML Elements
// Elements and Attributes Resources
Forms and Input
// Form Element
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>// Forms and Input Resources
Semantic HTML
// Semantic Elements
// Semantic HTML Resources
Multimedia
// Embedding Video
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>// Multimedia Resources
Best Practices
// HTML Best Practices
// Best Practices Resources
Advanced HTML5 Features
// Canvas Element
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the canvas element.
</canvas>// Advanced HTML5 Resources
Accessibility
// Accessibility Best Practices
// Accessibility Resources
SEO Best Practices
// SEO Tips
// SEO Resources
Responsive Design
// Media Queries
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}// Responsive Design Resources
HTML5 APIs
// Geolocation API
navigator.geolocation.getCurrentPosition(function(position) {
console.log("Latitude: " + position.coords.latitude +
"
Longitude: " + position.coords.longitude);
});// HTML5 APIs Resources
Progressive Web Apps (PWAs)
// Service Workers
self.addEventListener("install", function(event) {
event.waitUntil(
caches.open("v1").then(function(cache) {
return cache.addAll([
"/",
"/styles/main.css",
"/script/main.js"
]);
})
);
});HTML5 Security
// Security Best Practices
// Security Resources
Advanced Multimedia
// Audio API
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var oscillator = audioCtx.createOscillator();
oscillator.type = "square";
oscillator.frequency.setValueAtTime(440, audioCtx.currentTime);
oscillator.connect(audioCtx.destination);
oscillator.start();// Multimedia Resources
HTML5 Game Development
// Game Loop
function gameLoop() {
requestAnimationFrame(gameLoop);
// Update game state
// Render game
}
gameLoop();// Game Development Resources
HTML5 Graphics
// SVG Basics
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>// Graphics Resources
Web Components
// Custom Elements
class MyElement extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
}
}
customElements.define("my-element", MyElement);// Web Components Resources
Internationalization
// i18n Best Practices
// Internationalization Resources
Land the career of your dreams!
Get inspired, learn, join competitions and grow in your job!
Sign up now