WIXLIB

ite Development with HTML5, CSS andBootstrapDuration: 35 hoursPrerequisites: Basic personal computer skills and basic Internet knowledge.Description: This hands on course provides a thorough introduction into the creation of a Website usingHTML, CSS and Bootstrap v3.3.7. The course starts with thorough coverage of HTML and Cascading StyleSheets (CSS) and progresses to using the Bootstrap framework to create mobile-friendly websites.Topics include use of HTML5 semantic tags, block-level and inline elements, creating links, ordered andunordered lists, creation of tables and forms. Students will learn to attach CSS to a page using severaldifferent techniques, CSS selectors and pseudo-classes, CSS box model, and a variety of CSS properties.Students will learn how to create a Bootstrap page utilizing the grid system, implement commonly usedcomponents (such as dropdowns and navigation bars), use Bootstraps CSS classes to format pageelements and use Bootstrap's plugins to add tabs, modals and accordions to a page.Comprehensive hands on exercises are integrated throughout to reinforce learning and develop realcompetency.Course OverviewHTML FundamentalsHTTP Requests and ResponsesStatic vs. Dynamic PagesTag and Attribute FundamentalsDocument StructureUnderstanding DOCTYPE Creating a Page TitleIndicating the Character SetStructuring an HTML DocumentAdding HeadingsAdding ParagraphsWorking with the div TagAdding Quotes to a PageHTML5 Semantic Tags header , footer , nav , article , section

head and body TagsBrowser SupportHTML5 ShivCSS ResetConditional CommentsUsing Data AttributesFormatting TextUsing Inline Tags b , i , strong , em Using the span and mark TagsDefining Inline StylesChanging Text ColorChanging Font CharacteristicsChanging Horizontal AlignmentUsing Character EntitiesCSS PropertiesText-Related Propertiestext-decoration, color, lineheightFont-Related Propertiesfont-family, font-size, fontweightBackground-Related Propertiesbackground-color, backgroundimage, background-positionUsing @font-face to Add Custom FontsChanging the Opacity of Text and ImagesCreating GradientsLinear GradientsRepeating Linear GradientsRadial GradientsRepeating Radial GradientsAdding Meters and Progress BarsDefining HyperlinksCreating Anchors within a PageCreating an E-mail LinkIntroduction to Cascading Style Sheets (CSS)Overview of Cascading Style Sheets (CSS)Creating CSS RulesSetting CSS PropertiesWorking with ColorsUnits of Measurement (px, em, %)Working with FontsDefining Type SelectorsDefining Class and ID SelectorsUsing Attribute SelectorsGrouping and Combining SelectorsLinking to External Style SheetsEmbedded Style SheetsOverriding Styles with !importantCSS Box ModelPositioning ElementsStatic, Absolute and RelativeControlling z-indexFloating and Clearing ElementsVisual EffectsSetting visibility and displayUsing overflow and clip PropertiesSetting Vertical AlignmentBox-Related Propertiesmargin, padding, borderSetting the Size of an Element

Creating Rounded Corners, Adding Shadowsto Boxes and Using Images as BordersCSS Selectors and Pseudo-ClassesRelational SelectorsDescendantDirect-ChildGeneral SiblingAdjacent SiblingPseudo-Classes and ElementsStyling Links with :link, :visited,:active, :hoverAdding Content with :before and:afterAttribute Selectors"Starts With" Selector"Ends With" Selector"Contains" SelectorSelecting the nth ElementSelecting the nth of a TypeWorking with ListsTypes of ListsOrdered ListsUnordered ListsDescription ListsCreating List Items Using the li TagCreating Nested ListsUsing CSS to Style a ListUsing Lists to Create a Navigation MenuUsing CSS CountersIncrementing a CounterCreating Nested CountersDisplaying Information in TablesAdding Tables to a PageWorking with table , tr , td , th and caption ElementsCSS Transforms, Transitions and AnimationsUsing TransformsRotating 2D ElementsScaling 2D ElementsTranslating 2D ElementsSkewing 2D ElementsConfiguring a TransitionDelaying the Start of a TransitionChanging the Speed of a TransitionCreating an Animated MenuAnimating Buttons with TransitionsUsing AnimationsControlling the Direction of anAnimationControlling the State of an AnimationChanging the Speed of an AnimationUsing the animation PropertyAdding Images to a PageDiscussion of Common Image FormatsDisplaying Images on a Web PageUsing src and alt AttributesSizing an Image Using width andheight AttributesCommon Uses of ImagesImage ThumbnailsFaviconsImage RolloversWorking with Client-Side Image MapsUsing Icon FontsWorking with FormsDefining a FormUsing Common Form Attributesaction, method, enctype,

Creating Nested TablesGrouping Table ContentUsing CSS to Style a TableControlling Table Bordersborder-collapse and borderspacing PropertiesUsing rowspan and colspan AttributesForm Validationautocomplete, novalidateInput Elementsemail, url, tel, searchUnderstanding Form SubmissionAdding label and fieldset ElementsSingle-line and Multi-line Text FieldsRadio Buttons and CheckboxesDropdown and Selection ListsSubmit, Reset and Push ButtonsUsing Form-Related Pseudo Classes andElementsControlling Form Layout Using CSS and TablesUsing CSS for Page LayoutForm Validation OverviewUsing CSS for Page LayoutClient-Side ValidationServer-Side ValidationOverview of Form SecurityValidating Input Length Using minlength2 Column Fixed Layout3 Column Fixed Layout2 Column Fluid LayoutUsing CSS Grid Layoutand maxlength AttributesUsing the pattern Attribute to SpecifyRegular ExpressionsValidation-Related Pseudo-ClassesAudio and VideoBrowser Support for Audio/Video FormatsSupplying FallbacksCreating Audio Effects with HTML5 audio Elements and AttributesAdding Video with HTML5 video Elementsand Attributes source ElementsDefining Grid ColumnsDefining Grid RowPositioning Rows and ColumnsUsing Grid AreasAdding Spacing Between Rows andColumnsAligning the Grid ContainerAligning Grid ItemsDefining a Nested GridBootstrap OverviewOverview of Mobile First DesignCSS3 Media QueriesDownloading BootstrapCustomizing BootstrapAdding Custom CSS to Bootstrap

Bootstrap Grid SystemBootstrap Base CSSWorking with GridsDefining Rows, Containers and ColumnsOffsetting ColumnsCreating Nested ColumnsChanging Column OrderOverview of Bootstrap's Base CSSUsing Helper Classes and Responsive UtilitiesWorking with Typography ClassesFormatting ListsFormatting TablesCreating a Striped TableCreating a Responsive TableEnhancing the Appearance of FormsDisplaying Inline FormsDisplaying Horizontal FormsFormatting ImagesCreating Responsive ImagesStyling Links and ButtonsBootstrap ComponentsBootstrap PluginsOverview of Bootstrap ComponentsUsing Glyphicons to Add Symbols to Buttonsand LinksCreating DropdownsCreating NavigationTabbed NavigationPill NavigationNavigation BarsCollapsible Navigation BarsBreadcrumbsGrouping Inputs, Buttons and ListsFormatting Page HeadersCreating PanelsPlugin OverviewCreating Tabbed NavigationCreating a Slideshow Using the CarouselPluginUsing Accordions to Display a Large Amountof ContentAdding a Dialog Box Using the Modal PluginDisplaying Secondary Information UsingPopovers or TooltipsGrouping PanelsCreating a Thumbnail GalleryCreating Progress Bars and omCopyright Bright Star Institute

Topics include use of HTML5 semantic tags, block-level and inline elements, creating links, ordered and unordered lists, creation of tables and forms. Students will learn to attach CSS to a page using several different techniques, CSS selectors and pseudo