HTML and CSS for Beginners - Build a Website & Launch ONLINE

Learn HTML basics by using opening and closing tags to format text with p and h1 elements, preview results in the browser, and start applying basic CSS styling.

Explore the HTML document structure from doctype to body, including language attributes, head with charset UTF-8, and a simple page with an h1 heading and paragraph.

Explore popular HTML tags by building a sample page with paragraph, strong, italic, blockquote, hr, and div, while inserting lorem ipsum dummy text.

Create images in html with the img tag and a src path to images folder, set width to 200 pixels, and embed the image in a paragraph to wrap text.

Create hyperlinks using the anchor tag in HTML, set the href to navigate to pages like images.html, and use the target attribute with _blank to open links in a new tab.

learn how to create a clickable image by wrapping it in an anchor tag, linking to images.html, and apply the same technique to any HTML element.

Explore the form element and its inputs, including text, email, password, and file types, and learn how action and method attributes send data to a server or PHP processor.

Learn how to create and structure ordered and unordered lists with items, links, and images. Discover CSS techniques to turn vertical lists into horizontal navigation with floating and bullets removal.

Explore the rest of HTML tags, including image source and the alt attribute that aids screen readers, and consult Mozilla for HTML5 resources to prepare for CSS styling.

Learn to apply inline styles in HTML using the style attribute to set colors and font sizes, explore color values, hex codes, and property-value syntax.

Learn internal css by placing a style tag in the head, selecting paragraphs with a css selector, and setting color, font-weight, and font-size to style the page.

Learn to link CSS externally from a separate css folder using style.css and a head link tag. Verify the stylesheet applies across pages by viewing the source.

Explore how selectors target HTML elements with CSS, using tags, IDs, and classes, and apply styles to specific elements like p, h1, and div, including targeting elements inside a div.

Link JavaScript to an HTML page, write a simple function using alert and document.write, and learn to link an external script file (script.js) from a separate JS folder.

Learn how to insert a background image with CSS using url(), reference the images folder with a relative path, and give the target div proper width and height.

Learn to build a website from scratch using html and css, apply prior knowledge, style it, and launch on a real domain with hosting, including a php-based contact form.

Learn to build a minimalistic website by creating index, about, and contact pages, linking external css and javascript, and testing the setup to see the site online.

Build a simple webpage layout using HTML5 semantic elements like aside and main, add an article with a placeholder image, and create paragraphs for a responsive foundation and a footer.

Build a footer with the HTML5 footer tag, add a copyright symbol for 2030, design by Edwin Diaz with a link, copy the footer to all pages, and save.

Style the body, header, and container with css, adjusting margins, width, padding, and background colors. Learn to inspect elements and prepare for the upcoming menu in the next lecture.

Style the website menu with css, setting a background, padding, and hover effects. Fine-tune link color, remove text decoration, set the font family, and preview changes with Chrome's inspect element.

Style the header link and footer separator with CSS, adjusting font size and color, and prepare the about and contact pages using HTML and PHP.

Build a functional contact page by structuring a simple HTML form with inputs, a text area, and an email field, wired to a PHP processor via the form action.

Style a web form by setting input width to 100%, rounding borders to 5px, adjusting height, and applying rgba colors to the textarea and submit button.

This lecture introduces deploying websites online, covering hosting and domain needs, choosing Bluehost, and securing a free domain and SSL while signing up and launching a live site.

Delete the WordPress setup, then create a new site from scratch by adding a new environment, configuring a domain, and using the file manager to upload files securely.

Install ssl certificates for your site using cPanel and manage ssl sites. Upload your files, edit index.html, enable https for your domain.

Download the provided contact form files, replace your current ones, and enable email sending with process.php by configuring the form action, PHP mail function, headers, and server expectations.

Improve your website security by validating form input, preventing script tags and XSS with PHP and htmlspecialchars, enforcing post requests and email fields.

Compress all project files into a zip, upload it via cPanel file manager, extract to the public directory, and verify the site with SSL and working pages.

Learn how to display images on a live website by referencing the images folder in your public directory on index and about pages, include image names and alt text.

Advance your HTML and CSS skills to build a more modern, responsive website, highlight menus, and add a touch of JavaScript for interactivity, plus deploying to online hosting.

Create and link a CSS reset, setting margins and padding to zero. Style the index header as a sticky, full-width element with a simple font stack and rem units.

Improve navigation with display:flex on the nav and its list, justify-content: space-between, and style links with white color, no text decoration, font size 1 rem, and padding.

Create a hero section with a main container and class hero, add a welcoming h1 and subtitle, then style with a tree background, white text, and rem-based padding.

style the about content area with classes, padding, and flex grow; adjust h1, h2, and paragraph sizes, and plan the contact page with a form.

Build and style a responsive website footer using the footer element, flex layout, and full-width, centered text, with a dark background and white font.

Create a dedicated services page, customize the hero to say our services, add a services list with expert advice, custom software, and 24/7 support, and organize content with consistent classes.

Create a responsive contact page by building a form with name, email, and message fields, adding labels and a submit button, and styling via CSS for a polished look.

Style the contact page by aligning the h1 with the site, centering the form, setting a max width, and stacking bold labels for consistency.

Style the contact form with responsive 100% width inputs, 10px padding, and 5px border radius. Apply full-width text area and button, white text on gray, no borders, and descriptive selectors.

Learn to enhance a contact page form with a hover button effect in html and css, and plan for a dynamic year using javascript.

Insert the current year on a contact page using javascript by selecting a span with an id, creating a date object, and inserting the full year into the page.

Build a responsive collapsible menu using CSS media queries to hide the menu icon by default and reveal or rearrange navigation at wider widths, with vertical stacking and centered items.

Refactor JavaScript by wrapping functionality in a toggle menu function, use the DOM loaded event to initialize, and manage show/hide with class list for a cleaner, professional menu.

Save time by building a site faster with an HTML and CSS framework, using pre-written components like navigation, links, and cards while focusing on content.

Explore the foundations of a css framework and master the grid system, containers, and responsive breakpoints to build with core classes and style websites.

Create a services section within a dark hero area, center content with a container, and implement Bootstrap cards with a body, title, and text.

Create a footer beneath the main content with a container, center-aligned white text on a dark background. Use JavaScript to dynamically display the current year in the copyright.

Convert the index page into a contact page, link navigation to services, and build a Bootstrap two-column form with contact information on the left and labeled inputs on the right.

Finalize a cleaner, reusable HTML/CSS template by refining scripts, active navigation, and spacing, ensuring consistent padding and margins across pages, and preparing the template for other websites.