Resource Learning Outcomes
Unit 1: Web Development
page Unit 1 Learning Outcomes
  • 1a Describe the fundamentals and history of HTML and CSS for web development (CLO 1)
  • 1b Identify the basic commands and building blocks of HTML (CLO 2)
  • 1c Implement basic HTML elements and commands to see how they function (CLO 4)
  • 1d Set up and edit a GitHub repository using github.dev (CLO 3)
  • 1e Describe the purpose and use of CSS in developing web content (CLO 1)
  • 1f Apply introductory CSS styling techniques to a basic HTML page (CLO 5)
  • 1g Describe best practice strategies for web development (CLO 3)
1.1: History of Web Development
page Web Standards and History
  • 1a Describe the fundamentals and history of HTML and CSS for web development (CLO 1)
1.2: Introduction to HTML
page What Is HTML?
  • 1a Describe the fundamentals and history of HTML and CSS for web development (CLO 1)
  • 1b Identify the basic commands and building blocks of HTML (CLO 2)
page Introduction to HTML
  • 1b Identify the basic commands and building blocks of HTML (CLO 2)
  • 1c Implement basic HTML elements and commands to see how they function (CLO 4)
page Setting Up Your GitHub and IDE
  • 1d Set up and edit a GitHub repository using github.dev (CLO 3)
page Create Your First HTML Page
  • 1c Implement basic HTML elements and commands to see how they function (CLO 4)
  • 1d Set up and edit a GitHub repository using github.dev (CLO 3)
1.3: Introduction to CSS
page What Is CSS?
  • 1e Describe the purpose and use of CSS in developing web content (CLO 1)
page Styling with CSS
  • 1e Describe the purpose and use of CSS in developing web content (CLO 1)
  • 1f Apply introductory CSS styling techniques to a basic HTML page (CLO 5)
1.4: Course Project Introduction
page Creating Your Portfolio Splash Page
  • 1f Apply introductory CSS styling techniques to a basic HTML page (CLO 5)
  • 1g Describe best practice strategies for web development (CLO 3)
Unit 2: HTML Fundamentals
page Unit 2 Learning Outcomes
  • 2a Define the basic elements and attributes of HTML (CLO 2)
  • 2b Explain the fundamental structure and essential elements of a webpage (CLO 2)
  • 2c Use HTML elements correctly within a document structure (CLO 4)
  • 2d Explain the components of the head of an HTML document (CLO 2)
  • 2e Explain the components of the body of an HTML document (CLO 2)
  • 2f Develop a properly coded head and body of an HTML document (CLO 6)
2.1: HTML Structure
page Structuring the Web with HTML
  • 2a Define the basic elements and attributes of HTML (CLO 2)
  • 2b Explain the fundamental structure and essential elements of a webpage (CLO 2)
page Using Block Level Elements
  • 2b Explain the fundamental structure and essential elements of a webpage (CLO 2)
  • 2c Use HTML elements correctly within a document structure (CLO 4)
2.2: HTML Core Elements
page What's in the Head?
  • 2d Explain the components of the head of an HTML document (CLO 2)
page What's in the Body?
  • 2e Explain the components of the body of an HTML document (CLO 2)
page HTML Forms: User Input and Interaction
  • 2e Explain the components of the body of an HTML document (CLO 2)
2.3: Building the Structure of Your Portfolio
page Creating the Home, About, and Contact Pages
  • 2f Develop a properly coded head and body of an HTML document (CLO 6)
Unit 3: CSS Fundamentals
page Unit 3 Learning Outcomes
  • 3a Discuss how CSS can enhance webpage presentation, user experience, readability, and accessibility (CLO 1)
  • 3b Describe the role of CSS in web development, including its syntax, application methods, and fundamental styling principles (CLO 2)
  • 3c Implement the basic structure and syntax of CSS, including how stylesheets define font, color, layout, and other presentation properties for webpages (CLO 5)
  • 3d Use CSS selectors to target HTML elements based on attributes, types, and states to apply specific styling rules on a webpage (CLO 5)
  • 3e Implement cohesive CSS styling to enhance readability, usability, and visual consistency across a multi-page website (CLO 6)
3.1: Styling HTML with CSS
page CSS Layout
  • 3a Discuss how CSS can enhance webpage presentation, user experience, readability, and accessibility (CLO 1)
  • 3b Describe the role of CSS in web development, including its syntax, application methods, and fundamental styling principles (CLO 2)
page CSS First Steps
  • 3c Implement the basic structure and syntax of CSS, including how stylesheets define font, color, layout, and other presentation properties for webpages (CLO 5)
3.2: CSS Selectors and Specificity
page CSS Selectors
  • 3d Use CSS selectors to target HTML elements based on attributes, types, and states to apply specific styling rules on a webpage (CLO 5)
3.3: Applying CSS to Your Portfolio
page Style Your Portfolio with CSS
  • 3e Implement cohesive CSS styling to enhance readability, usability, and visual consistency across a multi-page website (CLO 6)
Unit 4: CSS Layouts
page Unit 4 Learning Outcomes
  • 4a Explain normal flow and how elements are laid out (CLO 2)
  • 4b Use CSS layout to control element positioning and presentation (CLO 5)
4.1: Layout Types and Responsive Layouts
page Introduction to CSS Layouts
  • 4a Explain normal flow and how elements are laid out (CLO 2)
  • 4b Use CSS layout to control element positioning and presentation (CLO 5)
4.2: Arranging Your Portfolio Layout with CSS
page Flex, Grid, and CSS Layout Techniques
  • 4b Use CSS layout to control element positioning and presentation (CLO 5)
Unit 5: Web Accessibility
page Unit 5 Learning Outcomes
  • 5a Explain web accessibility and its importance in creating inclusive digital experiences (CLO 3)
  • 5b Describe the impact of accessible versus inaccessible web content on individuals with disabilities and end users in general (CLO 3)
  • 5c Use best accessibility practices, including Semantic HTML, alt text, headings, and labels (CLO 3)
  • 5d Validate the markup validity of HTML and CSS code (CLO 3)
5.1: Web Development with Special Access
page Accessibility in Web Development
  • 5a Explain web accessibility and its importance in creating inclusive digital experiences (CLO 3)
5.2: HTML Elements for Accessibility
page Accessibility Semantic Elements
  • 5b Describe the impact of accessible versus inaccessible web content on individuals with disabilities and end users in general (CLO 3)
  • 5c Use best accessibility practices, including Semantic HTML, alt text, headings, and labels (CLO 3)
page Accessible Forms
  • 5b Describe the impact of accessible versus inaccessible web content on individuals with disabilities and end users in general (CLO 3)
  • 5c Use best accessibility practices, including Semantic HTML, alt text, headings, and labels (CLO 3)
5.3: Testing and Compliance
page Introduction to Web Accessibility Standards
  • 5c Use best accessibility practices, including Semantic HTML, alt text, headings, and labels (CLO 3)
  • 5d Validate the markup validity of HTML and CSS code (CLO 3)
5.4: Making Your Portfolio Accessible
page Accessibility in Action: Your Portfolio
  • 5c Use best accessibility practices, including Semantic HTML, alt text, headings, and labels (CLO 3)
  • 5d Validate the markup validity of HTML and CSS code (CLO 3)
Unit 6: Practical Development
page Unit 6 Learning Outcomes
  • 6a Implement HTML elements to create structured web content (CLO 6)
  • 6b Apply CSS properties, selectors, and layout techniques to control the style and structure of webpages (CLO 6)
  • 6c Debug HTML and CSS by identifying and correcting errors to ensure proper rendering and functionality (CLO 6)
  • 6d Explain how browser compatibility impacts web content rendering and how developers ensure broad accessibility across different browsers (CLO 3)
  • 6e Use responsive design to ensure consistency of presentation and usability across platforms (CLO 6)
6.1: Applying HTML and CSS Concepts to Real Projects
page Practical HTML Examples
  • 6a Implement HTML elements to create structured web content (CLO 6)
page A Systematic Approach to CSS
  • 6b Apply CSS properties, selectors, and layout techniques to control the style and structure of webpages (CLO 6)
6.2: Troubleshooting Common Web Development Challenges
page Debugging HTML and CSS
  • 6c Debug HTML and CSS by identifying and correcting errors to ensure proper rendering and functionality (CLO 6)
6.3: Ensuring Seamless User Experiences Across Devices
page Responsive Design
  • 6d Explain how browser compatibility impacts web content rendering and how developers ensure broad accessibility across different browsers (CLO 3)
  • 6e Use responsive design to ensure consistency of presentation and usability across platforms (CLO 6)
6.4: Making Your Portfolio Ready for the World
page Complete and Present a Multi-Platform Compatible Portfolio
  • 6b Apply CSS properties, selectors, and layout techniques to control the style and structure of webpages (CLO 6)
  • 6e Use responsive design to ensure consistency of presentation and usability across platforms (CLO 6)
Course Conclusion
page Course Conclusion —
Certificate Final Exam
quiz PRDV251: Certificate Final Exam —
coursecertificate View Your Course Certificate —