We may earn an affiliate commission when you visit our partners.
Gundega Dekena, Cameron Pittman, and Jessica Uelmen

HTML and CSS are markup languages and the building blocks that make up the web. This course is called "Not your Typical Intro" because it does not follow the usual pattern of other courses and tutorials that you find on the Internet. Usually HTML and CSS are taught with a focus on language syntax. But knowing syntax alone does not enable you to create a webpage from a design. You need to know where to start and how to approach the task, in other words - you need to learn how to think like a front-end developer.

Read more

HTML and CSS are markup languages and the building blocks that make up the web. This course is called "Not your Typical Intro" because it does not follow the usual pattern of other courses and tutorials that you find on the Internet. Usually HTML and CSS are taught with a focus on language syntax. But knowing syntax alone does not enable you to create a webpage from a design. You need to know where to start and how to approach the task, in other words - you need to learn how to think like a front-end developer.

In this course you will learn how to convert digital design mockups into static web pages. We will teach you how to approach page layout, how to break down a design mockup into page elements, and how to implement that in HTML and CSS.

You will also learn about responsive design techniques, which are increasingly important in a world where mobile devices and TV screens are used more and more often to look for information and entertainment.

Here's a deal for you

We found an offer that may be relevant to this course.
Save money when you learn. All coupon codes, vouchers, and discounts are applied automatically unless otherwise noted.

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Explores HTML and CSS, which are standard in web development
Teaches learners to convert digital design mockups into static web pages
Develops skills in responsive design techniques, which are increasingly relevant in the digital age
Taught by Gundega Dekena, Cameron Pittman, and Jessica Uelmen, who are recognized for their work in front-end development
Examines web development from a practical perspective, helping learners think like front-end developers

Save this course

Save Intro to HTML and CSS to your list so you can find it easily later:
Save

Reviews summary

Frontend concepts for experienced learners

This course introduces front-end web development and design principles. It assumes that students have some understanding of HTML and CSS and will focus on higher-level concepts such as web page and project structure, responsive design, and web frameworks. Students will learn how to convert digital design mockups into static web pages using tools such as HTML, CSS, and Bootstrap.
Unique top-down approach.
"They try to approach the way to teach web development in a somewhat unique way..."
Focuses on higher-level concepts.
"The content is actually focused on higher level web development and design concepts..."
"The course spends very little time talking about nuts and bolts like different HTML tags and CSS properties."
Not for beginners.
"This course is definitely NOT FOR BEGINNERS."
"It's definitely not a course for beginners since it does not teach fundamental aspects."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Intro to HTML and CSS with these activities:
Review HTML elements
Refreshes necessary knowledge on HTML elements for better understanding of how to use them during the course.
Browse courses on HTML Elements
Show steps
  • Read through an article or tutorial on HTML elements.
  • Create a sample HTML document and try to identify different elements within it.
Review basic HTML and CSS concepts
Strengthen your foundation by revisiting core HTML and CSS concepts to improve comprehension and retention.
Browse courses on CSS Selectors
Show steps
  • Refer to course materials or online resources.
  • Review basic HTML tags, attributes, and CSS properties.
  • Practice writing simple HTML and CSS code snippets.
HTML and CSS syntax exercises
Reinforce your understanding of HTML and CSS syntax through guided exercises to improve accuracy and speed.
Show steps
  • Complete online coding challenges or quizzes.
  • Practice writing HTML and CSS code snippets from memory.
  • Use a code editor with syntax highlighting for practice.
Nine other activities
Expand to see all activities and additional details
Show all 12 activities
Read 'Designing with HTML and CSS' by Jon Duckett
Expand your knowledge of web design principles and best practices to enhance the quality and effectiveness of your web pages.
View PHP&MYSQL on Amazon
Show steps
  • Acquire a copy of the book.
  • Allocate dedicated time for reading.
  • Take notes and highlight key concepts.
  • Reflect on how the concepts apply to your own web development projects.
Follow a tutorial on CSS selectors
Provides hands-on practice in using CSS selectors to style HTML elements, enhancing understanding of how to control the appearance of web pages.
Browse courses on CSS Selectors
Show steps
  • Find a tutorial on CSS selectors.
  • Follow the steps in the tutorial to practice writing CSS selectors.
  • Create a sample HTML document and apply CSS selectors to style it.
Develop a web page prototype from scratch
Create a static web page using only HTML and CSS to solidify your understanding of page layout and element implementation.
Browse courses on Front-End Development
Show steps
  • Choose a simple design from a website or online gallery.
  • Break down the design into HTML elements.
  • Implement the HTML structure and style it with CSS.
  • Test the web page in different browsers and devices.
Responsive design debugging exercises
Enhance your problem-solving abilities by troubleshooting common responsive design issues to ensure optimal user experience across devices.
Show steps
  • Create a simple responsive web page with common layout issues.
  • Use browser developer tools to identify and fix layout problems.
  • Test the web page in multiple browsers and devices.
Engage in peer review of web design mockups
Encourages collaboration and critical thinking by allowing students to exchange feedback on web design mockups, enhancing their ability to identify and address potential issues.
Browse courses on Peer Feedback
Show steps
  • Find a peer who is also taking the course.
  • Exchange web design mockups with your peer.
  • Provide constructive criticism and suggestions for improvement.
  • Incorporate feedback into your own design process.
Follow online tutorials on advanced CSS techniques
Expand your knowledge of CSS by exploring advanced techniques to enhance the visual appeal and functionality of your web pages.
Show steps
  • Identify specific CSS techniques you want to learn.
  • Search for reputable online tutorials or courses.
  • Follow the tutorials step-by-step and implement the techniques in your own projects.
Design and develop a simple static webpage
Provides an opportunity to apply HTML and CSS knowledge to create a functional web page, reinforcing understanding of web development concepts.
Browse courses on Web Design
Show steps
  • Plan the layout and content of the webpage.
  • Create an HTML document for the webpage structure.
  • Add CSS styles to control the appearance of the webpage.
  • Test and refine the webpage for optimal display.
Develop a blog post or article on a specific HTML or CSS topic
Enhance your understanding and solidify your knowledge by sharing your insights on a chosen HTML or CSS topic through writing.
Show steps
  • Choose a specific topic you are knowledgeable about.
  • Research and gather information from reliable sources.
  • Organize your thoughts and outline the structure of the article.
  • Write the article, ensuring clarity, accuracy, and engaging content.
Write a blog post or article on a front-end development topic
Encourages students to synthesize and communicate their understanding of front-end development concepts, deepening their comprehension and helping them become more effective communicators.
Browse courses on Technical Writing
Show steps
  • Choose a specific topic related to front-end development.
  • Research the topic and gather information from reliable sources.
  • Outline the structure of your blog post or article.
  • Write the content, ensuring clarity, accuracy, and engagement.
  • Proofread and edit your writing before publishing.

Career center

Learners who complete Intro to HTML and CSS will develop knowledge and skills that may be useful to these careers:
Web Developer
Web Developers are responsible for the design and development of websites. They use HTML, CSS, and JavaScript to create user interfaces, design page layout, and implement responsive design techniques. This course provides a foundation in HTML and CSS, which are essential skills for Web Developers. By learning how to convert digital design mockups into static web pages, learners can gain the practical experience necessary to succeed in this role.
Front-End Developer
Front-End Developers are responsible for the user interface and user experience of websites. They use HTML, CSS, and JavaScript to create interactive and visually appealing web pages. This course teaches learners how to think like a Front-End Developer and how to approach the task of converting digital design mockups into static web pages. By gaining a strong foundation in HTML and CSS, learners can develop the skills necessary to succeed in this role.
UI Designer
UI Designers are responsible for the design of user interfaces for websites and applications. They use HTML and CSS to create prototypes and mockups of web pages. This course can help UI Designers to gain a deeper understanding of HTML and CSS, which can enable them to create more effective and user-friendly designs. By learning how to convert digital design mockups into static web pages, learners can also gain valuable experience in implementing their designs.
UX Designer
UX Designers are responsible for the user experience of websites and applications. They use HTML and CSS to create prototypes and mockups of web pages. This course can help UX Designers to gain a deeper understanding of HTML and CSS, which can enable them to create more effective and user-friendly designs. By learning how to convert digital design mockups into static web pages, learners can also gain valuable experience in implementing their designs.
Web Designer
Web Designers are responsible for the design and layout of websites. They use HTML and CSS to create visually appealing and functional web pages. This course can help Web Designers to gain a deeper understanding of HTML and CSS, which can enable them to create more effective and user-friendly designs. By learning how to convert digital design mockups into static web pages, learners can also gain valuable experience in implementing their designs.
User Researcher
User Researchers are responsible for conducting research to understand the needs and behaviors of users. While HTML and CSS are not typically used in user research, this course can help User Researchers to gain a better understanding of the fundamentals of web development. By learning how to convert digital design mockups into static web pages, learners can also gain valuable experience in creating user-friendly prototypes.
Software Engineer
Software Engineers are responsible for the design, development, and maintenance of software applications. While HTML and CSS are not typically used in software development, this course can help Software Engineers to gain a better understanding of the fundamentals of web development. By learning how to convert digital design mockups into static web pages, learners can also gain valuable experience in working with user interfaces.
Data Analyst
Data Analysts are responsible for collecting, cleaning, and analyzing data. While HTML and CSS are not typically used in data analysis, this course can help Data Analysts to gain a better understanding of the fundamentals of web development. By learning how to convert digital design mockups into static web pages, learners can also gain valuable experience in working with data visualization.
Product Manager
Product Managers are responsible for the development and launch of new products. While HTML and CSS are not typically used in product management, this course can help Product Managers to gain a better understanding of the fundamentals of web development. By learning how to convert digital design mockups into static web pages, learners can also gain valuable experience in working with cross-functional teams.
Technical Writer
Technical Writers are responsible for creating documentation for software and hardware products. While HTML and CSS are not typically used in technical writing, this course can help Technical Writers to gain a better understanding of the fundamentals of web development. By learning how to convert digital design mockups into static web pages, learners can also gain valuable experience in creating user-friendly documentation.

Featured in The Course Notes

This course is mentioned in our blog, The Course Notes. Read four articles that feature Intro to HTML and CSS:

Reading list

We've selected 21 books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Intro to HTML and CSS.
Provides a deep dive into the CSS specification, explaining how it works and how to use it effectively. It valuable resource for developers who want to improve their understanding of CSS.
Comprehensive guide to CSS3, covering everything from the basics to advanced techniques. It valuable resource for both beginners and experienced developers.
Comprehensive reference guide for HTML and CSS, covering everything from the basics to advanced techniques. It valuable resource for both beginners and experienced developers.
Comprehensive guide to CSS, covering everything from the basics to advanced techniques. It valuable resource for both beginners and experienced developers.
Save
Is designed to help you learn all things CSS. It provides an in-depth coverage of all the CSS layout, typography, and visual design techniques you'll need to create professional-looking websites.
Provides a comprehensive overview of CSS, covering everything from the basics to advanced topics such as CSS3 and responsive design. It valuable resource for both beginners and experienced developers.
Provides a practical guide to HTML5 and CSS3, covering everything from the basics to advanced techniques. It valuable resource for developers who want to learn how to create modern, responsive websites.
Provides practical solutions to common CSS problems. It valuable resource for developers who want to improve their CSS skills.
This set of books provides a comprehensive overview of web design, covering HTML, CSS, JavaScript, and jQuery. It valuable resource for beginners who want to learn the basics of web development.
Practical guide to web design, teaching you how to create and style websites using HTML5, CSS3, and JavaScript. It good choice for beginners who want to learn the basics of web development.
Great resource for beginners who want to learn the basics of HTML and CSS. It covers everything from creating a basic website to adding more advanced features, such as images and videos.
Great resource for beginners who want to learn the basics of HTML and CSS. It uses a unique, visual approach to teaching that makes learning fun and easy.
Provides a comprehensive reference guide to HTML5 and CSS3. It valuable resource for developers who want to learn more about the latest web technologies.
Provides a comprehensive guide to HTML5 Canvas. It covers everything from the basics to advanced techniques, such as drawing, animation, and interactivity. It valuable resource for developers who want to learn how to create interactive web applications.
Provides a comprehensive guide to web development with Python and Django. It covers everything from the basics to advanced techniques, such as creating dynamic websites. It valuable resource for developers who want to learn how to create interactive and data-driven websites.
Provides a comprehensive guide to Ruby on Rails. It covers everything from the basics to advanced techniques, such as creating dynamic websites. It valuable resource for developers who want to learn how to create interactive and data-driven websites.
Provides a comprehensive guide to Laravel. It covers everything from the basics to advanced techniques, such as creating dynamic websites. It valuable resource for developers who want to learn how to create interactive and data-driven websites.

Share

Help others find this course page by sharing it with your friends and followers:
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser