putting the little triangle character on the right side | add the accordion button-- active | add a transition of max heights | add the actual max height | set the max height on the content | set the display of the accordion content | select the accordion content
Intro | Set up challenge from Frontend Mentor | How to reverse-engineer the Bootstrap accordion | Make notes on accordion functionality | Adding boilerplate CSS styles | Card illustration | Styling accordion text | Illustration and shadow image | Tweaking accordion button | Arrow toggle image | The finished accordion card styles!
Responsive Accordion | Demo | How to bring Google Fonts | How to bring Fontawesome Icons | Accordion in HTML and CSS | JavaScript code to toggle Accordion
Intro | Initializing the project with npm | creating a BrowserWindow with html page | adding electron-reloader | set dev tools opened by default | html and css (with custom title bar) | adding the renderer.js | creating a file | openning a file | updating a file's content | adding a notification for error cases | creating a custom menu | recent documents | adding electron-builder and env variable
Html Boilerplate Code | Templating | Markup | Styling | Style the Body | Styling of each Faq Item | Styling of the Item Answers | Change the Css | Add an Event Listener | Css Trickery
create a container for the accordion | setting a maximum width of 400 px | creating the actual triangle open or closed indicator on the right | positioning this triangle 20 pixels from the right
Introduction | The inspiration for what I’m going to build | Building things out the right way | The HTML | The SVG icons | The generic CSS stuff | Setting up the panel styles | Styling the icons | Setting up the size of the panels and fixing up the button | Dealing with the overflowing text | The JavaScript - adding the interactions | Adding the animations | Fixing up the typography and text positioning | Making the text more readable | Adding prefers-reduced-motion | Adding a background to the titles | Making it responsive | Improving the keyboard interactions | Using containment
Introduction | Create an accordion section in HTML | How to use Font Awesome 6 CDN link | Build an accordion with CSS | How to make content collapsible using JavaScript
Intro | Kite AI autocomplete tool! | Overview of the functionality for JavaScript | Starting to add CSS styles for the different accordion states | Fixing focused style on button | Adding styles for the accordion content | The button focused style strikes again! | Adding JavaScript for clicking to open accordion | Researching getting parent/sibling in JS | Adding JavaScript to close accordion | Researching getting height of elements | Adding JavaScript for closing animation | FINISHED! Seeing the whole accordion work
Introduction | HTML | CSS for the page | CSS for the accordion | JS: Creating the Class constructor | JS: Adding metadata to buttons and panels | JS: Adding click event listeners | JS: Adding keyboard event listeners | JS: Functionality for options object
Intro | Project Setup in HTML & CSS | Accordion HTML | Accordion CSS | Media Queries For Responsiveness | Accordion JavaScript | Change Tab Background Color On Active | Change Plus Icon To Minus On Active | Change Question Font Weight To Bold On Active | Finished Version
Intro | Folder Structure | Tips Comment | Create Snippets | HTML Code | CSS Start | Icons Class & Styling | Correct Layout using Grid | Hidden Box Styling | Trick to Show & Hide Div | JS to get Reference (DOM) | Showing O/P with Console | For Loop to Toggle Active Class | Hiding Close Icon at First | Toggle Close & Open Icon | Showing Border on Top CSS | Animation In CSS | Subscribe
Intro | Folder Structure | Tips Comment | Create Snippets | HTML Code | CSS Start | Icons Class & Styling | Correct Layout using Grid | Hidden Box Styling | Trick to Show & Hide Div | JS to get Reference (DOM) | Showing O/P with Console | For Loop to Toggle Active Class | Hiding Close Icon at First | Toggle Close & Open Icon | Showing Border on Top CSS | Animation In CSS | Subscribe
Intro and Review | React App Create | Getting Data from the API | passing Data as props | Rendering the question & answer UI | Toggle Show Hide Functionality | Toggle + - icon | Outro
Introduction | Running JavaScript | Comment Your Code | Declare Variables | Storing Values with the Assignment Operator | Initializing Variables with the Assignment Operator | Uninitialized Variables | Case Sensitivity in Variables | Basic Math | Increment and Decrement | Decimal Numbers | Multiply Two Decimals | Divide Decimals | Finding a Remainder | Augmented Math Operations | Declare String Variables | Escaping Literal Quotes | Quoting Strings with Single Quotes | Escape Sequences | Plus Operator | Plus Equals Operator | Constructing Strings with Variables | Appending Variables to Strings | Length of a String | Bracket Notation | Understand String Immutability | Find the Nth Character | Word Blanks | Arrays | Nest Arrays | Access Array Data | Modify Array Data | Access Multi-Dimensional Arrays | push() | pop() | shift() | unshift() | Shopping List | Write Reusable with Functions | Arguments | Global Scope | Local Scope | Global vs Local Scope in Functions | Return a Value from a Function | Undefined Value returned | Assignment with a Returned Value | Stand in Line | Boolean Values | If Statements | Equality Operators | And / Or Operators | Else Statements | Else If Statements | Logical Order in If Else Statements | Chaining If Else Statements | Golf Code | Switch Statements | Returning Boolean Values from Functions | Return Early Pattern for Functions | Counting Cards | Build Objects | Dot Notation | Bracket Notation | Variables | Updating Object Properties | Add New Properties to Object | Delete Properties from Object | Objects for Lookups | Testing Objects for Properties | Manipulating Complex Objects | Nested Objects | Nested Arrays | Record Collection | While Loops | For Loops | Odd Numbers With a For Loop | Count Backwards With a For Loop | Iterate Through an Array with a For Loop | Nesting For Loops | Do...While Loops | Profile Lookup | Random Fractions and Whole Numbers | parseInt Function | Ternary Operator | Multiple Ternary Operators | var vs let | const Keyword | Mutate an Array Declared with const | Prevent Object Mutation | Arrow Functions | Default Parameters | Rest Operator | Spread Operator | Destructuring Assignment | Template Literals | Simple Fields | Declarative Functions | class Syntax | getters and setters | import and export
Quick Start | Link JavaScript to HTML | Strings | Numbers | Math Methods | Code Challenge | If Statements | Switch Statements | Ternary Operators | User Input | Your First Game | Loops | Functions | Scope - var, let, const | Arrays | Refactor the Game with Arrays | Objects | Classes | JSON | Handling Errors | Document Object Model (DOM) | Event Listeners | Web Storage API | Modules | Higher Order Functions | Promises / Fetch / Async & Await | Regular Expressions | Applying RegEx in JavaScript
installed visual studio | navigate to a folder of your choice | select the h1 | open two editors at the same | set break points in your code | install different extensions | installing these extensions | output the debug console | add additional terminals by clicking | switch between the terminals | customize your visual studio code experience in the end | navigate in visual studio | select the preferences color theme | customize our icons | install additional file icon themes | select the material icon theme | add an h2 element | add an h1 selector | write the code in a more convenient way | install this extension | installed extensions | open the preferences | toggle the integrated terminal with this key binding | select all these different well positions in your code | add selection to next find | switching between the different files | navigate through different files | quickly through the files of your project | switch to a project or recent project | keyboard shortcuts | hide the sidebar by clicking | start visual studio code or a new project | untitled file | change your settings | customize the saving behavior of visual studio | setting the zoom level | add any workspace settings for this specific project | close all our instances of visual studio code | add folder to workspace | manage our different projects with specific settings | select the private projects folder
Project Demo | Setup React App with Shadcn UI | Shadcn UI Components | Defining the App Routes | Header Component | Supabase Setup | Clerk Authentication Setup | Connecting Supabase with Clerk | Landing Page | Implementing User Authentication | Protected Routes | User Onboarding Page | Creating Tables in Supabase | Job Listing Page | Custom Hook for data fetching | Job Listing Page Continued | Save / Unsave Jobs | Search and FIlter Jobs | Assignment | Job Page | Applying To Job | React Hook Form and Zod | View Applicants + Tracking Application | Post a New Job | Add New Company | Saved Jobs Page | My Applications Page | My Created Jobs Page | Delete a job | Deployment
