Help!
The aim of this section is to give you information about common problems and how to get started with the basics. It is not all the answers - there are a lot of other resources on the Internet you can use to help you with HTML and CSS.
Have you 'unzipped' the file?
When you first download this template it will be compressed in a zip file. Although you can open some pages the website will not work properly. Make sure you have right clicked on the zipped file (it has a zip on the icon) and selected Extract all. Once you have done that, move the unzipped folder out of your downloads folder to avoid confusion then open this page and read the instructions below to help you get started.
How do I change the website?
Web pages can be opened in two ways - viewing or editing. To view the web page you open it in a browser such as Chrome or Edge. This is usually the default way of opening a web page. To edit it you need to right click on the file and 'Edit with Notepad++'. Other editors are available but if you are in school and unsure, this would be a good way of getting started.
A lot of the code/markup can be ignored. You need to scan down until you see a familiar part. A good start is in the hero section where it says Large Hero Title in font coloured black. Edit this title then save the page, go back to the browser and refresh the page to see your change.
A lot of the text on this website is lorem ipsum - it's text that designers use to look like words and show what it would look like with actual content. It is not an actual language and you can easily replace it with your own content. The main content of the website is written inside paragraph tags (<p>). You can highlight the words inside the tags but keep the <p>opening and closing paragraph tags</p> either side.
If you are deleting sections or content, remember to delete 'tag to tag'. For example if you are removing a paragraph instead of editing it, delete the opening (<p>) and closing (</p>) tag as well. If you are deleting a section, delete the opening (<section>) and closing (</section>) tag as well.
How do I change the hero (header/banner) picture?
The file path for the hero picture is in the css/styles.css, not the HTML document, but needs opening in Notepad++ as well. Scroll through and look for mountains.jpg which is the file name you change in exactly the same way as for the image. NOTE: you need the '../assets/' in front of the filename as well as the apostrophes so do not delete them.
How do I change the other pictures?
The website is set up to make it easy for you to substitute your own content. There is an assets folder that you need to save any pictures in that you want to use. When you save them do the following:
- Save in the assets folder
- Use a short name
- Make the name lowercase with no spaces
- Check it is JPG or PNG
Once that is done you can adjust the file name in the template to match your downloaded picture. For example, <img class="is-rounded" src="assets/cheesy-bake.jpg" alt="Cheesy Bake"> becomes <img class="is-rounded" src="assets/your-picture.jpg" alt="Your picture description">. If it does not work, it is usually because the filenames do not match, the file extension is wrong or you have not saved it in the correct place.
How do I change colours?
While you are in the styles.css file, you might want to change some of the colours. The easiest way to start is by finding a HTML colour picker website that lets you choose a colour and get the hashtag colour code. You then change the colour code in the CSS document.
It is also important to remember the process of 'edit --> save --> refresh' regularly so you can identify errors as you go along.
Adding more pictures to the gallery
On the gallery page you can add more pictures. When you look at the code there is a 'start' and 'end' comment for each picture. Copy and paste comment to comment. If you want a whole row, copy/paste four of them.