Web Building Starter Pack. Html Css and JQuery Animations

Discover the structure of a website by learning HTML tags and head and body sections. Understand how the title and meta charset elements influence rendering in browsers and search engines.

Apply HTML rules by building properly nested opening and closing tags to create headers and paragraphs, using h1 and h2 levels for structured content.

Explore how HTML renders special characters with entities, manages whitespace between elements, and uses br and hr for layout; apply bold, strong, emphasis, and underline formatting.

Explore how to build and style HTML lists, including ordered and unordered lists, with text, images, icons, or video, and use them for navigation and content organization on web pages.

Learn to add images to a webpage using the img tag, set the image path, control size with width and height attributes, and use alt text for search indexing.

Create web pages using media elements—videos, audio, images, and GIFs—organized in a media folder with headers and explanations, and add sources, widths, and controls.

Embed YouTube, Vimeo videos and SoundCloud tracks on your web page using iframe codes, then paste and adjust width in pixels to fit your layout.

Learn how external links work with the anchor tag. Open these links in a new tab to keep visitors on your site, using examples like YouTube and Wikipedia.

Learn to create internal links using anchor tags to connect a home page to a breaking news page, linking titles and images for a simple news prototype.

Apply inline CSS to images, headers, and paragraphs to style a web page. Adjust font family, font size, and color, then preview changes in the browser.

Learn how CSS structures and styles web pages by using a style tag to target HTML elements with properties like font-size, color, font-family, and text-align, improving readability in real projects.

Learn to assign unique IDs to specific elements and target them with CSS to color individual paragraphs, while following ID rules and best practices.

Explore the shift from table-based layouts to divs, learn the box model, and see how divs structure headers, banners, and content with width, height and background color.

Master the additive color model by mixing red, green, and blue to create yellow, orange, and white. Apply RGB, RGBA, and hex colors in web design with CSS.

Learn how to apply css padding to create inner space around content, using top, right, bottom, and left values and shorthand forms with one to four values.

Learn to add borders to content, choose width, style (solid or dashed), and color; explore padding, overall width, and border radius, and apply borders to individual sides.

Use css margins to space content from surroundings, and apply the margin shorthand with 1–4 values, such as 50px top and bottom and 30px left and right.

Learn how to set typography for web sites by defining multiple font-family fallbacks and integrating web fonts from Google fonts, ensuring graceful rendering when fonts aren't available.

Apply typography techniques in HTML and CSS by loading Google fonts like Oswald, adjusting font sizes, colors, line-height, text alignment, text-transform, letter-spacing, and link decoration to create polished, readable text.

Explore the display property to control how list items, paragraphs, images, spans, and anchors render as block or inline elements, and practice using inline-block for layout.

Create a header with logo and navigation, using a 100 percent wide bar, a green background, white centered text, and inline-block nav items with hover colors and clickable anchors.

learn how to assign class names to html elements, differentiate class from id, combine multiple classes, and style grouped elements with color, borders, alignment, and fonts.

Explore CSS positioning by applying static, relative, float, and absolute positioning to parent and child boxes, creating an image gallery layout with left and right alignment.

Learn how CSS position attributes control layout, from static and relative flow to centering with a parent container and margins. Explore absolute stacking and fixed headers that stay in view.

Explore a quotes sharing photo exercise that elevates CSS skills by layering an image, a filter, and centered text to create a circular, Instagram-style composite.

Rearrange the container to 900 pixels, place divs side by side, switch from absolute to relative positioning, and apply linear gradient backgrounds with text shadows for readable photo cards.

Learn to build a well-organized one-page architectural website with a landing page, portfolio, happy customers, team, and a motto with a fixed background, using index.html and style.css.

Design an engaging landing page by layering a transparent gradient filter, placing a logo and centered text, and building a navigable bar with absolute positioning and z-index.

Practice building a portfolio page by centering six images with a shared parent, using relative and absolute positioning, responsive sizing, and hover shadow effects with CSS filters.

Design and implement the customers, crew, and motto pages with HTML and CSS, configure a filter layout, place logos, and tune typography and alignment for a cohesive site.

Learn to build a contact page that integrates a Google Maps iframe, including a header, address, and contact details with practical layout and CSS techniques.

Explore building a footer with a copyright text on the left and social media icons on the right, using HTML/CSS to float elements, style colors, and size icons.

Discover how a single button click can swap the landing page using HTML, CSS, and jQuery animations, with hover effects, transitions, and slide up and slide down page changes.

Learn to implement a fixed, responsive header with jQuery scroll effects that reveal and hide navigation as you scroll, plus smooth scroll transitions for professional websites.

Explore jQuery hover effects to animate images and reveal more info overlays with zooms and fades, applying css styling and html structure to create interactive picture cards.

Learn jQuery hover effects by assigning individual ids to images, animating per-item 'more info', and implementing image zoom with width adjustments and negative margins, plus stop and delay controls.

Learn responsive web design with jQuery by detecting screen width and swapping css at 960 pixels, then adjust images and typography for mobile layouts.

Learn to write your own jQuery functions and take full control of every pixel by building responsive hover zoom effects and switching between css files for different screens.