Course Information
Registration period
Year-round Recruitment
Course Level
Study Mode
Duration
17 Hour(s) 55 Minute(s)
Language
English
Taught by
Anthony Alicea
Certificate
- Available
- *The delivery and distribution of the certificate are subject to the policies and arrangements of the course provider.
Rating
3 views
Course Overview
The only course that teaches you to read the specs & stay relevant. Semantic HTML, responsive CSS, flexbox, grid + more.
New lectures on maximizing the quality of AI LLM output when AI generating HTML and CSS!
Major Update! New lectures on hyper-modern CSS including Container Queries (@container), :has, Nesting, Media Query Range Syntax, and Layers (@layer). Deeply understand how these latest additions to CSS really work, and keep your skills on the cutting edge!
Updates include a brand-new modern real-world HTML and CSS project using cutting-edge CSS techniques and hands-on coding exercises!
In this course, with a combination of theory, practice, and projects, you'll gain a deep understanding of HTML and CSS (HTML5, CSS3 and beyond), as we dive into how these technologies really work. We'll look at the problems HTML and CSS are trying to solve and how they solve them. We'll dive into how browser rendering engines really work. We'll gain confidence to read and understand the HTML and CSS specifications, so you can continue to teach yourself in the future and keep your skills fresh.
Along the way we’ll follow our core philosophy of “Don’t Imitate, Understand”. Simply copying others’ projects won’t help you when faced with a real-world job that doesn’t look like the projects you’ve copied. To succeed in a real world job, you need to truly understand.
This course is designed for beginners to learn from scratch, but also to break experienced developers out of bad habits.
Some things you will learn in this course are:
Learn to author semantic HTML.
Learn how semantic HTML improves the accessibility of your user interface.
Learn to read and understand the HTML and CSS specifications, so you can continue to teach yourself as new HTML and CSS features come along in the future.
Understand how browser rendering engines work, under the hood.
Gain a deep understanding of the browser DOM.
Gain a proper understanding of the CSS cascade, inheritance, and specificity.
Learn why CSS works the way it does, so that your mental model let's you deal with problems as they come up during work.
Understand advanced CSS features such as Flexbox and Grid.
Learn to use CSS to create mobile-first responsive design.
Hands-on coding exercises and quizzes to test your skills.
Understand how hyper-modern CSS features like Container Queries (@container), :has, Nesting, Media Query Range Syntax, and Layers (@layer) work, keeping your skills modern and on the cutting edge.
Modern CSS projects with hands-on coding exercises to practice authoring semantic, SEO-friendly, and accessible HTML and using the latest in modern CSS.
Learn how to prompt an AI to give you the best quality HTML and CSS.
If you are new to HTML and CSS: you will learn fundamentals and skills that will help you the rest of your career.
If you are an experienced developer: you will learn to reset your mental models, understand and rely on the official specifications, and dramatically improve your day-to-day development experience.
Course Content
- 31 section(s)
- 262 lecture(s)
- Section 1 Introduction
- Section 2 Trees
- Section 3 HTML
- Section 4 HTML: The Document
- Section 5 HTML: Document Sections
- Section 6 HTML: Grouping Things
- Section 7 HTML: Text Itself
- Section 8 HTML: The Browser and the DOM
- Section 9 HTML: Accessibility
- Section 10 HTML: Interactivity
- Section 11 HTML: JavaScript Frameworks
- Section 12 CSS: Stylesheets and Querying Trees
- Section 13 CSS: Box Model
- Section 14 CSS: Box Position
- Section 15 CSS: Painting and Images
- Section 16 CSS: Flow
- Section 17 CSS: Flexbox
- Section 18 CSS: Grid
- Section 19 CSS: Fonts, Colors, and More
- Section 20 CSS: Responsiveness and Querying Media
- Section 21 HTML and CSS: Saving Time and Effort
- Section 22 CSS Frameworks
- Section 23 Game Changing CSS
- Section 24 CSS Nesting
- Section 25 CSS Layers
- Section 26 CSS: Container Queries and Units
- Section 27 CSS: The superpower of :has
- Section 28 HTML and CSS: Modern Real-World Project: Landing Page
- Section 29 HTML and CSS: Modern Real World Project: Dashboard
- Section 30 AI, LLMs, HTML, and CSS
- Section 31 Conclusion
What You’ll Learn
- Author semantic HTML.
- Use semantic HTML to improve the accessibility of your websites and apps.
- Layout web pages visually using CSS.
- Read and understand the HTML and CSS specifications to be able to continue teaching yourself.
- Understand how browser rendering engines work.
- Gain a proper understanding of the CSS cascade, inheritance, and specificity.
- Advanced CSS features like Flexbox and Grid.
- Hyper-modern features like Container Queries, :has, Nesting, and Layers to keep your skills modern and cutting-edge.
- How to prompt an AI to get the best quality HTML and CSS
Skills covered in this course
Reviews
-
CChristian Hettlage
I'm not sure whether this is the ideal first course to take on HTML and CSS, but if you come with some knowledge, it may be really rewarding. The instructor goes a long way to demystify (and actually show) specifications, and maybe it is his repeated call to actually look at them which might be one of the most valuable lession to take away from the course. The instructor puts emphasis on using semantic HTML, and the coverage of CSS seems to be up-to-date, including recent additions to the standard. The course may be lacking a bit on practical examples, but the two projects presented near the end are very instructive. Overall, I found the instructor to relay the content in an engaging manner.
-
KKenis Polanco
Amazing explaining skills. Very Clear and direct. Most importantly the terminology that we need to move forward is as accurate as it gets.
-
LLorenzo Walker
Awesome Course!
-
ZZdrav Gligo
BIG COURSE ALERT: This course is a perfect illustration of what is wrong with Udemy's Reviews rating system. I just wasted a whole month trying to create a double-holy-grail desktop layout. Contributing factors were CIS Grid being overhyped as a 2d layout solution and superficial courses like this one; which explain none of its bugs that IE crew documented as features. Imagine CSS Grid and all of its complexities being illustrated on formatting of a lousy resume with a handful of Portfolio images. This course got an average 4.7 rating from CSS noobs. Being clueless about existance of CSS topics that one is clueless about; explains why so many clueless courses have such high ratings. EDIT/ADD: I will then push back on your practical knowledge of specific subsets of subject matter and/or ethics - as follows: (1) using css grid is a nightmare when dealing with tracks, as in visually moving elements into them and then moving them out of those tracks - where those tracks refuse to disappear and where gaps end up showing up even thought those gaps are separating absolutely nothing - oh some like you might turn to documentation and *lines* not gaps being in the spec (2) the ethics come into play because you took my mention of IE out of context because I merely mentioned it in context of historical IE problems and that being who and where css grids came into life - so, show me where I stated that it does not work in IE and where issues in item (1) work elsewhere except IE (3) I rest my case by repeating how you chose a superficial use case with which to teach us a complex subject like css grid - your resume - LOL - You are a smart person and a smart teacher, but it is evident that you have not personally used css grid for anything that it is meant to be used for. Good courses go beyond user assisted, wooden lawyer **big word alert** readings of official specs. CSS clueless me could have done a course like that.
