Build Responsive Real World Websites with HTML5 and CSS3

Explore Adobe Photoshop essentials and common tools for front end and UI developers to convert a design file into a full working website, using any image exporting program.

Explore tools for developers and Photoshop, including the silk tool to select and export, marquee, crop, color picker, text tool with font size and family, and hand and zoom tools.

Use the selection and marquee tools to select elements and measure distances in pixels. Crop logos or icons and export them as PNGs with transparent backgrounds.

Master the color picker to capture color values and reuse saved colors across your sheet. Use the type tool to edit text and font size and family, and move images.

Learn to organize layers into named groups and export grouped images with effects as a single asset, streamlining workflows in web design.

Learn Bootstrap's essential components and utilities—typography, buttons, tables, navigation, and carousels—plus optional JavaScript plugins to build responsive, mobile-first real-world websites.

Master the bootstrap grid system with containers, rows, and columns that support up to 12 columns across the page, offering fully responsive layouts using container, container fluid, and column classes.

Learn Bootstrap 4 components, including buttons with primary, secondary, success, and danger styles, cards with headers and footers, dropdowns, nav bars, and two form layouts for responsive design.

Build a responsive Bootstrap 4 navigation bar with brand, collapsible links, and left or right alignment, then implement scroll spy to auto-highlight sections as you scroll.

Explore Bootstrap 4 utility (helper) classes, including colors, floats, positioning, shadows, spacing, text, and vertical alignment.

Explore how SCSS and LESS preprocessors compile into CSS, enabling variables, functions, and mixins to organize styles, reduce duplication, and speed up real-world website development.

SCSS is built on properties, LESS is built in JavaScript, and both require compiling; the lecture notes LESS offers more user-friendly, visually appealing documentation and discusses error messages.

Explore getting started with SCSS and LESS via third-party apps, command-line installs, or editor extensions that compile to CSS.

Explore features of scss and less, including variables and lists, compare the indented syntax with scss, and use the dot sass extension and boilerplate templates for variable-driven styling.

Create and apply SCSS and LESS mixins to bundle properties with variables like border radius, using @mixin and @include. Master nesting to achieve a clean, cascading style.

Learn how the extend feature in SCSS and LESS shares properties between selectors, enabling reuse of styles from a base class and consistent border and color customization.

Use import in scss and less to split styles into multiple files, then consolidate into one stylesheet to reduce http requests; import the new files into the main stylesheet.

Explore the SCSS and LESS wrap-up, as the course offers a basics-level overview of preprocessors and clarifies that we won’t use functions or loops in our websites.

Discover Trello as a project management tool using cards to organize tasks and visualize progress, support multi-project work, team collaboration, and client updates.

Set up a Trello board, create project structure folders and files (index, readme, images, icons), configure colors and fonts, download bootstrap, jquery, and popper, and start with a bootstrap template.

Explore building Open Charity, a responsive charity website with a sticky header, animated nav transitions, section activation, feature highlights, a member slider, and book cards, built from scratch.

Organize and prepare the project by creating folders for images, icons, fonts, CSS, and scripts, then export assets, download fonts and Bootstrap, and set up a template with to-do cards.

Link fonts, icons, and frameworks, then implement a stylesheet using CSS variables for colors and fonts, a reset, and custom styles for background, typography, and buttons.

Learn to build a responsive navigation bar using bootstrap, including assigning an id to the nav, refining classes for responsiveness, and configuring hover and active link states.

Implement an interactive navigation bar with a document-ready setup, collapsible links, scroll spy with a 75-pixel offset, and a navbar that shrinks on scroll.

Build the header in two parts—a jumbotron with image and text, and a second area with a button and text, using a full-width, centered container.

Finish the header styling with overflow-x hidden, 50px padding, and a fixed cover background using Open Sans. Style the content area with a dark background and 30px padding.

Build the get involved section as a three-column layout with meet up, Slack group, and Google group, each including image, title, paragraph, and a call-to-action button, styled with custom CSS.

Design the mission section with Bootstrap cards, a responsive grid, and circular icon containers for three items, styled using Muse and Open Sans fonts and a main color scheme.

Learn to build a slider using the Carlysle plugin and customize its options. Create a members section with a centered container, image slides, dots, and responsive display.

Create an event section with three Bootstrap cards inside a centered container, using a row of three columns, image links, hover opacity effects, and responsive styling for a real-world website.

Create a blog section with a responsive block slider inside a centered container, applying HTML structure and CSS styling for padding, margins, fonts, and colors.

Implement a contact section with a Bootstrap form, including labels, inputs, a textarea, and a send button, plus a footer featuring social icons and a copyright area for a website.

Enhance your website by improving responsiveness across devices with media queries, typography and spacing tweaks, and add animations via a CSS library and smooth scrolling for polish.

Conduct cross-browser testing and responsive debugging, fix hover interactions with media queries, compress images, and host on a static site to optimize load time, page size, and overall performance.

Master exporting images, styling with colors and forms, and syncing variables with a custom sheet, while testing across browsers with bootstrap components for a responsive real-world website.

Learn to build a responsive 404 not found page using HTML5 and CSS3, featuring a bottom-stuck image, a logo, descriptive text, and a back button for navigation.

Prepare the assets for a 404 page by organizing fonts, styles, and images folders, exporting penguin graphics, and building with HTML and CSS only, using CSS keyframes for animation.

Initialize the starter template, set up Bootstrap and style sheets, and build a responsive page with a fixed bottom image and a snow animation using CSS keyframes.

Complete a four-page task by trying image ideas, using motion and keyframes for sections, testing the site in different browsers, and saving the best for the mercury website final project.

Develop a Mercury dashboard website with a responsive, multi-section layout featuring a dynamic nav, color transitions, hover effects, drag-and-drop sections, and pricing cards.

Organize the project by creating folders for assets, fonts, images, and css. Prepare and export assets, finalize colors and fonts, download bootstrap, and start with a starter template for coding.

Learn to link fonts, Bootstrap, CSS and JavaScript files, set up font and color variables (Montserrat/Roboto), and implement custom styles to streamline a responsive real-world website.

Build a responsive navbar by copying a bootstrap-like example, add a logo image, right-align links, and apply padding, borders, and rounded corners for a clean, interactive navigation bar.

Close nav bar collapse on link click and toggle it with a function; scroll to activate nav items with an offset of 70 and shrink the bar past 50 pixels.

Style the header with a blue background and grid image, implement keyframes animation, center content, and link a get started button to the services section.

Build a responsive services section with three columns, each featuring an image, title, description, and see more link, with hover effects and responsive styling.

Build the features section with a two-column layout combining an image and a group of elements, styling headings, descriptions, and icons for a clean, responsive design.

Build draggable cards containing dropdown menus and enable horizontal drag-and-drop into a drop area, using a three-column Bootstrap layout with cards and Font Awesome icons.

Review the team code and style a three-column bootstrap section, then implement drag-and-drop with the query library, creating drop zones, interactive cards, and a score area.

Explore the templates section, reveal the dashboard image on hover, and implement a three-column layout with left, center, and right blocks plus a floating animated image.

Create a pricing section with a centered title and three bootstrap pricing cards in a 12-column grid, each showing a total, monthly price, and description with icons.

Join section and footer with text, a button, two separators, and copyright, links, and social icons, then style with padding, colors, and hover effects.

Enhance a real-world website with responsive design using media queries, navigation styling, typography and spacing tweaks, dropdown alignment, and scroll reveal animations for engaging user experiences.

Improve site performance by removing unused files, compressing images, and running speed tests after validating markup with the W3C service for a responsive HTML5 and CSS3 site.

Export images, set colors and fonts, organize files with Trello, and build a responsive real-world website using less, Bootstrap, animations, and two scroll plugins while testing across devices.

Develop a strong portfolio to pursue junior front-end roles, then choose a path—CMS, back-end language, or single-page application frameworks like Angular, React, or Vue—while staying curious.