Full-Stack Web Developer Bootcamp | Front & Back-End Mastery

Explore the HTML5 boilerplate, including doctype html, html, head, title, and body tags, and learn where CSS and JavaScript belong within the hidden tag.

Explore essential HTML basics by working with header and paragraph tags, inserting horizontal rules and line breaks, centering content, and using bold text to emphasize elements.

Learn how to use the HTML5 emphasis tag, compare it with bold and strong, and understand nested tags while applying practical emphasis in paragraphs.

Understand HTML attributes such as id, title, class, and style, and see how align controls left, center, or right text placement, with examples linked to CSS.

Master basic HTML formatting by applying underline, strike, superscript, and subscript tags, plus big and small tags, and learn how div and span structure pages.

Learn how the div tag structures web pages into sections, while the span tag targets inline parts for styling; practice with classes and inline CSS.

Explore how to use the HTML address tag to format and position an address on a webpage, see its formatting differences, and practice implementing it in a simple example.

Explore meta tags, page refresh, and redirection in front end web development. Learn about utf-8 charset, the header and head sections, and responsive design.

discover how to use meta tags to improve search engine optimization, define keywords, descriptions, and author, and implement viewport for responsive design in front-end web development.

Discover how comments in HTML aid future maintenance by explaining code to developers, use single-line and multi-line comments, and note that browsers ignore these comments.

Learn how to add images in HTML with the image tag, manage image sources and folders, and optimize loading and SEO with alt text and basic styling.

Learn the basics of HTML tables, including table, table row, header, and data elements, with examples of classes, IDs, borders, cellpadding, cellspacing, and basic styling.

Explore advanced HTML tables by creating table head, body, foot, and caption; center alignment and borders illustrate how a robust table renders in a full-stack web app.

Learn to create HTML lists using ul and ol tags, explore ordered vs unordered lists, customize with square, disk, circle styles, and apply numbering styles for menus and dropdowns.

Explore how HTML anchor tags create page links for a navigation bar, connecting home, media, blog, sign up, login, and contact us with href targets and optional _blank behavior.

Combine the image tag with an anchor tag to link images to pages like the contact page, add alt text, resize with width and height, and link to pdfs.

Learn to create an anchor tag that links to an email address, enabling visitors to drop a message and send mail directly using basic html.

Explore building HTML forms with inputs for first name, last name, email, and password. Learn form structure, labels, ids, break lines, action attributes, and get versus post submission.

Learn to build HTML forms, including text areas, checkboxes, and radio buttons, plus a country dropdown with options; practice using names, values, and proper grouping for radios and embedding forms.

Embed videos in web pages using the video tag with mp4 and ogg sources, add controls and proper height and width for cross-browser playback.

embed youtube videos on your site with iframes using the youtube embed url, ensure proper streaming, and follow rights requirements for video usage.

Learn to embed audio in web pages using the audio tag with controls, add mp3 and ogg sources, manage folders and browser fallbacks for compatibility.

Explore the basics of CSS and how styling, including color, background, and font size, shapes web pages, with hands-on inspection of elements and simple experiments.

Explore the basics of CSS, including external and inline styles, linking CSS to HTML. Learn to style with selectors, properties, and values like colors, fonts, and the universal selector.

Explore embedding CSS in HTML through external CSS, embedded style blocks, and inline styles; learn why external CSS is preferable for maintainable code.

Explore CSS comments to document styles, including single-line and multi-line forms, to help current and future developers understand and maintain the code.

Explore CSS measurement units, including pixels, percentage, and em. See how font-size and image sizes use these units and why 100% sizing matters.

Learn how to apply images as CSS backgrounds, control repetition with no-repeat, repeat-x, and repeat-y, and position images using background-position, with background color options.

Explore how to apply and pair fonts in CSS using font-family, font-style, font-variant, font-weight, and font-size, and build robust font stacks with Google Fonts for cross-platform compatibility.

Explore text decoration in CSS by adjusting letter spacing, word spacing, alignment, underline and strike styles, text transform (uppercase, capitalize, lowercase), blink effects, and text shadow with spans and classes.

Explore image properties in CSS by applying borders, widths, heights, and colors. Learn to use solid, dashed, and dotted borders, adjust opacity, and preview changes in real time.

Explore the border-radius property to turn images into rounded or circular shapes by using values like 50%, 40%, and 30%; from 50% to 100% the element appears circular.

Explore link properties in HTML by styling anchor tags with colors for default, visited, hover, and active states, and apply CSS to manage navigation, floating, and page-specific styles.

Master CSS margins by applying top, right, bottom, and left values, using the shorthand margin property, and exploring auto behavior, with visual examples like borders and spacing between paragraphs.

Explore list properties in CSS, including unordered and ordered lists, text-align, float effects, and list-style-type options such as disk, circle, square, decimal, roman numerals, and lower alpha.

Learn CSS padding concepts and apply top, right, bottom, and left values to create space between content and borders, explore the box model, and see practical padding examples.

Explore how CSS visibility controls show and hide elements across devices, using hidden, visible, and collapse to design responsive web layouts.

Explore css positioning by comparing relative, absolute, and fixed, showing how elements move from their normal spot, from the viewport, or stay put, with practical image examples.

Learn how z-index controls stacking order with relative positioning using layered divs, colors, and practical examples to ensure menu bars and content overlap predictably.

Explore css colors with rgb values for red, green, and blue, and rgba with alpha to control opacity.

Learn to implement CSS gradients with linear-gradient, experiment with color transitions from yellow to blue, and control gradient directions from left to right, bottom to top, for cross-device compatibility.

Explore the CSS box model, where every element is a box, and learn to adjust padding, borders, margins, and width while inspecting elements to see layout effects.

Create an index.html in a frontend folder, apply boilerplate, and add meta tags for title, description, and keywords to boost SEO while planning blog, signup, login, contact, and about pages.

Create a fixed navigation bar with a logo and search bar to navigate between blog, media, sign up, login, and about pages, and structure header, nav, and content in HTML.

Style the navigation bar by linking an external CSS file, floating the logo left, and aligning the menu to the right, then adjust with padding and a fixed header.

Master the search bar styling by applying margins, padding, borders, and hover effects, then refine colors, text, and alignment to enhance the navigation experience.

Learn to add a dropdown menu by creating an anchor and a hidden drop content div, linking to home, media, sign up, login, and about pages.

Learn to style a drop-down menu with CSS by hiding and revealing the drop content on hover, using absolute positioning, background colors, link styles, padding, and shadows.

Solve the dropdown menu challenge by preventing refresh with JavaScript void(0), adding a media dropdown for videos, audio, photos, and slides under the navigation bar.

Create an active navigation state by applying a single active class to the menu across pages, highlighting the page in green and ensuring it works on login and signup.

Create the homepage header by structuring the site container into top, middle, and button sections, add a header image, and style fonts, colors, and spacing with css.

Learn to build the middle site of a site container by dividing it into three sections—the dove, services, and a contact box—adding images, text, and a call to action.

Apply CSS to style the site container, adjust widths and margins, and center content. Align text, float images, and add headings and anchors to refine the middle and services.

Learn to generate buttons with CSS generators, adjusting color, gradients, font size, and hover and active states. Copy the code, apply the my button class, and preview an email popup.

Add a website footer with social links to Facebook, Twitter, and your site, then style it with CSS, including padding, margins, and hover effects.

Build a popup contact form using divs with ids like message box and pop up contact, including name, email, and message fields and a close image with css/js.

Learn to style a popup contact form with CSS, setting width, borders, padding, inputs, and icons with background images. Align with login and signup pages; add hover effects.

Style the popup contact form with css, using absolute and fixed positioning, z-index layering, and margins to center it, while refining header, message box, and button styling.

Write JavaScript to power a popup contact form, showing and hiding the form, validating name, email, and message fields, and handling form submission with alerts.

Learn to build a blog page by adding a navigation bar, footer, site container, and sidebar with main content, images, captions, and text, using front end CSS.

Create the blog section with a header, a main area, and a sidebar using floats and responsive widths in a centered, fluid site container.

Learn to add an image with caption in a blog, using a div with image banner and banner description, apply rgba background and opacity to the caption.

Learn to add images to a blog using HTML and CSS, create a block box, and center or cover images, while styling a gradient sidebar.

Learn to create and style HTML tables with CSS, including table head, table body, and footer, define th and td, apply borders, widths, colors, and alternating row shading.

Add a newsletter widget to the sidebar by building a form with email, password, a frequency select, and a sign-up button; style with css for layout and focus.

Learn to add slides to a website using cycle two and jquery, with html structure, image assets, and navigation features like next, previous, auto slide, and hover pause.

Learn to style the media page with CSS by centering the slide show, designing a responsive header, and implementing next and previous controls with hover-activated opacity transitions.

Learn to add pause on hover to a slide show and implement a cyclopedia (PGA) pager using cycle two JavaScript, with CSS positioning and an active state.

Create a photo gallery on a website using lightbox, linking lightbox.css and lightbox.js, with thumbnails that open images in a lightbox and use data-lightbox for clean URLs.

Master styling a photo gallery with thumbnails, hover effects, and smooth transitions; tune z-index, apply transforms and rotation, add box shadows, and implement a lightbox with data-title labels.

Learn to add video to a website using the video element, embed videos, set width to 100%, enable controls, and style with a cover image and css for border radius.

demonstrates embedding audio on a webpage using an audio tag with an mp3 source and controls, wrapped in a styled container with an accompanying image.

Explore how to add JavaScript to an HTML audio player, wire a front-end JS file, and trigger audio playback with onclick, using a jingle bells mp3.

Learn to build photo gallery two using HTML and CSS, creating image thumbnails, a preview pane, and interactive hover effects with a green bordered button.

Create a css stripes navigation using a stripe.png background, hover color changes, and inline list items for home, chat, email, and phone to guide user interaction.

Master css stripes by using background-position and negative pixel offsets to arrange stacked elements such as home, chat, email, and phone, with hover effects.

Learn to create a sign up page with HTML and CSS, including labeled inputs for first name, last name, email, and password, using a post method and redirecting to login.html.

Build a dynamic signup form with date of birth input, course checkboxes, and gender radio buttons, plus a sign-up button and basic field validation.

Explore styling a signup page with HTML and CSS, including name, email, password, and date inputs, a 50% width form, borders and border radius, hover effects, and signup link styling.

Add a country selector to the sign-up page using a select element with id and name 'country', populate options such as Nigeria and Canada, and apply border-box sizing for styling.

Style the login page by reusing signup page code, linking the login css, and building a login form with email and password fields for consistent ui.

Learn to build a dedicated contact page with a reusable contact form. Embed a Google map, customize its size, and style the page with CSS for a polished contact experience.

Style the contact page, add a footer, set header background and padding, center the map, refine the contact form with CSS, remove unnecessary elements, and prepare for JavaScript interactivity.