feat: add certificate and course HTML templates
- Introduced new HTML templates for certificate and course pages. - The certificate template includes dynamic placeholders for student and course details. - The course template features structured lesson notes and additional resources.
This commit is contained in:
@@ -0,0 +1,431 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Qwitcher+Grypen&family=Roboto:wght@300;400;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<title>Certificate</title>
|
||||
<style>
|
||||
.student-name {
|
||||
font-family: 'Qwitcher Grypen', cursive;
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<img
|
||||
src="http://localhost:3002/blue-lined-background.png"
|
||||
alt=""
|
||||
class="absolute top-0 left-0 w-full h-[100vh] z-10"
|
||||
/>
|
||||
<div class="absolute z-20 left-[5%] top-16 w-[90%]">
|
||||
<header class="w-full flex justify-center items-center pt-10 gap-3 text-3xl font-bold">
|
||||
<img src="${orgLogoUrl}" alt="" />
|
||||
<h1>${orgName}</h1>
|
||||
</header>
|
||||
|
||||
<div class="pl-10 text-lg font-bold mt-[10%]">
|
||||
<h2>This certificate is awarded to</h2>
|
||||
<h1 class="text-3xl text-blue-800">${studentName}</h1>
|
||||
</div>
|
||||
|
||||
<div class="pl-10 text-lg font-bold mt-10 w-[70%]">
|
||||
<h1>has succesfully completed training on</h1>
|
||||
<h2 class="text-4xl leading-[2.5rem]">${courseName}</h2>
|
||||
</div>
|
||||
|
||||
<div class="flex border justify-between w-[70%] mx-auto text-center items-end my-14">
|
||||
<div>
|
||||
<p class="font-bold">${dateIssued}</p>
|
||||
<h1 class="border-t border-black h-2/4 font-bold">Date Issued</h1>
|
||||
</div>
|
||||
|
||||
<div class="w-[20%]">
|
||||
<h1 class="h-2/4 border-b border-black"></h1>
|
||||
<p class="font-bold">Signature</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="text-sm pl-10 w-[90%] pb-10">${courseDescription}</footer>
|
||||
</div>
|
||||
<!-- plain blueProfessionalBadgePattern -->
|
||||
<!-- <img
|
||||
src="http://localhost:3002/blue-professional-badge-background.png"
|
||||
alt=""
|
||||
class="absolute top-0 left-0 w-full z-10"
|
||||
/>
|
||||
<div class="absolute w-full pl-20 top-10 z-20">
|
||||
<header class="w-full flex justify-start items-center pt-10 gap-3 text-3xl font-bold">
|
||||
<svg
|
||||
width="34"
|
||||
height="27"
|
||||
viewBox="0 0 24 17"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M19.2076 9.08656C21.5733 9.08656 23.4911 7.16873 23.4911 4.80302C23.4911 2.43731 21.5733 0.519531 19.2076 0.519531C16.8419 0.519531 14.9241 2.43731 14.9241 4.80302C14.9241 7.16873 16.8419 9.08656 19.2076 9.08656Z"
|
||||
fill="#0542CC"
|
||||
/>
|
||||
<path
|
||||
d="M23.5385 10.7793V16.9927H14.1243V14.7333C14.1243 12.568 15.8659 10.7793 18.0783 10.7793H23.5385Z"
|
||||
fill="#0542CC"
|
||||
/>
|
||||
<path
|
||||
d="M12.5701 0.519531V16.9945H9.03974C6.78031 16.9945 4.70918 16.0531 3.20289 14.5939C1.69661 13.0876 0.802246 11.0165 0.802246 8.75703C0.802246 4.1911 4.47382 0.519531 9.03974 0.519531H12.5701Z"
|
||||
fill="#0542CC"
|
||||
/>
|
||||
</svg>
|
||||
<h1 class="text-[#282828]">Classroom<span class="text-[#0233BD]">IO</span></h1>
|
||||
</header>
|
||||
|
||||
<div class="text-lg font-bold mt-[9%]">
|
||||
<h2>This certificate is awarded to</h2>
|
||||
<h1 class="text-3xl text-blue-800">Usman Elebute Ayomide</h1>
|
||||
</div>
|
||||
|
||||
<div class="text-lg font-bold mt-10 w-[70%]">
|
||||
<h1>has succesfully completed training on</h1>
|
||||
<h2 class="text-5xl mt-3 leading-[3.5rem]">
|
||||
Building fullstack Applications with superbase & Svelte
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between w-[70%] text-center my-[10%]">
|
||||
<div>
|
||||
<h1 class="h-2/4">DATE ISSUED:</h1>
|
||||
<p class="border-b-2 border-black font-bold">02,May 2024</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 class="h-2/4">FACILITATOR:</h1>
|
||||
<p class="font-bold">ROTIMI BEST</p>
|
||||
</div>
|
||||
|
||||
<div class="w-[20%]">
|
||||
<h1 class="h-2/4 border-b-2 border-black"></h1>
|
||||
<p class="font-bold">Signature</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="text-sm w-[90%] pb-10">
|
||||
Building full-stack apps with Superbase & Svelte merges robust backend services from
|
||||
Superbase with Svelte's sleek frontend framework. Leveraging PostgreSQL and Svelte's
|
||||
reactivity, developers create efficient, feature-rich web apps. This stack streamlines
|
||||
development, offering scalability and performance for modern applications with minimal
|
||||
overhead.
|
||||
</footer>
|
||||
</div> -->
|
||||
|
||||
<!-- plain purpleProfessionalBadgePattern -->
|
||||
<!-- <img
|
||||
src="http://localhost:3002/purple-professional-badge-background.png"
|
||||
alt=""
|
||||
class="absolute top-0 left-0 w-full z-10"
|
||||
/>
|
||||
<div class="absolute w-full pl-20 top-10 z-20">
|
||||
<header class="w-full flex justify-start items-center pt-10 gap-3 text-3xl font-bold">
|
||||
<svg
|
||||
width="34"
|
||||
height="27"
|
||||
viewBox="0 0 24 17"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M19.2076 9.08656C21.5733 9.08656 23.4911 7.16873 23.4911 4.80302C23.4911 2.43731 21.5733 0.519531 19.2076 0.519531C16.8419 0.519531 14.9241 2.43731 14.9241 4.80302C14.9241 7.16873 16.8419 9.08656 19.2076 9.08656Z"
|
||||
fill="#0542CC"
|
||||
/>
|
||||
<path
|
||||
d="M23.5385 10.7793V16.9927H14.1243V14.7333C14.1243 12.568 15.8659 10.7793 18.0783 10.7793H23.5385Z"
|
||||
fill="#0542CC"
|
||||
/>
|
||||
<path
|
||||
d="M12.5701 0.519531V16.9945H9.03974C6.78031 16.9945 4.70918 16.0531 3.20289 14.5939C1.69661 13.0876 0.802246 11.0165 0.802246 8.75703C0.802246 4.1911 4.47382 0.519531 9.03974 0.519531H12.5701Z"
|
||||
fill="#0542CC"
|
||||
/>
|
||||
</svg>
|
||||
<h1 class="text-[#282828]">Classroom<span class="text-[#0233BD]">IO</span></h1>
|
||||
</header>
|
||||
|
||||
<div class="text-lg font-bold mt-[9%]">
|
||||
<h2>This certificate is awarded to</h2>
|
||||
<h1 class="text-3xl text-fuchsia-800">Usman Elebute Ayomide</h1>
|
||||
</div>
|
||||
|
||||
<div class="text-lg font-bold mt-10 w-[70%]">
|
||||
<h1>has succesfully completed training on</h1>
|
||||
<h2 class="text-5xl mt-3 leading-[3.5rem]">
|
||||
Building fullstack Applications with superbase & Svelte
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between w-[70%] text-center my-[10%]">
|
||||
<div>
|
||||
<h1 class="h-2/4">DATE ISSUED:</h1>
|
||||
<p class="border-b-2 border-black font-bold">02,May 2024</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 class="h-2/4">FACILITATOR:</h1>
|
||||
<p class="font-bold">ROTIMI BEST</p>
|
||||
</div>
|
||||
|
||||
<div class="w-[20%]">
|
||||
<h1 class="h-2/4 border-b-2 border-black"></h1>
|
||||
<p class="font-bold">Signature</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="text-sm w-[90%] pb-10">
|
||||
Building full-stack apps with Superbase & Svelte merges robust backend services from
|
||||
Superbase with Svelte's sleek frontend framework. Leveraging PostgreSQL and Svelte's
|
||||
reactivity, developers create efficient, feature-rich web apps. This stack streamlines
|
||||
development, offering scalability and performance for modern applications with minimal
|
||||
overhead.
|
||||
</footer>
|
||||
</div> -->
|
||||
|
||||
<!------------------------------------------------------- new secton ---------------------------------------------------- -->
|
||||
|
||||
<!-- PurpleProfessionalBadge certificate -->
|
||||
|
||||
<!-- <img
|
||||
src="http://localhost:3002/purple-lined-background.png"
|
||||
alt=""
|
||||
class="absolute -top-1 left-0 w-full z-10"
|
||||
/>
|
||||
<div class="absolute z-20 left-[10%] top-16 w-[90%]">
|
||||
<header class="w-full flex justify-center items-center pt-10 gap-3 text-3xl font-bold">
|
||||
<svg
|
||||
width="34"
|
||||
height="27"
|
||||
viewBox="0 0 24 17"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M19.2076 9.08656C21.5733 9.08656 23.4911 7.16873 23.4911 4.80302C23.4911 2.43731 21.5733 0.519531 19.2076 0.519531C16.8419 0.519531 14.9241 2.43731 14.9241 4.80302C14.9241 7.16873 16.8419 9.08656 19.2076 9.08656Z"
|
||||
fill="#0542CC"
|
||||
/>
|
||||
<path
|
||||
d="M23.5385 10.7793V16.9927H14.1243V14.7333C14.1243 12.568 15.8659 10.7793 18.0783 10.7793H23.5385Z"
|
||||
fill="#0542CC"
|
||||
/>
|
||||
<path
|
||||
d="M12.5701 0.519531V16.9945H9.03974C6.78031 16.9945 4.70918 16.0531 3.20289 14.5939C1.69661 13.0876 0.802246 11.0165 0.802246 8.75703C0.802246 4.1911 4.47382 0.519531 9.03974 0.519531H12.5701Z"
|
||||
fill="#0542CC"
|
||||
/>
|
||||
</svg>
|
||||
<h1 class="text-[#282828]">Classroom<span class="text-[#0233BD]">IO</span></h1>
|
||||
</header>
|
||||
|
||||
<div class="pl-10 text-lg font-bold mt-[10%]">
|
||||
<h2>This certificate is awarded to</h2>
|
||||
<h1 class="text-3xl text-[#95449A]">Usman Elebute Ayomide</h1>
|
||||
</div>
|
||||
|
||||
<div class="pl-10 text-lg font-bold mt-10 w-[70%]">
|
||||
<h1>has succesfully completed training on</h1>
|
||||
<h2 class="text-4xl leading-[2.5rem]">
|
||||
Building fullstack Applications with superbase & Svelte
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="pl-10 flex justify-between w-[70%] text-center my-[10%]">
|
||||
<div>
|
||||
<h1 class="h-2/4">DATE ISSUED:</h1>
|
||||
<p class="border-b-2 border-black font-bold">02,May 2024</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 class="h-2/4">FACILITATOR:</h1>
|
||||
<p class="font-bold">ROTIMI BEST</p>
|
||||
</div>
|
||||
|
||||
<div class="w-[20%]">
|
||||
<h1 class="h-2/4 border-b-2 border-black"></h1>
|
||||
<p class="font-bold">Signature</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="text-sm pl-10 w-[90%] pb-10">
|
||||
Building full-stack apps with Superbase & Svelte merges robust backend services from
|
||||
Superbase with Svelte's sleek frontend framework. Leveraging PostgreSQL and Svelte's
|
||||
reactivity, developers create efficient, feature-rich web apps. This stack streamlines
|
||||
development, offering scalability and performance for modern applications with minimal
|
||||
overhead.
|
||||
</footer>
|
||||
</div> -->
|
||||
|
||||
<!-- BlueProfessionalBadge certificate -->
|
||||
|
||||
<!-- <img
|
||||
src="http://localhost:3002/blue-lined-background.png"
|
||||
alt=""
|
||||
class="absolute -top-1 left-0 w-full z-10"
|
||||
/>
|
||||
<div class="absolute z-20 left-[10%] top-16 w-[90%]">
|
||||
<header class="w-full flex justify-center items-center pt-10 gap-3 text-3xl font-bold">
|
||||
<img src="${orgLogoUrl}" alt="" />
|
||||
<h1>${orgName}</h1>
|
||||
</header>
|
||||
|
||||
<div class="pl-10 text-lg font-bold mt-[10%]">
|
||||
<h2>This certificate is awarded to</h2>
|
||||
<h1 class="text-3xl">${studentName}</h1>
|
||||
</div>
|
||||
|
||||
<div class="pl-10 text-lg font-bold mt-10 w-[70%]">
|
||||
<h1>has succesfully completed training on</h1>
|
||||
<h2 class="text-4xl leading-[2.5rem]">${courseName}</h2>
|
||||
</div>
|
||||
|
||||
<div class="pl-10 flex justify-between w-[70%] text-center my-[10%]">
|
||||
<div>
|
||||
<h1 class="h-2/4">DATE ISSUED:</h1>
|
||||
<p class="border-b-2 border-black font-bold">02,May 2024</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 class="h-2/4">FACILITATOR:</h1>
|
||||
<p class="font-bold">ROTIMI BEST</p>
|
||||
</div>
|
||||
|
||||
<div class="w-[20%]">
|
||||
<h1 class="h-2/4 border-b-2 border-black"></h1>
|
||||
<p class="font-bold">Signature</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="text-sm pl-10 w-[90%] pb-10">${courseDescription}</footer>
|
||||
</div> -->
|
||||
|
||||
<!-- --------------------- old certificates ------------------------- -->
|
||||
<!-- <div
|
||||
class="flex items-center justify-center border border-dashed border-blue-400 h-full w-full"
|
||||
>
|
||||
<div class="h-full flex border-l-8 border-blue-800">
|
||||
<div class="h-full w-full px-5 py-10">
|
||||
<p class="text-2xl font-normal my-2 mb-10 uppercase text-gray-500">
|
||||
Certificate<br />
|
||||
of completion
|
||||
</p>
|
||||
<div class="border-b border-gray-500 mb-4">
|
||||
<p class="text-xl text-black font-normal">This is to certify that</p>
|
||||
<p class="student-name text-center text-9xl">Rotimi Best</p>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<p class="text-xl text-black font-normal">
|
||||
has successfully completed introductory courses in
|
||||
</p>
|
||||
<div>
|
||||
<p
|
||||
class="bg-transparent font-semibold text-blue-800 text-center uppercase my-10 text-3xl"
|
||||
>
|
||||
Figma for Beginners
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xl font-light mb-4 text-justify">
|
||||
Netlify Functions can stream data to clients as it becomes available, rather than
|
||||
returning a buffered payload at the end of the computation. This lets developers and
|
||||
frameworks create faster experiences by using streaming and partial hydration to get
|
||||
content and interactions in front of people as quickly as possible. For an extended
|
||||
example that demonstrates a more likely response streaming use case, consider this
|
||||
function
|
||||
</p>
|
||||
<div class="flex justify-between w-[70%] mx-auto text-center my-14">
|
||||
<div>
|
||||
<h1 class="h-2/4">DATE ISSUED:</h1>
|
||||
<p class="border-b border-black font-bold">02,May 2024</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 class="h-2/4">FACILITATOR:</h1>
|
||||
<p class="font-bold">ROTIMI BEST</p>
|
||||
</div>
|
||||
|
||||
<div class="w-[20%]">
|
||||
<h1 class="h-2/4 border-b border-black"></h1>
|
||||
<p class="font-bold">Signature</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 mt-14">
|
||||
<img
|
||||
src="https://koxqonvbkeakwvmdegcf.supabase.co/storage/v1/object/public/avatars/user/Coding%20Dojo1684164720355.webp"
|
||||
alt="logo"
|
||||
class="w-24 h-24 rounded-md"
|
||||
/>
|
||||
<p class="font-semibold capitalize text-5xl">Coding Dojo</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <div
|
||||
class="flex flex-col items-center justify-center border-4 border-pink-700 py-3 w-full h-full"
|
||||
>
|
||||
<div class="flex items-center gap-1 my-2 mb-10">
|
||||
<img
|
||||
src="https://koxqonvbkeakwvmdegcf.supabase.co/storage/v1/object/public/avatars/user/Coding%20Dojo1684164720355.webp"
|
||||
alt="logo"
|
||||
class="w-24 h-24 rounded-md"
|
||||
/>
|
||||
<p class="font-semibold capitalize text-5xl">Coding Dojo</p>
|
||||
</div>
|
||||
<div class="w-full px-5 py-3">
|
||||
<p
|
||||
class="text-xl text-center font-normal my-2 uppercase tracking-widest text-gray-500 w-full"
|
||||
>
|
||||
Certificate of completion
|
||||
</p>
|
||||
<div class="border-b border-gray-500 mb-4">
|
||||
<p class="text-xl text-black font-normal">This is to certify that</p>
|
||||
<p class="student-name text-center text-8xl">Rotimi Best</p>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<p class="text-xl text-black font-normal">has successfully completed a courses in</p>
|
||||
<div class="my-10">
|
||||
<p class="bg-transparent font-semibold text-pink-700 text-center uppercase text-3xl">
|
||||
Figma for Beginners
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xl text-center text-gray-500 font-light">
|
||||
Netlify Functions can stream data to clients as it becomes available, rather than
|
||||
returning a buffered payload at the end of the computation. This lets developers and
|
||||
frameworks create faster experiences by using streaming and partial hydration to get
|
||||
content and interactions in front of people as quickly as possible. For an extended
|
||||
example that demonstrates a more likely response streaming use case, consider this
|
||||
function
|
||||
</p>
|
||||
|
||||
<div class="flex justify-between w-[70%] mx-auto text-center my-14">
|
||||
<div>
|
||||
<h1 class="h-2/4">DATE ISSUED:</h1>
|
||||
<p class="border-b border-black font-bold">02,May 2024</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 class="h-2/4">FACILITATOR:</h1>
|
||||
<p class="font-bold">ROTIMI BEST</p>
|
||||
</div>
|
||||
|
||||
<div class="w-[20%]">
|
||||
<h1 class="h-2/4 border-b border-black"></h1>
|
||||
<p class="font-bold">Signature</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,182 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;200;300;400&family=Roboto:wght@100;300;400;500;700;900&display=swap"
|
||||
rel="stylesheet" />
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
|
||||
<title>Lesson Note</title>
|
||||
<style>
|
||||
html {
|
||||
-webkit-print-color-adjust: exact;
|
||||
}
|
||||
|
||||
header {
|
||||
border-color: rgb(0, 48, 255);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background-color: rgb(0, 48, 255);
|
||||
}
|
||||
|
||||
.prose h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.prose h2 {
|
||||
margin: 0.5rem 0 3rem 0;
|
||||
}
|
||||
|
||||
.prose h3 {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-top: 5%;
|
||||
}
|
||||
|
||||
.root {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.footer {
|
||||
font-size: 3rem;
|
||||
scale: 3;
|
||||
}
|
||||
</style>
|
||||
<style type="text/tailwindcss">
|
||||
@tailwind base;
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
.prose {
|
||||
max-width: unset;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="w-full">
|
||||
<header class="flex justify-center items-center flex-col border-[50px] mx-10 h-[100vh] m-0">
|
||||
<h1 class="font-bold text-8xl text-black m-0 mx-96">React js for Beginners</h1>
|
||||
<h4 class="text-md text-2xl font-light text-black mt-5 ">By TheSpace</h4>
|
||||
</header>
|
||||
|
||||
<div class="root mx-auto mt-5 prose">
|
||||
|
||||
<div class="hero w-full h-40 flex flex-col items-center justify-center gap-2 rounded-lg m-0">
|
||||
<h3
|
||||
class="my-0 rounded-full w-10 text-center mx-auto py-1 text-blue-700 bg-white text-md font-bold tracking-tighter">
|
||||
32
|
||||
</h3>
|
||||
<h1 class="font-bold text-5xl text-white m-0">The Yams</h1>
|
||||
<h4 class="text-md font-normal text-white m-0">By The Space</h4>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<section>
|
||||
<h1>Lesson Note: Introduction and Counselling</h1>
|
||||
<h2>Course: The Ultimate Guide to relocating to the UK via Study Path</h2>
|
||||
<h3>Lesson Overview:</h3>
|
||||
<p>This lesson serves as the introduction to the course "The Ultimate Guide to relocating to the UK via
|
||||
Study Path." In this session, we will provide an overview of the course and discuss the importance of
|
||||
effective counseling in the relocation process.</p>
|
||||
<h3>Learning Objectives:</h3>
|
||||
<p>By the end of this lesson, students should be able to:</p>
|
||||
<ul>
|
||||
<li>Understand the goals and structure of the course.</li>
|
||||
<li>Recognize the significance of counseling in the relocation process.</li>
|
||||
<li>Acquire knowledge about the necessary steps involved in relocating to the UK through the study path.</li>
|
||||
</ul>
|
||||
<h3>Lesson Content:</h3>
|
||||
<ol>
|
||||
<li>
|
||||
<p><strong>Introduction to the Course</strong></p>
|
||||
<ul>
|
||||
<li>Briefly introduce the course title and explain its relevance to students' interests.</li>
|
||||
<li>Highlight the main topics and modules covered throughout the course.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Importance of Counseling</strong></p>
|
||||
<ul>
|
||||
<li>Define the role of counseling in the relocation process.</li>
|
||||
<li>Discuss how counseling can assist students in making informed decisions regarding their studies and
|
||||
life in the UK.</li>
|
||||
<li>Explain the benefits of seeking professional guidance during the relocation journey.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Steps for Relocating to the UK via Study Path</strong></p>
|
||||
<ul>
|
||||
<li>Provide an overview of the necessary steps involved in relocating to the UK for study purposes.</li>
|
||||
<li>Discuss the importance of thorough planning, research, and documentation in the relocation process.
|
||||
</li>
|
||||
<li>Highlight key points such as visa applications, university admissions, accommodation arrangements, and
|
||||
financial considerations.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Q&A and Discussion Time</strong></p>
|
||||
<ul>
|
||||
<li>Allocate time for students to ask questions, provide comments, or share personal experiences.</li>
|
||||
<li>Encourage active participation and foster a supportive learning environment.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<h3>Conclusion:</h3>
|
||||
<p>In this lesson, we introduced the course "The Ultimate Guide to relocating to the UK via Study
|
||||
Path" and emphasized the significance of counseling in the relocation process. We explored the essential
|
||||
steps involved in relocating to the UK and highlighted the importance of thorough planning and research.
|
||||
Students should now have a better understanding of the course objectives and overall expectations. In the next
|
||||
session, we will delve deeper into the specific requirements for studying in the UK and provide detailed
|
||||
guidance on university admissions.</p>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h1 class="text-xl font-bold my-1">Extra Resources</h1>
|
||||
<div class="flex mt-2 mb-1">
|
||||
<p class="m-0 mr-2">Slide Link:</p> <a href=https://youtu.be/dyLaKhePzj8 style="color: blue"
|
||||
class="underline">Open Here</a>
|
||||
</div>
|
||||
|
||||
<p class="m-0">Video Link:</p>
|
||||
<div class="m-0">
|
||||
<ol class="m-0">
|
||||
|
||||
<li key={index + 1}><a href=https://youtu.be/0fYi8SGA20k style="color: blue"
|
||||
class="underline">https://youtu.be/0fYi8SGA20k</a></li>
|
||||
|
||||
<li key={index + 1}><a href=https://youtu.be/0fYi8SGA20k style="color: blue"
|
||||
class="underline">https://youtu.be/0fYi8SGA20k</a></li>
|
||||
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user