(This page has no text content)
HTML and CSS: The Most Complete Web Development Guide
(This page has no text content)
Copyright © 2022 Rick Sekuloski All rights reserved. ISBN:
CONTENTS PREFACE WHO IS THIS BOOK FOR? BENEFITS AND POSSIBLE EMPLOYMENT OUTCOMES HOW TO GET THE MOST OUT OF THIS BOOK? DOWNLOAD THE FILES CHAPTER 1 – GETTING STARTED IMPORTANT! FRONTEND DEVELOPMENT EQUIPMENT SETTING UP YOUR WORKPLACE CHOOSING THE RIGHT WEB BROWSER EXPLORE THE VISUAL STUDIO CODE USER INTERFACE AND LAYOUT TOOLS GRAPHIC TOOLS
TRANSFER TOOLS AND FILE MANAGEMENT CHAPTER 2 – UNDERSTANDING THE WEB WHAT IS INTERNET? WHAT ABOUT THE WEB? SERVERS URL, IP ADDRESSES AND DNS WHAT ABOUT WEB BROWSERS? CHAPTER 3 - THE BASIC ANATOMY OF A WEB PAGE STRUCTURE OF SIMPLE WEBSITE PROJECT LOAD FILES AND INSTALL EXTENSIONS LOCALHOST ANALYSE THE CURRENT WEB PAGE SUMMARY CHAPTER 4 – HTML DEEP DIVE
HISTORY OF HTML HTML IS EVERYWHERE LET’S START – LUNCH YOUR TEXT EDITOR NAMING CONVENTIONS WRITE CONTENT STRUCTURE OF HTML ELEMENT/TAG HTML PAGE STRUCTURE TEXT ELEMENTS HEADINGS PARAGRAPHS EMPHASIZED TEXT HTML LISTS HTML LINKS HTML IMAGES HTML DIV AND SPAN ELEMENTS HORIZONTAL RULE
HOW TO WRITE COMMENTS IN HTML HOW TO ADD A CSS STYLE SHEET IMPORTANT CONTENT ELEMENTS LONG QUOTATION HERE IS ONE EXAMPLE: PREFORMATTED TEXT FIGURE AND FIGCAPTION HTML ELEMENT PAGE CONTENT ORGANIZATION – SEMANTIC ELEMENTS HEADERS NAVIGATION SECTIONS HTML ARTICLES ASIDE FOOTERS ADDRESSES INLINE – TEXT LEVEL ELEMENTS
CITATION STRONG ITALIC EMPHASIZE DELETED BOLD INCORRECT <S> Q - SHORT QUOTATION SUPERSCRIPT AND SUBSCRIPT WORD BREAKS TIME AND DATETIME PUTTING IT ALL TOGETHER ON YOUR OWN NAVIGATION TIP: CHAPTER 5 – CASCADING STYLE SHEET
HOW TO LINK CSS IN DOCUMENTS EXTERNAL STYLE SHEET EMBEDDED STYLE SHEETS - USING THE <STYLE> TAGS IN THE HEAD INLINE CSS STYLES HOW TO CREATE CSS FILES WRITING THE CSS RULES CSS SELECTORS DECLARATIONS CLASS SELECTOR CSS COMMENTS PSEUDO-CLASSES INHERITANCE DOCUMENT TREE NESTED HTML ELEMENTS :FIRST-CHILD / :LAST-CHILD / :NTH- CHILD(N) ::BEFORE AND ::AFTER
CONFLICTING CASCADING STYLES THE CSS BOX MODEL DIMENSIONS OF THE BOX MODEL CONTENT PADDING BORDER MARGIN FULL SIZE OF AN ELEMENT NEGATIVE MARGINS BOX SIZING WITHOUT BOX-SIZING PROPERTY WITH CSS BOX-SIZING PROPERTY BOX-SIZING SYNTAX BOZ-SIZING: CONTENT-BOX BOX-SIZING BORDER-BOX WHY DO WE NEED BOX-SIZING? ELEMENT HEIGHT AND OVERFLOW
VISIBLE TEXT PADDING BORDER STYLES BORDER THICKNESS BORDER COLOR BORDER-RADIUS CHAPTER 6 – CSS TEXT FORMATTING FONT FONT-FAMILY CSS UNITS OF MEASUREMENT ABSOLUTE UNITS RELATIVE UNITS THE REM RELATIVE UNIT THE EM RELATIVE UNIT WHAT IS THE DIFFERENCE BETWEEN EM AND REM VW AND VH
FONT-SIZE FONT-WEIGHT LINE-HEIGHT LINE-HEIGHT WITH EM AND REM VALUES LINE-HEIGHT WITH PERCENTAGE AS VALUE LINE-HEIGHT WITH PIXELS AS VALUE LETTER SPACING COLOUR NAMED COLORS RGB VALUES HEXADECIMAL CODE TEXT SHADOW OFFSET-X AND OFFSET-Y BLUR-RADIUS AND COLOUR TEXT INDENTATION HORIZONTAL TEXT ALIGNMENT
TEXT DECORATIONS – UNDERLINE, OVERLINE, LINE-THROUGH TEXT-TRANSFORM LETTER AND WORD SPACING TEST YOURSELF CHAPTER 7 – LAYOUT, FLOATING AND POSITIONING POSITION STATIC RELATIVE FIXED ABSOLUTE STICKY FLOATING FLOATING BLOCK ELEMENTS CLEAR FLOAT FLOATING ISSUES DISPLAY
DISPLAY:NONE DISPLAY:INLINE DISPLAY:BLOCK DISPLAY:INLINE-BLOCK CHAPTER 8 – CSS FLEXBOX CSS FLEXIBLE BOX LAYOUT MODULE – FLEXBOX CONTAINING THE FLOW FLEX-WRAP FLEX-FLOW EXERCISE- LET US MAKE OUR OLD NAVIGATION BAR WITH FLEXBOX ALIGNMENT OF ITEMS IN THE CONTAINER JUSTIFY-CONTENT ALIGN ITEMS ALIGN-SELF ALIGN-CONTENT
FLEX PROPERTIES FLEX-ITEMS ORDER FLEXBOX IN PRACTICE BROWSER SUPPORT SUMMARY CHAPTER 9 – CSS GRID CSS GRID GRID LINES GRID CELL GRID AREA GRID TRACK SET UP OUR FIRST CSS GRID GRID TEMPLATE ROWS & GRID TEMPLATE COLUMNS GRID-TEMPLATE-ROWS GRID-TEMPLATE-COLUMNS EXPLICIT VS IMPLICIT GRID
GRID LINE NUMBERS THE GRID-AREA GRID NAMES TRACK SIZE VALUES FRACTIONAL UNITS (FR) MINMAX FUNCTION EXTRINSIC AND INTRINSIC MIN-CONTENT KEYWORD VALUE MAX-CONTENT KEYWORD VALUE AUTO KEYWORD FIT-CONTENT() FUNCTION REPEAT TRACK SIZES AUTO-FILL AND AUTO-FIT GRID AREAS GRID SHORTHAND PROPERTY SYNTAX GRID-GAP
CSS GRID JUSTIFY AND ALIGN CONTENT AND ITEMS JUSTIFY-ITEMS ALIGN-ITEMS JUSTIFY-CONTENT AND ALIGN- CONTENT TEST YOURSELF (FLEXBOX AND CSS GRID) FLEXBOX-QUESTIONS: FLEXBOX - LAYOUT PROPERTIES CHEAT SHEET CSS GRID QUESTIONS: CSS GRID- LAYOUT PROPERTIES CHEAT SHEET SUMMARY CHAPTER 10 - RESPONSIVE WEB DESIGN (RWD) WHY WE NEED RWD 4 KEY ASPECTS OF RWD
VIEWPORT META ELEMENT TESTING THE PAGE ON DIFFERENT SCREEN SIZES FLEXIBLE GRIDS FLEXIBLE – RESPONSIVE IMAGES CSS MEDIA QUERY COMMON BREAKPOINTS FOR WIDTHS OF DEVICES RWD – WEBSITE LAYOUT MINI PROJECT CHAPTER 11 - ADVANCED CSS- TRANSITIONS, TRANSFORMS AND ANIMATION TRANSITIONS TRANSITION TIMING FUNCTION LINEAR EASE EASE-IN EASE-OUT
Loading comments...
Reply to Comment
Edit Comment