Developing Websites
OPEN COLLEGE NETWORK NORTHERN IRELAND
vocational
This subtopic introduces learners to the foundational skills required to plan, build, and publish basic web pages. It focuses on the practical application of web development concepts, including structuring content with HTML and enhancing appearance with CSS, before deploying the finished site online. Learners will gain hands-on experience in creating a simple, functional website from concept to live deployment, reinforcing industry-relevant vocational competencies.
10
Learning Outcomes
24
Assessment Guidance
26
Key Skills
10
Key Terms
25
Assessment Criteria
Assessment criteria
OCN NI Level 1 Award in Vocational Skills
OCN NI Level 1 Diploma in Vocational Skills
OCN NI Level 1 Certificate in Vocational Skills
OCN NI Level 2 Certificate in Vocational Skills
OCN NI Level 2 Award in Vocational Skills
OCN NI Level 2 Diploma in Vocational Skills
Topic Overview
The OCN NI Level 1 Award in Vocational Skills in Foundations for Learning is designed to help you build essential skills for further study, employment, and independent living. This qualification focuses on developing your personal, social, and employability skills through practical, hands-on activities. You will explore topics such as communication, teamwork, problem-solving, and self-management, all of which are crucial for success in any vocational or academic pathway.
This award is part of the Open College Network Northern Ireland's suite of vocationally-related qualifications, which are recognised by employers and educational institutions across the UK. By completing this course, you will gain a solid foundation in key skills that will support your progression to higher-level qualifications, such as GCSEs or vocational courses. The qualification is assessed through a portfolio of evidence, meaning you will demonstrate your learning through real-world tasks and reflections.
Why does this matter? In today's competitive world, employers and colleges look for more than just academic knowledge—they want individuals who can communicate effectively, work in teams, and solve problems independently. This course gives you the chance to develop these skills in a supportive environment, boosting your confidence and preparing you for the next steps in your education or career.
Key Concepts
Core ideas you must understand for this topic
- →Communication skills: Learn how to listen actively, speak clearly, and write appropriately for different audiences and purposes, such as in a job interview or group discussion.
- →Teamwork: Understand how to contribute to a group, respect others' opinions, and resolve conflicts constructively to achieve shared goals.
- →Problem-solving: Develop a step-by-step approach to identifying problems, generating solutions, and evaluating outcomes, using techniques like brainstorming and decision-making.
- →Self-management: Build skills in time management, organisation, and goal-setting to take responsibility for your own learning and personal development.
- →Employability skills: Recognise the attitudes and behaviours valued by employers, such as punctuality, reliability, and a positive work ethic.
Learning Objectives
What you need to know and understand
- Produce a simple website plan outlining purpose, audience, and navigation.
- Use appropriate HTML elements to structure text, lists, and media content.
- Apply CSS rules to modify font styles, colours, and page backgrounds.
- Demonstrate the process of uploading web files to a hosting service.
- Verify that published web pages display correctly in a web browser.
- Be able to plan and create web pages., Be able to structure and format web pages., Publish web pages to the Internet or an Intranet.
- Be able to plan and create web pages., Be able to structure and format web pages., Publish web pages to the Internet or an Intranet.
- Be able to create structures and styles for websites., Be able to use software tools to prepare content for websites., Be able to publish websites.
- Be able to create structures and styles for websites., Be able to use software tools to prepare content for websites., Be able to publish websites.
- Be able to create structures and styles for websites., Be able to use software tools to prepare content for websites., Be able to publish websites.
Assessment Criteria
Key criteria assessors look for in your portfolio
- Award credit for a documented plan that includes a wireframe or storyboard and clearly defines the site's intended purpose.
- Look for correct HTML syntax, including proper nesting and closing tags, in the submitted code.
- Credit effective separation of structure and presentation by using an external CSS file.
- Evidence of successful upload must include a working URL and screenshots of the live pages.
- Bonus marks may be given for consistent navigation and responsive design considerations.
- Award credit for a coherent website plan that identifies target audience, site structure (e.g., wireframe/sitemap), and content outline.
- Demonstrate appropriate use of HTML elements (headings, paragraphs, lists, images, links) to structure page content semantically.
- Apply CSS formatting rules effectively to enhance visual design, including font styles, colours, and layout adjustments.
- Show evidence of testing pages for functionality (links working, images display) and making basic corrections.
- Successfully publish web pages to a specified location (Internet or intranet) and provide evidence of live accessible pages.
- Award credit for demonstrating a clear plan (e.g., wireframe or storyboard) that outlines page structure, content hierarchy, and navigation.
- Credit for correctly using HTML tags to structure content, including headings, paragraphs, lists, images, and hyperlinks, with proper nesting.
- Expect evidence of external CSS applied to achieve consistent formatting (e.g., fonts, colours, layout) across multiple pages.
- Credit for successfully publishing web pages to a specified location (Internet or Intranet) with all file paths and links functional.
- Award credit for demonstrating the use of semantic HTML5 elements (e.g., header, nav, main, footer) to create a logical page structure.
- Award credit for applying CSS to control layout, typography, and colour, ensuring consistent styling across multiple pages.
- Award credit for correctly utilising software tools (such as a code editor and image editor) to prepare and integrate content, including optimising images for web use.
- Award credit for successfully publishing the website to a hosting service, with all internal and external links functioning correctly.
- Award credit for evidencing testing across different browsers and devices to ensure basic responsiveness and accessibility.
- Award credit for correctly using HTML elements (e.g., headings, paragraphs, lists) to structure content and CSS rules to style layout and appearance, demonstrating separation of content and presentation.
- Look for evidence of using software tools such as a text editor or web development IDE to create and edit code, and image editing software to prepare and optimize media assets for web use.
- Assess successful publication by verifying that files are uploaded via FTP or a hosting platform and the website is fully functional and accessible via a URL, with all links and resources intact.
- Award credit for demonstrating consistent and valid use of HTML to create a multi-page website with semantic structure (e.g., headings, paragraphs, lists, links).
- Award credit for correctly applying external CSS to style text, layout, and navigation, with evidence of responsive design considerations.
- Award credit for publishing the website to a live server with all pages and assets correctly linked, and providing evidence of successful cross-browser testing.
Assessment Guidance
Guidance for achieving higher grades
- 💡Always begin with a clear, simple plan – sketch your page layout before coding.
- 💡Validate your HTML and CSS code using free online tools to catch errors early.
- 💡Keep file names descriptive and in lowercase, with no spaces, to avoid broken links.
- 💡When publishing, double-check that all files are uploaded to the correct directory.
- 💡After publishing, test every link and view the site on a phone or tablet to ensure usability.
- 💡Always include a site map or outline in your planning evidence to show how pages connect.
- 💡Use external CSS files rather than inline styling for easier maintenance and to demonstrate best practice.
- 💡Test your website in multiple browsers and on different devices to ensure compatibility and note this in your evidence.
- 💡Keep a log of any issues faced and how you resolved them; this reflective practice is often valued in vocational assessments.
- 💡Always begin with a written or visual plan (e.g., site map, wireframe) and include it as part of your evidence submission.
- 💡Use relative URLs for internal links and assets to ensure the site works after publishing, regardless of domain or folder structure.
- 💡Validate your HTML and CSS using online tools to catch syntax errors before final submission; error-free code is a key assessment criterion.
- 💡After publishing, test your website from a different device or network to confirm that all pages, images, and navigation elements function as intended.
- 💡Build a portfolio of evidence that includes screenshots of code, software tools in use, and the final published website, clearly mapping each piece of evidence to the learning outcomes.
- 💡Validate both HTML and CSS using W3C validators before submission, and include the validation results as evidence of quality assurance.
- 💡Start with a wireframe or simple plan for the website’s structure and style, demonstrating a systematic approach from design to implementation.
- 💡Test the published website on at least two different browsers and one mobile device to prove responsiveness; document any fixes made.
- 💡Include annotated screenshots and a clear file directory tree in your evidence to demonstrate structured, well-organized development.
- 💡Validate both your HTML and CSS using W3C validators before submission to catch syntax errors and ensure standards compliance.
- 💡After publishing, thoroughly test all pages and links on at least two different browsers and a mobile device to confirm cross-platform functionality.
- 💡Keep a log of any issues encountered during publication and how you resolved them; this shows reflective practice and trouble-shooting skills.
- 💡Plan your website structure and navigation flow before writing any code; a clear sitemap and wireframe show professionalism and prevent rework.
- 💡Use a text editor with syntax highlighting and an FTP client suitable for publishing; evidence of using appropriate tools is assessed.
- 💡Always test your published site on at least two different browsers and on a mobile device to demonstrate accessibility and responsiveness.
- 💡Tip 1: Use specific examples from your own experiences in your portfolio. Instead of saying 'I worked well in a team,' describe a particular project, your role, and how you contributed to the team's success. This shows genuine understanding and application.
- 💡Tip 2: Reflect on your learning. For each piece of evidence, write a short reflection explaining what you learned, what went well, and what you would do differently. This demonstrates self-awareness and critical thinking, which are key to higher marks.
- 💡Tip 3: Keep your portfolio organised. Use clear headings, date your work, and cross-reference your evidence to the assessment criteria. This makes it easier for your assessor to see how you have met the requirements.
Common Mistakes
Common errors to avoid in your coursework
- Forgetting to close HTML tags, leading to broken layouts.
- Directly styling elements with inline CSS instead of using classes or external stylesheets.
- Uploading web pages without ensuring linked assets (images, CSS) are correctly referenced.
- Neglecting to test the website in multiple browsers or on different screen sizes.
- Using overly complex designs that are difficult to implement with basic skills.
- Confusing the roles of HTML (structure) and CSS (presentation), often mixing them inline rather than using separate stylesheets.
- Overlooking planning stages, leading to disorganized content and inconsistent navigation.
- Forgetting to test hyperlinks and image paths after publishing, resulting in broken links.
- Neglecting accessibility basics, such as missing alt text for images or poor colour contrast.
- Overlooking the planning stage and directly coding without a wireframe, leading to inconsistent or illogical page layouts.
- Using absolute file paths for images and links, which break when the site is published or moved to a different environment.
- Neglecting to close HTML tags or using deprecated elements, causing rendering issues and invalid markup.
- Failing to check that published pages are accessible and display correctly across different browsers or devices.
- Using outdated or deprecated HTML tags (e.g., <center>, <font>) instead of achieving the same effects with CSS.
- Forgetting to link external CSS files or using incorrect relative file paths, causing styles not to load.
- Publishing a website with broken images or missing resources due to incorrect file referencing or failure to upload all necessary files.
- Neglecting to validate HTML and CSS code, leading to errors that affect cross-browser compatibility.
- Over-complicating layouts with non-semantic <div> elements when semantic elements are more appropriate.
- Relying on deprecated HTML attributes for styling instead of CSS, leading to bloated code and poor maintainability.
- Uploading unoptimized images or media, resulting in slow page load times and a poor user experience.
- Mistyping file paths or neglecting to use relative paths, causing broken links and missing resources after publication.
- Failing to test the website in multiple browsers or on different devices, which can result in rendering issues for end users.
- Failing to link CSS files correctly, resulting in unstyled pages or broken layouts.
- Using absolute file paths (e.g., C:\Users\...) that break when publishing to a web server; always use relative paths.
- Neglecting to optimise images and media, leading to slow loading times and poor user experience.
- Overlooking HTML validation, which can cause inconsistent rendering across different browsers.
- Misconception: 'This qualification is just about common sense and doesn't require any real study.' Correction: While the skills are practical, you must actively reflect on your experiences and provide evidence of your learning. You need to understand the theory behind effective communication, teamwork, and problem-solving to apply them successfully.
- Misconception: 'Teamwork means everyone does the same amount of work.' Correction: Effective teamwork involves recognising different strengths and dividing tasks fairly. You should also learn to handle situations where team members don't contribute equally, using strategies like open communication and renegotiating roles.
- Misconception: 'Problem-solving is only about finding the right answer quickly.' Correction: Good problem-solving involves a process: defining the problem, gathering information, considering options, and reflecting on the outcome. Speed is less important than thoroughness and learning from mistakes.
Frequently Asked Questions
Common questions students ask about this topic
Pass / Merit / Distinction Evidence Checklist
How your portfolio evidence is graded for OPEN COLLEGE NETWORK NORTHERN IRELAND Developing Websites
Pass (P)
Demonstrate baseline knowledge, accurate terminology, and core practical application.
Merit (M)
Provide detailed analysis, structured explanations, and clear workplace reasoning.
Distinction (D)
Deliver thorough evaluation, original problem solving, and fully justified recommendations.
Before You Start
Prior knowledge that will help with this topic
- •No formal prerequisites are required for this Level 1 award, but it is helpful to have basic literacy and numeracy skills, as you will need to read instructions, write reflections, and possibly handle simple data.
- •A willingness to participate in group activities and complete tasks independently is essential, as the course relies heavily on practical work and self-directed learning.
Coursework AI Review
Self-check your coursework evidence against P/M/D criteria
Key Terminology
Essential terms to know
- Website planning principles
- HTML document structure
- CSS styling and layout
- Web publishing and hosting
- Basic web testing
- Be able to plan and create web pages., Be able to structure and format web pages., Publish web pages to the Internet or an Intranet.
- Be able to plan and create web pages., Be able to structure and format web pages., Publish web pages to the Internet or an Intranet.
- Be able to create structures and styles for websites., Be able to use software tools to prepare content for websites., Be able to publish websites.
- Be able to create structures and styles for websites., Be able to use software tools to prepare content for websites., Be able to publish websites.
- Be able to create structures and styles for websites., Be able to use software tools to prepare content for websites., Be able to publish websites.
Ready to learn?
AI-powered learning tailored to this unit
Related Topics in OPEN COLLEGE NETWORK NORTHERN IRELAND vocational Foundations for Learning
OCN NI Level 1 Certificate in Essential Skills - Communication - Core Content
View Topic
OCN NI Level 2 Certificate in Essential Skills - Application of Number - Core Content
View Topic
OCN NI Entry Level Certificate in Essential Skills - Adult Numeracy - Core Content
View Topic
OCN NI Level 2 Certificate in Essential Skills - Communication - Core Content
View Topic