CINXE.COM

Object Oriented Programming (Course 1) Video Tutorial Screencast | SymfonyCasts

<!DOCTYPE html> <html lang="en" class="scroll-smooth"> <head prefix="og: http://ogp.me/ns#"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Get Object-Oriented! In this course, we'll get you up and running with classes, objects, methods, properties and all that OO stuff by building a real (and epic) application where we battle space ships. Woh"> <meta property="og:title" content="Object Oriented Programming (Course 1) Video Tutorial Screencast"> <meta property="og:description" content="Get Object-Oriented! In this course, we'll get you up and running with classes, objects, methods, properties and all that OO stuff by building a real (and epic) application where we battle space ships. Woh"> <meta property="og:url" content="https://symfonycasts.com/screencast/oo"> <meta property="og:image" content="https://symfonycasts.com/static/media/cache/course_video_poster_large/uploads/screencast/oo/oo-599.png"> <meta name="twitter:card" content="summary"> <title>Object Oriented Programming (Course 1) Video Tutorial Screencast | SymfonyCasts</title> <link rel="stylesheet" href="https://symfonycasts.com/build/150.899c05e4.css" data-turbo-track="reload"><link rel="stylesheet" href="https://symfonycasts.com/build/tailwind.945ec199.css" data-turbo-track="reload"> <link rel="preconnect" href="https://kit.fontawesome.com"> <link rel="preconnect" href="https://api.fontshare.com"> <link rel="stylesheet" href="https://kit.fontawesome.com/f44096511e.css" crossorigin="anonymous"> <script async defer src="https://sa.symfonycasts.com/latest.js"></script> <script src="https://symfonycasts.com/build/runtime.a477f750.js" defer data-turbo-track="reload"></script><script src="https://symfonycasts.com/build/8764.79cb6dbe.js" defer data-turbo-track="reload"></script><script src="https://symfonycasts.com/build/7658.310a38b9.js" defer data-turbo-track="reload"></script><script src="https://symfonycasts.com/build/4987.fd46174f.js" defer data-turbo-track="reload"></script><script src="https://symfonycasts.com/build/4184.4446a197.js" defer data-turbo-track="reload"></script><script src="https://symfonycasts.com/build/2624.eedc0a93.js" defer data-turbo-track="reload"></script><script src="https://symfonycasts.com/build/969.cbfbbb6b.js" defer data-turbo-track="reload"></script><script src="https://symfonycasts.com/build/4430.b8f58b3a.js" defer data-turbo-track="reload"></script><script src="https://symfonycasts.com/build/4079.812ac5c4.js" defer data-turbo-track="reload"></script><script src="https://symfonycasts.com/build/tailwind.50c3e21f.js" defer data-turbo-track="reload"></script> </head> <body class="min-h-screen bg-white text-black-8 dark:text-white dark:bg-black-9" data-user-id="" data-is-dark-mode-on="false" > <header data-controller="mobile-menu" class="border-b border-black-2 dark:border-black-8 dark:bg-black-9"> <section class="max-w-screen-2xl mx-auto py-3 px-5 flex justify-between items-center"> <div class="flex grow"> <button data-action="mobile-menu#toggle:prevent" class="md:hidden cursor-pointer relative w-4 h-6 mt-2.5 mr-3"> <div class="bg-black-9 dark:bg-white w-4 h-0.5 rounded absolute top-4 -mt-0.5 transition-all duration-500 before:content-[''] before:bg-black-9 before:dark:bg-white before:w-4 before:h-0.5 before:rounded before:absolute before:transition-all before:duration-500 before:-translate-x-2 before:translate-y-2 after:content-[''] after:bg-black-9 after:dark:bg-white after:w-4 after:h-0.5 after:rounded after:absolute after:transition-all after:duration-500 after:-translate-x-2 after:-translate-y-2"></div> </button> <a href="/" class="text-3xl font-medium"> <div class="bg-[url('../images/symfonycasts-logo-dm.svg')] w-[52px] h-[45px] bg-cover bg-no-repeat min-[1099px]:bg-[url('../images/symfonycasts-logo.svg')] min-[1099px]:dark:bg-[url('../images/symfonycasts-logo-dm.svg')] min-[1099px]:w-[240px] min-[1099px]:bg-contain mr-5" alt="SymfonyCasts Logo"></div> </a> <span class="hidden md:flex md:grow items-center"> <form action="/screencast/oo/search" data-controller="rich-search" role="search" aria-expanded="false" class="group w-[228px] aria-expanded:w-full transition-all relative" > <div class="relative"> <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"> <svg aria-hidden="true" class="w-5 h-5 text-black-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg> </div> <input data-rich-search-target="input" autocomplete="off" data-action="keydown.meta+k@window->rich-search#openByKey keydown.ctrl+k@window->rich-search#openByKey focus->rich-search#open keydown->rich-search#hotkeys rich-search#syncInput" value="" name="q" type="text" class="w-full focus:ring-0 focus:ring-offset-0 focus:outline-none group-aria-expanded:border group-aria-expanded:rounded-b-none group-aria-expanded:border-b-0 group-aria-expanded:border-blue-6 bg-black-1 border dark:border-black-7 border-black-2 text-black-5 text-sm rounded-lg block pl-10 p-2 dark:bg-black-7 dark:placeholder-black-5 dark:text-white" placeholder="Search Tutorials" spellcheck="false" aria-label="search" > </div> <div data-rich-search-target="list" class="absolute w-full bg-black-1 dark:bg-black-7 rounded-b-lg z-30 group-aria-expanded:block hidden border border-t-0 border-blue-6" > <ul> <li data-rich-search-target="listItem" data-action="mouseover->rich-search#moveWithMouse click->rich-search#selectAndSubmit" class="group aria-selected:bg-blue-6 aria-selected:text-white cursor-pointer" aria-selected="true" data-search-action="/screencast/oo/search" > <div class="flex justify-between items-center p-3"> <i class="fa fa-search"></i> <span data-rich-search-target="textItem" class="pl-3 grow text-ellipsis overflow-hidden whitespace-nowrap"></span> <span class="text-black-9 dark:text-white rounded p-1 bg-black-2 dark:bg-black-8 font-normal text-sm min-w-[92px]">In this course</span> </div> </li> <li data-rich-search-target="listItem" data-action="mouseover->rich-search#moveWithMouse click->rich-search#selectAndSubmit" class="group aria-selected:bg-blue-6 aria-selected:text-white cursor-pointer rounded-b-lg" aria-selected="false" data-search-action="/search" > <div class="flex justify-between items-center p-3"> <i class="fa fa-search"></i> <span data-rich-search-target="textItem" class="grow pl-3 text-ellipsis overflow-hidden whitespace-nowrap"></span> <span class="text-black-9 dark:text-white rounded p-1 bg-black-2 dark:bg-black-8 font-normal text-sm min-w-[121px]">All SymfonyCasts</span> </div> </li> </ul> </div> </form> </span> </div> <div class="font-semibold"> <nav class="space-x-1.5 sm:space-x-2 min-[812px]:space-x-3 xl:space-x-5" aria-label="main"> <div class="inline-block md:hidden" data-controller="dropdown" data-dropdown-offset-value="40" data-dropdown-placement-value="bottom" data-dropdown-close-on-click-inside-value="false" data-dropdown-use-overlay-value="true" > <button data-action="dropdown#toggle:prevent" type="button" class="py-1 px-2.5"> <span class="sr-only">Open Search Menu</span> <i class="fas fa-search fa-fw"></i> </button> <div class="absolute z-50 hidden w-auto bg-white rounded-lg shadow dark:bg-black-8 py-5 px-7 after:absolute after:content-[&#039;&#039;] after:top-0 after:-translate-y-6 after:left-0 after:right-0 after:mx-auto after:border-[12px] after:w-4 after:border-b-white after:dark:border-b-black-8 after:border-transparent" data-dropdown-target="block" > <form action="/search" data-controller="rich-search" role="search" aria-expanded="false" class="group w-[228px] aria-expanded:w-full transition-all relative" > <div class="relative"> <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"> <svg aria-hidden="true" class="w-5 h-5 text-black-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg> </div> <input data-rich-search-target="input" autocomplete="off" data-action="" value="" name="q" type="text" class="w-full focus:ring-0 focus:ring-offset-0 focus:outline-none group-aria-expanded:border group-aria-expanded:border-blue-6 bg-black-1 border dark:border-black-7 border-black-2 text-black-5 text-sm rounded-lg block pl-10 p-2 dark:bg-black-7 dark:placeholder-black-5 dark:text-white" placeholder="Search Tutorials" spellcheck="false" aria-label="search" > </div> </form> <h4 class="pt-4 pb-3 text-sm text-black-4 font-normal">Popular Search Topics</h4> <ul class="list-none font-semibold text-lg gap-3"> <li> <a href="/search?q=API%20Platform"> API Platform </a> </li> <li> <a href="/search?q=Doctrine"> Doctrine </a> </li> <li> <a href="/search?q=Turbo"> Turbo </a> </li> <li> <a href="/search?q=EasyAdmin"> EasyAdmin </a> </li> </ul> </div> </div> <div class="hidden md:inline-block" data-controller="dropdown" data-dropdown-offset-value="20" data-dropdown-placement-value="bottom" data-dropdown-close-on-click-inside-value="true" data-dropdown-use-overlay-value="false" > <a href="/courses" class="hover:text-blue-6">Tutorials</a> <button data-action="dropdown#toggle:prevent" type="button" class=""> <i class="fa-regular fa-ellipsis pl-1 hover:text-blue-6"></i> </button> <div class="z-50 absolute hidden w-auto bg-white divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600 py-5 px-7" data-dropdown-target="block" > <a href="/courses" class="hover:text-blue-6"><span class="text-lg font-semibold underline">View all Courses</span> <span class="font-sm font-normal">(123)</span></a> <div class="grid grid-cols-2"> <div class="py-[6px] px-[6px] font-normal"> <a class="hover:text-blue-6" href="/tracks/symfony"><i class="fa-solid fa-circle-small pr-3 text-[10px]" style="color: #06E7FC"></i>Symfony 7</a> </div> <div class="py-[6px] px-[6px] font-normal"> <a class="hover:text-blue-6" href="/tracks/symfony6"><i class="fa-solid fa-circle-small pr-3 text-[10px]" style="color: #6B02F7"></i>Symfony 6</a> </div> <div class="py-[6px] px-[6px] font-normal"> <a class="hover:text-blue-6" href="/tracks/symfony5"><i class="fa-solid fa-circle-small pr-3 text-[10px]" style="color: #A6F124"></i>Symfony 5</a> </div> <div class="py-[6px] px-[6px] font-normal"> <a class="hover:text-blue-6" href="/tracks/rest"><i class="fa-solid fa-circle-small pr-3 text-[10px]" style="color: #7BE89B"></i>APIs</a> </div> <div class="py-[6px] px-[6px] font-normal"> <a class="hover:text-blue-6" href="/tracks/js-tools"><i class="fa-solid fa-circle-small pr-3 text-[10px]" style="color: #ED268F"></i>JavaScript Frameworks &amp; Tools</a> </div> <div class="py-[6px] px-[6px] font-normal"> <a class="hover:text-blue-6" href="/tracks/javascript"><i class="fa-solid fa-circle-small pr-3 text-[10px]" style="color: #ED268F"></i>JavaScript Fundamentals</a> </div> <div class="py-[6px] px-[6px] font-normal"> <a class="hover:text-blue-6" href="/tracks/testing"><i class="fa-solid fa-circle-small pr-3 text-[10px]" style="color: #E7E517"></i>Testing</a> </div> <div class="py-[6px] px-[6px] font-normal"> <a class="hover:text-blue-6" href="/tracks/drupal"><i class="fa-solid fa-circle-small pr-3 text-[10px]" style="color: #AF04F6"></i>Drupal 8</a> </div> <div class="py-[6px] px-[6px] font-normal"> <a class="hover:text-blue-6" href="/tracks/oo"><i class="fa-solid fa-circle-small pr-3 text-[10px]" style="color: #3502ED"></i>OOP</a> </div> <div class="py-[6px] px-[6px] font-normal"> <a class="hover:text-blue-6" href="/tracks/php"><i class="fa-solid fa-circle-small pr-3 text-[10px]" style="color: #07DBDE"></i>PHP</a> </div> <div class="py-[6px] px-[6px] font-normal"> <a class="hover:text-blue-6" href="/tracks/extras"><i class="fa-solid fa-circle-small pr-3 text-[10px]" style="color: #E645CD"></i>Dev Tools</a> </div> </div> </div> </div> <a href="/gift-card/" class="hover:text-blue-6 hidden lg:inline">Gift Card</a> <a class="hover:text-blue-6 hidden lg:inline" href="/pricing">Pricing</a> <span class="hidden lg:inline border-r border-black-3 dark:border-black-6"></span> <div class="inline-block" data-controller="dropdown" data-dropdown-offset-value="40" data-dropdown-placement-value="bottom" data-dropdown-close-on-click-inside-value="true" data-dropdown-use-overlay-value="false" > <button data-action="dropdown#toggle:prevent" type="button" class="test-notifications-bell rounded-full py-1 px-2.5 hover:bg-black-1 hover:dark:bg-black-7 active:dark:bg-blue-8 active:dark:text-blue-5 active:bg-blue-1 active:text-blue-6"> <i class="fa fa-bell fa-fw relative"> <div class="bg-red-500 border-2 border-white dark:border-black-8 rounded-full h-[10px] w-[10px] absolute right-[-2px] top-[-2px]"></div> </i> </button> <div class="z-50 absolute h-[580px] overflow-y-scroll hidden md:2w-[530px] bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600 py-5 px-7 after:absolute after:content-[&#039;&#039;] after:top-0 after:-translate-y-6 after:right-5 after:border-[12px] after:w-4 after:border-b-white after:dark:border-b-gray-700 after:border-transparent" data-dropdown-target="block" > <div class="flex justify-between"> <span class="text-lg font-semibold pb-4">Notifications</span> </div> <div class="flex pt-7"> <turbo-frame id="user-notifications-page1" src="/updates" loading="lazy" target="_top"> Loading more entries <i class="fa fa-spinner fa-spin"></i> </turbo-frame> </div> </div> </div> <a href="#" class="nav-link py-1 px-2.5 hover:text-blue-6" data-controller="dark-mode-toggle" data-dark-mode-toggle-url-value="/api/set-dark-mode" data-dark-mode-toggle-class-name-value="dark" data-action="dark-mode-toggle#toggle:prevent" ><i class="fa fa-adjust fa-fw"></i></a> <span class="whitespace-nowrap"> <a class="btn-secondary-sm mr-2 whitespace-nowrap hidden md:inline-block" href="/login">Log In</a> <a class="btn-blue-sm whitespace-nowrap inline-block" href="/signup">Sign Up</a> </span> </nav> </div> </section> <section data-mobile-menu-target="menu" class="absolute top-68 z-40 border-b border-black-2 dark:border-black-7 bg-white dark:bg-black-8 w-full text-2xl flex-col origin-top animate-open-menu hidden"> <nav class="flex flex-col justify-between min-h-screen py-8" aria-label="mobile"> <div class="flex flex-col gap-2.5 p-0"> <div data-controller="toggle" data-toggle-button-toggle-classes-value="fa-angle-down fa-angle-up" data-toggle-hidden-classes-value="h-0 py-0" data-toggle-shown-classes-value="py-5" data-toggle-transition-height-value="true" > <div class="flex justify-between px-5"> <a href="/courses" class="hover:text-blue-6"> Tutorials </a> <button data-action="toggle#toggle:prevent"> <i class="fa-regular fa-angle-down pl-2 hover:text-blue-6"></i> </button> </div> <div class="bg-black-1 dark:bg-black-7 px-5 py-5 hidden overflow-hidden transition-all duration-500" data-toggle-target="content"> <span class="text-xs font-medium">Tracks (11)</span> <div class="py-[6px] px-[6px] text-base font-normal"> <a class="hover:text-blue-6" href="/tracks/symfony"><i class="fa-solid fa-circle-small pr-3 text-[10px]"></i>Symfony 7</a> </div> <div class="py-[6px] px-[6px] text-base font-normal"> <a class="hover:text-blue-6" href="/tracks/symfony6"><i class="fa-solid fa-circle-small pr-3 text-[10px]"></i>Symfony 6</a> </div> <div class="py-[6px] px-[6px] text-base font-normal"> <a class="hover:text-blue-6" href="/tracks/symfony5"><i class="fa-solid fa-circle-small pr-3 text-[10px]"></i>Symfony 5</a> </div> <div class="py-[6px] px-[6px] text-base font-normal"> <a class="hover:text-blue-6" href="/tracks/rest"><i class="fa-solid fa-circle-small pr-3 text-[10px]"></i>APIs</a> </div> <div class="py-[6px] px-[6px] text-base font-normal"> <a class="hover:text-blue-6" href="/tracks/js-tools"><i class="fa-solid fa-circle-small pr-3 text-[10px]"></i>JavaScript Frameworks &amp; Tools</a> </div> <div class="py-[6px] px-[6px] text-base font-normal"> <a class="hover:text-blue-6" href="/tracks/javascript"><i class="fa-solid fa-circle-small pr-3 text-[10px]"></i>JavaScript Fundamentals</a> </div> <div class="py-[6px] px-[6px] text-base font-normal"> <a class="hover:text-blue-6" href="/tracks/testing"><i class="fa-solid fa-circle-small pr-3 text-[10px]"></i>Testing</a> </div> <div class="py-[6px] px-[6px] text-base font-normal"> <a class="hover:text-blue-6" href="/tracks/drupal"><i class="fa-solid fa-circle-small pr-3 text-[10px]"></i>Drupal 8</a> </div> <div class="py-[6px] px-[6px] text-base font-normal"> <a class="hover:text-blue-6" href="/tracks/oo"><i class="fa-solid fa-circle-small pr-3 text-[10px]"></i>OOP</a> </div> <div class="py-[6px] px-[6px] text-base font-normal"> <a class="hover:text-blue-6" href="/tracks/php"><i class="fa-solid fa-circle-small pr-3 text-[10px]"></i>PHP</a> </div> <div class="py-[6px] px-[6px] text-base font-normal"> <a class="hover:text-blue-6" href="/tracks/extras"><i class="fa-solid fa-circle-small pr-3 text-[10px]"></i>Dev Tools</a> </div> <a href="/courses" class="hover:text-blue-6"><span class="text-lg font-semibold underline">View all Courses</span> <span class="text-xs font-normal">(123)</span></a> </div> </div> <a href="/gift-card/" class="hover:text-blue-6 px-5"> Gift Card </a> <a class="hover:text-blue-6 px-5" href="/pricing">Pricing</a> </div> <div class="flex flex-col px-3"> <a class="btn-secondary-sm text-center" href="/login">Log In</a> <a class="btn-blue-sm text-center mt-2.5" href="/signup">Sign Up</a> </div> </nav> </section> </header> <main class="mx-auto"> <div id="course-wrapper" class="relative md:static md:grid transition-all duration-500 md:grid-cols-[375px_minmax(0,1fr)]" data-controller="toggle chapters-sidebar-mobile chapters-list" data-toggle-shown-classes-value="md:grid-cols-[375px_minmax(0,1fr)]" data-toggle-hidden-classes-value="md:grid-cols-[74px_minmax(0,1fr)] chapter-list-hidden" data-toggle-start-hidden-value="false" data-toggle-fully-hidden-class-value="" data-toggle-cookie-name-value="isChapterListHidden" data-toggle-target="content" data-chapters-list-full-rendered-url-value="/screencast/55/_chaptersList/progress?isChapterListHidden=0" > <div class="md:hidden z-30 fixed bottom-10 left-1/3" > <button class="btn-primary-sm hidden" data-action="chapters-sidebar-mobile#close" data-chapters-sidebar-mobile-target="closeButton" >Close Chapter List <i class="fa-solid fa-layer-group"></i></button> <button class="btn-primary-sm" data-action="chapters-sidebar-mobile#open" data-chapters-sidebar-mobile-target="openButton" >View Chapter List <i class="fa-solid fa-layer-group"></i></button> </div> <div data-simplebar id="chapter-list-55" data-turbo-permanent="true" data-chapters-sidebar-mobile-target="content" class="!absolute z-20 w-full md:!sticky hidden md:block -mb-10 top-0 md:h-screen overflow-y-scroll border-r border-black-3 dark:border-black-6 shadow-md md:shadow-none" style="scrollbar-width:none;" > <div class="bg-white dark:bg-black-9 flex-shrink-0" > <!-- start course chapter list --> <div class="pt-4"> <!-- Table of contents --> <turbo-frame id="chapters-list-55" target="_top" data-chapters-list-target="sidebar" > <div class="px-5"> <div class="flex pb-3 md:justify-between" data-toggle-target="addHidingClass" data-hiding-class="md:justify-end" data-showing-class="md:justify-between" > <p class="text-xl font-semibold block md:sidebar-collapsed:hidden">Chapters</p> <button class="js-chapter-arrow hidden md:block" > <i class="fa-solid fa-arrow-left-to-line transition-all duration-500 " data-toggle-target="addHidingClass" data-hiding-class="md:rotate-180" ></i> </button> </div> <div class="text-xs flex gap-2 md:sidebar-collapsed:hidden pb-5 whitespace-nowrap"> <span class="uppercase"><i class="fa-solid fa-layer-group pr-2"></i>11 Chapters</span> <span>|</span> <span><i class="fa fa-clock pr-2"></i> 56:33</span> <span>|</span> </div> </div> <ul class="border-t border-black-3 dark:border-black-6 pt-5 js-chapter-list"> <li class=" hover:bg-black-1 hover:dark:bg-black-8 px-4 md:px-0"> <div class="md:px-5 py-2.5" data-toggle-target="addHidingClass" data-hiding-class="md:px-2" data-showing-class="md:px-5" > <div class="relative"> <a href="/screencast/oo/the-project" class=" block z-20 absolute w-full h-full js-chapter-link" ></a> <div> <div class="flex justify-between items-center"> <div class="border relative border-black-2 dark:border-black-5 rounded-2xl flex items-center justify-center w-14 h-[50px] flex-shrink-0"> <span class="text-sm z-10 font-medium">01</span> <div class="h-full absolute bg-black-2 dark:bg-black-7 rounded-l-2xl left-0" style="width: 0%;" ></div> </div> <div class="flex-grow pl-3 pr-2 md:sidebar-collapsed:hidden"> <div class="font-medium text-sm ">The Project</div> </div> <div class="font-medium text-xs flex items-center md:sidebar-collapsed:hidden">3:44</div> </div> </div> </div> </div> </li> <li class=" hover:bg-black-1 hover:dark:bg-black-8 px-4 md:px-0"> <div class="md:px-5 py-2.5" data-toggle-target="addHidingClass" data-hiding-class="md:px-2" data-showing-class="md:px-5" > <div class="relative"> <a href="/screencast/oo/basic-class" class=" block z-20 absolute w-full h-full js-chapter-link" ></a> <div> <div class="flex justify-between items-center"> <div class="border relative border-black-2 dark:border-black-5 rounded-2xl flex items-center justify-center w-14 h-[50px] flex-shrink-0"> <span class="text-sm z-10 font-medium">02</span> <div class="h-full absolute bg-black-2 dark:bg-black-7 rounded-l-2xl left-0" style="width: 0%;" ></div> </div> <div class="flex-grow pl-3 pr-2 md:sidebar-collapsed:hidden"> <div class="font-medium text-sm ">A Class and an Object</div> </div> <div class="font-medium text-xs flex items-center md:sidebar-collapsed:hidden">7:07</div> </div> </div> </div> </div> </li> <li class=" hover:bg-black-1 hover:dark:bg-black-8 px-4 md:px-0"> <div class="md:px-5 py-2.5" data-toggle-target="addHidingClass" data-hiding-class="md:px-2" data-showing-class="md:px-5" > <div class="relative"> <a href="/screencast/oo/methods" class=" block z-20 absolute w-full h-full js-chapter-link" ></a> <div> <div class="flex justify-between items-center"> <div class="border relative border-black-2 dark:border-black-5 rounded-2xl flex items-center justify-center w-14 h-[50px] flex-shrink-0"> <span class="text-sm z-10 font-medium">03</span> <div class="h-full absolute bg-black-2 dark:bg-black-7 rounded-l-2xl left-0" style="width: 0%;" ></div> </div> <div class="flex-grow pl-3 pr-2 md:sidebar-collapsed:hidden"> <div class="font-medium text-sm ">Class Methods</div> </div> <div class="font-medium text-xs flex items-center md:sidebar-collapsed:hidden">4:21</div> </div> </div> </div> </div> </li> <li class=" hover:bg-black-1 hover:dark:bg-black-8 px-4 md:px-0"> <div class="md:px-5 py-2.5" data-toggle-target="addHidingClass" data-hiding-class="md:px-2" data-showing-class="md:px-5" > <div class="relative"> <a href="/screencast/oo/methods-work" class=" block z-20 absolute w-full h-full js-chapter-link" ></a> <div> <div class="flex justify-between items-center"> <div class="border relative border-black-2 dark:border-black-5 rounded-2xl flex items-center justify-center w-14 h-[50px] flex-shrink-0"> <span class="text-sm z-10 font-medium">04</span> <div class="h-full absolute bg-black-2 dark:bg-black-7 rounded-l-2xl left-0" style="width: 0%;" ></div> </div> <div class="flex-grow pl-3 pr-2 md:sidebar-collapsed:hidden"> <div class="font-medium text-sm ">Methods that Do work</div> </div> <div class="font-medium text-xs flex items-center md:sidebar-collapsed:hidden">2:27</div> </div> </div> </div> </div> </li> <li class=" hover:bg-black-1 hover:dark:bg-black-8 px-4 md:px-0"> <div class="md:px-5 py-2.5" data-toggle-target="addHidingClass" data-hiding-class="md:px-2" data-showing-class="md:px-5" > <div class="relative"> <a href="/screencast/oo/multiple-objects" class=" block z-20 absolute w-full h-full js-chapter-link" ></a> <div> <div class="flex justify-between items-center"> <div class="border relative border-black-2 dark:border-black-5 rounded-2xl flex items-center justify-center w-14 h-[50px] flex-shrink-0"> <span class="text-sm z-10 font-medium">05</span> <div class="h-full absolute bg-black-2 dark:bg-black-7 rounded-l-2xl left-0" style="width: 0%;" ></div> </div> <div class="flex-grow pl-3 pr-2 md:sidebar-collapsed:hidden"> <div class="font-medium text-sm ">Multiple Objects</div> </div> <div class="font-medium text-xs flex items-center md:sidebar-collapsed:hidden">2:25</div> </div> </div> </div> </div> </li> <li class=" hover:bg-black-1 hover:dark:bg-black-8 px-4 md:px-0"> <div class="md:px-5 py-2.5" data-toggle-target="addHidingClass" data-hiding-class="md:px-2" data-showing-class="md:px-5" > <div class="relative"> <a href="/screencast/oo/objects-interact" class=" block z-20 absolute w-full h-full js-chapter-link" ></a> <div> <div class="flex justify-between items-center"> <div class="border relative border-black-2 dark:border-black-5 rounded-2xl flex items-center justify-center w-14 h-[50px] flex-shrink-0"> <span class="text-sm z-10 font-medium">06</span> <div class="h-full absolute bg-black-2 dark:bg-black-7 rounded-l-2xl left-0" style="width: 0%;" ></div> </div> <div class="flex-grow pl-3 pr-2 md:sidebar-collapsed:hidden"> <div class="font-medium text-sm ">Objects Interact</div> </div> <div class="font-medium text-xs flex items-center md:sidebar-collapsed:hidden">2:41</div> </div> </div> </div> </div> </li> <li class=" hover:bg-black-1 hover:dark:bg-black-8 px-4 md:px-0"> <div class="md:px-5 py-2.5" data-toggle-target="addHidingClass" data-hiding-class="md:px-2" data-showing-class="md:px-5" > <div class="relative"> <a href="/screencast/oo/editor-autocomplete" class=" block z-20 absolute w-full h-full js-chapter-link" ></a> <div> <div class="flex justify-between items-center"> <div class="border relative border-black-2 dark:border-black-5 rounded-2xl flex items-center justify-center w-14 h-[50px] flex-shrink-0"> <span class="text-sm z-10 font-medium">07</span> <div class="h-full absolute bg-black-2 dark:bg-black-7 rounded-l-2xl left-0" style="width: 0%;" ></div> </div> <div class="flex-grow pl-3 pr-2 md:sidebar-collapsed:hidden"> <div class="font-medium text-sm ">My Editor is Confused</div> </div> <div class="font-medium text-xs flex items-center md:sidebar-collapsed:hidden">1:42</div> </div> </div> </div> </div> </li> <li class=" hover:bg-black-1 hover:dark:bg-black-8 px-4 md:px-0"> <div class="md:px-5 py-2.5" data-toggle-target="addHidingClass" data-hiding-class="md:px-2" data-showing-class="md:px-5" > <div class="relative"> <a href="/screencast/oo/using-objects" class=" block z-20 absolute w-full h-full js-chapter-link" ></a> <div> <div class="flex justify-between items-center"> <div class="border relative border-black-2 dark:border-black-5 rounded-2xl flex items-center justify-center w-14 h-[50px] flex-shrink-0"> <span class="text-sm z-10 font-medium">08</span> <div class="h-full absolute bg-black-2 dark:bg-black-7 rounded-l-2xl left-0" style="width: 0%;" ></div> </div> <div class="flex-grow pl-3 pr-2 md:sidebar-collapsed:hidden"> <div class="font-medium text-sm ">Using Objects</div> </div> <div class="font-medium text-xs flex items-center md:sidebar-collapsed:hidden">6:52</div> </div> </div> </div> </div> </li> <li class=" hover:bg-black-1 hover:dark:bg-black-8 px-4 md:px-0"> <div class="md:px-5 py-2.5" data-toggle-target="addHidingClass" data-hiding-class="md:px-2" data-showing-class="md:px-5" > <div class="relative"> <a href="/screencast/oo/private-access" class=" block z-20 absolute w-full h-full js-chapter-link" ></a> <div> <div class="flex justify-between items-center"> <div class="border relative border-black-2 dark:border-black-5 rounded-2xl flex items-center justify-center w-14 h-[50px] flex-shrink-0"> <span class="text-sm z-10 font-medium">09</span> <div class="h-full absolute bg-black-2 dark:bg-black-7 rounded-l-2xl left-0" style="width: 0%;" ></div> </div> <div class="flex-grow pl-3 pr-2 md:sidebar-collapsed:hidden"> <div class="font-medium text-sm ">Private Access</div> </div> <div class="font-medium text-xs flex items-center md:sidebar-collapsed:hidden">8:37</div> </div> </div> </div> </div> </li> <li class=" hover:bg-black-1 hover:dark:bg-black-8 px-4 md:px-0"> <div class="md:px-5 py-2.5" data-toggle-target="addHidingClass" data-hiding-class="md:px-2" data-showing-class="md:px-5" > <div class="relative"> <a href="/screencast/oo/type-hinting" class=" block z-20 absolute w-full h-full js-chapter-link" ></a> <div> <div class="flex justify-between items-center"> <div class="border relative border-black-2 dark:border-black-5 rounded-2xl flex items-center justify-center w-14 h-[50px] flex-shrink-0"> <span class="text-sm z-10 font-medium">10</span> <div class="h-full absolute bg-black-2 dark:bg-black-7 rounded-l-2xl left-0" style="width: 0%;" ></div> </div> <div class="flex-grow pl-3 pr-2 md:sidebar-collapsed:hidden"> <div class="font-medium text-sm ">Type Hinting?!</div> </div> <div class="font-medium text-xs flex items-center md:sidebar-collapsed:hidden">8:26</div> </div> </div> </div> </div> </li> <li class=" hover:bg-black-1 hover:dark:bg-black-8 px-4 md:px-0"> <div class="md:px-5 py-2.5" data-toggle-target="addHidingClass" data-hiding-class="md:px-2" data-showing-class="md:px-5" > <div class="relative"> <a href="/screencast/oo/constructor" class=" block z-20 absolute w-full h-full js-chapter-link" ></a> <div> <div class="flex justify-between items-center"> <div class="border relative border-black-2 dark:border-black-5 rounded-2xl flex items-center justify-center w-14 h-[50px] flex-shrink-0"> <span class="text-sm z-10 font-medium">11</span> <div class="h-full absolute bg-black-2 dark:bg-black-7 rounded-l-2xl left-0" style="width: 0%;" ></div> </div> <div class="flex-grow pl-3 pr-2 md:sidebar-collapsed:hidden"> <div class="font-medium text-sm ">The Constructor!</div> </div> <div class="font-medium text-xs flex items-center md:sidebar-collapsed:hidden">8:11</div> </div> </div> </div> </div> </li> </ul> </turbo-frame> </div> <!-- closes actual list of chapters --> </div> </div> <div class="flex-grow overflow-hidden course-content"> <div class="bg-contain bg-no-repeat overflow-hidden bg-[url('../images/hero-gradient.png')] dark:bg-[url('../images/hero-gradient-dark.png')] min-w-0"> <div class="max-w-screen-xl mx-auto px-4"> <div class="pt-6"> </div> <div class="flex justify-between text-sm pt-3 sm:pt-9 mb-3"> <div class="flex justify-start gap-2"> <div class="bg-[url('../images/sf-lm.svg')] dark:bg-[url('../images/sf-dm.svg')] w-6 h-4 bg-contain bg-no-repeat mt-[3px]" alt="SymfonyCasts Logo"></div> <span>></span> <a href="/tracks/drupal"> Drupal 8 </a> <span>></span> <p>Course Overview</p> </div> <div class="flex justify-end"> </div> </div> <section class="flex flex-col xl:flex-row xl:h-[294px] drop-shadow-md"> <div style="background-image: url(https://symfonycasts.com/static/media/cache/course_video_poster_large/uploads/screencast/oo/oo-599.png);" class="xl:order-2 relative rounded-t-3xl xl:rounded-r-3xl xl:rounded-tl-none bg-cover bg-center h-[210px] xl:h-full xl:w-[470px]"> <div class="absolute right-2 top-4"> <turbo-frame id="bookmark-controls-course-55"> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave" > <button class="bg-white text-black-8 rounded-xl px-3 py-2" data-placement="bottom" > <i class="fal fa-bookmark"></i> </button> <span class="sr-only">Login to bookmark this course</span> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content">Login to bookmark this course</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> </turbo-frame> </div> </div> <div class="xl:order-1 bg-white dark:bg-black-7 p-6 rounded-b-3xl xl:rounded-l-3xl xl:rounded-br-none flex-grow"> <h1 class="text-[32px] font-semibold leading-9">Object Oriented Programming (Course 1)</h1> <p class="pt-2">Understand the difference between classes &amp; objects, learn about visibility &amp; type-hinting in our OOP tutorial, it&#039;s a blast!</p> <div class="mt-14"> <a href="/pricing/oo" class="btn-primary-sm"> Buy Access </a> </div> </div> </section> <div class="flex flex-col xl:flex-row mt-10 border-b border-black-3 dark:border-black-6 pb-10"> <div class="xl:w-[205px] xl:shrink-0"> <ul class="text-xs font-medium uppercase space-y-4 border-b border-black-3 dark:border-black-6 pb-5"> <li><i class="pr-2 fa-solid fa-circle-user"></i>3938 students</li> <li><i class="pr-2 fa-solid fa-closed-captioning"></i>EN Captions</li> <li><i class="pr-2 fa-solid fa-language"></i>EN Script</li> <li><i class="pr-2 fa-solid fa-award"></i>Certificate of Completion</li> </ul> <h3 class="text-sm pt-5 mb-3">Your Guides</h3> <div class="space-y-2"> <div> <a href="https://github.com/weaverryan" target="_blank"> <img class="rounded-xl h-10 w-10 inline mr-2" src="https://avatars.githubusercontent.com/u/121003?v=4&amp;s=200" alt="Ryan Weaver"> <span class="font-semibold whitespace-nowrap">Ryan Weaver</span> </a> </div> </div> </div> <div class="xl:pl-10"> <h3 class="text-xl font-semibold mt-6 xl:mt-0">About this course</h3> <div class="break-words text-lg prose dark:prose-invert overview"><p>Get Object-Oriented!</p> <p>In this course, we'll get you up and running with classes, objects, methods, properties and all that OO stuff by building a real (and epic) application where we battle space ships. Woh.</p> <p>Expect to get really comfortable with object-oriented fundamentals, including:</p> <ul> <li>Creating a class</li> <li>Instantiating objects (many objects!)</li> <li>Classes verus objects (what's the diff?)</li> <li>Class methods</li> <li>Visibility (that public, private, protected stuff)</li> <li>Type-hinting</li> <li>Class constructors (the <code>__construct</code> guy)</li> </ul> <p>Then keep going with <a href="http://knpuniversity.com/screencast/oo-ep2">course 2</a>.</p> <p>Blast off! <code>#NerdPun</code></p> </div> </div> </div> <h2 class="text-[22px] mt-[56px] mb-4 font-semibold mb-4"> Next courses in the <a class="underline" href="/tracks/drupal#the-oo-prerequisites">Drupal 8: The OO Prerequisites</a> section of the <a class="underline" href="/tracks/drupal"> Drupal 8 </a> Track! </h2> <div class="grid grid-cols-1 min-[900px]:grid-cols-2 xl:grid-cols-3 mb-14"> <div class="mb-5 pb-1 mr-3"> <a href="/screencast/dependency-injection"> <div class=""> <img class="rounded-tr-[20px] rounded-tl-[20px]" src="https://symfonycasts.com/static/media/cache/course_tiles_outbound/uploads/screencast/dependency-injection/dependency-injection-394.png" alt="Dependency&#x20;Injection&#x20;and&#x20;the&#x20;art&#x20;of&#x20;services&#x20;and&#x20;containers"> </div> <div class="p-5 rounded-br-[20px] rounded-bl-[20px] border-r border-l border-b border-black-2 dark:border-black-7"> <h6 class="h-[56px] mb-3 text-lg font-semibold line-clamp-2">Dependency Injection and the art of services and containers</h6> <div class="text-[11px] flex uppercase gap-2"> <span><i class="fa-solid fa-layer-group pr-2"></i>5 Videos</span> <span>|</span> <span><i class="fa fa-clock pr-2"></i> 22:50</span> <span>|</span> <span><i class="fa-solid fa-flag-swallowtail pr-2"></i> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave" > <span>0%</span> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> Your Progress <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> <div class="progress-bar-container"> </div> </span> </div> </div> </a> </div> <div class="mb-5 pb-1 mr-3"> <a href="/screencast/oo-ep2"> <div class=""> <img class="rounded-tr-[20px] rounded-tl-[20px]" src="https://symfonycasts.com/static/media/cache/course_tiles_outbound/uploads/screencast/oo-ep2/oo-ep2-271.png" alt="OOP&#x20;&#x28;Course&#x20;2&#x29;&#x3A;&#x20;Services,&#x20;Dependency&#x20;Injection&#x20;and&#x20;Containers"> </div> <div class="p-5 rounded-br-[20px] rounded-bl-[20px] border-r border-l border-b border-black-2 dark:border-black-7"> <h6 class="h-[56px] mb-3 text-lg font-semibold line-clamp-2">OOP (Course 2): Services, Dependency Injection and Containers</h6> <div class="text-[11px] flex uppercase gap-2"> <span><i class="fa-solid fa-layer-group pr-2"></i>13 Videos</span> <span>|</span> <span><i class="fa fa-clock pr-2"></i> 1:08:56</span> <span>|</span> <span><i class="fa-solid fa-flag-swallowtail pr-2"></i> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave" > <span>0%</span> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> Your Progress <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> <div class="progress-bar-container"> </div> </span> </div> </div> </a> </div> <div class="mb-5 pb-1 mr-3"> <a href="/screencast/oo-ep3"> <div class=""> <img class="rounded-tr-[20px] rounded-tl-[20px]" src="https://symfonycasts.com/static/media/cache/course_tiles_outbound/uploads/screencast/oo-ep3/oo-ep3-916.png" alt="OOP&#x20;&#x28;course&#x20;3&#x29;&#x3A;&#x20;Inheritance,&#x20;Abstract&#x20;Classes,&#x20;Interfaces&#x20;and&#x20;other&#x20;amazing&#x20;things"> </div> <div class="p-5 rounded-br-[20px] rounded-bl-[20px] border-r border-l border-b border-black-2 dark:border-black-7"> <h6 class="h-[56px] mb-3 text-lg font-semibold line-clamp-2">OOP (course 3): Inheritance, Abstract Classes, Interfaces and other amazing things</h6> <div class="text-[11px] flex uppercase gap-2"> <span><i class="fa-solid fa-layer-group pr-2"></i>10 Videos</span> <span>|</span> <span><i class="fa fa-clock pr-2"></i> 56:55</span> <span>|</span> <span><i class="fa-solid fa-flag-swallowtail pr-2"></i> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave" > <span>0%</span> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> Your Progress <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> <div class="progress-bar-container"> </div> </span> </div> </div> </a> </div> </div> <!-- Course Comments Section --> <a id="comments"></a> <div class="mt-6"> <div data-turbo="false" data-controller="user-nickname comment" data-comment-new-comment-form-url-value="/comment/course-55/form/new" data-comment-comments-total-value="7" data-comment-comments-translation-value="&#x7B;&quot;singular&quot;&#x3A;&quot;Comment&quot;,&quot;plural&quot;&#x3A;&quot;Comments&quot;&#x7D;" data-comment-comments-tf-id-value="comments-course-55" > <div class="flex justify-between pb-8"> <h3 class="text-xl font-semibold"> <span data-comment-target="commentsTotal">7</span> <span data-comment-target="commentsTotalTranslation">Comments</span> </h3> <div data-controller="dropdown" data-dropdown-placement-value="bottom-end"> <span class="text-xs border-r border-black-6 pr-3">Sort By</span> <button class="ml-3 text-sm" data-action="dropdown#toggle" data-comment-target="sortBtn"> <span class="sr-only">Open Sort By Menu</span> <span class="font-semibold">Most Useful</span> <i class="fas fa-caret-down"></i> </button> <ul data-dropdown-target="block" class="absolute text-sm z-10 hidden w-auto bg-white divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600 py-2"> <li><a class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" href="#best" data-action="comment#sort" data-target-url="/comment/course-55?sort=best">Most Useful</a></li> <li><a class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" href="#newest" data-action="comment#sort" data-target-url="/comment/course-55?sort=newest">Newest</a></li> <li><a class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" href="#oldest" data-action="comment#sort" data-target-url="/comment/course-55?sort=oldest">Oldest</a></li> </ul> </div> </div> <div class="js-form-container comment-form-level-0"> <div class="w-full text-center"> <div class="break-normal font-semibold border border-black-2 dark:border-black-9 p-5 mb-9 bg-white dark:bg-black-8 rounded-xl" style="box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.06), 0px 9px 20px 0px rgba(0, 0, 0, 0.06), 0px 37px 37px 0px rgba(0, 0, 0, 0.05), 0px 83px 50px 0px rgba(0, 0, 0, 0.03), 0px 147px 59px 0px rgba(0, 0, 0, 0.01), 0px 229px 64px 0px rgba(0, 0, 0, 0.00);"> <a href="/login" class="text-blue-6">Login</a> or <a href="/signup" class="text-blue-6">Register</a> to join the conversation </div> </div> </div> <div data-comment-target="comments" class="js-comments-container"> <turbo-frame src="/comment/course-55/list" id="comments-course-55"> <turbo-frame id="comments-course-55"> <div data-controller="comment-height"> <div class="js-comment-container transition-all rounded-md p-2" data-comment-id="4312" data-disqus-comment-id="3041664783"> <a id="comment-4312"></a> <div class="comment-level-0 pr-4 flex justify-start"> <div class="hidden lg:block lg:min-w-fit"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://symfonycasts.com/assets/images/avatars/default-user.png" alt="Default user avatar"> </div> <div class="ml-3 grow min-w-0"> <div class="flex justify-between"> <div> <span class="lg:hidden pr-2 lg:pr-0"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://symfonycasts.com/assets/images/avatars/default-user.png" alt="Default user avatar"> </span> <span class="space-x-1"> <strong>Huy Nguyen1</strong> <a id="comment-4312" class="text-black-2" href="#comment-4312" title="June 16, 2018 00:06" data-controller="comment#setHighlighted:prevent" data-comment-id-param="comment-4312" ><span class="text-xs text-black-4 capitalize">6 years ago</span></a> <a id="comment-3041664783"></a> </span> </div> </div> <div data-controller="highlight-js" class="js-comment-text"> <div class="comment-code prose dark:prose-invert leading-6"> <p>I have watched 2 oo episodes and learned A LOT of things that I couldn't find anywhere else, this is awesome. Man, you HAVE TO check this out</p> </div> </div> <div class="space-x-3 mt-1 mb-3"> <span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave" > <i class="fal fa-thumbs-up"></i> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content"> Please, log in to vote for this comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> <span class="js-comment-votes">2</span> </span> <span>|</span> <a class="js-comment-reply" href="#reply-4312" data-action="comment#reply" data-form-url="/comment/4312/form/reply?offset=1"><i class="fal fa-comments-alt mr-1"></i>Reply</a> <span>|</span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave" > <a href="#share-4312" title="Share Comment Link" data-action="comment#share" data-target-url="https://symfonycasts.com/screencast/oo#comment-4312"><i class="fal fa-share-alt"></i></a> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content">Share Comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> </div> </div> </div> </div> <div class="js-comment-container transition-all rounded-md p-2" data-comment-id="4329" data-disqus-comment-id="3043742581"> <a id="comment-4329"></a> <div class="comment-level-1 pr-4 py-2 flex justify-start"> <div class="hidden lg:block lg:min-w-fit"> <a href="/u/weaverryan"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://avatars.githubusercontent.com/u/121003?v=4&amp;s=100" alt="weaverryan avatar"> </a> </div> <div class="ml-3 grow min-w-0"> <div class="flex justify-between"> <div> <span class="lg:hidden pr-2 lg:pr-0"> <a href="/u/weaverryan"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://avatars.githubusercontent.com/u/121003?v=4&amp;s=100" alt="weaverryan avatar"> </a> </span> <span class="space-x-1"> <a href="/u/weaverryan"> <strong>weaverryan</strong> </a> <span class="px-1 font-semibold rounded text-xs text-white" style="background: linear-gradient(332.1deg, #0286C4 8.33%, #FFB800 162.53%);" title="SymfonyCasts Staff">SFCASTS</span> <a href="#comment-4312"><small><i class="fas fa-share"></i> Huy Nguyen1</small></a> <a id="comment-4329" class="text-black-2" href="#comment-4329" title="June 16, 2018 00:06" data-controller="comment#setHighlighted:prevent" data-comment-id-param="comment-4329" ><span class="text-xs text-black-4 capitalize">6 years ago</span></a> <a id="comment-3043742581"></a> </span> </div> </div> <div data-controller="highlight-js" class="js-comment-text"> <div class="comment-code prose dark:prose-invert leading-6"> <p>So nice of you to say! REALLY happy you found it useful - we wanted an OO guide for the real world!</p><p>Cheers!</p> </div> </div> <div class="space-x-3 mt-1 mb-3"> <span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave" > <i class="fal fa-thumbs-up"></i> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content"> Please, log in to vote for this comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> <span class="js-comment-votes">1</span> </span> <span>|</span> <a class="js-comment-reply" href="#reply-4329" data-action="comment#reply" data-form-url="/comment/4329/form/reply?offset=2"><i class="fal fa-comments-alt mr-1"></i>Reply</a> <span>|</span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave" > <a href="#share-4329" title="Share Comment Link" data-action="comment#share" data-target-url="https://symfonycasts.com/screencast/oo#comment-4329"><i class="fal fa-share-alt"></i></a> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content">Share Comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> </div> </div> </div> </div> <div class="js-comment-container transition-all rounded-md p-2" data-comment-id="27898" data-disqus-comment-id=""> <a id="comment-27898"></a> <div class="comment-level-0 pr-4 flex justify-start"> <div class="hidden lg:block lg:min-w-fit"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://secure.gravatar.com/avatar/36575a3caa3ba96140d363f56cfc3379?s=100&amp;d=https%3A%2F%2Fsymfonycasts.com%2Fassets%2Fimages%2Favatars%2Fdefault-user.png" alt="Gabs avatar"> </div> <div class="ml-3 grow min-w-0"> <div class="flex justify-between"> <div> <span class="lg:hidden pr-2 lg:pr-0"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://secure.gravatar.com/avatar/36575a3caa3ba96140d363f56cfc3379?s=100&amp;d=https%3A%2F%2Fsymfonycasts.com%2Fassets%2Fimages%2Favatars%2Fdefault-user.png" alt="Gabs avatar"> </span> <span class="space-x-1"> <strong>Gabs</strong> <a id="comment-27898" class="text-black-2" href="#comment-27898" title="October 22, 2022 12:48" data-controller="comment#setHighlighted:prevent" data-comment-id-param="comment-27898" ><span class="text-xs text-black-4 capitalize">2 years ago</span></a> </span> </div> </div> <div data-controller="highlight-js" class="js-comment-text"> <div class="comment-code prose dark:prose-invert leading-6"> <p>I feel like this needs a few updates with some cool new php8.1 updates, more types, enums and a class looking more like <a href="https://stitcher.io/blog/evolution-of-a-php-object">https://stitcher.io/blog/evolution-of-a-php-object</a> every now and then...</p> <p>It&#039;s my favorite tutorial to share when someone needs to learn OOP, but sadly I&#039;ve gotten to the point where I constantly need to say &#039;but this can be done in a better way nowadays&#039;</p> </div> </div> <div class="space-x-3 mt-1 mb-3"> <span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave" > <i class="fal fa-thumbs-up"></i> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content"> Please, log in to vote for this comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> <span class="js-comment-votes"></span> </span> <span>|</span> <a class="js-comment-reply" href="#reply-27898" data-action="comment#reply" data-form-url="/comment/27898/form/reply?offset=1"><i class="fal fa-comments-alt mr-1"></i>Reply</a> <span>|</span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave" > <a href="#share-27898" title="Share Comment Link" data-action="comment#share" data-target-url="https://symfonycasts.com/screencast/oo#comment-27898"><i class="fal fa-share-alt"></i></a> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content">Share Comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> </div> </div> </div> </div> <div class="js-comment-container transition-all rounded-md p-2" data-comment-id="27954" data-disqus-comment-id=""> <a id="comment-27954"></a> <div class="comment-level-1 pr-4 py-2 flex justify-start"> <div class="hidden lg:block lg:min-w-fit"> <a href="/u/weaverryan"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://avatars.githubusercontent.com/u/121003?v=4&amp;s=100" alt="weaverryan avatar"> </a> </div> <div class="ml-3 grow min-w-0"> <div class="flex justify-between"> <div> <span class="lg:hidden pr-2 lg:pr-0"> <a href="/u/weaverryan"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://avatars.githubusercontent.com/u/121003?v=4&amp;s=100" alt="weaverryan avatar"> </a> </span> <span class="space-x-1"> <a href="/u/weaverryan"> <strong>weaverryan</strong> </a> <span class="px-1 font-semibold rounded text-xs text-white" style="background: linear-gradient(332.1deg, #0286C4 8.33%, #FFB800 162.53%);" title="SymfonyCasts Staff">SFCASTS</span> <a href="#comment-27898"><small><i class="fas fa-share"></i> Gabs</small></a> <a id="comment-27954" class="text-black-2" href="#comment-27954" title="October 28, 2022 16:57" data-controller="comment#setHighlighted:prevent" data-comment-id-param="comment-27954" ><span class="text-xs text-black-4 capitalize">2 years ago</span></a> </span> </div> </div> <div data-controller="highlight-js" class="js-comment-text"> <div class="comment-code prose dark:prose-invert leading-6"> <p>Hey Gabs!</p> <p>Thanks for the note! I actually agree. While OO doesn&#039;t fundamentally change much, enough features have accumulated in PHP over the years that these OO tutorials could probably use a facelift. It&#039;s something we&#039;re going to look into updating for 2023. And thanks for sharing the tutorial with others - that&#039;s very awesome of you :).</p> <p>Cheers!</p> </div> </div> <div class="space-x-3 mt-1 mb-3"> <span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave" > <i class="fal fa-thumbs-up"></i> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content"> Please, log in to vote for this comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> <span class="js-comment-votes"></span> </span> <span>|</span> <a class="js-comment-reply" href="#reply-27954" data-action="comment#reply" data-form-url="/comment/27954/form/reply?offset=2"><i class="fal fa-comments-alt mr-1"></i>Reply</a> <span>|</span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave" > <a href="#share-27954" title="Share Comment Link" data-action="comment#share" data-target-url="https://symfonycasts.com/screencast/oo#comment-27954"><i class="fal fa-share-alt"></i></a> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content">Share Comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> </div> </div> </div> </div> <div class="js-comment-container transition-all rounded-md p-2" data-comment-id="883" data-disqus-comment-id="1867765315"> <a id="comment-883"></a> <div class="comment-level-0 pr-4 flex justify-start"> <div class="hidden lg:block lg:min-w-fit"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://secure.gravatar.com/avatar/105a451815e653d77f65cfb353da9838?s=100&amp;d=https%3A%2F%2Fsymfonycasts.com%2Fassets%2Fimages%2Favatars%2Fdefault-user.png" alt="Neal O. avatar"> </div> <div class="ml-3 grow min-w-0"> <div class="flex justify-between"> <div> <span class="lg:hidden pr-2 lg:pr-0"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://secure.gravatar.com/avatar/105a451815e653d77f65cfb353da9838?s=100&amp;d=https%3A%2F%2Fsymfonycasts.com%2Fassets%2Fimages%2Favatars%2Fdefault-user.png" alt="Neal O. avatar"> </span> <span class="space-x-1"> <strong>Neal O.</strong> <a id="comment-883" class="text-black-2" href="#comment-883" title="June 16, 2018 00:06" data-controller="comment#setHighlighted:prevent" data-comment-id-param="comment-883" ><span class="text-xs text-black-4 capitalize">6 years ago</span></a> <a id="comment-1867765315"></a> </span> </div> </div> <div data-controller="highlight-js" class="js-comment-text"> <div class="comment-code prose dark:prose-invert leading-6"> <p>Is there not a video download for this screen cast?</p> </div> </div> <div class="space-x-3 mt-1 mb-3"> <span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave" > <i class="fal fa-thumbs-up"></i> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content"> Please, log in to vote for this comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> <span class="js-comment-votes"></span> </span> <span>|</span> <a class="js-comment-reply" href="#reply-883" data-action="comment#reply" data-form-url="/comment/883/form/reply?offset=1"><i class="fal fa-comments-alt mr-1"></i>Reply</a> <span>|</span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave" > <a href="#share-883" title="Share Comment Link" data-action="comment#share" data-target-url="https://symfonycasts.com/screencast/oo#comment-883"><i class="fal fa-share-alt"></i></a> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content">Share Comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> </div> </div> </div> </div> <div class="js-comment-container transition-all rounded-md p-2" data-comment-id="888" data-disqus-comment-id="1875465355"> <a id="comment-888"></a> <div class="comment-level-1 pr-4 py-2 flex justify-start"> <div class="hidden lg:block lg:min-w-fit"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://symfonycasts.com/assets/images/avatars/default-user.png" alt="Default user avatar"> </div> <div class="ml-3 grow min-w-0"> <div class="flex justify-between"> <div> <span class="lg:hidden pr-2 lg:pr-0"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://symfonycasts.com/assets/images/avatars/default-user.png" alt="Default user avatar"> </span> <span class="space-x-1"> <strong>KnpUniversity</strong> <a href="#comment-883"><small><i class="fas fa-share"></i> Neal O.</small></a> <a id="comment-888" class="text-black-2" href="#comment-888" title="June 16, 2018 00:06" data-controller="comment#setHighlighted:prevent" data-comment-id-param="comment-888" ><span class="text-xs text-black-4 capitalize">6 years ago</span></a> <a id="comment-1875465355"></a> </span> </div> </div> <div data-controller="highlight-js" class="js-comment-text"> <div class="comment-code prose dark:prose-invert leading-6"> <p>Hi Neal! The video download is now available!</p> </div> </div> <div class="space-x-3 mt-1 mb-3"> <span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave" > <i class="fal fa-thumbs-up"></i> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content"> Please, log in to vote for this comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> <span class="js-comment-votes"></span> </span> <span>|</span> <a class="js-comment-reply" href="#reply-888" data-action="comment#reply" data-form-url="/comment/888/form/reply?offset=2"><i class="fal fa-comments-alt mr-1"></i>Reply</a> <span>|</span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave" > <a href="#share-888" title="Share Comment Link" data-action="comment#share" data-target-url="https://symfonycasts.com/screencast/oo#comment-888"><i class="fal fa-share-alt"></i></a> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content">Share Comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> </div> </div> </div> </div> <div class="js-comment-container transition-all rounded-md p-2" data-comment-id="932" data-disqus-comment-id="1947025427"> <a id="comment-932"></a> <div class="comment-level-0 pr-4 flex justify-start"> <div class="hidden lg:block lg:min-w-fit"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://symfonycasts.com/assets/images/avatars/default-user.png" alt="Default user avatar"> </div> <div class="ml-3 grow min-w-0"> <div class="flex justify-between"> <div> <span class="lg:hidden pr-2 lg:pr-0"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://symfonycasts.com/assets/images/avatars/default-user.png" alt="Default user avatar"> </span> <span class="space-x-1"> <strong>Edison</strong> <a id="comment-932" class="text-black-2" href="#comment-932" title="June 16, 2018 00:06" data-controller="comment#setHighlighted:prevent" data-comment-id-param="comment-932" ><span class="text-xs text-black-4 capitalize">6 years ago</span></a> <a id="comment-1947025427"></a> </span> </div> </div> <div data-controller="highlight-js" class="js-comment-text"> <div class="comment-code prose dark:prose-invert leading-6"> <p>Wonderful</p> </div> </div> <div class="space-x-3 mt-1 mb-3"> <span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave" > <i class="fal fa-thumbs-up"></i> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content"> Please, log in to vote for this comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> <span class="js-comment-votes"></span> </span> <span>|</span> <a class="js-comment-reply" href="#reply-932" data-action="comment#reply" data-form-url="/comment/932/form/reply?offset=1"><i class="fal fa-comments-alt mr-1"></i>Reply</a> <span>|</span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave" > <a href="#share-932" title="Share Comment Link" data-action="comment#share" data-target-url="https://symfonycasts.com/screencast/oo#comment-932"><i class="fal fa-share-alt"></i></a> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content">Share Comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> </div> </div> </div> </div> </div> </turbo-frame> </turbo-frame> </div> <div data-controller="modal" data-action="turbo:before-cache@window->modal#close modal:open->modal#open modal:close->modal#close" data-comment-target="deleteConfirmModal" > <dialog class="open:flex p-0 bg-white dark:bg-black-9 text-left shadow-xl transform rounded-lg shadow-xl inset-0 w-full md:w-fit md:max-w-[50%] md:min-w-[50%] animate-fade-in backdrop:bg-slate-600 backdrop:bg-opacity-80 backdrop:backdrop-blur-sm" data-modal-target="dialog" data-action="close->modal#close click->modal#clickOutside" > <div class="flex grow"> <div class="grow overflow-auto justify-center items-center"> <h3 class="p-4 text-2xl text-center font-medium text-black-9 dark:text-white"> Delete comment? </h3> <div class="p-4 flex gap-2 justify-center"> <button data-action="comment#doDelete" class="btn-blue-sm bg-context-orange hover:bg-context-darkred my-3"><i class="fa fa-trash pr-1"></i>Delete</button> <button data-action="modal#close" class="btn-blue-sm my-3"><i class="fa fa-xmark pr-1"></i>Cancel</button> </div> </div> <button class="absolute right-4 top-4 dark:text-white flex items-center opacity-70 transition-opacity hover:opacity-100" data-action="modal#close" type="button" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg> </button> </div> </dialog> </div> <div class="js-comment-share-modal"> <div data-controller="modal" data-action="turbo:before-cache@window->modal#close modal:open->modal#open modal:close->modal#close" > <dialog class="open:flex p-0 bg-white dark:bg-black-9 text-left shadow-xl transform rounded-lg shadow-xl inset-0 w-full md:w-fit md:max-w-[50%] md:min-w-[50%] animate-fade-in backdrop:bg-slate-600 backdrop:bg-opacity-80 backdrop:backdrop-blur-sm" data-modal-target="dialog" data-action="close->modal#close click->modal#clickOutside" > <div class="flex grow"> <div class="grow overflow-auto justify-center items-center"> <h3 class="p-4 text-2xl text-center font-medium text-black-9 dark:text-white border-b border-black-3 dark:border-black-6"> Share this comment </h3> <div class="m-3"> <input class="bg-black-1 border dark:border-black-7 border-black-2 text-black-5 text-sm rounded-lg focus:ring-transparent focus:border-none p-2 dark:bg-black-7 dark:placeholder-black-5 dark:text-white dark:focus:ring-transparent dark:focus:border-none" type="text" readonly style="width: 100%"> </div> <div class="px-4 py-2 flex gap-2 justify-center"> <button data-action="comment#copyShareUrl" class="js-copy-share-url-btn btn-blue-sm my-3"><i class="fa fa-copy pr-1"></i>Copy link</button> <button data-action="modal#close" class="btn-secondary-sm my-3"><i class="fa fa-xmark pr-1"></i>Cancel</button> </div> </div> <button class="absolute right-4 top-4 dark:text-white flex items-center opacity-70 transition-opacity hover:opacity-100" data-action="modal#close" type="button" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg> </button> </div> </dialog> </div> </div> <div data-comment-target="noCommentsMessage" style="display: none;"> <div class=""> <img class="mx-auto w-36" src="https://symfonycasts.com/build/images/planet-astronaut.b2e6de60.png" alt="astronaut with balloons in space" loading="lazy"> <p class="text-center mt-4 ml-2"><span class="font-semibold">"Houston: no signs of life" </span><br> <span class="mt-2">Start the conversation!</span></p> </div> </div> </div> </div> <!-- Closes the Course Comments Section --> </div> </div> </div> </div> </main> <footer class="my-10 max-w-7xl mx-auto border-t border-black-2 dark:border-black-6 px-5"> <section class="flex flex-col md:flex-row md:justify-between mb-16 pt-11"> <div> <div class="bg-[url('../images/symfonycasts-logo-dm.svg')] w-[65px] h-[55px] bg-cover bg-no-repeat" alt="SymfonyCasts Logo"></div> <div class="text-[32px] font-semibold mt-4 mb-8 dark:text-white">Where learning is really fun.</div> <div class="text-xs min-[500px]:text-base flex"> <div><a href="/contact" class="btn-secondary-lg whitespace-nowrap">Get in touch<i class="fa-solid fa-envelope pl-2.5"></i></a></div> <div><a href="/pricing" class="btn-blue-lg ml-3 whitespace-nowrap">All Access Pass<i class="fa-solid fa-bolt-lightning pl-2.5"></i></a></div> </div> </div> <div class="flex flex-row mt-6 md:mt-0"> <div class="mr-16"> <ul class="text-[22px] font-semibold dark:text-white"> <li class="pb-3"><a href="/courses#all" class="hover:text-blue-6">Courses</a></li> <li class="pb-3"><a href="/courses#tracks" class="hover:text-blue-6">Tracks</a></li> <li class="pb-3"><a href="/pricing" class="hover:text-blue-6">Pricing</a></li> <li class="pb-3"><a href="/gift-card/" class="hover:text-blue-6">Gift Card</a></li> <li class="pb-3"><a href="/blog" class="hover:text-blue-6">Blog</a></li> </ul> </div> <div> <ul class="text-sm pt-2.5 dark:text-black-4"> <li class="pb-3"><a href="/faq" class="hover:text-blue-6">FAQ</a></li> <li class="pb-3"><a href="/faq" class="hover:text-blue-6">About</a></li> <li class="pb-3"><a href="/terms" class="hover:text-blue-6">Terms</a> <span>&amp;</span> <a href="/privacy" class="hover:text-blue-6">Privacy</a></li> <li class="pb-3"><a href="/courses?status=upcoming&amp;sort=popular#all" class="hover:text-blue-6">Roadmap</a></li> <li class="pb-3"><a href="/contact" class="hover:text-blue-6">Contact</a></li> </ul> </div> </div> </section> <section class="flex flex-col md:flex-row md:justify-between"> <div class="dark:text-white"> <a href="https://github.com/SymfonyCasts" class="hover:text-blue-6"><i class="fa-brands fa-github pr-8"></i></a> <a href="https://twitter.com/SymfonyCasts" class="hover:text-blue-6"><i class="fa-brands fa-x-twitter pr-8"></i></a> <a href="https://www.facebook.com/SymfonyCasts/" class="hover:text-blue-6"><i class="fa-brands fa-facebook-f pr-8"></i></a> <a href="https://www.linkedin.com/company/symfonycasts/" class="hover:text-blue-6"><i class="fa-brands fa-linkedin pr-8"></i></a> <span>Powered by <span class="text-blue-6">KnpUniversity</span></span> </div> <div> <p class="dark:text-black-4 mt-6 md:mt-0">Hosted with <i class="fa-solid fa-heart text-red-600"></i> on <a href="https://symfony.com/cloud/" class="underline hover:text-blue-6">platform.sh</a></p> </div> </section> </footer> </body> </html>

Pages: 1 2 3 4 5 6 7 8 9 10