BTEC IT

Unit 6 Website Development

These tutorials build website skills in order: HTML basics, CSS basics, webpage layouts and reusable webpage components. Students can then combine the skills to design, build and improve their own Unit 6 website.

Start with Stages 1 and 2 to build the HTML and CSS foundations. Then use Stage 3 to practise full webpage layouts and templates, and Stage 4 to build individual components that can be reused inside a finished website.

Stage 1 - HTML foundations

  1. Understand what a static website is.
  2. Understand the difference between HTML and CSS.
  3. Create a correct project folder structure.
  4. Use clear file names such as index.html, about.html and style.css.
  5. Build a basic HTML page structure.
  6. Link an external CSS file to an HTML page.
  7. Use headings correctly from h1 to h3.
  8. Add paragraphs, lists and links.
  9. Insert images using correct file paths.
  10. Add meaningful alt text to images.
  11. Use semantic HTML such as header, nav, main, section and footer.
  12. Build a simple homepage.
  13. Build a basic navigation menu.
  14. Create links between pages.
  15. Build the about page.
  16. Build the timetable page.
  17. Build the contact page.
  18. Review the finished Tutorial 1 website.

Stage 2 - CSS foundations

  1. Understand CSS selectors.
  2. Use element selectors such as body, h1, p and img.
  3. Use class selectors for reusable styles.
  4. Understand when to use classes instead of styling every element separately.
  5. Style text using colour, font family, font size, font weight and line height.
  6. Style backgrounds using background colour and background images.
  7. Understand the box model.
  8. Use margin to control space outside an element.
  9. Use padding to control space inside an element.
  10. Use borders to show the edge of an element.
  11. Use width and height carefully.
  12. Use max-width to stop content becoming too wide.
  13. Use percentages for flexible widths.
  14. Use box-sizing: border-box.
  15. Control image sizes using width: 100% and height: auto.
  16. Use object-fit to stop images stretching.
  17. Use display properties such as block, inline and inline-block.
  18. Use Flexbox to place items in a row or column.
  19. Use justify-content to control horizontal spacing.
  20. Use align-items to control vertical alignment.
  21. Use gap to create clean spacing between items.
  22. Use flex-wrap to help layouts work on smaller screens.
  23. Build a navigation bar using Flexbox.
  24. Build a card layout using Flexbox.
  25. Style buttons and links clearly.
  26. Add simple hover effects where suitable.
  27. Keep CSS organised into sections with comments.