Build your first websites with HTML and style them beautifully with CSS.
Try in Applaa Builder — FreeHTML uses tags to structure the page. <h1> is the biggest heading, <h2> smaller, and <p> is a paragraph. Every tag has an opening and closing part.
<a href="url">text</a> makes a link. <img src="url" alt="description"> shows an image. Links can go to other pages or to a place on the same page.
<div> is a block container (starts on a new line); <span> is inline (stays in the same line). Use them to group elements and apply CSS or JavaScript.
Semantic tags describe meaning: <header>, <nav>, <main>, <section>, <article>, <footer>. They help accessibility and SEO, and make the structure clear.
Tables organize data in rows and columns. Use <table>, <tr> (row), <th> (header cell), <td> (data cell). Add <thead> and <tbody> for structure.
Forms collect user input. Use <form>, <input> (text, number, checkbox, submit), <label>, and <button>. The name attribute identifies the field when the form is submitted.
A form can have action="url" (where to send data) and method="GET" or "POST". On submit, the browser sends the input names and values. Use JavaScript or a server to handle the submission.
The <head> contains metadata: <title> (browser tab), <meta charset="utf-8"> (character encoding), <meta name="viewport" content="width=device-width"> for mobile. Link to CSS with <link rel="stylesheet" href="style.css">.
Use semantic HTML (header, nav, main). Add alt text to images. Use <label> for inputs. Ensure good contrast and that keyboard navigation works. aria-label can describe elements for screen readers.
Special characters use entities: < for <, > for >, & for &, for non-breaking space, © for ©. Use them when you need to show the character, not use it as code.
CSS stands for Cascading Style Sheets. It's the language that styles your web pages — colors, fonts, spacing, and layout. HTML is the skeleton, CSS is the skin and clothes! You write CSS rules that say: 'target this element, apply these styles'. One CSS file can control the look of an entire websit…
CSS styles your HTML. You can set color, font-size, font-family, and background-color. Use a <style> tag or a separate .css file. Selectors like h1 or .class name pick which elements to style.
A CSS rule has two parts: a selector (what to target) and declarations (what to change). You can select by tag name (h1), class (.my-class), or ID (#my-id). Classes are the most common — add a class in HTML and style it in CSS. Properties like color, font-size, and background control appearance.
CSS gives you many ways to set colors: named colors (red, blue), hex codes (#ff5733), rgb(), or hsl(). Backgrounds can be solid colors, images, or gradients. The linear-gradient() function creates smooth transitions between colors — great for hero sections and buttons.
Typography is huge in design! CSS lets you control font-family (typeface), font-size, font-weight (bold), line-height (spacing between lines), text-align, and text-decoration (underline, strikethrough). Use Google Fonts by adding a link in HTML, then reference the font name in CSS.
px is pixels (fixed). em is relative to the element's font size. rem is relative to the root font size. % is percentage of the parent. Use rem for scalable typography.
Every HTML element is a box! The CSS box model has four layers: content (the actual text/image), padding (space inside the border), border (the line around it), and margin (space outside the border). Understanding this is key to spacing elements correctly. Use box-sizing: border-box so padding does…
Every element is a box. You can set width, height, margin (space outside), and padding (space inside). display: flex; on a parent arranges children in a row or column. Use class and id to target specific elements.
Flexbox makes it easy to arrange items in a row or column. Set display: flex on a container, then control direction, alignment, and spacing. justify-content aligns items along the main axis; align-items aligns along the cross axis. gap adds space between items without needing margins.
Flexbox: justify-content (main axis), align-items (cross axis), flex-wrap, flex-grow, flex-shrink. Use flex: 1 to let items share space. gap adds space between items.
Pseudo-classes style elements in a certain state. :hover when the mouse is over, :focus when focused, :first-child for the first child. Example: a:hover { color: red; }
Transitions animate a property change over time. Use transition: property duration; e.g. transition: background 0.3s; Then change the property (e.g. on hover) and it animates.
CSS Grid is perfect for two-dimensional layouts (rows AND columns at once). Define grid columns with grid-template-columns. Use fr units to share available space. gap controls gutters between cells. Grid is ideal for card galleries, page layouts, and dashboards.
A responsive website looks great on phones, tablets, and desktops. Use media queries to apply different styles at different screen widths. The mobile-first approach starts with small screen styles, then adds @media (min-width) for larger screens. Relative units like %, vw, and rem help elements sca…
CSS variables (custom properties) let you store values and reuse them everywhere. Define them on :root and use them with var(). Changing one variable instantly updates everything that uses it — great for themes! Let's put everything together and style a mini landing page.
CSS can animate elements without JavaScript! transition smoothly changes properties when they change (like on hover). @keyframes defines an animation sequence with from/to or percentage steps. animation: then applies it. Animations make UIs feel alive and fun.