Maîtrisez la programmation avec l’IA : le guide ultime de ChatGPT !

🎯 Key points for quick navigation:

00:00 🚀 Introduction to AI-Assisted Coding
– Overview of course goals: learning to build projects using ChatGPT without prior coding experience.
– Tools introduced: HTML, CSS, JavaScript, Firebase.
01:38 🛠️ Projects Overview
– Sectioned approach to project development, including database-powered apps.
– Examples of projects: RSVP invitation app, raffle app, drum kit, and Chrome extension.
05:36 🤖 How ChatGPT Aids Coding
– ChatGPT's role as a problem solver and creative assistant.
– Simplifies coding concepts for non-coders, e.g., breaking down tasks, providing code snippets.
09:29 📚 Basics of HTML and CSS
– HTML as the structure (blueprint) and CSS as the style (design).
– Practical demonstration of HTML and CSS code with ChatGPT's help.
17:44 🖱️ Creating Interactive Elements
– Step-by-step creation of a "Login with Twitter" button using ChatGPT.
– Explanation of CSS properties like padding, margin, and font size.
22:31 🎨 Customizing Buttons with CSS and Interaction
– Step-by-step modification of a button from "Login with Twitter" to "Login with GitHub".
– Enhancements include hover and click effects using `:hover` and `:active` selectors.
27:07 🖼️ Building a Hero Section
– Creation of a visually appealing hero section using HTML and CSS.
– Focus on integrating a product image with rounded corners and a shadow effect.
36:44 📋 Subscription Form with Flexbox Layout
– Development of a subscription form for a fictional service using HTML and CSS.
– Explanation of `flexbox` for efficient layout and alignment.
43:50 🐶 Adding and Styling Images
– Process of embedding and styling an image using the `img` tag and CSS.
– Importance of the `alt` attribute for accessibility and fallback text.
45:49 🎨 Styling and Centering Images
– Rounded corners applied using `border-radius` for aesthetic improvement.
– Horizontal centering achieved with CSS `margin: 0 auto;` and `display: block`.
50:22 🖥️ Introduction to JavaScript Basics
– Overview of JavaScript as a tool to add interactivity to web pages.
59:29 🎉 Interactive RSVP Page
– Development of an RSVP form for an event using HTML, CSS, and JavaScript.
01:08:46 ✉️ Enhancing RSVP Page Interactivity
– Conditional confirmation messages added based on user attendance.
01:16:12 🎟️ Building a Cake Raffle App
– HTML, CSS, and JavaScript combined to create an interactive raffle app.
01:27:18 🧹 Reset Functionality for Raffle App
– Reset button added to clear participant list and winner display.
01:30:59 🛠️ Debugging JavaScript with ChatGPT
– Demonstrating the process of debugging JavaScript using ChatGPT for errors and logical improvements.
01:36:08 🎟️ Enhancing Promo Code Application
– Fixed issues in the promo code discount application logic, including comparison errors and case sensitivity.
01:44:14 🥁 Building a Drum Kit App
– Initial setup included a single button to play a drum sound using HTML, CSS, and JavaScript.
01:50:16 🎹 Adding Keyboard Interactivity
– Enabled triggering drum sounds using specific keyboard keys (e.g., "A" for kick and "S" for ride).
01:52:28 🎶 Completing the Drum Kit
– Added buttons and sounds for snare, tom, and hi-hat, with respective audio elements and event listeners.
01:53:09 🎮 Improving Drum Kit Button Layout
– Adjusted button layout using Flexbox with `flex-wrap` and added a gap of 20px.
01:55:10 🌐 Deploying Projects with Netlify
– Demonstrated how to download and prepare project files for deployment by cleaning up unnecessary files.
01:58:24 🏗️ Reflections on Project Building and Next Steps
– Recapped skills learned: coding HTML, CSS, JavaScript, and using AI for debugging and refining.
02:00:43 🕹️ Introducing the "Face Bump" Game Project
– Planned to build a "Whack-a-Mole" style game with personal touches like custom images.
02:05:01 🎨 Customizing and Styling the Game
– Used CSS Grid for game board layout with 3 columns and gaps between elements.
02:10:20 🖱️ Adding JavaScript for Game Mechanics
– Implemented features like random image popping, score tracking, and a countdown timer.
02:14:23 🖌️ Adding Visual Enhancements to the Game
– Introduced CSS `box-shadow` with the `inset` keyword to create an inner shadow effect for depth.
02:17:14 🎮 Enhancing Game Interactivity
– Updated the start button text dynamically to "Playing" during the game and back to "Start Game" when the game ends.
02:20:02 🔊 Adding Sound Effects to the Game
– Integrated a sound effect when images are clicked, utilizing the `audio` element and JavaScript.
– Suggested using the ternary operator in JavaScript for concise conditional sound handling.
02:28:30 🖼️ Starting the Interactive Slideshow Project
– Outlined the project structure: an image slideshow with titles, descriptions, and dot navigation.
02:37:43 ⏩ Implementing Autoplay in the Slideshow
– Introduced an autoplay feature using `setInterval` to switch slides every 5 seconds.
02:40:01 📜 Enhancing the Project Slideshow
– Suggested adding more slides with project titles, descriptions, and live project links.
02:43:00 🏠 Building a Personal Homepage
– Developed a basic HTML structure with sections for a header, projects, about, skills, and a footer.
02:50:30 🖼️ Integrating the Project Slideshow into the Homepage
– Embedded the project slideshow into the homepage’s project section.
02:55:04 📐 Adding Containers for Content Structure
– Implemented containers using a CSS class for better content alignment and spacing.
02:59:44 🎨 Finalizing and Personalizing the Homepage
– Applied padding and background color for the "About" section to enhance visual appeal.
03:01:05 🗂️ Introduction to GitHub and Repository Setup
– Explained GitHub as a platform for version control and collaboration.
03:05:47 📱 Building a Smart Home Interface
– Created a Smart Home Mobile interface with sections for lighting, temperature, and music control.
03:09:14 🌡️ Enhancing Functionality in Smart Home Interface
– Added a toggle switch for lighting control with a smooth animation.
03:20:06 🎵 Implementing Music Control in Smart Home Interface
– Simulated music control by displaying random song names for "Play" and "Next" actions.
03:21:40 🎵 Enhancing Music Control Functionality
– Added JavaScript for music control, including play, pause, stop, and next functionalities.
– Selected a new name, "Home Harmony," for the interface based on ChatGPT suggestions.
03:24:55 📱 Transforming into a Progressive Web App (PWA)
– Introduced steps to convert the smart home interface into a PWA, allowing home screen installation.
03:31:31 🛠️ Building a Chrome Extension – Snap Stash
– Started creating a shopping list extension to save URLs categorized into predefined groups.
03:39:08 🛍️ Enhancing Chrome Extension Functionality
– Updated the extension to preview item names using the current tab's title.
03:43:21 🗑️ Adding Item Deletion to Chrome Extension
– Implemented delete buttons with trash can icons for each shopping list item using Font Awesome.
03:46:58 🗂️ Organizing Items by Category
– Updated the Chrome extension to display saved items in separate lists based on categories.
03:51:13 🎨 Customizing Chrome Extension Layout
– Improved select menu and button layout using Flexbox for alignment and spacing.
03:54:04 🚀 Automating Deployment with GitHub and Netlify
– Demonstrated how to deploy projects hosted on GitHub using Netlify.
03:57:09 🔥 Introduction to Firebase and Real-Time Database
– Explained Firebase’s real-time database, its features, and use cases like instant data updates.
04:05:32 🔒 Hiding Firebase Database URL with Environment Variables
– Explained how to use Scrimba's environment variables to hide sensitive data like Firebase URLs.
04:06:40 📝 Integrating Firebase with Event Invite Project
– Used ChatGPT to evaluate existing JavaScript and integrate Firebase for real-time message storage.
04:10:10 🌟 Building a Compliment Generator with Firebase
– Created "Kudos Delight," an app to submit and display compliments in real time.
04:21:07 🍴 Developing a Lunch Vote App
– Built a voting app to add lunch spots, vote for them, and update vote counts in real time using Firebase.
04:26:59 🔄 Implementing Single Vote and Vote Change Logic
– Enabled users to vote once and change their vote using browser local storage to track votes.
04:30:01 🗑️ Adding Delete Poll Button
– Introduced a delete poll button to clear all poll data from Firebase and reset the UI.
04:34:00 🍔 Testing Lunch Vote App with Firebase
– Verified functionality for adding places, casting votes, and dynamically updating results in real-time.
04:35:13 🛣️ Building Road Wallet App for Group Travel Expenses
– Designed an app to log expenses, manage travelers, and calculate shared costs in real-time using Firebase.
04:40:02 📝 Integrating Firebase into Road Wallet App
– Integrated Firebase to store and manage travelers and expenses in real-time.

Made with HARPA AI

😂

i made a few unique apps using gpt, and it’s also been my html, css but mainly js teacher.

Hello am trying to download you scrimba app with no success assist

36:20

can't find the discord channel.. Thanks for such a wonderful tut

Can you bring someone who is an expert in Python do a similar video using Chatgpt?

ChatGPT is outputting JS code using var for variable initialization in 2024. You are doing a disservice to new learners by shrugging it off and just glossing over the differences with let and const :/

So free tools like CodiumAi, GPT-Pilot, gptengineer.. still require the GPT Plus subscription ($20/mo)? i.e. None of these tools use the Assistant API pricing?

Alternatively, you can use Coding tools like Cody ($10/mo), CoPilot Pro ($20/mo).. but you don't get the non-coding help? Same for others.. Tabnine, AWS Code Whisperer, Gemini, etc?

I've heard not all the ChatGPT4 functionality/plugins are available when using their Assistant API. Is there a way of knowing if a particular task must be done within their Builder / Custom GPT?

For example, I'm interested in making 2 applications:
1) A desktop Flutter application that can read/write to the USB-Serial port
2) I have many pdfs with handwritten data. I'd like ChatGPT4 (+Vision and/or Ai PDF Plugin) to OCR the data from a table.. then perform calculations and finally edit or append the pdf with the results. Ultimately, I'd like this to be a standalone browser or desktop application that anyone (even non Plus users) can drag and drop a file into (assuming the assistant APIs support the OCR/PDF features).

is this gpt4 or 3.5?

!!! tell GPT4 to code in PEP 8, with tabs instead of spaces and #Comments instead of ""statements"!!!

sorry, this video is hard to follow without knowing which/how to use an IDE????

wonderful , very informative video

can some please provide me the discord link, I would like to join the community

If I ever wish to develop a game or turn on my lights from an app, I will spend the time to watch this — meanwhile, I'm searching for something with utility in the real world, you know, where people dont spend hours in moms basement playing games.