web development for beginners

Learn to extend an HTML table by adding a grand total column and using colspan to span multiple columns, aligning a 24,000 dollar total in the table.

Learn to build an HTML table with borders, add rows and data, and use rowspan to merge the first column across two rows; td can contain any HTML content.

Learn how to create unordered and ordered HTML lists using ul, ol, and li, customize with type attributes (A, I, 1) to display bullets or numbers.

Learn to create nested unordered lists in HTML, adding sublists within list items for entries like green tea and black tea, and include ordered lists and links.

Create an unordered list inside an ordered list based on the on-screen examples, including links and items like account information and password, to complete the html list assignment.

Learn to use html input types, including text and password, to build forms that collect user data and mask passwords for privacy.

Explore html input types by building a color picker and testing fields like color, time, and email, saving the form, and previewing results in the browser.

Create two check boxes on a web form using input type='checkbox', assign distinct names and values for terms and conditions and privacy policy, and preview the updated page.

Learn how the get and post methods handle HTML form data, showing that get exposes variables in the URL during submission while post hides them.

Create an html form collecting first name, last name, and email with an 18 plus age check, using required fields and email validation in a table layout.

Learn to use Chrome's inspect tool to right-click and view CSS for a page, identify file origins, and apply color changes with hex codes.

Explore how to resize a background image with CSS background-size, using width and height values such as 350 by 500, and try auto, contain, or initial settings.

Explore the CSS text-style property and how font-style values like normal and italic change text appearance, turning a heading italic.

Explore using the CSS text-indent property to create left indentation, using pixel values like 50px, and learn why spaces in HTML do not affect layout.

Discover how the CSS margin and padding properties control spacing around elements and inside them, using top, right, bottom, and left values to adjust distances.

Learn to assign an id to an element, use a CSS id selector with a #name in the style tag, and apply color to that element to see the change.

Learn the difference between id and class in CSS: enforce unique ids on a page, reuse classes for styling, and validate your site with W3C validation.

Create a web page as your assignment and take a look at this. See you in the next video.

Learn to apply inline styles with the style attribute, changing color to blue and adding a solid red border; note this method is not recommended for long-term styling.

Learn how to write css comments using /* ... */ to document the developer behind a site, include team name and contact, and leave a readable footprint in css files.

Learn how to use the CSS border-radius property to round the corners of elements, apply a single radius to all corners or specify unique radii for each corner, with examples.

Explore how the CSS text-transform property changes letter casing using values like capitalize, lowercase, and uppercase to style and transform text in web pages.

Explore CSS letter-spacing and word-spacing to control space between letters and words in a paragraph by adjusting pixel values.

Learn to create CSS text-shadow effects with online generators, adjust offset-x and offset-y to move the shadow, control blur, and copy the CSS for use on your page.

Explore how to create and customize CSS box-shadow by adjusting horizontal and vertical offsets, blur, color, and opacity, including the inset option.

Learn how to hide an element with css. Use display: none to remove it from the page and visibility: hidden to preserve its space, with practical paragraph examples.

Explore how HTML is the parent tag of head and body, and how head is the parent of title, illustrating the parent–child relationships in HTML tags.

Explore CSS position properties to move elements on a web page, covering relative, absolute, fixed, sticky, and static positions.

Learn how CSS position relative moves elements on the page using top, left, bottom, and right properties. See three colored boxes adjust spacing and alignment in a simple layout.

Explore how CSS position absolute places elements inside a positioned parent with position relative, using top, left, right, and bottom offsets, demonstrated with green and yellow boxes.

Explore how CSS position-sticky keeps elements fixed at the top during scroll, as demonstrated with a yellow box and top: 0, illustrating sticky navigation behavior.

This lecture introduces CSS position static, demonstrating its default behavior; top values do not move the element, even when scrolling a yellow block.

Explore how media queries adjust web layouts across devices using min-width and max-width breakpoints. See how viewport behavior and bootstrap integration enable responsive styles on real devices.

Discover how JavaScript makes web pages interactive by using script tags in head or body and simple functions like alert to show or hide menus and boxes on user clicks.

Learn how JavaScript variables hold changing values, declare string, number, and boolean types with assignment and semicolons, and print them to the document.

Learn how JavaScript uses the plus operator to concatenate strings and numbers, how variables combine in strings, and how the browser handles data types during concatenation.

Explore how a for loop in JavaScript controls repeated execution by initializing i, testing i < 4, and incrementing i, producing alerts 0 through 3.

Learn how to define and call JavaScript functions using the function keyword, with parameters, examples of multiplying numbers, and returning values for use in code.

Learn how jQuery form events handle focus and focusout on an input, triggering functions to change the background color to yellow on focus and pink on focus out.

Learn how to handle jQuery form events, binding change handlers to select boxes, inputs, radio buttons, and checkboxes, and trigger functions and submissions to respond to user interactions.

Learn how to use jQuery text and append functions to update a paragraph on button clicks, including adding spans and dynamically displaying updated content.

Explore jQuery functions to dynamically add items to an ordered list using append and prepend, demonstrating how to append to the end and prepend to the beginning.

Explore how jQuery's closest function finds the nearest ancestor and how the find function locates descendants. Observe color-change examples that illustrate upward and downward element selection.

Learn to map a simple web page into header, content, and footer sections, and plan a logical template with logo, navigation, slide area, and image blocks.

Create a new web project by making a project folder, adding an index file, and creating a CSS folder with a CSS file to establish the structure.

Create a responsive header with a logo and navigation using flexbox, remove default margins, and style links as blocks. Ensure images are responsive with max-width: 100% and height: auto.

Create a web page slider by adding a content area and a dedicated div, then integrate an open-source slider and adjust container margins for correct image slides.

Create three equal boxes in a single row with flexbox, each featuring an image, heading, paragraph, and a read more link; fine-tune spacing with margins and fonts.

Learn to build two side-by-side boxes using nested flex boxes, add headings, paragraphs, an image, and apply flex basis, color, and spacing for layout refinement.

Compare a website image side by side in the browser, identify differences in text case and layout, and note images added via the template.

Learn how to use jQuery to toggle blog links on mobile, integrate scripts into a template, and verify script inclusion for secure, responsive navigation.

Learn how to signal clickable links on mobile by applying properties in the CSS file; refresh the page to see the pointer turn into a hand, indicating clickable links.

Learn how to upload and launch your website live by selecting a hosting plan and domain, creating an account, uploading your project, and validating the code.