HTML and CSS Tutorial for Beginners

HTML Basics

Introduction HTML language HTML tags Attributes Styles Basic structure of the page Main tags Paragraphs Headlines Making text bold Italicize text Unordered lists Ordered lists Links Internal links Images Image width Picture height Setting the width and height of the image Tables Table width and height Header cells Workshop

CSS Basics

Introduction to CSS How to work with CSS Values for color Any colors Width and height Text alignment Align text to the right Align text to the center Align text to the left Align text to the right and left at the same time Text alignment practice Fat content Italics Font size Font family Line spacing Line-height value without units The font shorthand property Red line of text Text effects Underline text Upper text underline Strikethrough text Removing text effects Workshop

Selectors

Tag Relationships Inheritance of properties Grouping selectors General properties Descendant selectors Child selector Class selector span tag Div tag Class grouping Tag with a given class Descendant Selector and Classes Complex combinations of descendant selectors and classes Rookie Mistake in Descendant Selector Element with multiple classes Selector by id Selector by id and classes Using id Selector by multiple classes Several selectors merged Error multiple selectors Grouping complex selectors Error while grouping Selector combination training Selector priority Property Conflict Notice Specificity rules Descendant Selector Priority Neighbor selector Related selector Universal selector Attribute selectors Link States Nuances of the link state sequence Link and visited states Common uses of link state Complex selectors with links Link with class End Element Selection Selection by position Single offspring selection Selecting empty elements Selection by position and element type Negation not

Design

Background color Basics of working with boundaries Solid border Point border Dash border Convex boundary Double border Shorthand property for border Borders for different sides Rounding block borders Rounding the background borders Creating a circle Rounding for different corners Four meanings Two meanings Three meanings Rounding in percent Create a circle with a rounding percentage Picture for background Repeat background image Other properties for background ul list markers Square ul list markers ul list markers as circles ul list markers as filled circles Missing ul list markers List markers ol Lowercase Roman Numerals for Lists ol Capital Roman Numerals for Lists ol Lowercase Latin letters for lists ol Capital Latin letters for lists ol Lowercase Greek Letters for Lists ol Numbers with leading zero for ol lists

Block model

External indentation margin Margins for different sides Multiple values in margin Four values in margin Two values in margin Three values in margin Inner padding Padding for different sides Multiple values in padding Expanding elements The influence of the boundary on the expansion of elements The combined effect of padding and border on the expansion of elements Unexpand elements Block elements Width and height of a block element Block element width Height of a block element Height without contents Several block elements next to each other Inline elements Width and height of inline element Several inline elements next to each other Indents between inline elements Definition of the block model display property Inline-block elements Width and height of inline-block element Width of inline-block element Height of inline-block element Several inline-block elements next to each other Alignment of block elements Aligning a block element with left indentation Aligning a block element with right indentation Alignment of inline elements Centering inline elements Centering Multiple Inline Elements Aligning inline elements to the right Alignment of inline-block elements Centering inline-block elements Aligning inline-block elements to the right edge Flex elements Height of flex element parent Flex element parent width Inline-block parent Parent padding margins Margins for descendants Alignment of flex elements Aligning flex elements to the center Aligning flex elements to parent Aligning flex items to parent with padding Aligning flex items to parent with equal margins

Positioning

Absolute Relative Absolute relative to parent The absolute relative to the absolute Absolute without coordinates Centering via absolute Negative absolute values Fixed positioning Full width block Overlay elements along the Z axis Adjusting the overlap of elements along the Z axis The nuances of using a negative z-index value

Floats

Introduction to the float property Float property and tags Combination of float and margin Combination of float and padding Floating elements under tags Effect of floats on the parent Height of the float parent Text in float parent Flowing Cancel wrapping Separate div with clearfix Parent height and clearfix Float property for blocks The float property and multiple blocks Float property and parent without text

Flexes

Placement in a row or column Placing flex items in an inverted row Placing flex elements in a column Flipping a column with flex elements Main and transverse axes Alignment to the main axis Alignment along the transverse axis The value of the center property of align-items Centering without block height Centering with different block heights The value of the stretch property of align-items Practice on alignment along axes Aligning a Single Element Flex Block Order

Grids

Introduction to Grids Tracks and lines Display in the debugger Columns Unit fr Fractional fr Pixels and fr Percentages and fr repeat function The meaning of auto The meaning of auto-fill minmax function The meaning of auto-fit Rows Abbreviation for rows and columns Merging rows Merge columns Combinations of unions Overlapping columns Distance between columns Distance between rows Distance between columns and rows Tiles

Layouts

Creating a menu Simple Single Column Website Layouts Multiple Wrapper Layout Scheme Structural blocks of the site Two-column layout diagram Three-column website layout diagram Special tags for website layout elements Basic Layout Tags Tag for sections Practice on mock-ups

↑