HTML & CSS — Course for Beginners
19 lessons — from the basics of searching for information to responsive layouts. Notes compiled from the best sources and tested in practice.
Course contents
- 01 How to Search for Information Properly Lecture notes for beginners in web development 8 min
- 02 Introduction to Web Layout Lecture notes — HTML and CSS basics for beginners 16 min
- 03 Content Tags Tags for marking up the page's text content: headings, paragraphs, lists, images. CSS box-model properties and new selector types. 12 min
- 04 Tags for Structuring Content Lecture notes: semantic tags, the box model, inline and block elements 10 min
- 05 Positioning Block Elements Lecture notes: Flexbox, CSS Grid, semantic header/nav/footer tags, margin collapsing, pseudo-classes 11 min
- 06 Building Forms Lecture notes: form elements, field styling, validation, label, outline, :focus and :hover states 9 min
- 07 Custom Form Elements Lecture notes: display: inline-block, the <select> dropdown, background properties, radio buttons, checkboxes, custom styling, pseudo-elements, the + and ~ selectors 12 min
- 08 Popup Elements Lecture notes: content and decorative images, float, clearfix, text wrapping and element positioning 11 min
- 09 Positioning Flex Elements Lecture notes: align-items, align-self, flex-wrap, order, flex-grow and other Flexbox properties 17 min
- 10 Building a Fluid Layout Lecture notes: fixed, fluid and responsive layouts, relative units, percentage sizes 8 min
- 11 Fluid Images Lecture notes: the calc() function, responsive images, max-width, object-fit and fluid video 6 min
- 12 Introduction to Media Queries Lecture notes: why responsiveness matters, @media syntax, media types and logical operators 5 min
- 13 Media Features Lecture notes: a mobile design checklist, the width, height, resolution, hover and pointer media features 10 min
- 14 Layout Features for Mobile Devices Lecture notes: Retina displays, Device Pixel Ratio, the viewport meta tag, mobile browsers 9 min
- 15 Building a Responsive Layout Lecture notes: cross-browser compatibility, caniuse.com, vendor prefixes, responsive layout strategies 14 min
- 16 Breakpoints Lecture notes: what breakpoints are, how to choose them, common values for phones, tablets and desktops 2 min
- 17 Responsive Typography Lecture notes: viewport units, the rem approach, responsive font sizes and accessibility 6 min
- 18 Responsive Images Lecture notes: the picture tag, the srcset attribute and optimizing graphics for different devices 2 min
- 19 Modern CSS: New Features Bonus lecture: corner-shape, modern colors (oklch, relative colors) and animating underlines with a gradient 5 min
Let’s discuss your project?
Free consultation + cost calculation
More interesting articles