Front End Web Development Bootcamp - Build a Twitter Clone

Describe HTML as a non programming language that defines page structure with elements like headings, paragraphs, images, and lists. Render HTML content in browsers without servers or compilers.

learn to create a basic html document with doctype and html structure, include head, body, and title, and render simple content in the browser.

Explore headings and paragraphs in HDMI documents, learn to create comments with <!-- -->, and use developer tools to edit and preview live changes.

Learn to create unordered and ordered HTML lists with ul, ol, and li. Use a live server to auto-refresh as you build nested lists.

Discover how anchor tags use href to link to internal sections via hash and to external pages, and how the target attribute '_blank' opens in a new tab.

Learn to display images with the img tag, use src and alt attributes, manage image paths and folders, adjust size with width and height, and turn images into clickable links.

Learn to build HTML forms with the form element, labels, text/email/password inputs, and layout using divs, br, and hr, plus placeholder, value attributes, and basic email validation.

Continue exploring form elements by adding text area, checkbox, radio button, and submit inputs, show label for attribute connections and radio groups, and touch on basic email validation.

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

Explore what css is and how to write it, including inline, internal, and external styles, selectors, and common properties like background color and color to style web pages.

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.

Explore CSS colors, including named colors, rgb/rgba, and hex values, to craft modern palettes; learn mood effects and cohesive schemes.

Explore CSS text formatting to control color, background, font size, and alignment, and learn how display and block versus inline elements affect layout with text-align and justify.

Learn to style text with CSS font-family, using generic families and fonts like Times New Roman and Helvetica, and adjust font-weight and font-style with Google Fonts via link or import.

Explore the css box model, including content, padding, border, margin, and box-sizing, and see how width and height shape layout. Practice with h1 elements and default margins, using shorthand properties.

Explore how to use pseudo classes and pseudo elements to style links, manage states like normal, visited, hover, and active, and build a dropdown menu with hover.

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.

Examine CSS measurement units, contrasting absolute units like pixels with relative units such as em and rem. Learn how parent and root font sizes shape responsive typography.

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 positioning uses absolute, relative, fixed, and sticky values to control element flow and stacking with the index property, and position elements relative to non-static parent and viewport.

Explore how the CSS float property moves elements left or right, why width matters, and how to clear floats using overflow, a clearing element, or the clearfix hack.

Apply CSS backgrounds by using background image, size, repeat, position, and attachment to craft modern, visually engaging elements. Manage image paths, quotes for spaces, and explore parallax effects with background-attachment.

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 how to create text shadows with text-shadow and apply box shadows to cards, adjusting horizontal and vertical offsets, blur, and color, including hover interactions and transitions.

Learn how CSS transitions create smooth effects by animating properties like width and background color, using the transition property, duration, delay, and timing functions, including cubic-bezier for custom speeds.

Learn two-dimensional CSS transforms, including translate, rotate, and scale, and apply transitions and hover effects to move, rotate, and resize elements.

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.

Explore how flex items reorder with the order property and align with align-self. Understand how flex grow, flex shrink, and flex basis size items, and how the flex shorthand combines them.

Explore CSS grid introduction, learn how two-dimensional grid layouts surpass flexbox in capacity, and master grid container, grid items, grid lines, gaps, tracks, cells, and areas.

Install Mozilla Firefox, launch files with live server, and configure a container with six items styled with padding, font size, colors, and individual backgrounds.

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.

Discover how fractional units (fr) in CSS grid control column and row sizes, using repeat and viewport units. Explore auto, pixels, and percentage values for flexible layouts.

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.

Learn to name grid lines and grid areas in CSS grid, and position header, sidebar, main content, boxes, and footer using named lines alongside grid line numbers.

Learn to name grid items by defining start and end points for rows and columns using grid line numbers and the repeat function, naming header, main content, sidebar, and footer.

Learn the third method to name grid areas with grid-template-areas to position items like header, sidebar, main, box 1–4, and footer, using quoted area names and grid-area assignments.

Explore explicit and implicit grids in css, learning how grid-template-columns and grid-template-rows create fixed rows and columns, while grid-auto-flow and grid-auto-rows adjust implicit grid behavior.

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.

Align grid track inside a container using justify content and align content, exploring horizontal and vertical positioning with values like start, center, end, space between, space around, and space evenly.

Learn to use max-content, min-content, and minmax() in CSS grid, with repeat and fractional units, to control column widths from fixed to flexible.

Discover how auto-fill and auto-fit create responsive grid layouts by filling or fitting columns in a container, using minmax for flexible column widths and wrapping behavior.

Build a three-page twitter-like project from a desktop-first layout, implementing a login page, a news feed with posts and who-to-follow, and a dark mode toggle.

Create the main page structure with a three-part layout: left icon panel, right login form, and middle content with a logo and headings, plus a footer.

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 right side of the main page by aligning form elements in a row, centering the content with absolute positioning and transform translate, and refining the wrapper layout.

Style the form elements by aligning the label with the input, tuning width, padding, borders, colors, and focus states, add transitions, and hover effects on the button.

Style the banner by aligning middle content with flexbox in a column, then adjust font sizes, margins, line height, and border radii to refine headings and buttons with hover transitions.

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.

Create a two-part login page with top navigation and a login form, including phone/email and password inputs, remember me, forgot password, and footer links for a Twitter clone.

Set up a three-column grid layout, place the navigation and login in the middle column, and adjust widths, heights, and gaps for a clean login page.

Learn to style navigation with flexbox, centering the menu and aligning language options to the right, while applying hover effects, after-pseudo lines, and a subtle bottom shadow.

Explore a two-column grid layout for the login page, place login content in the second column and footer on the bottom, and apply input styling and focus transitions.

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 navigation bar: fixed at the top with three centered sections, icons and a search bar, plus a user area with a rounded avatar and flex layout.

Create the news feed header by building the top header with a heading and Font Awesome icons, and the post section with a user image, text input, and action icons.

Apply grid and flex layout to style the news feed header, adjust the header image and content wrapper, and refine spacing, borders, and icon color.

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.

Style posts with grid and flexbox, align avatars, adjust image sizes with object-fit, and refine typography, icons, margins, and borders for a clean twitter-clone feed.

Create a fixed who to follow section on the right side of posts, with a heading, three user items (image, name, username), a follow button, show more link, and footer.

Style the who to follow section as a fixed right sidebar, customizing images, layout, typography, borders, and spacing with flexbox and responsive sizing to resemble a Twitter clone's follow panel.

Create a fixed bottom post button with a plus icon and 'post' text, styled for visibility and hover, and wired to reveal a model box via JavaScript in future sections.

Learn how javascript powers dynamic front-end web content and enables server-side use with node. Discover internal and external scripting, console logging, and linking external js files for reusable code.

Learn how variables store information in JavaScript, declare with var, let, and const, and name them with camel case while understanding reassignment and constant rules.

Explore JavaScript data types by examining primitive types—strings, numbers, booleans, undefined, and null—and learn how quotes, the type of operator, and the console reveal values.

Explore JavaScript arithmetic and comparison operators, including addition, subtraction, multiplication, division, and double and triple equals, with parentheses and type safety.

Explore type coercion in JavaScript, showing how numbers become strings with the plus operator, how arithmetic and concatenation differ, and how equality comparisons coerce booleans and numbers.

Explore conditional statements in JavaScript, using if, else if, and else to decide code blocks, and apply logical operators and not to control outcomes.

Explore JavaScript functions: define with parameters, pass arguments, call to execute, and return values; use if statements to enroll users at university or college based on scores.

learn arrow functions in es6, transform function expressions into concise code by omitting function keyword, using parameters with parentheses, and optional braces and return.

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.

Explore objects in JavaScript: define objects as name-value pairs, add properties with dot and bracket notation, access and modify values, nest objects, and create methods with anonymous or arrow functions.

Master how to use for, while, and do-while loops in JavaScript to iterate arrays, control flow with break and continue, and leverage length.

Explore the iOS 6 template strings feature that replaces plus concatenation with back ticks, dollar sign and curly braces to craft strings from name, age, and profession.

Explore how the document object model enables JavaScript to access content. See how the DOM uses a family-tree of elements, with parents, children, siblings, and attributes and notes.

Explore selecting single elements by id with getElementById, creating and updating content, and comparing textContent with innerHTML to dynamically modify an HTML document.

Master querySelector and querySelectorAll to fetch the first or all elements using id, class, or tag selectors. Understand node lists, their array-like nature, and why push doesn’t work on them.

Explore dom styles and classes with JavaScript by selecting elements and applying inline styles like color and backgroundColor; use querySelectorAll and classList to add, remove, or replace classes.

Explore making web pages interactive with events in JavaScript. Attach click, mouse over, and key press events using onclick or addEventListener, and inspect the event object.

Master manipulating HTML element attributes with the document object model by getting, setting, removing, and checking attributes like id, class, and style using querySelector and hasAttribute.

Learn to navigate the dom between elements using parentNode and parentElements, select elements with querySelector and getElementById, and use previous elements sibling and next element sibling to traverse siblings.

Master DOM manipulation by creating elements with create element and create text note, then append child, use querySelector to target the list, and insert before or remove child.