How to build your first website with HTML and CSS and publish it free

TUREFF• •0

You can make a real, public website with nothing but a text editor, a browser and a free hosting account. No framework, no build tools, no paid hosting. Learning plain HTML and CSS first also makes every framework you meet later much easier to understand.

What HTML and CSS each do

HTML is the structure and content: this is a heading, this is a paragraph, this is a link, this is an image.
CSS is the presentation: colours, fonts, spacing and layout.

Keep them separate. Your HTML should still make sense if all the styling disappeared.

Setting up

Create a folder for the project and inside it a file called index.html. Open it in a code editor such as Visual Studio Code, which is free, and open the same file in your browser. Every time you save, refresh the browser to see the change.

The skeleton of a page

Every HTML page starts with a doctype declaration telling the browser it is modern HTML, then an html element containing two parts:

the head, holding information about the page: the character set (UTF-8), a viewport line so it displays properly on phones, the title shown in the browser tab, and a link to your stylesheet
the body, holding everything visible

Elements are written as an opening tag and a closing tag in angle brackets, with the content between them. Most editors will type the whole skeleton for you if you type an exclamation mark and press Tab.

The tags you will use most

h1 to h6 for headings. Use one h1 per page for its main title, then h2 for sections.
p for paragraphs.
a for links, with the address in its href attribute.
img for images, with the file in src and a description in alt for people using screen readers and for when the image fails to load.
ul and ol for bulleted and numbered lists, with li for each item.
header, nav, main, section and footer to label the parts of the page. They look like nothing on their own but make the page clearer to browsers, search engines and assistive technology.

Adding CSS

Create a file called style.css and link it from the head. A CSS rule names what to style (a selector) and then, in curly braces, a list of properties and values. Start with:

a readable font and font size on the body
a maximum width for the main content, with automatic left and right margins to centre it
comfortable line height, around 1.5
colours for text, background and links

You can style every paragraph by naming the element, or style specific things by giving them a class in the HTML and selecting it in CSS with a dot before the class name.

The box model

Every element is a box: the content, then padding inside the border, then the border, then margin outside it. Most layout confusion comes from this. Setting box-sizing to border-box on everything makes widths behave the way you expect.

Layout with flexbox

Flexbox arranges children in a row or column. Set display to flex on the parent and its children line up side by side. Then:

justify-content spaces them along the row (start, centre, space-between)
align-items lines them up across it
gap puts space between them
flex-wrap set to wrap lets them drop onto a new line on narrow screens

A navigation bar, a row of cards, or a logo on the left with links on the right are all a few lines of flexbox.

Making it work on phones

Keep the viewport line in the head, avoid fixed widths in pixels for large boxes, and use a media query to change the layout below a certain screen width. Test by narrowing your browser window or using its device mode in the developer tools.

Publishing free with GitHub Pages

GitHub Pages hosts static sites like this one. According to GitHub's documentation, on a free account it works for public repositories; private repositories need a paid plan.

Create a GitHub account and a new public repository.
Upload your index.html, style.css and images.
In the repository settings, open Pages and choose to publish from your main branch.
After a minute or two your site appears at an address based on your username.

Netlify and Cloudflare Pages also have free tiers for static sites. Check each one's current terms. Post a link to your first site or a layout problem you cannot solve in the comments, and others can take a look.