HTML, CSS, & Bootstrap - Certification Course for Beginners

Explore cascading style sheets to replace inline styles and table-based layouts, improving efficiency and flexibility while using style rules to format text, headings, images, borders, fonts, and background colors.

Master the css rule structure—selector, property, and value—using a style sheet in the head, and see the page update with pink background, Ariel font, and h1 styling.

Discover the three types of CSS rules—internal, inline, and external—and learn how internal styles sit in the HTML head, while external stylesheets are linked and inline rules are not ideal.

Explore how red, light blue, and light purple colors are applied in HTML using color names, hexadecimal values, and RGB codes, and learn to retrieve codes with free online tools.

Learn to use the CSS class selector to define reusable styles in a style sheet and apply them to HTML elements. Apply spans to target specific text with multiple classes.

Discover how divs use div tags to create flexible, customizable content blocks with text, images, and media, offering advanced positioning and styling beyond tables.

Discover how to use CSS IDs to uniquely style and position a div, contrast IDs with classes, and apply practical rules like width, border, background, and text color.

Learn how to use CSS margins to control spacing around HTML elements, apply uniform or side-specific margins with the shorthand margin syntax (top, right, bottom, left), and preview changes.

Explore css padding to create space between an element's content and its perimeter, applying padding to all sides or top and left in a div.

Explore CSS text properties including color, color codes, letter and word spacing, alignment, and transformations, using the exercise file and stylesheet.

Explore font property to set font family, size, style, and line height. Create a class to apply these declarations to a paragraph and use Verdana as fallback in the browser.

Explore how to add borders around an element by creating a border class, specifying width, color, and style, including border-top/bottom/left/right, and preview the result in the browser.

Apply backgrounds to elements using the background property, creating a div with an id selector, setting a blue color or a background image, and controlling repeat and position.

Explain how to set up a basic HTML and CSS file, apply the opacity property to an image, and implement a hover effect from 40 percent to 100 percent.

Apply width and height declarations to a div to observe its scaling with the content area. Use min-width, max-width, and auto with vh to constrain or fill space.

Demonstrates how to place text on a background image using nested divs, a semi-transparent text box, and white text styled with padding, width, and height.

Explore how the CSS display property controls visibility and layout, using inline-block to line up divs and none to hide elements, illustrated with a container and colored squares.

Learn CSS positioning with the position property and the four types: static, relative, absolute, and fixed, highlighting static as the default in normal document flow, from the top-left corner.

Learn how relative positioning moves elements using top and left properties, including nesting divs to move a child relative to its parent.

Discover how absolute positioning pins an element to the exact position in the style rule, unaffected by browser resizing, and see how its child div remains relative to its parent.

Explore how fixed positioning differs from absolute positioning by keeping an element in place as you scroll. See a block example showing that fixed elements do not move with scrolling.

Learn how to use the CSS float property to wrap text around an image, with examples of float right or left and margins, and preview the result in a browser.

Explore how the css clear property controls floating elements, preventing subsequent divs from wrapping around a left-floated blue div and forcing the yellow div below it in a three-div example.

Explore styling links with css for four states - unvisited, visited, hover, and active - and apply color, text-decoration, and background-color rules to see browser effects.

Enhance HTML tables with CSS by styling borders, padding, and text alignment, using border-collapse and hover effects to improve look, structure, and responsiveness.

Build a responsive three-column webpage with a top navigation bar on a black header, featuring four links with mouseover effects and an active default link. Content areas collapse for mobile.

Create a basic HTML page and CSS stylesheet, set body margins to zero and line height to 1.5, and implement a fluid three-column layout with fixed side columns.

Style a left-aligned navigation bar by shaping an unordered list: remove bullets, reset margins and padding, float items left, and define hover colors and the active blue link.

Master responsive css by using media queries at 840px and 600px, dropping the right column under the other two columns and stacking the left, right, and content areas for mobile.

Create a container in the body and a header with navigation. Build a three-column content area with left, center, and right columns, plus a footer, and style inner text margins.

Explore how bootstrap streamlines web development with ready-made HTML and CSS templates for typography, forms, buttons, tables, navigation, and image carousels, plus responsive, cross-browser support.

Embed the Bootstrap framework on a web page using the CDN, place assets in the head tag, and include the library and JavaScript plugins to access built-in components.

Demonstrate Bootstrap's mobile-first, responsive design using the HTML5 doctype and viewport metadata, and show how to create fixed-width and fluid containers with container and container-fluid classes.

Explore bootstrap three's mobile-first grid system that uses up to 12 columns to create responsive layouts across desktops to mobile devices, illustrated with a two-column example.

Learn to convert two-column layouts to responsive three-column grids on a 12-column bootstrap framework, with 4-4-4 columns and explore 2 by 8 by 2 or 3 by 7 by 2.

Explore Bootstrap typography by applying headings, small text, mark, abbr, and tooltip underlines; format quotes, code blocks, and keyboard shortcuts, and use contextual text and background classes for color.

Discover how Bootstrap styles tables using the table class, thead and tbody, and add features like bordered, hover, and condensed styles, plus contextual rows such as success, danger, and info.

Style images with Bootstrap to create rounded corners, circular shapes, and thumbnails. Apply image rounded, image circle, image thumbnail, and image responsive classes to shape images and keep them responsive.

Create a Bootstrap jumbotron by applying the jumbotron class to a div with an h1 heading and a paragraph subtitle, and explore full-width, responsive display inside or outside the container.

Explore Bootstrap wells to emphasize content with a rounded border, light gray background, and padding. View examples of small, normal, and large wells using divs with the well class.

Explore how Bootstrap alerts display predefined messages in different types—success, info, warning, and danger—using alert classes, and learn to make them dismissible with close and data-dismiss attributes, plus fade effects.

Discover how to create Bootstrap buttons with the button class, using default, primary, success, info, warning, danger, and link styles; convert links and inputs into buttons with sizes and states.

Learn to create Bootstrap button groups using a container and button group classes, size them with large or extra small, and switch layouts from horizontal to vertical.

Learn how Bootstrap justified button groups span entire width of the screen and adapt to browser size changes, using a div with the button group and button group justified classes.

Discover how to display Bootstrap Glyphicons by applying the span with the glyphicon class to show icons like envelope, search, heart, star, and print, including icons in buttons and links.

Learn to create Bootstrap badges and labels to emphasize elements, attach badges to links and buttons, and apply labeled styles such as primary, warning, danger, and info with heading-based sizing.

Create and customize Bootstrap progress bars to track progress, apply HTML and CSS with optional JavaScript for dynamic values, labels, contextual styles (success, warning, danger), stripes, and animation.

Learn how to implement Bootstrap pagination by using a ul with the pagination class, marking active and disabled pages, and resizing to large, small, or breadcrumb styles.

Explore how Bootstrap pager enables pagination on an unordered list using the pager class to create previous and next buttons, and align them to the container edges using classes.

Create bootstrap panels to contain content, add panel headings and footers, group panels, and apply contextual classes such as panel primary, panel warning, and panel danger for color.

Learn bootstrap dropdown menus by building an HTML example with a button that toggles a four-option list, including dividers, headers, disabled items, and a drop up orientation.

Create Bootstrap collapsibles that let users show or hide content by clicking a button, using data-toggle='collapse', data-target='#id', and the collapse class on the content container.

Learn to build a Bootstrap collapse panel by creating a panel group with a panel heading and title, then toggle content with a data-toggle collapse, panel body, and panel footer.

Create a Bootstrap collapse list group that reveals a three-item list when you click the heading, using an unordered list with list-group-item entries inside a panel.

Learn to build a Bootstrap accordion with a panel group, data parent linking, and collapsible panels to expand one item at a time, demonstrated with three panels.

Use bootstrap to create tab menus from a basic ul list, set the active tab with the active class, and add a dropdown with dropdown-toggle and dropdown-menu.

Create inline and vertical bootstrap pill menus using an unordered list with nav pills, highlight an active link, and implement a dropdown menu with a dropdown toggle.

Explore how to build dynamic Bootstrap tabs and pills that update content when you click a link, using data-toggle attributes and matching content divisions.

Master Bootstrap navigation bars with responsive behavior, using containers, header, brand, and nav items. Explore fixed top or bottom bars, right-aligned links, and dropdown menus.

Learn how to make the Bootstrap navigation bar collapsible on small screens using a toggle button, collapse classes, and a matching data-target to show or hide the menu and submenu.

Style forms with bootstrap by building vertical, horizontal, and inline layouts, applying form tags, form groups, and accessible labels for email and password fields, with validation.

Explore Bootstrap styling for text areas, checkboxes, radios, and select menus, including HTML5 input types, with form-group and form-control for sizing text areas with rows.

Explore bootstrap form control states in a horizontal form, including focus, success, disabled, and warning states, and learn how to structure form groups, labels, and inputs.

Master bootstrap input sizing by applying input-lg or input-sm to inputs and selects, and adjust width by placing them in grid columns (col-*) within horizontal forms using form-group-lg or form-group-sm.

Create a bootstrap carousel that cycles through slides of car images with titles and descriptions, using indicators, left/right controls, and data attributes to control slides and active state.

Create a bootstrap modal that appears as a dialog with header and body, toggled by a button using data-toggle and data-target, and dismissed by outside click or a close button.

Learn to create tooltips, small popup boxes that appear on hover. Apply data-toggle, data-placement, and a title attribute to an element, then initialize via JavaScript to enable all tooltips.

Explore how Bootstrap popovers extend tooltips to show more content, including headers and text, by applying data attributes, configuring placement, and initializing with JavaScript.

Create a Bootstrap scrollspy layout with a fixed top navigation and four colored sections linked to anchors. Implement a responsive navbar, container fluid, and matching section IDs for in-page navigation.

Explore open source bootstrap themes, including the freelancer theme from Start Bootstrap, and learn to download, extract, and customize a fluid, responsive layout with modals and form validation.

navigate the bootstrap project structure, including the essential bootstrap files, the freelancer theme css, font-awesome and fonts folders, image and javascript folders, the less extensions, and the main index page.

Learn how a Bootstrap theme is built, from head tags and external stylesheets to a responsive navigation bar and image grid with modals.

Explore building a bootstrap-based page with an about us section, responsive containers and grid columns, a contact form, and multi-modal portfolio content with supporting scripts for validation and animations.