HTML Fundamentals Course Outline
An overview of what learners can expect from this course, including learning outcomes and the prerequisite knowledge.
---
- **Objective**: Understand the basic structure of an HTML document and create simple pages using tags such as ``, ``, ``, `<body>`.
- Key Topics Include:
- The Document Object Model (DOM) concept.
- Semantic markup with headings (`<h1>` to `<h6>`) for page content organization and accessibility enhancement.
- Assignment: Create a basic HTML5 webpage structure, inserting the title of your choice into an h1 tag within the body.
---</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="h3">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#c3"
aria-expanded="false" aria-controls="c3">
Unit endUnit2 - Continue with this format throughout each unit providing clear instructions on objectives, key topics to cover and assignment or practicals where learners are expected to demonstrate their understanding by writing HTML code snippets (when needed) enclosed in triple backticks ```html <code>```.
</button>
</h2>
<div id="c3" class="accordion-collapse collapse " aria-labelledby="h3">
<div class="accordion-body">For example:
- **Unit 1** continued...
- Assignment Solution Example (``` html `<pre> <p>This is a paragraph.</p>`<code>)
---</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="h4">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#c4"
aria-expanded="false" aria-controls="c4">
Unit N (final unit)
</button>
</h2>
<div id="c4" class="accordion-collapse collapse " aria-labelledby="h4">
<div class="accordion-body">- Final Project Ideas: Design and create an HTML5 page that showcases your ability to utilize various tags, attributes, and elements in meaningful ways with emphasis on responsive design principles. Incorporate CSS for styling the webpage using internal or external stylesheets where applicable. No code wrapping required here as only brief details are provided about project expectations (e.g., "Create a personal portfolio website that includes an introduction, services section, and contact form.").
- Final Project Rubric: Include criteria such as layout coherence with CSS styling, proper use of semantic HTML5 tags for accessibility purposes, responsive design considerations using media queries (if applicable), error handling in forms submission scripts (if incorporated into the project), etc.
---</div>
</div>
</div>
</div>
<div class="text-center mt-4">
<button id="doneBtn" class="btn btn-primary" type="button">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade thankyou-modal" id="thankYouModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content text-center">
<div class="modal-body">
<h5 class="mb-2">Quality, Reliability & Service</h5>
<div class="fw-semibold mb-1">Thank You For Visiting</div>
<div class="mb-2">Brooks Computing Systems - Jacksonville</div>
<div class="mb-3">
Visit <a href="https://bcs.archman.us" target="_blank" rel="noopener">https://bcs.archman.us</a>
</div>
<button class="btn btn-primary" type="button" data-bs-dismiss="modal">Done</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
const body = document.body;
const mainEl = document.getElementById('mainModal');
const thankEl = document.getElementById('thankYouModal');
const mainModal = new bootstrap.Modal(mainEl);
document.getElementById('themeToggle').onclick = () => {
body.classList.toggle('dark-mode');
};
document.getElementById('doneBtn').onclick = () => {
mainModal.hide();
};
mainEl.addEventListener('hidden.bs.modal', () => {
new bootstrap.Modal(thankEl).show();
});
mainModal.show();
</script>
</body>
</html>