Web Fundamentals, Week 2

combineSmallerStringFirst: Combine two given strings together with the smaller string being added in the front. If they are the same length, the first string will be added to the front.

stringRepeat: Given a string and an integer representing how many times the string should be repeated, create a new string that is the given string repeated that many times.

Meeting Purpose

Introduce Web Fundamentals module and begin HTML instruction.

Key Takeaways

• Web Fundamentals module covers HTML, CSS, and JavaScript over next 2 weeks
• New video site created for browsing lecture recordings: [link shared in chat]
• HTML basics covered: document structure, text elements, links, images, lists
• Assignments due today: "My First Web Page" and "Contact Earworm Incorporated"

Meeting Purpose

Resume Web Fundamentals course, covering HTML tables and forms.

Key Takeaways

• Reviewed morning HTML concepts: tags, attributes, parent-child relationships
• Introduced table structure: thead, tbody, tfoot, tr, th, td elements
• Covered form elements: text, email, date, number, checkbox, radio inputs
• Emphasized accessibility: matching label 'for' and input 'id' attributes
• Discussed semantic HTML and its importance for SEO and accessibility

concat: Replicate JavaScript’s concat() which combines two arrays into one NEW array

concatArrWithSelf: Given one array, return a new array that contains all of the original items duplicated twice

Meeting Purpose

Introduce CSS fundamentals and selectors to web development students.

Key Takeaways

• CSS (Cascading Style Sheets) allows styling of HTML elements through selectors, properties, and values
• Three main selector types introduced: element, class, and ID selectors
• Specificity determines which styles take precedence when multiple rules apply
• Browser developer tools are crucial for inspecting and debugging CSS

Key Takeaways

• CSS resets, container classes, and dark mode implementation were covered as foundational concepts
• Box shadow property can create glow effects with adjustable spread and opacity
• Linear gradients can be applied to backgrounds and text using CSS functions and WebKit prefixes
• Semantic approaches to CSS, like using classes for reusable styles, were emphasized

• Two algorithms covered: "Index of Minimum Value" and "Reverse Array"
• Multiple solution approaches demonstrated, including while loops and for loops
• Emphasis on code optimization and understanding algorithmic efficiency

Key Takeaways

• CSS units (rem, em, px, %) and their use cases were discussed, with emphasis on rem for responsive design
• Display properties (inline, block, inline-block) and their behaviors were explained
• Box model components (content, padding, border, margin) and box-sizing were covered in detail
• CSS resets, normalization, and their impact on default styles were compared

In this short activity demo we combined the :hover pseudo class with the CSS transition property to add some interactivity to a basic page made of boxes. We also practiced using the dev tools to inspect websites, find selectors used for certain elements, and change things temporarily for testing.

Optional extras we tried:

• Used a JavaScript loop to inject 500 boxes into our #wrapper
  • Also checked out the console in the dev tools to see log statements
• Reviewed the CSS Transform page on CSS Tricks

Algorithms

• flatten2dArr: Given a two-dimensional array, return a flattened array with original elements in preserved order.
• sumArrColumns: Given two arrays, return a new array whose elements are the sum of each "column".

Meeting Purpose

Introduce Flexbox concepts and properties to the class.

Key Takeaways

• Flexbox consists of two groups of CSS properties: Flex Container Properties and Flex Item Properties
• The parent (flex container) tells the children (flex items) how to behave using properties like justify-content and align-items
• The flex shorthand property on flex items allows easy control of item sizing ratios
• Gap is preferred over margins for spacing between flex items

Meeting Purpose

To demonstrate building an e-commerce product page layout using CSS Flexbox and utility classes.

Key Takeaways

• Used a "Lego First, Code Later" approach to plan page layout before coding
• Leveraged CSS Flexbox and utility classes for efficient, responsive layout
• Demonstrated step-by-step process of building major page components and styling
• Emphasized semantic HTML and accessibility considerations throughout

acronymize: Create a function that, given a string, returns the string’s acronym (first letter of each word capitalized).

titleCase: Create a function that, given a string, returns a new string where the first letter of each word is capitalized, and the rest of the letters in each word are lowercase.

Meeting Purpose

Introduce JavaScript and the Document Object Model (DOM) to students in the Web Fundamentals course.

Key Takeaways

• The DOM is a representation of HTML documents as JavaScript objects, allowing manipulation via JS
• The 'this' keyword's value changes based on context, often referring to the enclosing object or element
• Two main approaches for DOM manipulation: direct element interaction (using 'this') or selecting elements (e.g., querySelector)

Meeting Purpose

Afternoon lecture on JavaScript and DOM manipulation for WOS CanCode program.

Key Takeaways

• Covered new event listeners: onmouseover, onmouseout, and onclick
• Demonstrated different approaches to DOM manipulation (inline HTML vs. pure JavaScript)
• Reviewed flexbox concepts and CSS best practices