Web Development: Make A Website That Will Sell For Thousands

Draft a hello world page in Notepad++ on a PC, save it as index.html in a web folder, and declare html5 doctype to structure the content with html tags.

learn the basic structure of a web page by building the doctype, the head and body sections, adding a title, a meta charset utf-8, and proper closing tags.

Upload your website files from your computer to the web server using FileZilla or Dreamweaver, configure the host details, and ensure the index file reaches the correct directory.

Learn how white space is treated as a single space in html, how h1–h6 and p tags render, and how browser defaults contrast with CSS‑controlled styling.

Learn how to start a fresh website in Dreamweaver, create a new blank page, set the html5 doctype, and switch between code and design views with live preview.

Explore HTML5 elements and semantic tags like header, nav, section, article, and footer, and learn the HTML5 doctype and basic head, title, and body structure.

Explore cross-browser compatibility by using semantic elements and div tags, and test your site in five main browsers—Chrome, Firefox, Internet Explorer, Safari, and Opera.

Learn how to use HTML comments to document code and keep large sites organized, and apply conditional comments to target Internet Explorer versions for cross-browser compatibility.

Structure a header with edge-to-edge bars, a logo, title, subtitle, and navigation. Connect an external css stylesheet using link rel and href, and manage whitespace and indentation.

Explore resetting browser defaults, mastering the CSS box model with margins and padding, and styling with RGB colors using basic selectors like body and the universal star.

Explore when to use classes and IDs, and learn to target an element with an ID in CSS, applying color, height, padding, and shorthand margins through hands-on Dreamweaver examples.

Explore css fundamentals from id and class selectors to compound selectors, learn cascading and specificity, and apply responsive design with a max width of 1080 pixels, header, and Chrome debugger.

Explore css specificity and cascading, where the most specific selector wins and final overrides shape the page, while you organize files with includes and images for seo.

Master CSS floats to align a header logo and wrap text around a floated image. Build navigation with an ordered list of anchor links, including a mailto link.

Learn to position header content with float left and float right, targeting the info div and anchors, and refine typography, colors, and spacing with css.

Learn how inherited properties shape web layouts by adjusting line height, font size, and fonts, and how parent elements influence h1 and h2, alongside clearing floats.

Remake this lesson to compare browsers, fix navigation alignment by targeting the nav in Dreamweaver, adjust the margin from negative 45 to 30 pixels, and note Chrome's bug was resolved.

Learn to style the navigation with CSS by floating the list items to the right, adjusting margins, and applying borders, padding, and list-style options for a polished nav.

Explore CSS pseudo-classes and hover effects on links, and apply advanced properties like box-shadow, border-radius, and rgba transparency. Build cross-browser gradients with vendor prefixes.

Finish the header by restructuring the top and bottom divs, set heights, and apply a gradient. Implement cross-browser transitions and a hover color change for the header info.

Learn to implement HTML5 video tags with multiple sources and browser fallbacks, including MP4 types and fallback text. Discover how to embed YouTube videos via iframe with controls.

Demonstrate embedding a YouTube video with an I-frame, sizing it to 58 percent in the main area and 40 percent in the aside, and styling a four-item ribbon with gradients.

Create a two by two grid of article boxes using floats, margins, and clearing. Add hover interactions, visibility toggling, and transitions, with a red background and purple hover color.

Use the before and after CSS pseudo elements on the h-3 ribbon, with content, display, and absolute positioning inside a relatively positioned parent to wrap the boxes with borders.

Master inline elements by using span and strong tags to style text within paragraphs, and learn how floats and a clear class manage layout in CSS.

Position three bottom content paragraphs side by side in a single row, style borders, padding, and line separators in Dreamweaver, and fine-tune widths to create a clean, presentable footer area.

Create a footer with a purple gradient background, center-aligned white text, a 5-pixel red border, top margin, padding, and responsive design for desktop, tablet, and mobile.

Apply media queries to tailor CSS rules for different screen sizes and orientations, creating responsive layouts that adapt using max width and device width.

Adjust responsive css to place the iframe full width above four boxes in a row, using 80% width, 10% side padding, and explain media queries overwrite rules and clear floats.

Apply responsive web design by defining an 845px breakpoint with a media query, adjust layout with relative and absolute positioning, and implement a hidden navigation button for mobile.

Learn to implement the third media query to reveal a styled nav button at 780px, resize the logo, and swap the navigation with a responsive header.

Learn how to apply media queries at desktop, tablet, and mobile breakpoints to resize the header logo, adjust margins and font size, and create a two-by-two grid.

Use media queries to resize header image, text, and logo while preserving aspect ratios and padding. Enable menu navigation with JavaScript to reveal links, explaining overlapping CSS rules.

Explore how JavaScript adds interactivity by toggling the nav button and navigation list using getElementById, on click, and style.display changes, plus adjusting header height.

Finish the responsive design by turning the navigation into a full-width vertical stack at small screens, using a 780px breakpoint, a relative header, and first-child borders with a JavaScript toggle.

Learn to add a favicon by creating a 16x16 icon, link it in the head, and import images; improve cross browser compatibility with an HTML5 shiv and a meta description.

Make a reusable website template and create additional pages for contact, demonstrations, and prices by organizing templates and includes, adjusting links, and implementing a responsive header and footer.

On the demonstrations page, learn to implement a lightbox using the pretty photo plugin to display high resolution images, videos, or YouTube content without heavy load times.

Learn to implement a lightbox gallery with pretty photo by organizing images folder structure, linking thumbnails to larger images, and configuring rel attributes for pop-up display.

Style the demonstrations page with four articles in a two-by-two grid, descriptions beside images. Use percent widths, 175px heights, background images, display table-cell, and vertical-align.

Apply hover effects with opacity and a 1.05x scale, implement smooth CSS transitions, and customize the lightbox with PrettyPhoto, using horizontal rules for layout and responsive design.

Learn to make the page responsive with media queries, stack articles, adjust widths to full, insert horizontal rules, clear floats, and fix image paths and links.

Construct a contact page featuring contact information, a mailto email link, and a google maps iframe; adjust layout with CSS for responsive, centered text and clean spacing.

Design and implement a responsive pricing table using HTML and CSS by building five article-based packages, highlighting a featured option with a top header, itemized features, and bottom price.

Style the pricing table with css, fixing class naming and applying selective border radii and top div styling to highlight featured items. Explore responsive considerations and learner-driven experimentation.

Learn to fix cross-browser layout issues by positioning navigation inside a header, ensure consistent header borders, and implement responsive design with a viewport meta tag for mobile devices.

Conclude the course by outlining front-end building blocks and essential languages like javascript and php, and invite learners to explore the javascript course and blog for more tips.