What you need
- The template folder, unzipped
- A code editor. VS Code is free and shows HTML in color, which makes it easier to see what you are changing.
- A browser to check your work: double-click index.html to open it.
1. Change the text
Open index.html in the editor. The words you see on the page are in the file between tags, for example <h1>Welcome</h1>. Change only the words between the angle brackets, save, and refresh the browser.
2. Swap the images
Find the image folder (often img or assets/img). The easiest way is to give your photo the same name as the one you are replacing. Use photos that are about the same shape, and compress them first so the site stays fast.
3. Change the colors
Bootstrap templates usually have a main CSS file, such as css/styles.css. Search it for the main color code (for example #ffc800) and replace it with yours. For Tailwind templates, colors are classes in the HTML, like bg-blue-500; change them to another Tailwind color.
Our make it yours tool can add a small your-brand.css file that sets your main color and font for you.
4. Change the font
If the template loads a font from Google Fonts, you will see a <link> in the head of each page. Swap the font name there and in the CSS file, or delete the link and use a system font.
5. Update the menu and links
Make sure each menu link points to a page or section that exists. On one-page templates, links like #about jump to a section with id="about".
6. Keep what the license asks for
Leave the LICENSE file in place for MIT templates, and keep the design credit link for CC BY templates such as HTML5 UP.
7. Check on a phone
Open the page in your browser, make the window narrow or use the browser's device mode, and check the menu, buttons and text.
When you are happy, put it online.
