├── .codesandbox └── workspace.json ├── C1_HTML_ADocument ├── Begin │ └── resume.txt └── Finished │ └── resume.txt ├── D2_Document_DocumentTypes ├── Begin │ └── index.html └── Finished │ └── index.html ├── D3_Document_TheRoot ├── Begin │ └── index.html └── Finished │ └── index.html ├── D4_Document_Metadata ├── Begin │ └── index.html └── Finished │ └── index.html ├── D5_Document_Content ├── Begin │ └── index.html └── Finished │ └── index.html ├── E2_Sections_SelfContainedCompositions ├── Begin │ └── index.html └── Finished │ └── index.html ├── E3_Sections_ThematicGroupings ├── Begin │ └── index.html └── Finished │ └── index.html ├── E4_Sections_TangentialContent ├── Begin │ └── index.html └── Finished │ └── index.html ├── E5_Sections_HeadingsRank ├── Begin │ └── index.html └── Finished │ └── index.html ├── E6_Sections_HeadersFooters ├── Begin │ └── index.html └── Finished │ └── index.html ├── E7_Sections_Addresses ├── Begin │ └── index.html └── Finished │ └── index.html ├── F1_Grouping_Paragraphs ├── Begin │ └── index.html └── Finished │ └── index.html ├── F2_Grouping_Quotes ├── Begin │ └── index.html └── Finished │ └── index.html ├── F3_Grouping_UnorderedLists ├── Begin │ └── index.html └── Finished │ └── index.html ├── F4_Grouping_OrderedLists ├── Begin │ └── index.html └── Finished │ └── index.html ├── F5_Grouping_AssociationLists ├── Begin │ └── index.html └── Finished │ └── index.html ├── F6_Grouping_Multidimensional ├── Begin │ └── index.html └── Finished │ └── index.html ├── F8_Grouping_DominantContent ├── Begin │ └── index.html └── Finished │ └── index.html ├── G1_Text_Emphasis ├── Begin │ └── index.html └── Finished │ └── index.html ├── G2_Text_Importance ├── Begin │ └── index.html └── Finished │ └── index.html ├── G3_Text_SideComments ├── Begin │ └── index.html └── Finished │ └── index.html ├── G4_Text_LineBreaks ├── Begin │ └── index.html └── Finished │ └── index.html ├── G5_Text_AuthorsComments ├── Begin │ └── index.html └── Finished │ └── index.html ├── H14_Browser_AnchorTagsAgain ├── Begin │ └── index.html └── Finished │ └── index.html ├── H2_Browser_AnchorTags ├── Begin │ └── index.html └── Finished │ └── index.html ├── H7_Browser_NamedCharacterReferences ├── Begin │ └── index.html └── Finished │ └── index.html ├── HTMLCSS_TonyAlicea_AllCode.zip ├── J1_Interactivity_Navigation ├── Begin │ └── index.html └── Finished │ └── index.html ├── J3_Interactivity_FormsFieldsLabels ├── Begin │ └── index.html └── Finished │ ├── dosomething.html │ └── index.html ├── J4_Interactivity_Buttons ├── Begin │ ├── dosomething.html │ └── index.html └── Finished │ ├── dosomething.html │ └── index.html ├── J5_Interactivity_MoreFields ├── Begin │ ├── dosomething.html │ └── index.html └── Finished │ ├── dosomething.html │ └── index.html ├── J6_Interactivity_EvenMoreFields ├── Begin │ ├── dosomething.html │ └── index.html └── Finished │ ├── dosomething.html │ └── index.html ├── L10_StylesheetsAndTrees_IdSelector ├── Begin │ ├── dosomething.html │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── index.html │ └── styles.css ├── L11_StylesheetsAndTrees_ClassSelector ├── Begin │ ├── dosomething.html │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── index.html │ └── styles.css ├── L12_StylesheetsAndTrees_GroupingSelector ├── Begin │ ├── dosomething.html │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── index.html │ └── styles.css ├── L13_StylesheetsAndTrees_DescendantCombinator ├── Begin │ ├── dosomething.html │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── index.html │ └── styles.css ├── L14_StylesheetsAndTrees_ChildCombinator ├── Begin │ ├── dosomething.html │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── index.html │ └── styles.css ├── L15_StylesheetsAndTrees_NextSiblingCombinator ├── Begin │ ├── dosomething.html │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── index.html │ └── styles.css ├── L16_StylesheetsAndTrees_SubsequentSiblingCombinator ├── Begin │ ├── dosomething.html │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── index.html │ └── styles.css ├── L19_StylesheetsAndTrees_ChildIndexedPsuedoClasses ├── Begin │ ├── dosomething.html │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── index.html │ └── styles.css ├── L20_StylesheetsAndTrees_TypeChildIndexedPsuedoClasses ├── Begin │ ├── dosomething.html │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── index.html │ └── styles.css ├── L21_StylesheetsAndTrees_LocationPseudoClasses ├── Begin │ ├── dosomething.html │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── index.html │ └── styles.css ├── L22_StylesheetsAndTrees_UserActionPseudoClasses ├── Begin │ ├── dosomething.html │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── index.html │ └── styles.css ├── L23_StylesheetsAndTrees_NegationPseudoClasses ├── Begin │ ├── dosomething.html │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── index.html │ └── styles.css ├── L24_StylesheetsAndTrees_PseudoElements ├── Begin │ ├── dosomething.html │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── index.html │ └── styles.css ├── L25_StylesheetsAndTrees_Cascade ├── Begin │ ├── dosomething.html │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── index.html │ ├── styles.css │ └── styles2.css ├── L26_StylesheetsAndTrees_Importance ├── Begin │ ├── dosomething.html │ ├── index.html │ ├── styles.css │ └── styles2.css └── Finished │ ├── dosomething.html │ ├── index.html │ ├── styles.css │ └── styles2.css ├── L27_StylesheetsAndTrees_Specificity ├── Begin │ ├── dosomething.html │ ├── index.html │ ├── styles.css │ └── styles2.css └── Finished │ ├── dosomething.html │ ├── index.html │ ├── styles.css │ └── styles2.css ├── L28_StylesheetsAndTrees_OrderOfAppearance ├── Begin │ ├── dosomething.html │ ├── index.html │ ├── styles.css │ └── styles2.css └── Finished │ ├── dosomething.html │ ├── index.html │ ├── styles.css │ └── styles2.css ├── L28b_StylesheetsAndTrees_CascadeLayersAndImport ├── Begin │ ├── dosomething.html │ ├── index.html │ ├── styles.css │ └── styles2.css └── Finished │ ├── dosomething.html │ ├── index.html │ ├── style.css │ ├── styles.css │ └── styles2.css ├── L29_StylesheetsAndTrees_InheritInitial ├── Begin │ ├── dosomething.html │ ├── index.html │ ├── styles.css │ └── styles2.css └── Finished │ ├── dosomething.html │ ├── index.html │ └── styles.css ├── L30_StylesheetsAndTrees_MatchesAny ├── Begin │ ├── dosomething.html │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── index.html │ └── styles.css ├── L30b_StylesheetsAndTrees_SpecificityAdjustment ├── Begin │ ├── dosomething.html │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── index.html │ └── styles.css ├── L7_StylesheetsAndTrees_AuthorStylesheets ├── Begin │ ├── dosomething.html │ └── index.html └── Finished │ ├── dosomething.html │ ├── index.html │ └── styles.css ├── L8_StylesheetsAndTrees_UniversalSelector ├── Begin │ ├── dosomething.html │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── index.html │ └── styles.css ├── L9_StylesheetsAndTrees_AttributeSelector ├── Begin │ ├── dosomething.html │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── index.html │ └── styles.css ├── M11_BoxModel_CalcMinMaxClamp ├── Begin │ ├── dosomething.html │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── index.html │ └── styles.css ├── M7_BoxModel_Units ├── Begin │ ├── dosomething.html │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── index.html │ └── styles.css ├── M9_BoxModel_BoxSizing ├── Begin │ ├── dosomething.html │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── index.html │ └── styles.css ├── N3_BoxPosition_Relative ├── Begin │ ├── dosomething.html │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── index.html │ └── styles.css ├── N4_BoxPosition_Absolute ├── Begin │ ├── dosomething.html │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── index.html │ └── styles.css ├── N5_BoxPosition_Fixed ├── Begin │ ├── dosomething.html │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── index.html │ └── styles.css ├── N6_BoxPosition_Sticky ├── Begin │ ├── dosomething.html │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── index.html │ └── styles.css ├── O2_Painting_Visibility ├── Begin │ ├── dosomething.html │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── index.html │ └── styles.css ├── O3_Painting_ZIndex ├── Begin │ ├── dosomething.html │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── index.html │ └── styles.css ├── O4_Painting_Img ├── Begin │ ├── dosomething.html │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── index.html │ └── styles.css ├── P10_Flow_LogicalProperties ├── Begin │ ├── dosomething.html │ ├── images │ │ └── mypicture.png │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ └── mypicture.png │ ├── index.html │ └── styles.css ├── P2_Flow_Block ├── Begin │ ├── dosomething.html │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── index.html │ └── styles.css ├── P3_Flow_Float ├── Begin │ ├── dosomething.html │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ └── mypicture.png │ ├── index.html │ └── styles.css ├── P4_Flow_Inline ├── Begin │ ├── dosomething.html │ ├── images │ │ └── mypicture.png │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ └── mypicture.png │ ├── index.html │ └── styles.css ├── P5_Flow_FlowRoot ├── Begin │ ├── dosomething.html │ ├── images │ │ └── mypicture.png │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ └── mypicture.png │ ├── index.html │ └── styles.css ├── P7_Flow_WritingMode ├── Begin │ ├── dosomething.html │ ├── images │ │ └── mypicture.png │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ └── mypicture.png │ ├── index.html │ └── styles.css ├── P8_Flow_Direction ├── Begin │ ├── dosomething.html │ ├── images │ │ └── mypicture.png │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ └── mypicture.png │ ├── index.html │ └── styles.css ├── P9_Flow_TextOrientation ├── Begin │ ├── dosomething.html │ ├── images │ │ └── mypicture.png │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ └── mypicture.png │ ├── index.html │ └── styles.css ├── Q1_Flexbox_FlexFormattingContext ├── Begin │ ├── dosomething.html │ ├── images │ │ └── mypicture.png │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ └── mypicture.png │ ├── index.html │ └── styles.css ├── Q2_Flexbox_FlowDirection ├── Begin │ ├── dosomething.html │ ├── images │ │ └── mypicture.png │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ └── mypicture.png │ ├── index.html │ └── styles.css ├── Q3_Flexbox_DisplayOrder ├── Begin │ ├── dosomething.html │ ├── images │ │ └── mypicture.png │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ └── mypicture.png │ ├── index.html │ └── styles.css ├── Q4_Flexbox_WrappingOverflow ├── Begin │ ├── dosomething.html │ ├── images │ │ └── mypicture.png │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ └── mypicture.png │ ├── index.html │ └── styles.css ├── Q5_Flexbox_Flex ├── Begin │ ├── dosomething.html │ ├── images │ │ └── mypicture.png │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ └── mypicture.png │ ├── index.html │ └── styles.css ├── Q6_Flexbox_Alignment ├── Begin │ ├── dosomething.html │ ├── images │ │ └── mypicture.png │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ └── mypicture.png │ ├── index.html │ └── styles.css ├── R1_Grid_GridFormattingContext ├── Begin │ ├── dosomething.html │ ├── images │ │ └── mypicture.png │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ └── mypicture.png │ ├── index.html │ └── styles.css ├── R3_Grid_TrackSizing ├── Begin │ ├── dosomething.html │ ├── images │ │ └── mypicture.png │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ └── mypicture.png │ ├── index.html │ └── styles.css ├── R4_Grid_ItemPlacement ├── Begin │ ├── dosomething.html │ ├── images │ │ └── mypicture.png │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ └── mypicture.png │ ├── index.html │ └── styles.css ├── R6_Grid_AlignmentSpacing ├── Begin │ ├── dosomething.html │ ├── images │ │ └── mypicture.png │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ └── mypicture.png │ ├── index.html │ └── styles.css ├── R8_Grid_VisualChange ├── Begin │ ├── dosomething.html │ ├── images │ │ └── mypicture.png │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ └── mypicture.png │ ├── index.html │ └── styles.css ├── README.md ├── S1_FontsColors_Fonts ├── Begin │ ├── dosomething.html │ ├── images │ │ └── mypicture.png │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ └── mypicture.png │ ├── index.html │ └── styles.css ├── S2_FontsColors_HexadecimalRBGColors ├── Begin │ ├── dosomething.html │ ├── images │ │ └── mypicture.png │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ └── mypicture.png │ ├── index.html │ └── styles.css ├── S3_FontsColors_Opacity ├── Begin │ ├── dosomething.html │ ├── images │ │ └── mypicture.png │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ └── mypicture.png │ ├── index.html │ └── styles.css ├── S5_FontsColors_AnimationsTransitions ├── Begin │ ├── dosomething.html │ ├── images │ │ └── mypicture.png │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ └── mypicture.png │ ├── index.html │ └── styles.css ├── S6_FontsColors_AnimationsKeyframes ├── Begin │ ├── dosomething.html │ ├── images │ │ └── mypicture.png │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ └── mypicture.png │ ├── index.html │ └── styles.css ├── S7_FontsColors_ImagesSVGs ├── Begin │ ├── dosomething.html │ ├── images │ │ └── mypicture.png │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ ├── mypicture.png │ ├── twitter.svg │ └── youtube.svg │ ├── index.html │ └── styles.css ├── S9_FontsColors_VisualDesignAndUX ├── Begin │ ├── dosomething.html │ ├── images │ │ ├── mypicture.png │ │ ├── twitter.svg │ │ └── youtube.svg │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ ├── mypicture.png │ ├── twitter.svg │ └── youtube.svg │ ├── index.html │ └── styles.css ├── T3_Responsiveness_ViewportsZoom ├── Begin │ ├── dosomething.html │ ├── images │ │ ├── mypicture.png │ │ ├── twitter.svg │ │ └── youtube.svg │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ ├── mypicture.png │ ├── twitter.svg │ └── youtube.svg │ ├── index.html │ └── styles.css ├── T4_Responsiveness_MediaFeatures ├── Begin │ ├── dosomething.html │ ├── images │ │ ├── mypicture.png │ │ ├── twitter.svg │ │ └── youtube.svg │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ ├── mypicture.png │ ├── twitter.svg │ └── youtube.svg │ ├── index.html │ └── styles.css ├── T4b_Responsiveness_RangeSyntax ├── Begin │ ├── dosomething.html │ ├── images │ │ ├── mypicture.png │ │ ├── twitter.svg │ │ └── youtube.svg │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ ├── mypicture.png │ ├── twitter.svg │ └── youtube.svg │ ├── index.html │ └── styles.css ├── T5_Responsiveness_MobileFirst ├── Begin │ ├── dosomething.html │ ├── images │ │ ├── mypicture.png │ │ ├── twitter.svg │ │ └── youtube.svg │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ ├── mypicture.png │ ├── twitter.svg │ └── youtube.svg │ ├── index.html │ └── styles.css ├── T7_Responsiveness_Print ├── Begin │ ├── dosomething.html │ ├── images │ │ ├── mypicture.png │ │ ├── twitter.svg │ │ └── youtube.svg │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ ├── mypicture.png │ ├── twitter.svg │ └── youtube.svg │ ├── index.html │ └── styles.css ├── U2_CSSVariables_CSSVariables ├── Begin │ ├── dosomething.html │ ├── images │ │ ├── mypicture.png │ │ ├── twitter.svg │ │ └── youtube.svg │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ ├── mypicture.png │ ├── twitter.svg │ └── youtube.svg │ ├── index.html │ └── styles.css ├── U3_CSSVariables_Minification ├── Begin │ ├── dosomething.html │ ├── images │ │ ├── mypicture.png │ │ ├── twitter.svg │ │ └── youtube.svg │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ ├── mypicture.png │ ├── twitter.svg │ └── youtube.svg │ ├── index.html │ ├── styles.css │ └── styles.min.css ├── VA2_Nesting_NestingInPractice ├── Begin │ ├── dosomething.html │ ├── images │ │ ├── mypicture.png │ │ ├── twitter.svg │ │ └── youtube.svg │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ ├── mypicture.png │ ├── twitter.svg │ └── youtube.svg │ ├── index.html │ └── styles.css ├── VA3_Nesting_AtAndPseudoClasses ├── Begin │ ├── dosomething.html │ ├── images │ │ ├── mypicture.png │ │ ├── twitter.svg │ │ └── youtube.svg │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ ├── mypicture.png │ ├── twitter.svg │ └── youtube.svg │ ├── index.html │ └── styles.css ├── VA4_Nesting_AtRulesAndNesting ├── Begin │ ├── dosomething.html │ ├── images │ │ ├── mypicture.png │ │ ├── twitter.svg │ │ └── youtube.svg │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ ├── mypicture.png │ ├── twitter.svg │ └── youtube.svg │ ├── index.html │ └── styles.css ├── VB2_Layers_DeclaringLayers ├── Begin │ ├── dosomething.html │ ├── images │ │ ├── mypicture.png │ │ ├── twitter.svg │ │ └── youtube.svg │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ ├── mypicture.png │ ├── twitter.svg │ └── youtube.svg │ ├── index.html │ ├── resume.css │ └── styles.css ├── VB4_Layers_LayersInPractice ├── Begin │ ├── dosomething.html │ ├── images │ │ ├── mypicture.png │ │ ├── twitter.svg │ │ └── youtube.svg │ ├── index.html │ ├── resume.css │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ ├── mypicture.png │ ├── twitter.svg │ └── youtube.svg │ ├── index.html │ ├── portfolio.css │ ├── resume.css │ └── styles.css ├── VC2_ContainerQueries_ContainerContextsAndQueries ├── Begin │ ├── dosomething.html │ ├── images │ │ ├── mypicture.png │ │ ├── twitter.svg │ │ └── youtube.svg │ ├── index.html │ ├── portfolio.css │ ├── resume.css │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ ├── mypicture.png │ ├── twitter.svg │ └── youtube.svg │ ├── index.html │ └── styles.css ├── VC3_ContainerQueries_ContainerQueryUnits ├── Begin │ ├── dosomething.html │ ├── images │ │ ├── mypicture.png │ │ ├── twitter.svg │ │ └── youtube.svg │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ ├── mypicture.png │ ├── twitter.svg │ └── youtube.svg │ ├── index.html │ └── styles.css ├── VC4_ContainerQueries_ContainerQueriesInPractice ├── Begin │ ├── dosomething.html │ ├── images │ │ ├── mypicture.png │ │ ├── twitter.svg │ │ └── youtube.svg │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ ├── mypicture.png │ ├── twitter.svg │ └── youtube.svg │ ├── index.html │ └── styles.css ├── VD2_SuperpowerOfHas_HasInPractice ├── Begin │ ├── dosomething.html │ ├── images │ │ ├── mypicture.png │ │ ├── twitter.svg │ │ └── youtube.svg │ ├── index.html │ └── styles.css └── Finished │ ├── dosomething.html │ ├── images │ ├── mypicture.png │ ├── twitter.svg │ └── youtube.svg │ ├── index.html │ └── styles.css ├── VE10_LandingPage_CSS_Navigation ├── Begin │ ├── index.html │ └── styles.css └── Finished │ ├── index.html │ └── styles.css ├── VE11_LandingPage_CSS_Hero ├── Begin │ ├── index.html │ ├── laptop.png │ └── styles.css └── Finished │ ├── index.html │ ├── laptop.png │ └── styles.css ├── VE12_LandingPage_CSS_Features ├── Begin │ ├── index.html │ ├── laptop.png │ └── styles.css └── Finished │ ├── index.html │ ├── laptop.png │ └── styles.css ├── VE13_LandingPage_CSS_AboutUs ├── Begin │ ├── index.html │ ├── laptop.png │ └── styles.css └── Finished │ ├── index.html │ ├── laptop.png │ └── styles.css ├── VE14_LandingPage_CSS_ContactUs ├── Begin │ ├── index.html │ ├── laptop.png │ └── styles.css └── Finished │ ├── index.html │ ├── laptop.png │ └── styles.css ├── VE15_LandingPage_CSS_Footer ├── Begin │ ├── index.html │ ├── laptop.png │ └── styles.css └── Finished │ ├── index.html │ ├── laptop.png │ └── styles.css ├── VE2_LandingPage_HTML_PageStructure ├── Begin │ ├── index.html │ └── styles.css └── Finished │ ├── index.html │ └── styles.css ├── VE3_LandingPage_HTML_Navigation ├── Begin │ ├── index.html │ └── styles.css └── Finished │ ├── index.html │ └── styles.css ├── VE4_LandingPage_HTML_Hero ├── Begin │ ├── index.html │ └── styles.css └── Finished │ ├── index.html │ └── styles.css ├── VE5_LandingPage_HTML_Features ├── Begin │ ├── index.html │ └── styles.css └── Finished │ ├── index.html │ └── styles.css ├── VE6_LandingPage_HTML_AboutUs ├── Begin │ ├── index.html │ └── styles.css └── Finished │ ├── index.html │ └── styles.css ├── VE7_LandingPage_HTML_ContactUs ├── Begin │ ├── index.html │ └── styles.css └── Finished │ ├── index.html │ └── styles.css ├── VE8_LandingPage_HTML_Footer ├── Begin │ ├── index.html │ └── styles.css └── Finished │ ├── index.html │ └── styles.css ├── VE9_LandingPage_CSS_Layout ├── Begin │ ├── index.html │ └── styles.css └── Finished │ ├── index.html │ └── styles.css ├── VF10_Dashboard_CSS_Metrics ├── Begin │ ├── chart_placeholder.png │ ├── index.html │ └── styles.css └── Finished │ ├── chart_placeholder.png │ ├── index.html │ └── styles.css ├── VF11_Dashboard_CSS_Table ├── Begin │ ├── chart_placeholder.png │ ├── index.html │ └── styles.css └── Finished │ ├── chart_placeholder.png │ ├── index.html │ └── styles.css ├── VF12_Dashboard_CSS_Analytics ├── Begin │ ├── chart_placeholder.png │ ├── index.html │ └── styles.css └── Finished │ ├── chart_placeholder.png │ ├── index.html │ └── styles.css ├── VF13_Dashboard_CSS_Footer ├── Begin │ ├── chart_placeholder.png │ ├── index.html │ └── styles.css └── Finished │ ├── chart_placeholder.png │ ├── index.html │ └── styles.css ├── VF2_Dashboard_HTML_PageStructure ├── Begin │ ├── index.html │ └── styles.css └── Finished │ ├── index.html │ └── styles.css ├── VF3_Dashboard_HTML_Navigation ├── Begin │ ├── index.html │ └── styles.css └── Finished │ ├── index.html │ └── styles.css ├── VF4_Dashboard_HTML_Metrics ├── Begin │ ├── index.html │ └── styles.css └── Finished │ ├── index.html │ └── styles.css ├── VF5_Dashboard_HTML_Table ├── Begin │ ├── index.html │ └── styles.css └── Finished │ ├── index.html │ └── styles.css ├── VF6_Dashboard_HTML_Analytics ├── Begin │ ├── index.html │ └── styles.css └── Finished │ ├── chart_placeholder.png │ ├── index.html │ └── styles.css ├── VF7_Dashboard_HTML_Footer ├── Begin │ ├── chart_placeholder.png │ ├── index.html │ └── styles.css └── Finished │ ├── chart_placeholder.png │ ├── index.html │ └── styles.css ├── VF8_Dashboard_CSS_Layout ├── Begin │ ├── chart_placeholder.png │ ├── index.html │ └── styles.css └── Finished │ ├── chart_placeholder.png │ ├── index.html │ └── styles.css ├── VF9_Dashboard_CSS_Navigation ├── Begin │ ├── chart_placeholder.png │ ├── index.html │ └── styles.css └── Finished │ ├── chart_placeholder.png │ ├── index.html │ └── styles.css ├── index.html ├── package.json ├── sandbox.config.json └── styles.css /.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /C1_HTML_ADocument/Begin/resume.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/C1_HTML_ADocument/Begin/resume.txt -------------------------------------------------------------------------------- /C1_HTML_ADocument/Finished/resume.txt: -------------------------------------------------------------------------------- 1 | Resume 2 | Tony Alicea 3 | Coder, UX Designer, and Instructor 4 | Website: google.com 5 | Phone: 555-555-1111 6 | Twitter: @anthonypalicea 7 | 8 | Hi! I'm Tony Alicea and I'm happy to have you as a student in my courses. Don't imitate, understand! 9 | 10 | Services 11 | Web Development 12 | App Development 13 | Training 14 | 15 | Skills 16 | HTML 17 | Markup your content with semantic HTML. 18 | CSS 19 | Layout your content visually for multiple devices. 20 | JavaScript 21 | Make your content more interactive, and build web applications. 22 | 23 | Work History 24 | UX/UI Designer 25 | XYZ Corp 26 | 3 years 27 | 28 | Web Developer 29 | ABC Corp 30 | 5 years 31 | 32 | Carpet Cleaner 33 | 123 Inc. 34 | 2 years 35 | 36 | Portfolio 37 | 38 | Testimonials 39 | I love Tony's courses! 40 | Tony's courses helped me get a job. 41 | 42 | Mailing Address 43 | 111 Main St. 44 | Somewhere, NY 33333 -------------------------------------------------------------------------------- /D2_Document_DocumentTypes/Begin/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/D2_Document_DocumentTypes/Begin/index.html -------------------------------------------------------------------------------- /D2_Document_DocumentTypes/Finished/index.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /D3_Document_TheRoot/Begin/index.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /D3_Document_TheRoot/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /D4_Document_Metadata/Begin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /D4_Document_Metadata/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Resume of Tony Alicea 6 | 7 | -------------------------------------------------------------------------------- /D5_Document_Content/Begin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Resume of Tony Alicea 6 | 7 | -------------------------------------------------------------------------------- /D5_Document_Content/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Resume of Tony Alicea 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /E2_Sections_SelfContainedCompositions/Begin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Resume of Tony Alicea 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /E2_Sections_SelfContainedCompositions/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Resume of Tony Alicea 6 | 7 | 8 |
9 | Hi! I'm Tony Alicea and I'm happy to have you as a student in my courses. Don't imitate, understand! 10 |
11 | 12 | -------------------------------------------------------------------------------- /E3_Sections_ThematicGroupings/Begin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Resume of Tony Alicea 6 | 7 | 8 |
9 | Hi! I'm Tony Alicea and I'm happy to have you as a student in my courses. Don't imitate, understand! 10 |
11 | 12 | -------------------------------------------------------------------------------- /HTMLCSS_TonyAlicea_AllCode.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/HTMLCSS_TonyAlicea_AllCode.zip -------------------------------------------------------------------------------- /J3_Interactivity_FormsFieldsLabels/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/J3_Interactivity_FormsFieldsLabels/Finished/dosomething.html -------------------------------------------------------------------------------- /J4_Interactivity_Buttons/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/J4_Interactivity_Buttons/Begin/dosomething.html -------------------------------------------------------------------------------- /J4_Interactivity_Buttons/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/J4_Interactivity_Buttons/Finished/dosomething.html -------------------------------------------------------------------------------- /J5_Interactivity_MoreFields/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/J5_Interactivity_MoreFields/Begin/dosomething.html -------------------------------------------------------------------------------- /J5_Interactivity_MoreFields/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/J5_Interactivity_MoreFields/Finished/dosomething.html -------------------------------------------------------------------------------- /J6_Interactivity_EvenMoreFields/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/J6_Interactivity_EvenMoreFields/Begin/dosomething.html -------------------------------------------------------------------------------- /J6_Interactivity_EvenMoreFields/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/J6_Interactivity_EvenMoreFields/Finished/dosomething.html -------------------------------------------------------------------------------- /L10_StylesheetsAndTrees_IdSelector/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L10_StylesheetsAndTrees_IdSelector/Begin/dosomething.html -------------------------------------------------------------------------------- /L10_StylesheetsAndTrees_IdSelector/Begin/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L10_StylesheetsAndTrees_IdSelector/Begin/styles.css -------------------------------------------------------------------------------- /L10_StylesheetsAndTrees_IdSelector/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L10_StylesheetsAndTrees_IdSelector/Finished/dosomething.html -------------------------------------------------------------------------------- /L10_StylesheetsAndTrees_IdSelector/Finished/styles.css: -------------------------------------------------------------------------------- 1 | #skills { 2 | font-weight: bold; 3 | } -------------------------------------------------------------------------------- /L11_StylesheetsAndTrees_ClassSelector/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L11_StylesheetsAndTrees_ClassSelector/Begin/dosomething.html -------------------------------------------------------------------------------- /L11_StylesheetsAndTrees_ClassSelector/Begin/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L11_StylesheetsAndTrees_ClassSelector/Begin/styles.css -------------------------------------------------------------------------------- /L11_StylesheetsAndTrees_ClassSelector/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L11_StylesheetsAndTrees_ClassSelector/Finished/dosomething.html -------------------------------------------------------------------------------- /L11_StylesheetsAndTrees_ClassSelector/Finished/styles.css: -------------------------------------------------------------------------------- 1 | .resume-list { 2 | font-weight: bold; 3 | } -------------------------------------------------------------------------------- /L12_StylesheetsAndTrees_GroupingSelector/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L12_StylesheetsAndTrees_GroupingSelector/Begin/dosomething.html -------------------------------------------------------------------------------- /L12_StylesheetsAndTrees_GroupingSelector/Begin/styles.css: -------------------------------------------------------------------------------- 1 | ul { 2 | font-weight: bold; 3 | } 4 | 5 | ol { 6 | font-weight: bold; 7 | } -------------------------------------------------------------------------------- /L12_StylesheetsAndTrees_GroupingSelector/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L12_StylesheetsAndTrees_GroupingSelector/Finished/dosomething.html -------------------------------------------------------------------------------- /L12_StylesheetsAndTrees_GroupingSelector/Finished/styles.css: -------------------------------------------------------------------------------- 1 | ul, ol { 2 | font-weight: bold; 3 | } -------------------------------------------------------------------------------- /L13_StylesheetsAndTrees_DescendantCombinator/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L13_StylesheetsAndTrees_DescendantCombinator/Begin/dosomething.html -------------------------------------------------------------------------------- /L13_StylesheetsAndTrees_DescendantCombinator/Begin/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L13_StylesheetsAndTrees_DescendantCombinator/Begin/styles.css -------------------------------------------------------------------------------- /L13_StylesheetsAndTrees_DescendantCombinator/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L13_StylesheetsAndTrees_DescendantCombinator/Finished/dosomething.html -------------------------------------------------------------------------------- /L13_StylesheetsAndTrees_DescendantCombinator/Finished/styles.css: -------------------------------------------------------------------------------- 1 | blockquote p { 2 | font-weight: bold; 3 | } -------------------------------------------------------------------------------- /L14_StylesheetsAndTrees_ChildCombinator/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L14_StylesheetsAndTrees_ChildCombinator/Begin/dosomething.html -------------------------------------------------------------------------------- /L14_StylesheetsAndTrees_ChildCombinator/Begin/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L14_StylesheetsAndTrees_ChildCombinator/Begin/styles.css -------------------------------------------------------------------------------- /L14_StylesheetsAndTrees_ChildCombinator/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L14_StylesheetsAndTrees_ChildCombinator/Finished/dosomething.html -------------------------------------------------------------------------------- /L14_StylesheetsAndTrees_ChildCombinator/Finished/styles.css: -------------------------------------------------------------------------------- 1 | /* Note: this will not apply to text in textboxes */ 2 | form > p { 3 | font-weight: bold; 4 | } -------------------------------------------------------------------------------- /L15_StylesheetsAndTrees_NextSiblingCombinator/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L15_StylesheetsAndTrees_NextSiblingCombinator/Begin/dosomething.html -------------------------------------------------------------------------------- /L15_StylesheetsAndTrees_NextSiblingCombinator/Begin/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L15_StylesheetsAndTrees_NextSiblingCombinator/Begin/styles.css -------------------------------------------------------------------------------- /L15_StylesheetsAndTrees_NextSiblingCombinator/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L15_StylesheetsAndTrees_NextSiblingCombinator/Finished/dosomething.html -------------------------------------------------------------------------------- /L15_StylesheetsAndTrees_NextSiblingCombinator/Finished/styles.css: -------------------------------------------------------------------------------- 1 | li + li { 2 | font-weight: bold; 3 | } -------------------------------------------------------------------------------- /L16_StylesheetsAndTrees_SubsequentSiblingCombinator/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L16_StylesheetsAndTrees_SubsequentSiblingCombinator/Begin/dosomething.html -------------------------------------------------------------------------------- /L16_StylesheetsAndTrees_SubsequentSiblingCombinator/Begin/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L16_StylesheetsAndTrees_SubsequentSiblingCombinator/Begin/styles.css -------------------------------------------------------------------------------- /L16_StylesheetsAndTrees_SubsequentSiblingCombinator/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L16_StylesheetsAndTrees_SubsequentSiblingCombinator/Finished/dosomething.html -------------------------------------------------------------------------------- /L16_StylesheetsAndTrees_SubsequentSiblingCombinator/Finished/styles.css: -------------------------------------------------------------------------------- 1 | h2 ~ blockquote { 2 | font-weight: bold; 3 | } -------------------------------------------------------------------------------- /L19_StylesheetsAndTrees_ChildIndexedPsuedoClasses/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L19_StylesheetsAndTrees_ChildIndexedPsuedoClasses/Begin/dosomething.html -------------------------------------------------------------------------------- /L19_StylesheetsAndTrees_ChildIndexedPsuedoClasses/Begin/styles.css: -------------------------------------------------------------------------------- 1 | li ~ li { 2 | font-weight: bold; 3 | } -------------------------------------------------------------------------------- /L19_StylesheetsAndTrees_ChildIndexedPsuedoClasses/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L19_StylesheetsAndTrees_ChildIndexedPsuedoClasses/Finished/dosomething.html -------------------------------------------------------------------------------- /L19_StylesheetsAndTrees_ChildIndexedPsuedoClasses/Finished/styles.css: -------------------------------------------------------------------------------- 1 | li:nth-child(even) { 2 | font-weight: bold; 3 | } -------------------------------------------------------------------------------- /L20_StylesheetsAndTrees_TypeChildIndexedPsuedoClasses/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L20_StylesheetsAndTrees_TypeChildIndexedPsuedoClasses/Begin/dosomething.html -------------------------------------------------------------------------------- /L20_StylesheetsAndTrees_TypeChildIndexedPsuedoClasses/Begin/styles.css: -------------------------------------------------------------------------------- 1 | li:nth-child(even) { 2 | font-weight: bold; 3 | } -------------------------------------------------------------------------------- /L20_StylesheetsAndTrees_TypeChildIndexedPsuedoClasses/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L20_StylesheetsAndTrees_TypeChildIndexedPsuedoClasses/Finished/dosomething.html -------------------------------------------------------------------------------- /L20_StylesheetsAndTrees_TypeChildIndexedPsuedoClasses/Finished/styles.css: -------------------------------------------------------------------------------- 1 | p:first-of-type { 2 | font-weight: bold; 3 | } -------------------------------------------------------------------------------- /L21_StylesheetsAndTrees_LocationPseudoClasses/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L21_StylesheetsAndTrees_LocationPseudoClasses/Begin/dosomething.html -------------------------------------------------------------------------------- /L21_StylesheetsAndTrees_LocationPseudoClasses/Begin/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L21_StylesheetsAndTrees_LocationPseudoClasses/Begin/styles.css -------------------------------------------------------------------------------- /L21_StylesheetsAndTrees_LocationPseudoClasses/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L21_StylesheetsAndTrees_LocationPseudoClasses/Finished/dosomething.html -------------------------------------------------------------------------------- /L21_StylesheetsAndTrees_LocationPseudoClasses/Finished/styles.css: -------------------------------------------------------------------------------- 1 | a:visited { 2 | color: red; 3 | } -------------------------------------------------------------------------------- /L22_StylesheetsAndTrees_UserActionPseudoClasses/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L22_StylesheetsAndTrees_UserActionPseudoClasses/Begin/dosomething.html -------------------------------------------------------------------------------- /L22_StylesheetsAndTrees_UserActionPseudoClasses/Begin/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L22_StylesheetsAndTrees_UserActionPseudoClasses/Begin/styles.css -------------------------------------------------------------------------------- /L22_StylesheetsAndTrees_UserActionPseudoClasses/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L22_StylesheetsAndTrees_UserActionPseudoClasses/Finished/dosomething.html -------------------------------------------------------------------------------- /L22_StylesheetsAndTrees_UserActionPseudoClasses/Finished/styles.css: -------------------------------------------------------------------------------- 1 | a:focus, a:hover { 2 | font-weight: bold; 3 | } 4 | 5 | input:focus, select:focus { 6 | outline: 2px solid black; 7 | } -------------------------------------------------------------------------------- /L23_StylesheetsAndTrees_NegationPseudoClasses/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L23_StylesheetsAndTrees_NegationPseudoClasses/Begin/dosomething.html -------------------------------------------------------------------------------- /L23_StylesheetsAndTrees_NegationPseudoClasses/Begin/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L23_StylesheetsAndTrees_NegationPseudoClasses/Begin/styles.css -------------------------------------------------------------------------------- /L23_StylesheetsAndTrees_NegationPseudoClasses/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L23_StylesheetsAndTrees_NegationPseudoClasses/Finished/dosomething.html -------------------------------------------------------------------------------- /L23_StylesheetsAndTrees_NegationPseudoClasses/Finished/styles.css: -------------------------------------------------------------------------------- 1 | section:not(#testimonials) { 2 | font-style: italic; 3 | } -------------------------------------------------------------------------------- /L24_StylesheetsAndTrees_PseudoElements/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L24_StylesheetsAndTrees_PseudoElements/Begin/dosomething.html -------------------------------------------------------------------------------- /L24_StylesheetsAndTrees_PseudoElements/Begin/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L24_StylesheetsAndTrees_PseudoElements/Begin/styles.css -------------------------------------------------------------------------------- /L24_StylesheetsAndTrees_PseudoElements/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L24_StylesheetsAndTrees_PseudoElements/Finished/dosomething.html -------------------------------------------------------------------------------- /L24_StylesheetsAndTrees_PseudoElements/Finished/styles.css: -------------------------------------------------------------------------------- 1 | p::first-letter 2 | { 3 | font-weight: bold; 4 | } -------------------------------------------------------------------------------- /L25_StylesheetsAndTrees_Cascade/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L25_StylesheetsAndTrees_Cascade/Begin/dosomething.html -------------------------------------------------------------------------------- /L25_StylesheetsAndTrees_Cascade/Begin/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L25_StylesheetsAndTrees_Cascade/Begin/styles.css -------------------------------------------------------------------------------- /L25_StylesheetsAndTrees_Cascade/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L25_StylesheetsAndTrees_Cascade/Finished/dosomething.html -------------------------------------------------------------------------------- /L25_StylesheetsAndTrees_Cascade/Finished/styles.css: -------------------------------------------------------------------------------- 1 | ul { 2 | font-weight: bold; 3 | } -------------------------------------------------------------------------------- /L25_StylesheetsAndTrees_Cascade/Finished/styles2.css: -------------------------------------------------------------------------------- 1 | ul { 2 | font-weight: normal; 3 | } -------------------------------------------------------------------------------- /L26_StylesheetsAndTrees_Importance/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L26_StylesheetsAndTrees_Importance/Begin/dosomething.html -------------------------------------------------------------------------------- /L26_StylesheetsAndTrees_Importance/Begin/styles.css: -------------------------------------------------------------------------------- 1 | ul { 2 | font-weight: bold; 3 | } -------------------------------------------------------------------------------- /L26_StylesheetsAndTrees_Importance/Begin/styles2.css: -------------------------------------------------------------------------------- 1 | ul { 2 | font-weight: normal; 3 | } -------------------------------------------------------------------------------- /L26_StylesheetsAndTrees_Importance/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L26_StylesheetsAndTrees_Importance/Finished/dosomething.html -------------------------------------------------------------------------------- /L26_StylesheetsAndTrees_Importance/Finished/styles.css: -------------------------------------------------------------------------------- 1 | ul { 2 | font-weight: bold; 3 | } -------------------------------------------------------------------------------- /L26_StylesheetsAndTrees_Importance/Finished/styles2.css: -------------------------------------------------------------------------------- 1 | ul { 2 | font-weight: normal; 3 | } -------------------------------------------------------------------------------- /L27_StylesheetsAndTrees_Specificity/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L27_StylesheetsAndTrees_Specificity/Begin/dosomething.html -------------------------------------------------------------------------------- /L27_StylesheetsAndTrees_Specificity/Begin/styles.css: -------------------------------------------------------------------------------- 1 | ul { 2 | font-weight: bold; 3 | } -------------------------------------------------------------------------------- /L27_StylesheetsAndTrees_Specificity/Begin/styles2.css: -------------------------------------------------------------------------------- 1 | ul { 2 | font-weight: normal; 3 | } -------------------------------------------------------------------------------- /L27_StylesheetsAndTrees_Specificity/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L27_StylesheetsAndTrees_Specificity/Finished/dosomething.html -------------------------------------------------------------------------------- /L27_StylesheetsAndTrees_Specificity/Finished/styles.css: -------------------------------------------------------------------------------- 1 | ul { 2 | font-weight: bold; 3 | } -------------------------------------------------------------------------------- /L27_StylesheetsAndTrees_Specificity/Finished/styles2.css: -------------------------------------------------------------------------------- 1 | ul { 2 | font-weight: normal; 3 | } -------------------------------------------------------------------------------- /L28_StylesheetsAndTrees_OrderOfAppearance/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L28_StylesheetsAndTrees_OrderOfAppearance/Begin/dosomething.html -------------------------------------------------------------------------------- /L28_StylesheetsAndTrees_OrderOfAppearance/Begin/styles.css: -------------------------------------------------------------------------------- 1 | ul { 2 | font-weight: bold; 3 | } -------------------------------------------------------------------------------- /L28_StylesheetsAndTrees_OrderOfAppearance/Begin/styles2.css: -------------------------------------------------------------------------------- 1 | ul { 2 | font-weight: normal; 3 | } -------------------------------------------------------------------------------- /L28_StylesheetsAndTrees_OrderOfAppearance/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L28_StylesheetsAndTrees_OrderOfAppearance/Finished/dosomething.html -------------------------------------------------------------------------------- /L28_StylesheetsAndTrees_OrderOfAppearance/Finished/styles.css: -------------------------------------------------------------------------------- 1 | ul { 2 | font-weight: bold; 3 | } -------------------------------------------------------------------------------- /L28_StylesheetsAndTrees_OrderOfAppearance/Finished/styles2.css: -------------------------------------------------------------------------------- 1 | ul { 2 | font-weight: normal; 3 | } -------------------------------------------------------------------------------- /L28b_StylesheetsAndTrees_CascadeLayersAndImport/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L28b_StylesheetsAndTrees_CascadeLayersAndImport/Begin/dosomething.html -------------------------------------------------------------------------------- /L28b_StylesheetsAndTrees_CascadeLayersAndImport/Begin/styles.css: -------------------------------------------------------------------------------- 1 | ul { 2 | font-weight: bold; 3 | } -------------------------------------------------------------------------------- /L28b_StylesheetsAndTrees_CascadeLayersAndImport/Begin/styles2.css: -------------------------------------------------------------------------------- 1 | ul { 2 | font-weight: normal; 3 | } -------------------------------------------------------------------------------- /L28b_StylesheetsAndTrees_CascadeLayersAndImport/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L28b_StylesheetsAndTrees_CascadeLayersAndImport/Finished/dosomething.html -------------------------------------------------------------------------------- /L28b_StylesheetsAndTrees_CascadeLayersAndImport/Finished/style.css: -------------------------------------------------------------------------------- 1 | @import 'styles.css'; 2 | @import 'styles2.css'; 3 | ul { 4 | font-weight: bold; 5 | } -------------------------------------------------------------------------------- /L28b_StylesheetsAndTrees_CascadeLayersAndImport/Finished/styles.css: -------------------------------------------------------------------------------- 1 | ul { 2 | font-weight: bold; 3 | } -------------------------------------------------------------------------------- /L28b_StylesheetsAndTrees_CascadeLayersAndImport/Finished/styles2.css: -------------------------------------------------------------------------------- 1 | ul { 2 | font-weight: normal; 3 | } -------------------------------------------------------------------------------- /L29_StylesheetsAndTrees_InheritInitial/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L29_StylesheetsAndTrees_InheritInitial/Begin/dosomething.html -------------------------------------------------------------------------------- /L29_StylesheetsAndTrees_InheritInitial/Begin/styles.css: -------------------------------------------------------------------------------- 1 | ul { 2 | font-weight: bold; 3 | } -------------------------------------------------------------------------------- /L29_StylesheetsAndTrees_InheritInitial/Begin/styles2.css: -------------------------------------------------------------------------------- 1 | ul { 2 | font-weight: normal; 3 | } -------------------------------------------------------------------------------- /L29_StylesheetsAndTrees_InheritInitial/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L29_StylesheetsAndTrees_InheritInitial/Finished/dosomething.html -------------------------------------------------------------------------------- /L29_StylesheetsAndTrees_InheritInitial/Finished/styles.css: -------------------------------------------------------------------------------- 1 | ul { 2 | outline: solid 1px red; 3 | font-weight: bold; 4 | } 5 | 6 | li { 7 | outline: inherit; 8 | font-weight: initial; 9 | } -------------------------------------------------------------------------------- /L30_StylesheetsAndTrees_MatchesAny/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L30_StylesheetsAndTrees_MatchesAny/Begin/dosomething.html -------------------------------------------------------------------------------- /L30_StylesheetsAndTrees_MatchesAny/Begin/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L30_StylesheetsAndTrees_MatchesAny/Begin/styles.css -------------------------------------------------------------------------------- /L30_StylesheetsAndTrees_MatchesAny/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L30_StylesheetsAndTrees_MatchesAny/Finished/dosomething.html -------------------------------------------------------------------------------- /L30_StylesheetsAndTrees_MatchesAny/Finished/styles.css: -------------------------------------------------------------------------------- 1 | :is(ul.resume-list, ol) li { 2 | outline: solid 1px red; 3 | } -------------------------------------------------------------------------------- /L30b_StylesheetsAndTrees_SpecificityAdjustment/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L30b_StylesheetsAndTrees_SpecificityAdjustment/Begin/dosomething.html -------------------------------------------------------------------------------- /L30b_StylesheetsAndTrees_SpecificityAdjustment/Begin/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L30b_StylesheetsAndTrees_SpecificityAdjustment/Begin/styles.css -------------------------------------------------------------------------------- /L30b_StylesheetsAndTrees_SpecificityAdjustment/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L30b_StylesheetsAndTrees_SpecificityAdjustment/Finished/dosomething.html -------------------------------------------------------------------------------- /L30b_StylesheetsAndTrees_SpecificityAdjustment/Finished/styles.css: -------------------------------------------------------------------------------- 1 | a:where(:not(:hover)) { 2 | /* Avoid specification winning the cascade */ 3 | text-decoration: none; 4 | } 5 | 6 | nav a { 7 | text-decoration: underline; 8 | } -------------------------------------------------------------------------------- /L7_StylesheetsAndTrees_AuthorStylesheets/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L7_StylesheetsAndTrees_AuthorStylesheets/Begin/dosomething.html -------------------------------------------------------------------------------- /L7_StylesheetsAndTrees_AuthorStylesheets/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L7_StylesheetsAndTrees_AuthorStylesheets/Finished/dosomething.html -------------------------------------------------------------------------------- /L7_StylesheetsAndTrees_AuthorStylesheets/Finished/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L7_StylesheetsAndTrees_AuthorStylesheets/Finished/styles.css -------------------------------------------------------------------------------- /L8_StylesheetsAndTrees_UniversalSelector/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L8_StylesheetsAndTrees_UniversalSelector/Begin/dosomething.html -------------------------------------------------------------------------------- /L8_StylesheetsAndTrees_UniversalSelector/Begin/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L8_StylesheetsAndTrees_UniversalSelector/Begin/styles.css -------------------------------------------------------------------------------- /L8_StylesheetsAndTrees_UniversalSelector/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L8_StylesheetsAndTrees_UniversalSelector/Finished/dosomething.html -------------------------------------------------------------------------------- /L8_StylesheetsAndTrees_UniversalSelector/Finished/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-weight: bold; 3 | } -------------------------------------------------------------------------------- /L9_StylesheetsAndTrees_AttributeSelector/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L9_StylesheetsAndTrees_AttributeSelector/Begin/dosomething.html -------------------------------------------------------------------------------- /L9_StylesheetsAndTrees_AttributeSelector/Begin/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L9_StylesheetsAndTrees_AttributeSelector/Begin/styles.css -------------------------------------------------------------------------------- /L9_StylesheetsAndTrees_AttributeSelector/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/L9_StylesheetsAndTrees_AttributeSelector/Finished/dosomething.html -------------------------------------------------------------------------------- /L9_StylesheetsAndTrees_AttributeSelector/Finished/styles.css: -------------------------------------------------------------------------------- 1 | [lang] { 2 | font-weight: bold; 3 | } 4 | 5 | [lang='es'] { 6 | font-style: italic; 7 | } 8 | 9 | [class~='resume-list'] { 10 | font-style: italic; 11 | } 12 | 13 | [class|='resume-list'] { 14 | font-style: italic; 15 | } -------------------------------------------------------------------------------- /M11_BoxModel_CalcMinMaxClamp/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/M11_BoxModel_CalcMinMaxClamp/Begin/dosomething.html -------------------------------------------------------------------------------- /M11_BoxModel_CalcMinMaxClamp/Begin/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-size: 16px; 7 | } 8 | 9 | main { 10 | max-width: 700px; 11 | padding: 0 2rem; 12 | border-left: solid 2px black; 13 | border-right: solid 2px black; 14 | margin: 0 auto; 15 | } 16 | 17 | #testimonials blockquote { 18 | border: solid 1px black; 19 | padding: 0 0.5rem; 20 | margin: 0.5rem 0; 21 | } 22 | 23 | .resume-fieldset { 24 | border: none; 25 | margin: 0; 26 | padding: 0; 27 | } 28 | 29 | .resume-fieldset legend { 30 | padding: 0; 31 | } -------------------------------------------------------------------------------- /M11_BoxModel_CalcMinMaxClamp/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/M11_BoxModel_CalcMinMaxClamp/Finished/dosomething.html -------------------------------------------------------------------------------- /M11_BoxModel_CalcMinMaxClamp/Finished/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-size: 16px; 7 | } 8 | 9 | main { 10 | max-width: clamp(700px, 50%, 900px); 11 | padding: 0 2rem; 12 | border-left: solid 2px black; 13 | border-right: solid 2px black; 14 | margin: 0 auto; 15 | } 16 | 17 | #testimonials blockquote { 18 | border: solid 1px black; 19 | padding: 0 0.5rem; 20 | margin: 0.5rem 0; 21 | } 22 | 23 | .resume-fieldset { 24 | border: none; 25 | margin: 0; 26 | padding: 0; 27 | } 28 | 29 | .resume-fieldset legend { 30 | padding: 0; 31 | } -------------------------------------------------------------------------------- /M7_BoxModel_Units/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/M7_BoxModel_Units/Begin/dosomething.html -------------------------------------------------------------------------------- /M7_BoxModel_Units/Begin/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/M7_BoxModel_Units/Begin/styles.css -------------------------------------------------------------------------------- /M7_BoxModel_Units/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/M7_BoxModel_Units/Finished/dosomething.html -------------------------------------------------------------------------------- /M7_BoxModel_Units/Finished/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-size: 16px; 3 | } 4 | 5 | h1 { 6 | font-size: 2em; 7 | } 8 | 9 | h2 { 10 | /* font-size: 2em; */ 11 | font-size: 1.25em; 12 | /* font-size: 50%; */ /* percentage of parent */ 13 | /* font-size: 3vw; */ /* percentage of viewport */ 14 | } -------------------------------------------------------------------------------- /M9_BoxModel_BoxSizing/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/M9_BoxModel_BoxSizing/Begin/dosomething.html -------------------------------------------------------------------------------- /M9_BoxModel_BoxSizing/Begin/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-size: 16px; 3 | } 4 | 5 | h1 { 6 | font-size: 2em; 7 | } 8 | 9 | h2 { 10 | font-size: 1.25em; 11 | } -------------------------------------------------------------------------------- /M9_BoxModel_BoxSizing/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/M9_BoxModel_BoxSizing/Finished/dosomething.html -------------------------------------------------------------------------------- /M9_BoxModel_BoxSizing/Finished/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-size: 16px; 7 | } 8 | 9 | main { 10 | max-width: 700px; 11 | padding: 0 2rem; 12 | border-left: solid 2px black; 13 | border-right: solid 2px black; 14 | margin: 0 auto; 15 | } 16 | 17 | #testimonials blockquote { 18 | border: solid 1px black; 19 | padding: 0 0.5rem; 20 | margin: 0.5rem 0; 21 | } 22 | 23 | .resume-fieldset { 24 | border: none; 25 | margin: 0; 26 | padding: 0; 27 | } 28 | 29 | .resume-fieldset legend { 30 | padding: 0; 31 | } -------------------------------------------------------------------------------- /N3_BoxPosition_Relative/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/N3_BoxPosition_Relative/Begin/dosomething.html -------------------------------------------------------------------------------- /N3_BoxPosition_Relative/Begin/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-size: 16px; 7 | } 8 | 9 | main { 10 | max-width: clamp(700px, 50%, 900px); 11 | padding: 0 2rem; 12 | border-left: solid 2px black; 13 | border-right: solid 2px black; 14 | margin: 0 auto; 15 | } 16 | 17 | #testimonials blockquote { 18 | border: solid 1px black; 19 | padding: 0 0.5rem; 20 | margin: 0.5rem 0; 21 | } 22 | 23 | .resume-fieldset { 24 | border: none; 25 | margin: 0; 26 | padding: 0; 27 | } 28 | 29 | .resume-fieldset legend { 30 | padding: 0; 31 | } -------------------------------------------------------------------------------- /N3_BoxPosition_Relative/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/N3_BoxPosition_Relative/Finished/dosomething.html -------------------------------------------------------------------------------- /N3_BoxPosition_Relative/Finished/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-size: 16px; 7 | } 8 | 9 | main { 10 | max-width: clamp(700px, 50%, 900px); 11 | padding: 0 2rem; 12 | border-left: solid 2px black; 13 | border-right: solid 2px black; 14 | margin: 0 auto; 15 | } 16 | 17 | #testimonials blockquote { 18 | border: solid 1px black; 19 | padding: 0 0.5rem; 20 | margin: 0.5rem 0; 21 | } 22 | 23 | .resume-fieldset { 24 | border: none; 25 | margin: 0; 26 | padding: 0; 27 | } 28 | 29 | .resume-fieldset legend { 30 | padding: 0; 31 | } 32 | 33 | address { 34 | position: relative; 35 | top: -50px; 36 | } -------------------------------------------------------------------------------- /N4_BoxPosition_Absolute/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/N4_BoxPosition_Absolute/Begin/dosomething.html -------------------------------------------------------------------------------- /N4_BoxPosition_Absolute/Begin/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-size: 16px; 7 | } 8 | 9 | main { 10 | max-width: clamp(700px, 50%, 900px); 11 | padding: 0 2rem; 12 | border-left: solid 2px black; 13 | border-right: solid 2px black; 14 | margin: 0 auto; 15 | } 16 | 17 | #testimonials blockquote { 18 | border: solid 1px black; 19 | padding: 0 0.5rem; 20 | margin: 0.5rem 0; 21 | } 22 | 23 | .resume-fieldset { 24 | border: none; 25 | margin: 0; 26 | padding: 0; 27 | } 28 | 29 | .resume-fieldset legend { 30 | padding: 0; 31 | } -------------------------------------------------------------------------------- /N4_BoxPosition_Absolute/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/N4_BoxPosition_Absolute/Finished/dosomething.html -------------------------------------------------------------------------------- /N4_BoxPosition_Absolute/Finished/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-size: 16px; 7 | } 8 | 9 | main { 10 | max-width: clamp(700px, 50%, 900px); 11 | padding: 0 2rem; 12 | border-left: solid 2px black; 13 | border-right: solid 2px black; 14 | margin: 0 auto; 15 | } 16 | 17 | #testimonials blockquote { 18 | border: solid 1px black; 19 | padding: 0 0.5rem; 20 | margin: 0.5rem 0; 21 | } 22 | 23 | .resume-fieldset { 24 | border: none; 25 | margin: 0; 26 | padding: 0; 27 | } 28 | 29 | .resume-fieldset legend { 30 | padding: 0; 31 | } 32 | 33 | #testimonials blockquote:first-of-type { 34 | position: absolute; 35 | top: 0px; 36 | right: 0px; 37 | } -------------------------------------------------------------------------------- /N5_BoxPosition_Fixed/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/N5_BoxPosition_Fixed/Begin/dosomething.html -------------------------------------------------------------------------------- /N5_BoxPosition_Fixed/Begin/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-size: 16px; 7 | } 8 | 9 | main { 10 | max-width: clamp(700px, 50%, 900px); 11 | padding: 0 2rem; 12 | border-left: solid 2px black; 13 | border-right: solid 2px black; 14 | margin: 0 auto; 15 | } 16 | 17 | #testimonials blockquote { 18 | border: solid 1px black; 19 | padding: 0 0.5rem; 20 | margin: 0.5rem 0; 21 | } 22 | 23 | .resume-fieldset { 24 | border: none; 25 | margin: 0; 26 | padding: 0; 27 | } 28 | 29 | .resume-fieldset legend { 30 | padding: 0; 31 | } -------------------------------------------------------------------------------- /N5_BoxPosition_Fixed/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/N5_BoxPosition_Fixed/Finished/dosomething.html -------------------------------------------------------------------------------- /N5_BoxPosition_Fixed/Finished/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-size: 16px; 7 | } 8 | 9 | nav { 10 | position: fixed; 11 | top: 0; 12 | } 13 | 14 | main { 15 | max-width: clamp(700px, 50%, 900px); 16 | padding: 0 2rem; 17 | border-left: solid 2px black; 18 | border-right: solid 2px black; 19 | margin: 0 auto; 20 | } 21 | 22 | #testimonials blockquote { 23 | border: solid 1px black; 24 | padding: 0 0.5rem; 25 | margin: 0.5rem 0; 26 | } 27 | 28 | .resume-fieldset { 29 | border: none; 30 | margin: 0; 31 | padding: 0; 32 | } 33 | 34 | .resume-fieldset legend { 35 | padding: 0; 36 | } -------------------------------------------------------------------------------- /N6_BoxPosition_Sticky/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/N6_BoxPosition_Sticky/Begin/dosomething.html -------------------------------------------------------------------------------- /N6_BoxPosition_Sticky/Begin/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-size: 16px; 7 | padding-bottom: 10em; 8 | } 9 | 10 | h1 { 11 | font-size: 2em; 12 | } 13 | 14 | h2 { 15 | font-size: 1.25em; 16 | } 17 | 18 | #testimonials blockquote { 19 | width: clamp(8em, 50%, 70vw); 20 | padding: .5em; 21 | margin: .5em; 22 | border: solid 1px black; 23 | } 24 | 25 | nav { 26 | position: fixed; 27 | bottom: 0; 28 | } -------------------------------------------------------------------------------- /N6_BoxPosition_Sticky/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/N6_BoxPosition_Sticky/Finished/dosomething.html -------------------------------------------------------------------------------- /N6_BoxPosition_Sticky/Finished/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-size: 16px; 7 | } 8 | 9 | nav { 10 | position: sticky; 11 | top: 0; 12 | } 13 | 14 | main { 15 | max-width: clamp(700px, 50%, 900px); 16 | padding: 0 2rem; 17 | border-left: solid 2px black; 18 | border-right: solid 2px black; 19 | margin: 0 auto; 20 | } 21 | 22 | #testimonials blockquote { 23 | border: solid 1px black; 24 | padding: 0 0.5rem; 25 | margin: 0.5rem 0; 26 | } 27 | 28 | .resume-fieldset { 29 | border: none; 30 | margin: 0; 31 | padding: 0; 32 | } 33 | 34 | .resume-fieldset legend { 35 | padding: 0; 36 | } -------------------------------------------------------------------------------- /O2_Painting_Visibility/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/O2_Painting_Visibility/Begin/dosomething.html -------------------------------------------------------------------------------- /O2_Painting_Visibility/Begin/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-size: 16px; 7 | } 8 | 9 | nav { 10 | position: sticky; 11 | top: 0; 12 | } 13 | 14 | main { 15 | max-width: clamp(700px, 50%, 900px); 16 | padding: 0 2rem; 17 | border-left: solid 2px black; 18 | border-right: solid 2px black; 19 | margin: 0 auto; 20 | } 21 | 22 | #testimonials blockquote { 23 | border: solid 1px black; 24 | padding: 0 0.5rem; 25 | margin: 0.5rem 0; 26 | } 27 | 28 | .resume-fieldset { 29 | border: none; 30 | margin: 0; 31 | padding: 0; 32 | } 33 | 34 | .resume-fieldset legend { 35 | padding: 0; 36 | } -------------------------------------------------------------------------------- /O2_Painting_Visibility/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/O2_Painting_Visibility/Finished/dosomething.html -------------------------------------------------------------------------------- /O2_Painting_Visibility/Finished/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-size: 16px; 7 | } 8 | 9 | nav { 10 | position: sticky; 11 | top: 0; 12 | } 13 | 14 | main { 15 | max-width: clamp(700px, 50%, 900px); 16 | padding: 0 2rem; 17 | border-left: solid 2px black; 18 | border-right: solid 2px black; 19 | margin: 0 auto; 20 | } 21 | 22 | #testimonials blockquote { 23 | border: solid 1px black; 24 | padding: 0 0.5rem; 25 | margin: 0.5rem 0; 26 | } 27 | 28 | .resume-fieldset { 29 | border: none; 30 | margin: 0; 31 | padding: 0; 32 | } 33 | 34 | .resume-fieldset legend { 35 | padding: 0; 36 | } 37 | 38 | #testimonials blockquote:first-of-type { 39 | visibility: hidden; 40 | } -------------------------------------------------------------------------------- /O3_Painting_ZIndex/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/O3_Painting_ZIndex/Begin/dosomething.html -------------------------------------------------------------------------------- /O3_Painting_ZIndex/Begin/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-size: 16px; 7 | } 8 | 9 | nav { 10 | position: sticky; 11 | top: 0; 12 | } 13 | 14 | main { 15 | max-width: clamp(700px, 50%, 900px); 16 | padding: 0 2rem; 17 | border-left: solid 2px black; 18 | border-right: solid 2px black; 19 | margin: 0 auto; 20 | } 21 | 22 | #testimonials blockquote { 23 | border: solid 1px black; 24 | padding: 0 0.5rem; 25 | margin: 0.5rem 0; 26 | } 27 | 28 | .resume-fieldset { 29 | border: none; 30 | margin: 0; 31 | padding: 0; 32 | } 33 | 34 | .resume-fieldset legend { 35 | padding: 0; 36 | } -------------------------------------------------------------------------------- /O3_Painting_ZIndex/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/O3_Painting_ZIndex/Finished/dosomething.html -------------------------------------------------------------------------------- /O3_Painting_ZIndex/Finished/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-size: 16px; 7 | } 8 | 9 | nav { 10 | position: sticky; 11 | top: 0; 12 | } 13 | 14 | main { 15 | max-width: clamp(700px, 50%, 900px); 16 | padding: 0 2rem; 17 | border-left: solid 2px black; 18 | border-right: solid 2px black; 19 | margin: 0 auto; 20 | } 21 | 22 | #testimonials blockquote { 23 | border: solid 1px black; 24 | padding: 0 0.5rem; 25 | margin: 0.5rem 0; 26 | } 27 | 28 | .resume-fieldset { 29 | border: none; 30 | margin: 0; 31 | padding: 0; 32 | } 33 | 34 | .resume-fieldset legend { 35 | padding: 0; 36 | } 37 | 38 | /* z-index testing */ 39 | nav { 40 | z-index: 10; 41 | } 42 | 43 | nav ul { 44 | z-index: 1; 45 | background-color: white; 46 | } 47 | 48 | #testimonials { 49 | isolation: isolate; 50 | z-index: 15; 51 | position: absolute; 52 | top: 0; 53 | left: 0; 54 | background-color: white; 55 | } -------------------------------------------------------------------------------- /O4_Painting_Img/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/O4_Painting_Img/Begin/dosomething.html -------------------------------------------------------------------------------- /O4_Painting_Img/Begin/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-size: 16px; 7 | } 8 | 9 | nav { 10 | position: sticky; 11 | top: 0; 12 | } 13 | 14 | main { 15 | max-width: clamp(700px, 50%, 900px); 16 | padding: 0 2rem; 17 | border-left: solid 2px black; 18 | border-right: solid 2px black; 19 | margin: 0 auto; 20 | } 21 | 22 | #testimonials blockquote { 23 | border: solid 1px black; 24 | padding: 0 0.5rem; 25 | margin: 0.5rem 0; 26 | } 27 | 28 | .resume-fieldset { 29 | border: none; 30 | margin: 0; 31 | padding: 0; 32 | } 33 | 34 | .resume-fieldset legend { 35 | padding: 0; 36 | } -------------------------------------------------------------------------------- /O4_Painting_Img/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/O4_Painting_Img/Finished/dosomething.html -------------------------------------------------------------------------------- /O4_Painting_Img/Finished/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-size: 16px; 7 | } 8 | 9 | nav { 10 | position: sticky; 11 | top: 0; 12 | } 13 | 14 | main { 15 | max-width: clamp(700px, 50%, 900px); 16 | padding: 0 2rem; 17 | border-left: solid 2px black; 18 | border-right: solid 2px black; 19 | margin: 0 auto; 20 | } 21 | 22 | #testimonials blockquote { 23 | border: solid 1px black; 24 | padding: 0 0.5rem; 25 | margin: 0.5rem 0; 26 | } 27 | 28 | .resume-fieldset { 29 | border: none; 30 | margin: 0; 31 | padding: 0; 32 | } 33 | 34 | .resume-fieldset legend { 35 | padding: 0; 36 | } -------------------------------------------------------------------------------- /P10_Flow_LogicalProperties/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/P10_Flow_LogicalProperties/Begin/dosomething.html -------------------------------------------------------------------------------- /P10_Flow_LogicalProperties/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/P10_Flow_LogicalProperties/Begin/images/mypicture.png -------------------------------------------------------------------------------- /P10_Flow_LogicalProperties/Begin/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-size: 16px; 7 | writing-mode: vertical-rl; 8 | direction: rtl; 9 | text-orientation: upright; 10 | } 11 | 12 | nav { 13 | position: sticky; 14 | top: 0; 15 | background-color: white; 16 | } 17 | 18 | nav ul li { 19 | display: inline; 20 | margin: 0 .25rem; 21 | line-height: 1.5rem; 22 | } 23 | 24 | main { 25 | max-width: clamp(700px, 50%, 900px); 26 | padding: 0 2rem; 27 | border-left: solid 2px black; 28 | border-right: solid 2px black; 29 | margin: 0 auto; 30 | } 31 | 32 | #aboutme { 33 | background-color: black; 34 | color: white; 35 | display: flow-root; 36 | } 37 | 38 | #testimonials blockquote { 39 | border: solid 1px black; 40 | padding: 0 0.5rem; 41 | margin: 0.5rem 0; 42 | } 43 | 44 | .resume-fieldset { 45 | border: none; 46 | margin: 0; 47 | padding: 0; 48 | } 49 | 50 | .resume-fieldset legend { 51 | padding: 0; 52 | } 53 | 54 | .label-standard { 55 | display: block; 56 | margin: 0.125rem; 57 | } 58 | 59 | .field { 60 | margin-bottom: 1.25rem; 61 | } 62 | 63 | .my-picture { 64 | float: left; 65 | max-width: 75px; 66 | margin-right: 1rem; 67 | } -------------------------------------------------------------------------------- /P10_Flow_LogicalProperties/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/P10_Flow_LogicalProperties/Finished/dosomething.html -------------------------------------------------------------------------------- /P10_Flow_LogicalProperties/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/P10_Flow_LogicalProperties/Finished/images/mypicture.png -------------------------------------------------------------------------------- /P2_Flow_Block/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/P2_Flow_Block/Begin/dosomething.html -------------------------------------------------------------------------------- /P2_Flow_Block/Begin/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-size: 16px; 7 | } 8 | 9 | nav { 10 | position: sticky; 11 | top: 0; 12 | } 13 | 14 | main { 15 | max-width: clamp(700px, 50%, 900px); 16 | padding: 0 2rem; 17 | border-left: solid 2px black; 18 | border-right: solid 2px black; 19 | margin: 0 auto; 20 | } 21 | 22 | #testimonials blockquote { 23 | border: solid 1px black; 24 | padding: 0 0.5rem; 25 | margin: 0.5rem 0; 26 | } 27 | 28 | .resume-fieldset { 29 | border: none; 30 | margin: 0; 31 | padding: 0; 32 | } 33 | 34 | .resume-fieldset legend { 35 | padding: 0; 36 | } -------------------------------------------------------------------------------- /P2_Flow_Block/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/P2_Flow_Block/Finished/dosomething.html -------------------------------------------------------------------------------- /P2_Flow_Block/Finished/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-size: 16px; 7 | } 8 | 9 | nav { 10 | position: sticky; 11 | top: 0; 12 | background-color: white; 13 | } 14 | 15 | main { 16 | max-width: clamp(700px, 50%, 900px); 17 | padding: 0 2rem; 18 | border-left: solid 2px black; 19 | border-right: solid 2px black; 20 | margin: 0 auto; 21 | } 22 | 23 | #testimonials blockquote { 24 | border: solid 1px black; 25 | padding: 0 0.5rem; 26 | margin: 0.5rem 0; 27 | } 28 | 29 | .resume-fieldset { 30 | border: none; 31 | margin: 0; 32 | padding: 0; 33 | } 34 | 35 | .resume-fieldset legend { 36 | padding: 0; 37 | } 38 | 39 | .label-standard { 40 | display: block; 41 | margin: 0.125rem; 42 | } 43 | 44 | .field { 45 | margin-bottom: 1.25rem; 46 | } -------------------------------------------------------------------------------- /P3_Flow_Float/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/P3_Flow_Float/Begin/dosomething.html -------------------------------------------------------------------------------- /P3_Flow_Float/Begin/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-size: 16px; 7 | } 8 | 9 | nav { 10 | position: sticky; 11 | top: 0; 12 | background-color: white; 13 | } 14 | 15 | main { 16 | max-width: clamp(700px, 50%, 900px); 17 | padding: 0 2rem; 18 | border-left: solid 2px black; 19 | border-right: solid 2px black; 20 | margin: 0 auto; 21 | } 22 | 23 | #testimonials blockquote { 24 | border: solid 1px black; 25 | padding: 0 0.5rem; 26 | margin: 0.5rem 0; 27 | } 28 | 29 | .resume-fieldset { 30 | border: none; 31 | margin: 0; 32 | padding: 0; 33 | } 34 | 35 | .resume-fieldset legend { 36 | padding: 0; 37 | } 38 | 39 | .label-standard { 40 | display: block; 41 | margin: 0.125rem; 42 | } 43 | 44 | .field { 45 | margin-bottom: 1.25rem; 46 | } -------------------------------------------------------------------------------- /P3_Flow_Float/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/P3_Flow_Float/Finished/dosomething.html -------------------------------------------------------------------------------- /P3_Flow_Float/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/P3_Flow_Float/Finished/images/mypicture.png -------------------------------------------------------------------------------- /P3_Flow_Float/Finished/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-size: 16px; 7 | } 8 | 9 | nav { 10 | position: sticky; 11 | top: 0; 12 | background-color: white; 13 | } 14 | 15 | main { 16 | max-width: clamp(700px, 50%, 900px); 17 | padding: 0 2rem; 18 | border-left: solid 2px black; 19 | border-right: solid 2px black; 20 | margin: 0 auto; 21 | } 22 | 23 | #testimonials blockquote { 24 | border: solid 1px black; 25 | padding: 0 0.5rem; 26 | margin: 0.5rem 0; 27 | } 28 | 29 | .resume-fieldset { 30 | border: none; 31 | margin: 0; 32 | padding: 0; 33 | } 34 | 35 | .resume-fieldset legend { 36 | padding: 0; 37 | } 38 | 39 | .label-standard { 40 | display: block; 41 | margin: 0.125rem; 42 | } 43 | 44 | .field { 45 | margin-bottom: 1.25rem; 46 | } 47 | 48 | .my-picture { 49 | float: left; 50 | max-width: 75px; 51 | margin-right: 1rem; 52 | } -------------------------------------------------------------------------------- /P4_Flow_Inline/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/P4_Flow_Inline/Begin/dosomething.html -------------------------------------------------------------------------------- /P4_Flow_Inline/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/P4_Flow_Inline/Begin/images/mypicture.png -------------------------------------------------------------------------------- /P4_Flow_Inline/Begin/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-size: 16px; 7 | } 8 | 9 | nav { 10 | position: sticky; 11 | top: 0; 12 | background-color: white; 13 | } 14 | 15 | main { 16 | max-width: clamp(700px, 50%, 900px); 17 | padding: 0 2rem; 18 | border-left: solid 2px black; 19 | border-right: solid 2px black; 20 | margin: 0 auto; 21 | } 22 | 23 | #testimonials blockquote { 24 | border: solid 1px black; 25 | padding: 0 0.5rem; 26 | margin: 0.5rem 0; 27 | } 28 | 29 | .resume-fieldset { 30 | border: none; 31 | margin: 0; 32 | padding: 0; 33 | } 34 | 35 | .resume-fieldset legend { 36 | padding: 0; 37 | } 38 | 39 | .label-standard { 40 | display: block; 41 | margin: 0.125rem; 42 | } 43 | 44 | .field { 45 | margin-bottom: 1.25rem; 46 | } 47 | 48 | .my-picture { 49 | float: left; 50 | max-width: 75px; 51 | margin-right: 1rem; 52 | } -------------------------------------------------------------------------------- /P4_Flow_Inline/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/P4_Flow_Inline/Finished/dosomething.html -------------------------------------------------------------------------------- /P4_Flow_Inline/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/P4_Flow_Inline/Finished/images/mypicture.png -------------------------------------------------------------------------------- /P4_Flow_Inline/Finished/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-size: 16px; 7 | } 8 | 9 | nav { 10 | position: sticky; 11 | top: 0; 12 | background-color: white; 13 | } 14 | 15 | nav ul li { 16 | display: inline; 17 | margin: 0 .25rem; 18 | line-height: 1.5rem; 19 | } 20 | 21 | main { 22 | max-width: clamp(700px, 50%, 900px); 23 | padding: 0 2rem; 24 | border-left: solid 2px black; 25 | border-right: solid 2px black; 26 | margin: 0 auto; 27 | } 28 | 29 | #testimonials blockquote { 30 | border: solid 1px black; 31 | padding: 0 0.5rem; 32 | margin: 0.5rem 0; 33 | } 34 | 35 | .resume-fieldset { 36 | border: none; 37 | margin: 0; 38 | padding: 0; 39 | } 40 | 41 | .resume-fieldset legend { 42 | padding: 0; 43 | } 44 | 45 | .label-standard { 46 | display: block; 47 | margin: 0.125rem; 48 | } 49 | 50 | .field { 51 | margin-bottom: 1.25rem; 52 | } 53 | 54 | .my-picture { 55 | float: left; 56 | max-width: 75px; 57 | margin-right: 1rem; 58 | } -------------------------------------------------------------------------------- /P5_Flow_FlowRoot/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/P5_Flow_FlowRoot/Begin/dosomething.html -------------------------------------------------------------------------------- /P5_Flow_FlowRoot/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/P5_Flow_FlowRoot/Begin/images/mypicture.png -------------------------------------------------------------------------------- /P5_Flow_FlowRoot/Begin/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-size: 16px; 7 | } 8 | 9 | nav { 10 | position: sticky; 11 | top: 0; 12 | background-color: white; 13 | } 14 | 15 | nav ul li { 16 | display: inline; 17 | margin: 0 .25rem; 18 | line-height: 1.5rem; 19 | } 20 | 21 | main { 22 | max-width: clamp(700px, 50%, 900px); 23 | padding: 0 2rem; 24 | border-left: solid 2px black; 25 | border-right: solid 2px black; 26 | margin: 0 auto; 27 | } 28 | 29 | #testimonials blockquote { 30 | border: solid 1px black; 31 | padding: 0 0.5rem; 32 | margin: 0.5rem 0; 33 | } 34 | 35 | .resume-fieldset { 36 | border: none; 37 | margin: 0; 38 | padding: 0; 39 | } 40 | 41 | .resume-fieldset legend { 42 | padding: 0; 43 | } 44 | 45 | .label-standard { 46 | display: block; 47 | margin: 0.125rem; 48 | } 49 | 50 | .field { 51 | margin-bottom: 1.25rem; 52 | } 53 | 54 | .my-picture { 55 | float: left; 56 | max-width: 75px; 57 | margin-right: 1rem; 58 | } -------------------------------------------------------------------------------- /P5_Flow_FlowRoot/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/P5_Flow_FlowRoot/Finished/dosomething.html -------------------------------------------------------------------------------- /P5_Flow_FlowRoot/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/P5_Flow_FlowRoot/Finished/images/mypicture.png -------------------------------------------------------------------------------- /P5_Flow_FlowRoot/Finished/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-size: 16px; 7 | } 8 | 9 | nav { 10 | position: sticky; 11 | top: 0; 12 | background-color: white; 13 | } 14 | 15 | nav ul li { 16 | display: inline; 17 | margin: 0 .25rem; 18 | line-height: 1.5rem; 19 | } 20 | 21 | main { 22 | max-width: clamp(700px, 50%, 900px); 23 | padding: 0 2rem; 24 | border-left: solid 2px black; 25 | border-right: solid 2px black; 26 | margin: 0 auto; 27 | } 28 | 29 | #aboutme { 30 | background-color: black; 31 | color: white; 32 | display: flow-root; 33 | } 34 | 35 | #testimonials blockquote { 36 | border: solid 1px black; 37 | padding: 0 0.5rem; 38 | margin: 0.5rem 0; 39 | } 40 | 41 | .resume-fieldset { 42 | border: none; 43 | margin: 0; 44 | padding: 0; 45 | } 46 | 47 | .resume-fieldset legend { 48 | padding: 0; 49 | } 50 | 51 | .label-standard { 52 | display: block; 53 | margin: 0.125rem; 54 | } 55 | 56 | .field { 57 | margin-bottom: 1.25rem; 58 | } 59 | 60 | .my-picture { 61 | float: left; 62 | max-width: 75px; 63 | margin-right: 1rem; 64 | } -------------------------------------------------------------------------------- /P7_Flow_WritingMode/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/P7_Flow_WritingMode/Begin/dosomething.html -------------------------------------------------------------------------------- /P7_Flow_WritingMode/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/P7_Flow_WritingMode/Begin/images/mypicture.png -------------------------------------------------------------------------------- /P7_Flow_WritingMode/Begin/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-size: 16px; 7 | } 8 | 9 | nav { 10 | position: sticky; 11 | top: 0; 12 | background-color: white; 13 | } 14 | 15 | nav ul li { 16 | display: inline; 17 | margin: 0 .25rem; 18 | line-height: 1.5rem; 19 | } 20 | 21 | main { 22 | max-width: clamp(700px, 50%, 900px); 23 | padding: 0 2rem; 24 | border-left: solid 2px black; 25 | border-right: solid 2px black; 26 | margin: 0 auto; 27 | } 28 | 29 | #aboutme { 30 | background-color: black; 31 | color: white; 32 | display: flow-root; 33 | } 34 | 35 | #testimonials blockquote { 36 | border: solid 1px black; 37 | padding: 0 0.5rem; 38 | margin: 0.5rem 0; 39 | } 40 | 41 | .resume-fieldset { 42 | border: none; 43 | margin: 0; 44 | padding: 0; 45 | } 46 | 47 | .resume-fieldset legend { 48 | padding: 0; 49 | } 50 | 51 | .label-standard { 52 | display: block; 53 | margin: 0.125rem; 54 | } 55 | 56 | .field { 57 | margin-bottom: 1.25rem; 58 | } 59 | 60 | .my-picture { 61 | float: left; 62 | max-width: 75px; 63 | margin-right: 1rem; 64 | } -------------------------------------------------------------------------------- /P7_Flow_WritingMode/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/P7_Flow_WritingMode/Finished/dosomething.html -------------------------------------------------------------------------------- /P7_Flow_WritingMode/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/P7_Flow_WritingMode/Finished/images/mypicture.png -------------------------------------------------------------------------------- /P7_Flow_WritingMode/Finished/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-size: 16px; 7 | writing-mode: vertical-lr; 8 | } 9 | 10 | nav { 11 | position: sticky; 12 | top: 0; 13 | background-color: white; 14 | } 15 | 16 | nav ul li { 17 | display: inline; 18 | margin: 0 .25rem; 19 | line-height: 1.5rem; 20 | } 21 | 22 | main { 23 | max-width: clamp(700px, 50%, 900px); 24 | padding: 0 2rem; 25 | border-left: solid 2px black; 26 | border-right: solid 2px black; 27 | margin: 0 auto; 28 | } 29 | 30 | #aboutme { 31 | background-color: black; 32 | color: white; 33 | display: flow-root; 34 | } 35 | 36 | #testimonials blockquote { 37 | border: solid 1px black; 38 | padding: 0 0.5rem; 39 | margin: 0.5rem 0; 40 | } 41 | 42 | .resume-fieldset { 43 | border: none; 44 | margin: 0; 45 | padding: 0; 46 | } 47 | 48 | .resume-fieldset legend { 49 | padding: 0; 50 | } 51 | 52 | .label-standard { 53 | display: block; 54 | margin: 0.125rem; 55 | } 56 | 57 | .field { 58 | margin-bottom: 1.25rem; 59 | } 60 | 61 | .my-picture { 62 | float: left; 63 | max-width: 75px; 64 | margin-right: 1rem; 65 | } -------------------------------------------------------------------------------- /P8_Flow_Direction/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/P8_Flow_Direction/Begin/dosomething.html -------------------------------------------------------------------------------- /P8_Flow_Direction/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/P8_Flow_Direction/Begin/images/mypicture.png -------------------------------------------------------------------------------- /P8_Flow_Direction/Begin/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-size: 16px; 7 | writing-mode: vertical-lr; 8 | } 9 | 10 | nav { 11 | position: sticky; 12 | top: 0; 13 | background-color: white; 14 | } 15 | 16 | nav ul li { 17 | display: inline; 18 | margin: 0 .25rem; 19 | line-height: 1.5rem; 20 | } 21 | 22 | main { 23 | max-width: clamp(700px, 50%, 900px); 24 | padding: 0 2rem; 25 | border-left: solid 2px black; 26 | border-right: solid 2px black; 27 | margin: 0 auto; 28 | } 29 | 30 | #aboutme { 31 | background-color: black; 32 | color: white; 33 | display: flow-root; 34 | } 35 | 36 | #testimonials blockquote { 37 | border: solid 1px black; 38 | padding: 0 0.5rem; 39 | margin: 0.5rem 0; 40 | } 41 | 42 | .resume-fieldset { 43 | border: none; 44 | margin: 0; 45 | padding: 0; 46 | } 47 | 48 | .resume-fieldset legend { 49 | padding: 0; 50 | } 51 | 52 | .label-standard { 53 | display: block; 54 | margin: 0.125rem; 55 | } 56 | 57 | .field { 58 | margin-bottom: 1.25rem; 59 | } 60 | 61 | .my-picture { 62 | float: left; 63 | max-width: 75px; 64 | margin-right: 1rem; 65 | } -------------------------------------------------------------------------------- /P8_Flow_Direction/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/P8_Flow_Direction/Finished/dosomething.html -------------------------------------------------------------------------------- /P8_Flow_Direction/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/P8_Flow_Direction/Finished/images/mypicture.png -------------------------------------------------------------------------------- /P8_Flow_Direction/Finished/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-size: 16px; 7 | writing-mode: vertical-lr; 8 | direction: rtl; 9 | } 10 | 11 | nav { 12 | position: sticky; 13 | top: 0; 14 | background-color: white; 15 | } 16 | 17 | nav ul li { 18 | display: inline; 19 | margin: 0 .25rem; 20 | line-height: 1.5rem; 21 | } 22 | 23 | main { 24 | max-width: clamp(700px, 50%, 900px); 25 | padding: 0 2rem; 26 | border-left: solid 2px black; 27 | border-right: solid 2px black; 28 | margin: 0 auto; 29 | } 30 | 31 | #aboutme { 32 | background-color: black; 33 | color: white; 34 | display: flow-root; 35 | } 36 | 37 | #testimonials blockquote { 38 | border: solid 1px black; 39 | padding: 0 0.5rem; 40 | margin: 0.5rem 0; 41 | } 42 | 43 | .resume-fieldset { 44 | border: none; 45 | margin: 0; 46 | padding: 0; 47 | } 48 | 49 | .resume-fieldset legend { 50 | padding: 0; 51 | } 52 | 53 | .label-standard { 54 | display: block; 55 | margin: 0.125rem; 56 | } 57 | 58 | .field { 59 | margin-bottom: 1.25rem; 60 | } 61 | 62 | .my-picture { 63 | float: left; 64 | max-width: 75px; 65 | margin-right: 1rem; 66 | } -------------------------------------------------------------------------------- /P9_Flow_TextOrientation/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/P9_Flow_TextOrientation/Begin/dosomething.html -------------------------------------------------------------------------------- /P9_Flow_TextOrientation/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/P9_Flow_TextOrientation/Begin/images/mypicture.png -------------------------------------------------------------------------------- /P9_Flow_TextOrientation/Begin/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-size: 16px; 7 | writing-mode: vertical-lr; 8 | direction: rtl; 9 | } 10 | 11 | nav { 12 | position: sticky; 13 | top: 0; 14 | background-color: white; 15 | } 16 | 17 | nav ul li { 18 | display: inline; 19 | margin: 0 .25rem; 20 | line-height: 1.5rem; 21 | } 22 | 23 | main { 24 | max-width: clamp(700px, 50%, 900px); 25 | padding: 0 2rem; 26 | border-left: solid 2px black; 27 | border-right: solid 2px black; 28 | margin: 0 auto; 29 | } 30 | 31 | #aboutme { 32 | background-color: black; 33 | color: white; 34 | display: flow-root; 35 | } 36 | 37 | #testimonials blockquote { 38 | border: solid 1px black; 39 | padding: 0 0.5rem; 40 | margin: 0.5rem 0; 41 | } 42 | 43 | .resume-fieldset { 44 | border: none; 45 | margin: 0; 46 | padding: 0; 47 | } 48 | 49 | .resume-fieldset legend { 50 | padding: 0; 51 | } 52 | 53 | .label-standard { 54 | display: block; 55 | margin: 0.125rem; 56 | } 57 | 58 | .field { 59 | margin-bottom: 1.25rem; 60 | } 61 | 62 | .my-picture { 63 | float: left; 64 | max-width: 75px; 65 | margin-right: 1rem; 66 | } -------------------------------------------------------------------------------- /P9_Flow_TextOrientation/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/P9_Flow_TextOrientation/Finished/dosomething.html -------------------------------------------------------------------------------- /P9_Flow_TextOrientation/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/P9_Flow_TextOrientation/Finished/images/mypicture.png -------------------------------------------------------------------------------- /P9_Flow_TextOrientation/Finished/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-size: 16px; 7 | writing-mode: vertical-rl; 8 | direction: rtl; 9 | text-orientation: upright; 10 | } 11 | 12 | nav { 13 | position: sticky; 14 | top: 0; 15 | background-color: white; 16 | } 17 | 18 | nav ul li { 19 | display: inline; 20 | margin: 0 .25rem; 21 | line-height: 1.5rem; 22 | } 23 | 24 | main { 25 | max-width: clamp(700px, 50%, 900px); 26 | padding: 0 2rem; 27 | border-left: solid 2px black; 28 | border-right: solid 2px black; 29 | margin: 0 auto; 30 | } 31 | 32 | #aboutme { 33 | background-color: black; 34 | color: white; 35 | display: flow-root; 36 | } 37 | 38 | #testimonials blockquote { 39 | border: solid 1px black; 40 | padding: 0 0.5rem; 41 | margin: 0.5rem 0; 42 | } 43 | 44 | .resume-fieldset { 45 | border: none; 46 | margin: 0; 47 | padding: 0; 48 | } 49 | 50 | .resume-fieldset legend { 51 | padding: 0; 52 | } 53 | 54 | .label-standard { 55 | display: block; 56 | margin: 0.125rem; 57 | } 58 | 59 | .field { 60 | margin-bottom: 1.25rem; 61 | } 62 | 63 | .my-picture { 64 | float: left; 65 | max-width: 75px; 66 | margin-right: 1rem; 67 | } -------------------------------------------------------------------------------- /Q1_Flexbox_FlexFormattingContext/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/Q1_Flexbox_FlexFormattingContext/Begin/dosomething.html -------------------------------------------------------------------------------- /Q1_Flexbox_FlexFormattingContext/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/Q1_Flexbox_FlexFormattingContext/Begin/images/mypicture.png -------------------------------------------------------------------------------- /Q1_Flexbox_FlexFormattingContext/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/Q1_Flexbox_FlexFormattingContext/Finished/dosomething.html -------------------------------------------------------------------------------- /Q1_Flexbox_FlexFormattingContext/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/Q1_Flexbox_FlexFormattingContext/Finished/images/mypicture.png -------------------------------------------------------------------------------- /Q2_Flexbox_FlowDirection/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/Q2_Flexbox_FlowDirection/Begin/dosomething.html -------------------------------------------------------------------------------- /Q2_Flexbox_FlowDirection/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/Q2_Flexbox_FlowDirection/Begin/images/mypicture.png -------------------------------------------------------------------------------- /Q2_Flexbox_FlowDirection/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/Q2_Flexbox_FlowDirection/Finished/dosomething.html -------------------------------------------------------------------------------- /Q2_Flexbox_FlowDirection/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/Q2_Flexbox_FlowDirection/Finished/images/mypicture.png -------------------------------------------------------------------------------- /Q3_Flexbox_DisplayOrder/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/Q3_Flexbox_DisplayOrder/Begin/dosomething.html -------------------------------------------------------------------------------- /Q3_Flexbox_DisplayOrder/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/Q3_Flexbox_DisplayOrder/Begin/images/mypicture.png -------------------------------------------------------------------------------- /Q3_Flexbox_DisplayOrder/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/Q3_Flexbox_DisplayOrder/Finished/dosomething.html -------------------------------------------------------------------------------- /Q3_Flexbox_DisplayOrder/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/Q3_Flexbox_DisplayOrder/Finished/images/mypicture.png -------------------------------------------------------------------------------- /Q4_Flexbox_WrappingOverflow/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/Q4_Flexbox_WrappingOverflow/Begin/dosomething.html -------------------------------------------------------------------------------- /Q4_Flexbox_WrappingOverflow/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/Q4_Flexbox_WrappingOverflow/Begin/images/mypicture.png -------------------------------------------------------------------------------- /Q4_Flexbox_WrappingOverflow/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/Q4_Flexbox_WrappingOverflow/Finished/dosomething.html -------------------------------------------------------------------------------- /Q4_Flexbox_WrappingOverflow/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/Q4_Flexbox_WrappingOverflow/Finished/images/mypicture.png -------------------------------------------------------------------------------- /Q5_Flexbox_Flex/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/Q5_Flexbox_Flex/Begin/dosomething.html -------------------------------------------------------------------------------- /Q5_Flexbox_Flex/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/Q5_Flexbox_Flex/Begin/images/mypicture.png -------------------------------------------------------------------------------- /Q5_Flexbox_Flex/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/Q5_Flexbox_Flex/Finished/dosomething.html -------------------------------------------------------------------------------- /Q5_Flexbox_Flex/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/Q5_Flexbox_Flex/Finished/images/mypicture.png -------------------------------------------------------------------------------- /Q6_Flexbox_Alignment/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/Q6_Flexbox_Alignment/Begin/dosomething.html -------------------------------------------------------------------------------- /Q6_Flexbox_Alignment/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/Q6_Flexbox_Alignment/Begin/images/mypicture.png -------------------------------------------------------------------------------- /Q6_Flexbox_Alignment/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/Q6_Flexbox_Alignment/Finished/dosomething.html -------------------------------------------------------------------------------- /Q6_Flexbox_Alignment/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/Q6_Flexbox_Alignment/Finished/images/mypicture.png -------------------------------------------------------------------------------- /R1_Grid_GridFormattingContext/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/R1_Grid_GridFormattingContext/Begin/dosomething.html -------------------------------------------------------------------------------- /R1_Grid_GridFormattingContext/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/R1_Grid_GridFormattingContext/Begin/images/mypicture.png -------------------------------------------------------------------------------- /R1_Grid_GridFormattingContext/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/R1_Grid_GridFormattingContext/Finished/dosomething.html -------------------------------------------------------------------------------- /R1_Grid_GridFormattingContext/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/R1_Grid_GridFormattingContext/Finished/images/mypicture.png -------------------------------------------------------------------------------- /R3_Grid_TrackSizing/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/R3_Grid_TrackSizing/Begin/dosomething.html -------------------------------------------------------------------------------- /R3_Grid_TrackSizing/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/R3_Grid_TrackSizing/Begin/images/mypicture.png -------------------------------------------------------------------------------- /R3_Grid_TrackSizing/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/R3_Grid_TrackSizing/Finished/dosomething.html -------------------------------------------------------------------------------- /R3_Grid_TrackSizing/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/R3_Grid_TrackSizing/Finished/images/mypicture.png -------------------------------------------------------------------------------- /R4_Grid_ItemPlacement/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/R4_Grid_ItemPlacement/Begin/dosomething.html -------------------------------------------------------------------------------- /R4_Grid_ItemPlacement/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/R4_Grid_ItemPlacement/Begin/images/mypicture.png -------------------------------------------------------------------------------- /R4_Grid_ItemPlacement/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/R4_Grid_ItemPlacement/Finished/dosomething.html -------------------------------------------------------------------------------- /R4_Grid_ItemPlacement/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/R4_Grid_ItemPlacement/Finished/images/mypicture.png -------------------------------------------------------------------------------- /R6_Grid_AlignmentSpacing/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/R6_Grid_AlignmentSpacing/Begin/dosomething.html -------------------------------------------------------------------------------- /R6_Grid_AlignmentSpacing/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/R6_Grid_AlignmentSpacing/Begin/images/mypicture.png -------------------------------------------------------------------------------- /R6_Grid_AlignmentSpacing/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/R6_Grid_AlignmentSpacing/Finished/dosomething.html -------------------------------------------------------------------------------- /R6_Grid_AlignmentSpacing/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/R6_Grid_AlignmentSpacing/Finished/images/mypicture.png -------------------------------------------------------------------------------- /R8_Grid_VisualChange/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/R8_Grid_VisualChange/Begin/dosomething.html -------------------------------------------------------------------------------- /R8_Grid_VisualChange/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/R8_Grid_VisualChange/Begin/images/mypicture.png -------------------------------------------------------------------------------- /R8_Grid_VisualChange/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/R8_Grid_VisualChange/Finished/dosomething.html -------------------------------------------------------------------------------- /R8_Grid_VisualChange/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/R8_Grid_VisualChange/Finished/images/mypicture.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HTML and CSS 2 | 3 | This repository is contains the code used in my course "Understanding HTML and CSS". Find the course here: https://www.udemy.com/course/understanding-html-and-css/?referralCode=29ED997A126F1B7FF1DF 4 | -------------------------------------------------------------------------------- /S1_FontsColors_Fonts/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/S1_FontsColors_Fonts/Begin/dosomething.html -------------------------------------------------------------------------------- /S1_FontsColors_Fonts/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/S1_FontsColors_Fonts/Begin/images/mypicture.png -------------------------------------------------------------------------------- /S1_FontsColors_Fonts/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/S1_FontsColors_Fonts/Finished/dosomething.html -------------------------------------------------------------------------------- /S1_FontsColors_Fonts/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/S1_FontsColors_Fonts/Finished/images/mypicture.png -------------------------------------------------------------------------------- /S2_FontsColors_HexadecimalRBGColors/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/S2_FontsColors_HexadecimalRBGColors/Begin/dosomething.html -------------------------------------------------------------------------------- /S2_FontsColors_HexadecimalRBGColors/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/S2_FontsColors_HexadecimalRBGColors/Begin/images/mypicture.png -------------------------------------------------------------------------------- /S2_FontsColors_HexadecimalRBGColors/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/S2_FontsColors_HexadecimalRBGColors/Finished/dosomething.html -------------------------------------------------------------------------------- /S2_FontsColors_HexadecimalRBGColors/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/S2_FontsColors_HexadecimalRBGColors/Finished/images/mypicture.png -------------------------------------------------------------------------------- /S3_FontsColors_Opacity/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/S3_FontsColors_Opacity/Begin/dosomething.html -------------------------------------------------------------------------------- /S3_FontsColors_Opacity/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/S3_FontsColors_Opacity/Begin/images/mypicture.png -------------------------------------------------------------------------------- /S3_FontsColors_Opacity/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/S3_FontsColors_Opacity/Finished/dosomething.html -------------------------------------------------------------------------------- /S3_FontsColors_Opacity/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/S3_FontsColors_Opacity/Finished/images/mypicture.png -------------------------------------------------------------------------------- /S5_FontsColors_AnimationsTransitions/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/S5_FontsColors_AnimationsTransitions/Begin/dosomething.html -------------------------------------------------------------------------------- /S5_FontsColors_AnimationsTransitions/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/S5_FontsColors_AnimationsTransitions/Begin/images/mypicture.png -------------------------------------------------------------------------------- /S5_FontsColors_AnimationsTransitions/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/S5_FontsColors_AnimationsTransitions/Finished/dosomething.html -------------------------------------------------------------------------------- /S5_FontsColors_AnimationsTransitions/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/S5_FontsColors_AnimationsTransitions/Finished/images/mypicture.png -------------------------------------------------------------------------------- /S6_FontsColors_AnimationsKeyframes/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/S6_FontsColors_AnimationsKeyframes/Begin/dosomething.html -------------------------------------------------------------------------------- /S6_FontsColors_AnimationsKeyframes/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/S6_FontsColors_AnimationsKeyframes/Begin/images/mypicture.png -------------------------------------------------------------------------------- /S6_FontsColors_AnimationsKeyframes/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/S6_FontsColors_AnimationsKeyframes/Finished/dosomething.html -------------------------------------------------------------------------------- /S6_FontsColors_AnimationsKeyframes/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/S6_FontsColors_AnimationsKeyframes/Finished/images/mypicture.png -------------------------------------------------------------------------------- /S7_FontsColors_ImagesSVGs/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/S7_FontsColors_ImagesSVGs/Begin/dosomething.html -------------------------------------------------------------------------------- /S7_FontsColors_ImagesSVGs/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/S7_FontsColors_ImagesSVGs/Begin/images/mypicture.png -------------------------------------------------------------------------------- /S7_FontsColors_ImagesSVGs/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/S7_FontsColors_ImagesSVGs/Finished/dosomething.html -------------------------------------------------------------------------------- /S7_FontsColors_ImagesSVGs/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/S7_FontsColors_ImagesSVGs/Finished/images/mypicture.png -------------------------------------------------------------------------------- /S7_FontsColors_ImagesSVGs/Finished/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /S7_FontsColors_ImagesSVGs/Finished/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /S9_FontsColors_VisualDesignAndUX/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/S9_FontsColors_VisualDesignAndUX/Begin/dosomething.html -------------------------------------------------------------------------------- /S9_FontsColors_VisualDesignAndUX/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/S9_FontsColors_VisualDesignAndUX/Begin/images/mypicture.png -------------------------------------------------------------------------------- /S9_FontsColors_VisualDesignAndUX/Begin/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /S9_FontsColors_VisualDesignAndUX/Begin/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /S9_FontsColors_VisualDesignAndUX/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/S9_FontsColors_VisualDesignAndUX/Finished/dosomething.html -------------------------------------------------------------------------------- /S9_FontsColors_VisualDesignAndUX/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/S9_FontsColors_VisualDesignAndUX/Finished/images/mypicture.png -------------------------------------------------------------------------------- /S9_FontsColors_VisualDesignAndUX/Finished/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /S9_FontsColors_VisualDesignAndUX/Finished/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /T3_Responsiveness_ViewportsZoom/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/T3_Responsiveness_ViewportsZoom/Begin/dosomething.html -------------------------------------------------------------------------------- /T3_Responsiveness_ViewportsZoom/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/T3_Responsiveness_ViewportsZoom/Begin/images/mypicture.png -------------------------------------------------------------------------------- /T3_Responsiveness_ViewportsZoom/Begin/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /T3_Responsiveness_ViewportsZoom/Begin/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /T3_Responsiveness_ViewportsZoom/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/T3_Responsiveness_ViewportsZoom/Finished/dosomething.html -------------------------------------------------------------------------------- /T3_Responsiveness_ViewportsZoom/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/T3_Responsiveness_ViewportsZoom/Finished/images/mypicture.png -------------------------------------------------------------------------------- /T3_Responsiveness_ViewportsZoom/Finished/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /T3_Responsiveness_ViewportsZoom/Finished/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /T4_Responsiveness_MediaFeatures/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/T4_Responsiveness_MediaFeatures/Begin/dosomething.html -------------------------------------------------------------------------------- /T4_Responsiveness_MediaFeatures/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/T4_Responsiveness_MediaFeatures/Begin/images/mypicture.png -------------------------------------------------------------------------------- /T4_Responsiveness_MediaFeatures/Begin/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /T4_Responsiveness_MediaFeatures/Begin/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /T4_Responsiveness_MediaFeatures/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/T4_Responsiveness_MediaFeatures/Finished/dosomething.html -------------------------------------------------------------------------------- /T4_Responsiveness_MediaFeatures/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/T4_Responsiveness_MediaFeatures/Finished/images/mypicture.png -------------------------------------------------------------------------------- /T4_Responsiveness_MediaFeatures/Finished/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /T4_Responsiveness_MediaFeatures/Finished/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /T4b_Responsiveness_RangeSyntax/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/T4b_Responsiveness_RangeSyntax/Begin/dosomething.html -------------------------------------------------------------------------------- /T4b_Responsiveness_RangeSyntax/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/T4b_Responsiveness_RangeSyntax/Begin/images/mypicture.png -------------------------------------------------------------------------------- /T4b_Responsiveness_RangeSyntax/Begin/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /T4b_Responsiveness_RangeSyntax/Begin/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /T4b_Responsiveness_RangeSyntax/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/T4b_Responsiveness_RangeSyntax/Finished/dosomething.html -------------------------------------------------------------------------------- /T4b_Responsiveness_RangeSyntax/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/T4b_Responsiveness_RangeSyntax/Finished/images/mypicture.png -------------------------------------------------------------------------------- /T4b_Responsiveness_RangeSyntax/Finished/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /T4b_Responsiveness_RangeSyntax/Finished/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /T5_Responsiveness_MobileFirst/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/T5_Responsiveness_MobileFirst/Begin/dosomething.html -------------------------------------------------------------------------------- /T5_Responsiveness_MobileFirst/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/T5_Responsiveness_MobileFirst/Begin/images/mypicture.png -------------------------------------------------------------------------------- /T5_Responsiveness_MobileFirst/Begin/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /T5_Responsiveness_MobileFirst/Begin/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /T5_Responsiveness_MobileFirst/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/T5_Responsiveness_MobileFirst/Finished/dosomething.html -------------------------------------------------------------------------------- /T5_Responsiveness_MobileFirst/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/T5_Responsiveness_MobileFirst/Finished/images/mypicture.png -------------------------------------------------------------------------------- /T5_Responsiveness_MobileFirst/Finished/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /T5_Responsiveness_MobileFirst/Finished/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /T7_Responsiveness_Print/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/T7_Responsiveness_Print/Begin/dosomething.html -------------------------------------------------------------------------------- /T7_Responsiveness_Print/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/T7_Responsiveness_Print/Begin/images/mypicture.png -------------------------------------------------------------------------------- /T7_Responsiveness_Print/Begin/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /T7_Responsiveness_Print/Begin/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /T7_Responsiveness_Print/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/T7_Responsiveness_Print/Finished/dosomething.html -------------------------------------------------------------------------------- /T7_Responsiveness_Print/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/T7_Responsiveness_Print/Finished/images/mypicture.png -------------------------------------------------------------------------------- /T7_Responsiveness_Print/Finished/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /T7_Responsiveness_Print/Finished/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /U2_CSSVariables_CSSVariables/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/U2_CSSVariables_CSSVariables/Begin/dosomething.html -------------------------------------------------------------------------------- /U2_CSSVariables_CSSVariables/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/U2_CSSVariables_CSSVariables/Begin/images/mypicture.png -------------------------------------------------------------------------------- /U2_CSSVariables_CSSVariables/Begin/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /U2_CSSVariables_CSSVariables/Begin/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /U2_CSSVariables_CSSVariables/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/U2_CSSVariables_CSSVariables/Finished/dosomething.html -------------------------------------------------------------------------------- /U2_CSSVariables_CSSVariables/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/U2_CSSVariables_CSSVariables/Finished/images/mypicture.png -------------------------------------------------------------------------------- /U2_CSSVariables_CSSVariables/Finished/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /U2_CSSVariables_CSSVariables/Finished/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /U3_CSSVariables_Minification/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/U3_CSSVariables_Minification/Begin/dosomething.html -------------------------------------------------------------------------------- /U3_CSSVariables_Minification/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/U3_CSSVariables_Minification/Begin/images/mypicture.png -------------------------------------------------------------------------------- /U3_CSSVariables_Minification/Begin/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /U3_CSSVariables_Minification/Begin/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /U3_CSSVariables_Minification/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/U3_CSSVariables_Minification/Finished/dosomething.html -------------------------------------------------------------------------------- /U3_CSSVariables_Minification/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/U3_CSSVariables_Minification/Finished/images/mypicture.png -------------------------------------------------------------------------------- /U3_CSSVariables_Minification/Finished/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /U3_CSSVariables_Minification/Finished/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /VA2_Nesting_NestingInPractice/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VA2_Nesting_NestingInPractice/Begin/dosomething.html -------------------------------------------------------------------------------- /VA2_Nesting_NestingInPractice/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VA2_Nesting_NestingInPractice/Begin/images/mypicture.png -------------------------------------------------------------------------------- /VA2_Nesting_NestingInPractice/Begin/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /VA2_Nesting_NestingInPractice/Begin/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /VA2_Nesting_NestingInPractice/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VA2_Nesting_NestingInPractice/Finished/dosomething.html -------------------------------------------------------------------------------- /VA2_Nesting_NestingInPractice/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VA2_Nesting_NestingInPractice/Finished/images/mypicture.png -------------------------------------------------------------------------------- /VA2_Nesting_NestingInPractice/Finished/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /VA2_Nesting_NestingInPractice/Finished/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /VA3_Nesting_AtAndPseudoClasses/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VA3_Nesting_AtAndPseudoClasses/Begin/dosomething.html -------------------------------------------------------------------------------- /VA3_Nesting_AtAndPseudoClasses/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VA3_Nesting_AtAndPseudoClasses/Begin/images/mypicture.png -------------------------------------------------------------------------------- /VA3_Nesting_AtAndPseudoClasses/Begin/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /VA3_Nesting_AtAndPseudoClasses/Begin/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /VA3_Nesting_AtAndPseudoClasses/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VA3_Nesting_AtAndPseudoClasses/Finished/dosomething.html -------------------------------------------------------------------------------- /VA3_Nesting_AtAndPseudoClasses/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VA3_Nesting_AtAndPseudoClasses/Finished/images/mypicture.png -------------------------------------------------------------------------------- /VA3_Nesting_AtAndPseudoClasses/Finished/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /VA3_Nesting_AtAndPseudoClasses/Finished/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /VA4_Nesting_AtRulesAndNesting/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VA4_Nesting_AtRulesAndNesting/Begin/dosomething.html -------------------------------------------------------------------------------- /VA4_Nesting_AtRulesAndNesting/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VA4_Nesting_AtRulesAndNesting/Begin/images/mypicture.png -------------------------------------------------------------------------------- /VA4_Nesting_AtRulesAndNesting/Begin/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /VA4_Nesting_AtRulesAndNesting/Begin/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /VA4_Nesting_AtRulesAndNesting/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VA4_Nesting_AtRulesAndNesting/Finished/dosomething.html -------------------------------------------------------------------------------- /VA4_Nesting_AtRulesAndNesting/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VA4_Nesting_AtRulesAndNesting/Finished/images/mypicture.png -------------------------------------------------------------------------------- /VA4_Nesting_AtRulesAndNesting/Finished/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /VA4_Nesting_AtRulesAndNesting/Finished/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /VB2_Layers_DeclaringLayers/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VB2_Layers_DeclaringLayers/Begin/dosomething.html -------------------------------------------------------------------------------- /VB2_Layers_DeclaringLayers/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VB2_Layers_DeclaringLayers/Begin/images/mypicture.png -------------------------------------------------------------------------------- /VB2_Layers_DeclaringLayers/Begin/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /VB2_Layers_DeclaringLayers/Begin/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /VB2_Layers_DeclaringLayers/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VB2_Layers_DeclaringLayers/Finished/dosomething.html -------------------------------------------------------------------------------- /VB2_Layers_DeclaringLayers/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VB2_Layers_DeclaringLayers/Finished/images/mypicture.png -------------------------------------------------------------------------------- /VB2_Layers_DeclaringLayers/Finished/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /VB2_Layers_DeclaringLayers/Finished/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /VB2_Layers_DeclaringLayers/Finished/styles.css: -------------------------------------------------------------------------------- 1 | @layer resume, tonyresume, customstyles.tonyresume; 2 | 3 | @import url(resume.css) layer(resume); 4 | 5 | @layer tonyresume { 6 | body { 7 | font-size: 40px; 8 | } 9 | } 10 | 11 | @layer customstyles { 12 | @layer tonyresume { 13 | body { 14 | font-size: 24px; 15 | } 16 | } 17 | } 18 | 19 | -------------------------------------------------------------------------------- /VB4_Layers_LayersInPractice/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VB4_Layers_LayersInPractice/Begin/dosomething.html -------------------------------------------------------------------------------- /VB4_Layers_LayersInPractice/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VB4_Layers_LayersInPractice/Begin/images/mypicture.png -------------------------------------------------------------------------------- /VB4_Layers_LayersInPractice/Begin/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /VB4_Layers_LayersInPractice/Begin/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /VB4_Layers_LayersInPractice/Begin/styles.css: -------------------------------------------------------------------------------- 1 | @layer resume, tonyresume, customstyles.tonyresume; 2 | 3 | @import url(resume.css) layer(resume); 4 | 5 | @layer tonyresume { 6 | body { 7 | font-size: 40px; 8 | } 9 | } 10 | 11 | @layer customstyles { 12 | @layer tonyresume { 13 | body { 14 | font-size: 24px; 15 | } 16 | } 17 | } 18 | 19 | -------------------------------------------------------------------------------- /VB4_Layers_LayersInPractice/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VB4_Layers_LayersInPractice/Finished/dosomething.html -------------------------------------------------------------------------------- /VB4_Layers_LayersInPractice/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VB4_Layers_LayersInPractice/Finished/images/mypicture.png -------------------------------------------------------------------------------- /VB4_Layers_LayersInPractice/Finished/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /VB4_Layers_LayersInPractice/Finished/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /VB4_Layers_LayersInPractice/Finished/portfolio.css: -------------------------------------------------------------------------------- 1 | #portfolio { 2 | img { 3 | &.anchor { 4 | grid-area: anchor; 5 | align-self: self-end; 6 | } 7 | } 8 | } -------------------------------------------------------------------------------- /VB4_Layers_LayersInPractice/Finished/styles.css: -------------------------------------------------------------------------------- 1 | @layer resume, customportfolio, customstyles.tonyresume; 2 | 3 | @import url(resume.css) layer(resume); 4 | @import url(portfolio.css) layer(customportfolio); 5 | 6 | section { 7 | padding: 1.5rem; 8 | } 9 | 10 | @layer customstyles { 11 | @layer tonyresume { 12 | :root { 13 | --accent-color: lightblue; 14 | } 15 | 16 | h1 { 17 | font-weight: bold; 18 | } 19 | 20 | section { 21 | border: solid 1px #ccc; 22 | padding: 1rem; 23 | } 24 | } 25 | } -------------------------------------------------------------------------------- /VC2_ContainerQueries_ContainerContextsAndQueries/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VC2_ContainerQueries_ContainerContextsAndQueries/Begin/dosomething.html -------------------------------------------------------------------------------- /VC2_ContainerQueries_ContainerContextsAndQueries/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VC2_ContainerQueries_ContainerContextsAndQueries/Begin/images/mypicture.png -------------------------------------------------------------------------------- /VC2_ContainerQueries_ContainerContextsAndQueries/Begin/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /VC2_ContainerQueries_ContainerContextsAndQueries/Begin/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /VC2_ContainerQueries_ContainerContextsAndQueries/Begin/portfolio.css: -------------------------------------------------------------------------------- 1 | #portfolio { 2 | img { 3 | &.anchor { 4 | grid-area: anchor; 5 | align-self: self-end; 6 | } 7 | } 8 | } -------------------------------------------------------------------------------- /VC2_ContainerQueries_ContainerContextsAndQueries/Begin/styles.css: -------------------------------------------------------------------------------- 1 | @layer resume, customportfolio, customstyles.tonyresume; 2 | 3 | @import url(resume.css) layer(resume); 4 | @import url(portfolio.css) layer(customportfolio); 5 | 6 | section { 7 | padding: 1.5rem; 8 | } 9 | 10 | @layer customstyles { 11 | @layer tonyresume { 12 | :root { 13 | --accent-color: lightblue; 14 | } 15 | 16 | h1 { 17 | font-weight: bold; 18 | } 19 | 20 | section { 21 | border: solid 1px #ccc; 22 | padding: 1rem; 23 | } 24 | } 25 | } -------------------------------------------------------------------------------- /VC2_ContainerQueries_ContainerContextsAndQueries/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VC2_ContainerQueries_ContainerContextsAndQueries/Finished/dosomething.html -------------------------------------------------------------------------------- /VC2_ContainerQueries_ContainerContextsAndQueries/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VC2_ContainerQueries_ContainerContextsAndQueries/Finished/images/mypicture.png -------------------------------------------------------------------------------- /VC2_ContainerQueries_ContainerContextsAndQueries/Finished/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /VC2_ContainerQueries_ContainerContextsAndQueries/Finished/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /VC3_ContainerQueries_ContainerQueryUnits/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VC3_ContainerQueries_ContainerQueryUnits/Begin/dosomething.html -------------------------------------------------------------------------------- /VC3_ContainerQueries_ContainerQueryUnits/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VC3_ContainerQueries_ContainerQueryUnits/Begin/images/mypicture.png -------------------------------------------------------------------------------- /VC3_ContainerQueries_ContainerQueryUnits/Begin/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /VC3_ContainerQueries_ContainerQueryUnits/Begin/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /VC3_ContainerQueries_ContainerQueryUnits/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VC3_ContainerQueries_ContainerQueryUnits/Finished/dosomething.html -------------------------------------------------------------------------------- /VC3_ContainerQueries_ContainerQueryUnits/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VC3_ContainerQueries_ContainerQueryUnits/Finished/images/mypicture.png -------------------------------------------------------------------------------- /VC3_ContainerQueries_ContainerQueryUnits/Finished/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /VC3_ContainerQueries_ContainerQueryUnits/Finished/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /VC4_ContainerQueries_ContainerQueriesInPractice/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VC4_ContainerQueries_ContainerQueriesInPractice/Begin/dosomething.html -------------------------------------------------------------------------------- /VC4_ContainerQueries_ContainerQueriesInPractice/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VC4_ContainerQueries_ContainerQueriesInPractice/Begin/images/mypicture.png -------------------------------------------------------------------------------- /VC4_ContainerQueries_ContainerQueriesInPractice/Begin/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /VC4_ContainerQueries_ContainerQueriesInPractice/Begin/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /VC4_ContainerQueries_ContainerQueriesInPractice/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VC4_ContainerQueries_ContainerQueriesInPractice/Finished/dosomething.html -------------------------------------------------------------------------------- /VC4_ContainerQueries_ContainerQueriesInPractice/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VC4_ContainerQueries_ContainerQueriesInPractice/Finished/images/mypicture.png -------------------------------------------------------------------------------- /VC4_ContainerQueries_ContainerQueriesInPractice/Finished/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /VC4_ContainerQueries_ContainerQueriesInPractice/Finished/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /VD2_SuperpowerOfHas_HasInPractice/Begin/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VD2_SuperpowerOfHas_HasInPractice/Begin/dosomething.html -------------------------------------------------------------------------------- /VD2_SuperpowerOfHas_HasInPractice/Begin/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VD2_SuperpowerOfHas_HasInPractice/Begin/images/mypicture.png -------------------------------------------------------------------------------- /VD2_SuperpowerOfHas_HasInPractice/Begin/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /VD2_SuperpowerOfHas_HasInPractice/Begin/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /VD2_SuperpowerOfHas_HasInPractice/Finished/dosomething.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VD2_SuperpowerOfHas_HasInPractice/Finished/dosomething.html -------------------------------------------------------------------------------- /VD2_SuperpowerOfHas_HasInPractice/Finished/images/mypicture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VD2_SuperpowerOfHas_HasInPractice/Finished/images/mypicture.png -------------------------------------------------------------------------------- /VD2_SuperpowerOfHas_HasInPractice/Finished/images/twitter.svg: -------------------------------------------------------------------------------- 1 | Twitter -------------------------------------------------------------------------------- /VD2_SuperpowerOfHas_HasInPractice/Finished/images/youtube.svg: -------------------------------------------------------------------------------- 1 | YouTube -------------------------------------------------------------------------------- /VE11_LandingPage_CSS_Hero/Begin/laptop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VE11_LandingPage_CSS_Hero/Begin/laptop.png -------------------------------------------------------------------------------- /VE11_LandingPage_CSS_Hero/Finished/laptop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VE11_LandingPage_CSS_Hero/Finished/laptop.png -------------------------------------------------------------------------------- /VE12_LandingPage_CSS_Features/Begin/laptop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VE12_LandingPage_CSS_Features/Begin/laptop.png -------------------------------------------------------------------------------- /VE12_LandingPage_CSS_Features/Finished/laptop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VE12_LandingPage_CSS_Features/Finished/laptop.png -------------------------------------------------------------------------------- /VE13_LandingPage_CSS_AboutUs/Begin/laptop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VE13_LandingPage_CSS_AboutUs/Begin/laptop.png -------------------------------------------------------------------------------- /VE13_LandingPage_CSS_AboutUs/Finished/laptop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VE13_LandingPage_CSS_AboutUs/Finished/laptop.png -------------------------------------------------------------------------------- /VE14_LandingPage_CSS_ContactUs/Begin/laptop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VE14_LandingPage_CSS_ContactUs/Begin/laptop.png -------------------------------------------------------------------------------- /VE14_LandingPage_CSS_ContactUs/Finished/laptop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VE14_LandingPage_CSS_ContactUs/Finished/laptop.png -------------------------------------------------------------------------------- /VE15_LandingPage_CSS_Footer/Begin/laptop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VE15_LandingPage_CSS_Footer/Begin/laptop.png -------------------------------------------------------------------------------- /VE15_LandingPage_CSS_Footer/Finished/laptop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VE15_LandingPage_CSS_Footer/Finished/laptop.png -------------------------------------------------------------------------------- /VE2_LandingPage_HTML_PageStructure/Begin/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VE2_LandingPage_HTML_PageStructure/Begin/index.html -------------------------------------------------------------------------------- /VE2_LandingPage_HTML_PageStructure/Begin/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VE2_LandingPage_HTML_PageStructure/Begin/styles.css -------------------------------------------------------------------------------- /VE2_LandingPage_HTML_PageStructure/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Modern Landing Page 7 | 8 | 9 |
10 | 11 |
12 |
13 |
14 |

Introducing Tony Pro

15 |
16 |
17 |

Features

18 |
19 |
20 |

About Us

21 |
22 |
23 |

Contact Us

24 |
25 |
26 | 29 | 30 | -------------------------------------------------------------------------------- /VE2_LandingPage_HTML_PageStructure/Finished/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VE2_LandingPage_HTML_PageStructure/Finished/styles.css -------------------------------------------------------------------------------- /VE3_LandingPage_HTML_Navigation/Begin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Modern Landing Page 7 | 8 | 9 |
10 | 11 |
12 |
13 |
14 |

Introducing Tony Pro

15 |
16 |
17 |

Features

18 |
19 |
20 |

About Us

21 |
22 |
23 |

Contact Us

24 |
25 |
26 | 29 | 30 | -------------------------------------------------------------------------------- /VE3_LandingPage_HTML_Navigation/Begin/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VE3_LandingPage_HTML_Navigation/Begin/styles.css -------------------------------------------------------------------------------- /VE3_LandingPage_HTML_Navigation/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Modern Landing Page 7 | 8 | 9 |
10 | 19 |
20 |
21 |
22 |

Introducing Tony Pro

23 |
24 |
25 |

Features

26 |
27 |
28 |

About Us

29 |
30 |
31 |

Contact Us

32 |
33 |
34 | 37 | 38 | -------------------------------------------------------------------------------- /VE3_LandingPage_HTML_Navigation/Finished/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VE3_LandingPage_HTML_Navigation/Finished/styles.css -------------------------------------------------------------------------------- /VE4_LandingPage_HTML_Hero/Begin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Modern Landing Page 7 | 8 | 9 |
10 | 19 |
20 |
21 |
22 |

Introducing Tony Pro

23 |
24 |
25 |

Features

26 |
27 |
28 |

About Us

29 |
30 |
31 |

Contact Us

32 |
33 |
34 | 37 | 38 | -------------------------------------------------------------------------------- /VE4_LandingPage_HTML_Hero/Begin/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VE4_LandingPage_HTML_Hero/Begin/styles.css -------------------------------------------------------------------------------- /VE4_LandingPage_HTML_Hero/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Modern Landing Page 7 | 8 | 9 |
10 | 19 |
20 |
21 |
22 |

Introducing Tony Pro

23 |

Your solution to modern design

24 | Learn More 25 |
26 |
27 |

Features

28 |
29 |
30 |

About Us

31 |
32 |
33 |

Contact Us

34 |
35 |
36 | 39 | 40 | -------------------------------------------------------------------------------- /VE4_LandingPage_HTML_Hero/Finished/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VE4_LandingPage_HTML_Hero/Finished/styles.css -------------------------------------------------------------------------------- /VE5_LandingPage_HTML_Features/Begin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Modern Landing Page 7 | 8 | 9 |
10 | 19 |
20 |
21 |
22 |

Introducing Tony Pro

23 |

Your solution to modern design

24 | Learn More 25 |
26 |
27 |

Features

28 |
29 |
30 |

About Us

31 |
32 |
33 |

Contact Us

34 |
35 |
36 | 39 | 40 | -------------------------------------------------------------------------------- /VE5_LandingPage_HTML_Features/Begin/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VE5_LandingPage_HTML_Features/Begin/styles.css -------------------------------------------------------------------------------- /VE5_LandingPage_HTML_Features/Finished/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VE5_LandingPage_HTML_Features/Finished/styles.css -------------------------------------------------------------------------------- /VE6_LandingPage_HTML_AboutUs/Begin/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VE6_LandingPage_HTML_AboutUs/Begin/styles.css -------------------------------------------------------------------------------- /VE6_LandingPage_HTML_AboutUs/Finished/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VE6_LandingPage_HTML_AboutUs/Finished/styles.css -------------------------------------------------------------------------------- /VE7_LandingPage_HTML_ContactUs/Begin/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VE7_LandingPage_HTML_ContactUs/Begin/styles.css -------------------------------------------------------------------------------- /VE7_LandingPage_HTML_ContactUs/Finished/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VE7_LandingPage_HTML_ContactUs/Finished/styles.css -------------------------------------------------------------------------------- /VE8_LandingPage_HTML_Footer/Begin/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VE8_LandingPage_HTML_Footer/Begin/styles.css -------------------------------------------------------------------------------- /VE8_LandingPage_HTML_Footer/Finished/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VE8_LandingPage_HTML_Footer/Finished/styles.css -------------------------------------------------------------------------------- /VE9_LandingPage_CSS_Layout/Begin/styles.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | /* Color variables */ 4 | @layer base { 5 | :root { 6 | --background-color: #f0f4f8; 7 | --text-color: #333; 8 | --primary-color: #007bff; 9 | --secondary-color: #6c757d; 10 | --light-bg: #ffffff; 11 | --dark-bg: #343a40; 12 | --light-text: #ffffff; 13 | --dark-text: #000000; 14 | } 15 | 16 | @media (prefers-color-scheme: dark) { 17 | :root { 18 | --background-color: #343a40; 19 | --text-color: #ffffff; 20 | --secondary-color: #adb5bd; 21 | --light-bg: #495057; 22 | --dark-bg: #000000; 23 | } 24 | } 25 | } -------------------------------------------------------------------------------- /VE9_LandingPage_CSS_Layout/Finished/styles.css: -------------------------------------------------------------------------------- 1 | /* Declare layers in order of priority */ 2 | @layer reset, base; 3 | 4 | /* Reset and base styles */ 5 | @layer reset { 6 | * { 7 | margin: 0; 8 | padding: 0; 9 | box-sizing: border-box; 10 | font-family: 'Inter', sans-serif; 11 | } 12 | 13 | html, 14 | body { 15 | width: 100%; 16 | overflow-x: hidden; 17 | font-size: 14px; 18 | } 19 | } 20 | 21 | /* Color variables */ 22 | @layer base { 23 | :root { 24 | --background-color: #f0f4f8; 25 | --text-color: #333; 26 | --primary-color: #007bff; 27 | --secondary-color: #6c757d; 28 | --light-bg: #ffffff; 29 | --dark-bg: #343a40; 30 | --light-text: #ffffff; 31 | --dark-text: #000000; 32 | } 33 | 34 | @media (prefers-color-scheme: dark) { 35 | :root { 36 | --background-color: #343a40; 37 | --text-color: #ffffff; 38 | --secondary-color: #adb5bd; 39 | --light-bg: #495057; 40 | --dark-bg: #000000; 41 | } 42 | } 43 | } 44 | 45 | @layer base { 46 | body { 47 | display: flex; 48 | flex-direction: column; 49 | min-height: 100vh; 50 | line-height: 1.6; 51 | background-color: var(--background-color); 52 | color: var(--text-color); 53 | } 54 | 55 | a { 56 | text-decoration: none; 57 | color: inherit; 58 | } 59 | } 60 | 61 | -------------------------------------------------------------------------------- /VF10_Dashboard_CSS_Metrics/Begin/chart_placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VF10_Dashboard_CSS_Metrics/Begin/chart_placeholder.png -------------------------------------------------------------------------------- /VF10_Dashboard_CSS_Metrics/Finished/chart_placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VF10_Dashboard_CSS_Metrics/Finished/chart_placeholder.png -------------------------------------------------------------------------------- /VF11_Dashboard_CSS_Table/Begin/chart_placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VF11_Dashboard_CSS_Table/Begin/chart_placeholder.png -------------------------------------------------------------------------------- /VF11_Dashboard_CSS_Table/Finished/chart_placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VF11_Dashboard_CSS_Table/Finished/chart_placeholder.png -------------------------------------------------------------------------------- /VF12_Dashboard_CSS_Analytics/Begin/chart_placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VF12_Dashboard_CSS_Analytics/Begin/chart_placeholder.png -------------------------------------------------------------------------------- /VF12_Dashboard_CSS_Analytics/Finished/chart_placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VF12_Dashboard_CSS_Analytics/Finished/chart_placeholder.png -------------------------------------------------------------------------------- /VF13_Dashboard_CSS_Footer/Begin/chart_placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VF13_Dashboard_CSS_Footer/Begin/chart_placeholder.png -------------------------------------------------------------------------------- /VF13_Dashboard_CSS_Footer/Finished/chart_placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VF13_Dashboard_CSS_Footer/Finished/chart_placeholder.png -------------------------------------------------------------------------------- /VF2_Dashboard_HTML_PageStructure/Begin/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VF2_Dashboard_HTML_PageStructure/Begin/index.html -------------------------------------------------------------------------------- /VF2_Dashboard_HTML_PageStructure/Begin/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VF2_Dashboard_HTML_PageStructure/Begin/styles.css -------------------------------------------------------------------------------- /VF2_Dashboard_HTML_PageStructure/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Modern Dashboard 7 | 8 | 9 |
10 |

Dashboard

11 |
12 |
13 |
14 |

Overview

15 |
16 |
17 |

Products

18 |
19 |
20 |

Analytics

21 |
22 |
23 | 25 | 26 | -------------------------------------------------------------------------------- /VF2_Dashboard_HTML_PageStructure/Finished/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VF2_Dashboard_HTML_PageStructure/Finished/styles.css -------------------------------------------------------------------------------- /VF3_Dashboard_HTML_Navigation/Begin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Modern Dashboard 7 | 8 | 9 |
10 |

Dashboard

11 |
12 |
13 |
14 |

Overview

15 |
16 |
17 |

Products

18 |
19 |
20 |

Analytics

21 |
22 |
23 | 25 | 26 | -------------------------------------------------------------------------------- /VF3_Dashboard_HTML_Navigation/Begin/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VF3_Dashboard_HTML_Navigation/Begin/styles.css -------------------------------------------------------------------------------- /VF3_Dashboard_HTML_Navigation/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Modern Dashboard 7 | 8 | 9 |
10 |

Dashboard

11 | 17 |
18 |
19 |
20 |

Overview

21 |
22 |
23 |

Products

24 |
25 |
26 |

Analytics

27 |
28 |
29 | 31 | 32 | -------------------------------------------------------------------------------- /VF3_Dashboard_HTML_Navigation/Finished/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VF3_Dashboard_HTML_Navigation/Finished/styles.css -------------------------------------------------------------------------------- /VF4_Dashboard_HTML_Metrics/Begin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Modern Dashboard 7 | 8 | 9 |
10 |

Dashboard

11 | 17 |
18 |
19 |
20 |

Overview

21 |
22 |
23 |

Products

24 |
25 |
26 |

Analytics

27 |
28 |
29 | 31 | 32 | -------------------------------------------------------------------------------- /VF4_Dashboard_HTML_Metrics/Begin/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VF4_Dashboard_HTML_Metrics/Begin/styles.css -------------------------------------------------------------------------------- /VF4_Dashboard_HTML_Metrics/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Modern Dashboard 7 | 8 | 9 |
10 |

Dashboard

11 | 17 |
18 |
19 |
20 |

Overview

21 |
22 |
23 |
Customers
24 |
156
25 |
26 |
27 |
# Sold
28 |
380
29 |
30 |
31 |
Avg. Cost
32 |
$15
33 |
34 |
35 |
36 |
37 |

Products

38 |
39 |
40 |

Analytics

41 |
42 |
43 | 45 | 46 | -------------------------------------------------------------------------------- /VF4_Dashboard_HTML_Metrics/Finished/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VF4_Dashboard_HTML_Metrics/Finished/styles.css -------------------------------------------------------------------------------- /VF5_Dashboard_HTML_Table/Begin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Modern Dashboard 7 | 8 | 9 |
10 |

Dashboard

11 | 17 |
18 |
19 |
20 |

Overview

21 |
22 |
23 |
Customers
24 |
156
25 |
26 |
27 |
# Sold
28 |
380
29 |
30 |
31 |
Avg. Cost
32 |
$15
33 |
34 |
35 |
36 |
37 |

Products

38 |
39 |
40 |

Analytics

41 |
42 |
43 | 45 | 46 | -------------------------------------------------------------------------------- /VF5_Dashboard_HTML_Table/Begin/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VF5_Dashboard_HTML_Table/Begin/styles.css -------------------------------------------------------------------------------- /VF5_Dashboard_HTML_Table/Finished/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VF5_Dashboard_HTML_Table/Finished/styles.css -------------------------------------------------------------------------------- /VF6_Dashboard_HTML_Analytics/Begin/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VF6_Dashboard_HTML_Analytics/Begin/styles.css -------------------------------------------------------------------------------- /VF6_Dashboard_HTML_Analytics/Finished/chart_placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VF6_Dashboard_HTML_Analytics/Finished/chart_placeholder.png -------------------------------------------------------------------------------- /VF6_Dashboard_HTML_Analytics/Finished/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VF6_Dashboard_HTML_Analytics/Finished/styles.css -------------------------------------------------------------------------------- /VF7_Dashboard_HTML_Footer/Begin/chart_placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VF7_Dashboard_HTML_Footer/Begin/chart_placeholder.png -------------------------------------------------------------------------------- /VF7_Dashboard_HTML_Footer/Begin/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VF7_Dashboard_HTML_Footer/Begin/styles.css -------------------------------------------------------------------------------- /VF7_Dashboard_HTML_Footer/Finished/chart_placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VF7_Dashboard_HTML_Footer/Finished/chart_placeholder.png -------------------------------------------------------------------------------- /VF7_Dashboard_HTML_Footer/Finished/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VF7_Dashboard_HTML_Footer/Finished/styles.css -------------------------------------------------------------------------------- /VF8_Dashboard_CSS_Layout/Begin/chart_placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VF8_Dashboard_CSS_Layout/Begin/chart_placeholder.png -------------------------------------------------------------------------------- /VF8_Dashboard_CSS_Layout/Begin/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VF8_Dashboard_CSS_Layout/Begin/styles.css -------------------------------------------------------------------------------- /VF8_Dashboard_CSS_Layout/Finished/chart_placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VF8_Dashboard_CSS_Layout/Finished/chart_placeholder.png -------------------------------------------------------------------------------- /VF9_Dashboard_CSS_Navigation/Begin/chart_placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VF9_Dashboard_CSS_Navigation/Begin/chart_placeholder.png -------------------------------------------------------------------------------- /VF9_Dashboard_CSS_Navigation/Finished/chart_placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnthonyPAlicea/htmlcss/c506a31be8a243ec3236e78621cf5629b0cc2f5f/VF9_Dashboard_CSS_Navigation/Finished/chart_placeholder.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML and CSS by Tony Alicea 8 | 9 | 10 | 11 |

12 | HTML and CSS 13 |

14 |

by Tony Alicea

15 |
    16 |
  1. Grouping::Quotes::Begin
    2. 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "html-css-alicea", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.html", 6 | "scripts": { 7 | "start": "serve", 8 | "build": "echo This is a static template, there is no bundler or bundling involved!" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/codesandbox-app/static-template.git" 13 | }, 14 | "keywords": [], 15 | "author": "Ives van Hoorne", 16 | "license": "MIT", 17 | "bugs": { 18 | "url": "https://github.com/codesandbox-app/static-template/issues" 19 | }, 20 | "homepage": "https://github.com/codesandbox-app/static-template#readme", 21 | "devDependencies": { 22 | "serve": "^11.2.0" 23 | } 24 | } -------------------------------------------------------------------------------- /sandbox.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "infiniteLoopProtection": true, 3 | "hardReloadOnChange": false, 4 | "view": "browser", 5 | "template": "static" 6 | } 7 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, Helvetica, sans-serif; 3 | } 4 | --------------------------------------------------------------------------------