Front End Web Development Bootcamp - Build a Twitter Clone

Explore HTML5 semantic elements like header, nav, section, article, aside, and footer to clearly describe content and improve SEO across modern browsers.

Explore CSS selectors to style elements by tag, class, id, and attributes; learn grouping with commas, parent-child targeting, and selector precedence to apply consistent styles.

Learn how to use pseudo elements to style specific parts of an element, including first letter, before, and after. Apply the content property to insert content and improve headings.

Learn how relative units like percentage, viewport height (vh), and viewport width (vw) determine sizes in relation to parent elements and the viewport, with practical examples.

Explore css positions and learn how static, relative, absolute, fixed, and sticky positioning control element alignment. See how top, left, right, and bottom move boxes and affect layout.

Learn how CSS background size works with pixels and percentages, and how contain and cover affect image fitting and quality; then understand background origin and clip: border-box, padding-box, and content-box.

Explore CSS transforms by applying translate, rotate, scale, and skew in two-dimensional and three-dimensional space, including skewX, skewY, rotateX, rotateY, rotateZ, and combining them for interactive effects.

Learn how CSS flexbox modernizes alignment and makes item layout easier, replacing floats; this section covers flex container and item properties, main axis and cross axis, and practical examples.

Explore flex container properties to build flexible layouts by applying display flex, controlling direction with flex-direction, wrapping with flex-wrap, and aligning items with justify-content and align-items.

Learn to create a CSS grid by setting display: grid on a container, define two rows and three columns with 150px each using grid-template-rows, grid-template-columns, and grid-gap to control spacing.

learn to position and span grid items in css grid by using grid column start, grid column, grid row, and grid area with line numbers, minus 1, and span.

Explore how to align grid items and tracks in CSS grid using justify items, line items, justify self, and align self, including spanning behavior across rows and columns.

Apply common styles, reset margins, and set the google font joseph incense sun surf. Implement a two-column, two-row grid for the main page and center the left content with flexbox.

Style the footer with a manual grid, background color, padding, and a top border. Center footer links in a row using flex, and adjust font size, list style, and color.

Continue styling the login page by adjusting the button spacing, colors, borders, and typography, and finalize the remember me label, link, and footer layout with flexbox.

Build and style a multi-section fts page with a top navigation, posts feed, side users to follow, and a fixed create-post button, including icons and a search bar.

Style the news feed header post in a horizontal flex row, centering the image and Font Awesome icons vertically, with padding and a bottom border.

Create the posts section for a Twitter clone using a posts wrapper and individual post blocks with avatar, post content, image, and action icons, duplicating to five posts.

Master arrays in JavaScript, storing multiple values of different types in one variable. Access items by zero-based index and use push, pop, shift, unshift, and indexOf, including nested arrays.