PRDV251: Introduction to HTML and CSS
Topic outline
-
Technology is central to almost every sector of the global economy. This creates a wide range of career opportunities involving light, medium, or intensive use of technology for people of all ages. Moreover, given the growing use of internet-based technologies for providing commercial, educational, and governmental goods and services, you should consider learning the fundamental languages that are the foundation of this world. Thus, the two foundational languages of the Internet: HTML (Hypertext Markup Language), which forms the foundation of all website pages, and CSS (Cascading Style Sheets), which controls the appearance of the related content, are both excellent ways to get started in many technology careers.
While this course includes theoretical explanations, it also features hands-on exercises and practical projects that demonstrate how to write, refactor, and develop webpage layouts and prototypes. As well as serving as an introductory course, it also provides opportunities to enhance and build HTML and CSS knowledge at higher levels. These include common web portals and utilities that students of all levels can incorporate into their toolkits for lifelong benefit. Let's begin our journey into the fundamentals of web content development with Unit 1.
-
This first unit introduces you to the basic building blocks of web development. Specifically, it gives an overview of the historical development of the Web and the importance of understanding the evolution of the tools and technologies that have driven its growth. You will also be introduced to the HyperText Markup Language (HTML) as a foundational language in web development, explaining its structure, elements, and tags.
Following the introduction to HTML, you will then look at the significance of Cascading Style Sheets (CSS) for styling web design, distinguishing between both inline and external CSS styles, and covering fundamental CSS concepts.
Completing this unit should take you approximately 3 hours.
-
Carefully review this section, which explores the history and evolution of web development. You will also survey significant tools and technologies that have shaped the current state of the field.
-
-
This section of Unit 1 explains the role of HTML in web development, with a focus on HTML structure, elements, and tags.
-
-
In modern web development, CSS (Cascading Style Sheets) is essential to good-looking, soundly functioning webpages that most, if not all, people can access. To study CSS in web design, you will differentiate between inline and external CSS styles and learn about basic CSS concepts.
-
-
For this course, you will build your own personal portfolio website. In the world of web development, an attractive portfolio is key to getting hired for a job or chosen as a contractor. You will build your online portfolio from the very beginning and watch as you develop it unit by unit until you have a completed website.
-
-
-
To explore how webpages are composed, we will take this unit to discuss the foundational structure of HTML documents. Think of the foundational structure as essential components: without them, webpages may render poorly on screens and fail to function as intended. A notable theme in this unit is that you will also cover the essential HTML elements, such as text formatting, lists, and using links and anchors to create web content. Learning these elements will provide the basis for structuring the majority of web content while also providing you with the concepts needed to build more advanced pages and sites should you choose to advance your learning beyond this course.
Completing this unit should take you approximately 4 hours.
-
Today's browsers can be very forgiving, meaning they are built to correct a lot of mistakes. But just because you may not see a mistake in one place doesn't mean it won't show up elsewhere and be a problem. In order for you to create great web content that works across many platforms for many different users, it is crucial to understand the foundational structure of HTML documents and the composition of webpages.
-
-
Explore HTML's essential core elements, including the head, the body, text formatting, lists, forms, and working with links and anchors, and see how these core elements are crucial building blocks to good web content.
-
-
It is time to start applying what you’ve learned about HTML structure to build the main pages of your portfolio website. You’ll use the same foundation of head and body elements, adding the structure and content that will shape your homepage, about page, and contact page. This section will guide you through creating clean, consistent page layouts that share a common structure and can be easily styled with CSS later. By the end, you’ll have the basic framework of a real, working website that reflects you and sets the stage for everything you’ll build next.
-
-
-
Unit 3 gives an overview of CSS techniques for web design. You will learn about defining styles, text and font customization, color and background manipulation, and the effective use of CSS selectors with conflict resolution strategies. These skills are essential for creating visually appealing and well-structured webpages.
Once you have learned these fundamentals, you will know how to use the many benefits of CSS to improve the user experience. This is important for enhancing the overall user experience by using effective color and design, which helps to maximize the impact of the content.
Completing this unit should take you approximately 3 hours.
-
With the fundamentals of HTML under your belt, it's time to study how to style HTML using Cascading Style Sheets (CSS).
-
-
CSS selectors are used to define the style elements of CSS. This section examines common CSS selectors, their specificity, and how to resolve conflicts for consistent styling.
-
-
There is no substitute for hands-on, applied learning when working with HTML and CSS. In this section, the use of a portfolio will provide this opportunity.
-
-
-
In Unit 3, you learned the language of CSS. Now, you'll apply those skills to page architecture. This unit bridges the gap between styling a single component and orchestrating an entire layout, focusing on how elements relate to one another within the browser window. This will shift your focus from individual element styles to the big picture of web design. You'll explore the spatial relationships between elements and master the techniques needed to transform a collection of boxes into a polished, functional layout.
Completing this unit should take you approximately 1 hour.
-
Possible webpage layouts include fluid, fixed, and responsive designs. This section explores how to use these to inform your layout choices when developing web content.
-
-
Understanding layout concepts is one thing; applying them to a real project is where the learning sticks. Flexbox and Grid are the two primary CSS tools for controlling how elements are positioned and arranged on a page. Flexbox works well for distributing items along a single axis, like aligning navigation links in a row, while Grid handles two-dimensional layouts, such as organizing a page into header, sidebar, and content areas. In this section, you'll use both to give your portfolio pages a structured, responsive layout that adapts to different screen sizes.
-
-
-
Unit 5 examines how web development can be made accessible to all users. Improving accessibility ensures that the work done in developing quality HTML and CSS content can be used by all learners across each of their devices.
After completing this unit, you will understand how good coding allows users who are deaf or hard of hearing to incorporate native accessibility features of hardware and software, such as closed captioning and transcription of video content. Similarly, users with visual impairments benefit from web design and coding that enables screen reading technology to describe text.
Completing this unit should take you approximately 1 hour.
-
Web accessibility includes using tools and technologies to craft better user experiences. This includes supporting users with screen readers, allowing for keyboard navigation, creating inclusive multimedia, leveraging HTML for accessibility, and conducting accessibility testing.
-
-
Accessibility HTML elements are used in coding webpages to harness a class of programs known as assistive technologies. Users with disabilities can decode web content by deploying these supplemental technologies and native accessibility features in current devices.
-
-
After you've taken the steps to incorporate the necessary semantic elements into your website, how do you know that your content is truly accessible? Knowing how to conduct compliance testing of website content to ensure that common standards for accessibility are met or exceeded ensures success. This includes the guidelines of major accessibility standards, including the Americans with Disabilities Act (ADA), and the World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI).
-
-
Now that we've explored why accessibility is important and how it works, let's put this knowledge to use on our portfolio project. Remember, accessibility takes into account all web access needs.
-
-
-
In this final unit, you will bring together everything you have learned to transition from a student to a web developer. We begin by applying your HTML and CSS knowledge to real-world projects, using practical examples to bridge the gap between theory and practice. You will then learn the essential skill of debugging, gaining the tools to troubleshoot and resolve common web development challenges. As modern web browsing happens on a variety of screens, we will explore responsive design to ensure your sites provide a seamless user experience across all devices. Finally, you will polish and prepare your professional portfolio, ready to showcase your achievements to the world.
Completing this unit should take you approximately 3 hours.
-
In this section, you will apply your HTML and CSS skills to real-world projects, enhancing interactivity with CSS transitions and animations and enabling the creative possibilities within CSS transformations.
-
-
Nothing beats the learning experience of testing code, finding bugs, and fixing them. Good code writing is all about learning to identify and resolve common challenges in web development projects.
-
-
This section will focus on design principles and strategies for ensuring a consistent and user-friendly experience across various screen sizes and devices. It discusses the related issues of universal design and accessibility as part of the fundamental aspects of the user experience.
-
-
You've now reached the finish line of your course project! Let's put on the final touches that will make your portfolio ready for the world and the many ways it may be viewed.
-
-
-
Congratulations on completing your introduction to web content development! You have successfully explored the core foundations of the web by learning how Hypertext Markup Language (HTML) provides structure and how Cascading Style Sheets (CSS) add visual style to webpages. These fundamental building blocks are the first step toward creating engaging, functional online experiences. To solidify what you've learned, review the units and prepare for the certificate exam. If you enjoyed building your technical skills, you may also find value in developing additional computer science knowledge to complement your knowledge of HTML and CSS. We have many courses in programming and languages that include Python, C++, and JavaScript. Visit our catalog at https://learn.saylor.org/.
-
-
Take this exam if you want to earn a free Course Completion Certificate.
To receive a free Course Completion Certificate, you will need to earn a grade of 70% or higher on this final exam. Your grade for the exam will be calculated as soon as you complete it. If you do not pass the exam on your first try, you can take it again as many times as you want, with a 7-day waiting period between each attempt.
Once you pass this final exam, you will be awarded a free Course Completion Certificate.
-
-
Please take a few minutes to give us feedback about this course. We appreciate your feedback, whether you completed the whole course or even just a few resources. Your feedback will help us make our courses better, and we use your feedback each time we make updates to our courses.
If you come across any urgent problems, email contact@saylor.org.