CSS: Combining Grid and Flexbox Online Class | LinkedIn Learning, formerly Lynda.com

<!DOCTYPE html> <html lang="en"> <head> <meta name="pageKey" content="d_learning_course_guest">  <meta name="locale" content="en_US"> <meta id="config" data-app-version="2.0.2343" data-call-tree-id="AAYuUK4uuAOloOcItStfHw==" data-multiproduct-name="learning-guest-frontend" data-service-name="learning-guest-frontend" data-browser-id="4fce93c2-6e87-4657-88cc-66c035309988" data-enable-page-view-heartbeat-tracking data-page-instance="urn:li:page:learning_course_guest;AzdNly7zQMWypSwjIlK/Jw==" data-disable-jsbeacon-pagekey-suffix="false" data-member-id="0" data-dna-member-lix-treatment="control" data-human-member-lix-treatment="control" data-dfp-member-lix-treatment="control"> <link rel="canonical" href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox">     <link rel="manifest" href="/homepage-guest/manifest.json" crossorigin="use-credentials">  <script> function getDfd() {let yFn,nFn;const p=new Promise(function(y, n){yFn=y;nFn=n;});p.resolve=yFn;p.reject=nFn;return p;} window.lazyloader = getDfd(); window.tracking = getDfd(); window.impressionTracking = getDfd(); window.ingraphTracking = getDfd(); window.appDetection = getDfd(); window.pemTracking = getDfd(); </script>  <link rel="icon" href="https://static.licdn.com/aero-v1/sc/h/444zstxv7s91nepfm5et6ofge"> <title>CSS: Combining Grid and Flexbox Online Class | LinkedIn Learning, formerly Lynda.com</title> <meta name="robots" content="noarchive, max-image-preview:large"> <meta name="description" content="Learn to use Flexbox and CSS Grid separately and in combination to create better webpages."> <meta property="og:site_name" content="LinkedIn"> <meta name="twitter:site" content="@LI_Learning"> <meta name="twitter:card" content="summary"> <meta name="litmsProfileName" content="learning-guest-frontend"> <meta property="og:title" content="CSS: Combining Grid and Flexbox Online Class | LinkedIn Learning, formerly Lynda.com"> <meta name="twitter:title" content="CSS: Combining Grid and Flexbox Online Class | LinkedIn Learning, formerly Lynda.com"> <meta property="og:description" content="Learn to use Flexbox and CSS Grid separately and in combination to create better webpages."> <meta name="twitter:description" content="Learn to use Flexbox and CSS Grid separately and in combination to create better webpages."> <meta property="og:image" content="https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ"> <meta name="twitter:image" content="https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ">  <meta property="og:url" content="https://www.linkedin.com/learning/css-combining-grid-and-flexbox"> <meta property="og:type" content="website"> <meta name="clientSideIngraphs" content="1" data-gauge-metric-endpoint="/learning-guest/api/ingraphs/gauge" data-counter-metric-endpoint="/learning-guest/api/ingraphs/counter"> <link rel="stylesheet" href="https://static.licdn.com/aero-v1/sc/h/bhnsb9vw0f84m4sarx55jrypn"> <script type="application/ld+json"> {"@context":"http://schema.org/","@type":"Course","provider":{"@type":"Organization","name":"LinkedIn Learning","url":"https://www.linkedin.com/learning/"},"publisher":{"@type":"Organization","name":"LinkedIn Learning","url":"https://www.linkedin.com/learning/"},"hasCourseInstance":{"@type":"CourseInstance","courseMode":"online","courseWorkload":"PT3H50M55S","instructor":[{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"}]},"inLanguage":"en","name":"CSS: Combining Grid and Flexbox","offers":[{"@type":"Offer","category":"Subscription"},{"@type":"Offer","category":"Paid","price":"50.46","priceCurrency":"SGD"}],"description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","image":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","creator":[{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"}],"author":[{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"}],"dateCreated":"2021-08-04","datePublished":"2021-08-04","thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","timeRequired":"PT3H50M55S","totalHistoricalEnrollment":9592,"url":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox","about":[{"@type":"Thing","url":"https://www.linkedin.com/learning/search?keywords=CSS+Grid+Layout","name":"CSS Grid Layout"},{"@type":"Thing","url":"https://www.linkedin.com/learning/search?keywords=CSS+Flexbox","name":"CSS Flexbox"}],"hasPart":[[{"@type":"VideoObject","name":"Custom web layouts with Grid and Flexbox - Introduction","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT59S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/custom-web-layouts-with-grid-and-flexbox"},{"@type":"VideoObject","name":"Using the exercise files - Introduction","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT2M42S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/using-the-exercise-files"},{"@type":"VideoObject","name":"What you should know - Introduction","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT1M32S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/what-you-should-know"},{"@type":"VideoObject","name":"Using development tools - Introduction","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT5M7S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/using-development-tools"}],[{"@type":"VideoObject","name":"What is Flexbox? - 1. What Is Flex?","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT2M38S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/what-is-flexbox"},{"@type":"VideoObject","name":"Flexbox syntax - 1. What Is Flex?","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT4M16S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/flexbox-syntax"},{"@type":"VideoObject","name":"Flexbox container properties - 1. What Is Flex?","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT3M4S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/flexbox-container-properties"},{"@type":"VideoObject","name":"Flexbox item properties - 1. What Is Flex?","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT8M46S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/flexbox-item-properties"},{"@type":"VideoObject","name":"Using Flexbox: Challenge - 1. What Is Flex?","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT2M56S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/using-flexbox-challenge"},{"@type":"VideoObject","name":"Using Flexbox: Solution - 1. What Is Flex?","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT5M35S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/using-flexbox-solution"}],[{"@type":"VideoObject","name":"What is Grid? - 2. What is Grid?","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT3M8S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/what-is-grid"},{"@type":"VideoObject","name":"Grid syntax - 2. What is Grid?","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT2M12S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/grid-syntax"},{"@type":"VideoObject","name":"How does Grid work? - 2. What is Grid?","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT8M22S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/how-does-grid-work"},{"@type":"VideoObject","name":"Grid container properties - 2. What is Grid?","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT10M6S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/grid-container-properties"},{"@type":"VideoObject","name":"Grid item properties - 2. What is Grid?","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT9M50S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/grid-item-properties"},{"@type":"VideoObject","name":"Functions and keywords - 2. What is Grid?","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT8M29S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/functions-and-keywords"},{"@type":"VideoObject","name":"Using Grid: Challenge - 2. What is Grid?","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT2M57S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/using-grid-challenge"},{"@type":"VideoObject","name":"Using Grid: Solution - 2. What is Grid?","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT4M44S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/using-grid-solution"}],[{"@type":"VideoObject","name":"Grid vs. Flexbox - 3. Combining Technologies","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT5M31S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/grid-vs-flexbox"},{"@type":"VideoObject","name":"Combining Flexbox and Grid - 3. Combining Technologies","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT2M2S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/combining-flexbox-and-grid"},{"@type":"VideoObject","name":"Analyzing a layout - 3. Combining Technologies","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT2M43S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/analyzing-a-layout"},{"@type":"VideoObject","name":"Choosing the right solution for the job - 3. Combining Technologies","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT3M13S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/choosing-the-right-solution-for-the-job"},{"@type":"VideoObject","name":"Using Grid and Flexbox: Challenge - 3. Combining Technologies","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT4M14S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/using-grid-and-flexbox-challenge"},{"@type":"VideoObject","name":"Using Grid and Flexbox: Solution - 3. Combining Technologies","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT7M","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/using-grid-and-flexbox-solution"}],[{"@type":"VideoObject","name":"Overview of the project - 4. Build a Webpage Using Flexbox and Grid","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT2M41S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/overview-of-the-project"},{"@type":"VideoObject","name":"Webpage header with hero section - 4. Build a Webpage Using Flexbox and Grid","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT8M30S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/webpage-header-with-hero-section"},{"@type":"VideoObject","name":"Create a hamburger menu for mobile - 4. Build a Webpage Using Flexbox and Grid","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT7M12S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/create-a-hamburger-menu-for-mobile"},{"@type":"VideoObject","name":"Create a horizontal menu for desktops - 4. Build a Webpage Using Flexbox and Grid","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT7M52S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/create-a-horizontal-menu-for-desktops"},{"@type":"VideoObject","name":"Web cards, part 1 - 4. Build a Webpage Using Flexbox and Grid","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT5M56S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/web-cards-part-1"},{"@type":"VideoObject","name":"Web cards, part 2 - 4. Build a Webpage Using Flexbox and Grid","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT6M56S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/web-cards-part-2"},{"@type":"VideoObject","name":"CTA summaries - 4. Build a Webpage Using Flexbox and Grid","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT3M29S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/cta-summaries"},{"@type":"VideoObject","name":"Team section for mobile - 4. Build a Webpage Using Flexbox and Grid","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT8M19S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/team-section-for-mobile"},{"@type":"VideoObject","name":"Team section for desktops - 4. Build a Webpage Using Flexbox and Grid","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT3M44S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/team-section-for-desktops"},{"@type":"VideoObject","name":"Problem section - 4. Build a Webpage Using Flexbox and Grid","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT5M24S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/problem-section"},{"@type":"VideoObject","name":"Media objects for mobile - 4. Build a Webpage Using Flexbox and Grid","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT6M59S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/media-objects-for-mobile"},{"@type":"VideoObject","name":"Media objects for desktop - 4. Build a Webpage Using Flexbox and Grid","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT4M48S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/media-objects-for-desktop"},{"@type":"VideoObject","name":"Picture gallery - 4. Build a Webpage Using Flexbox and Grid","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT9M45S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/picture-gallery"},{"@type":"VideoObject","name":"Footer for large screen - 4. Build a Webpage Using Flexbox and Grid","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT7M5S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/footer-for-large-screen"},{"@type":"VideoObject","name":"Footer for extra large screens - 4. Build a Webpage Using Flexbox and Grid","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT6M4S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/footer-for-extra-large-screens"}],[{"@type":"VideoObject","name":"Overview of project - 5. Build a Form Using Flexbox and Grid","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT3M24S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/overview-of-project"},{"@type":"VideoObject","name":"Form for mobile - 5. Build a Form Using Flexbox and Grid","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT3M57S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/form-for-mobile"},{"@type":"VideoObject","name":"Form for desktops - 5. Build a Form Using Flexbox and Grid","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT6M17S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/form-for-desktops"}],[{"@type":"VideoObject","name":"Compatibility and resources - 6. Support","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT3M4S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/compatibility-and-resources"},{"@type":"VideoObject","name":"Feature queries - 6. Support","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT6M46S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/feature-queries"}],[{"@type":"VideoObject","name":"Next steps - Conclusion","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT37S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/next-steps"}]],"syllabusSections":[{"@type":"Syllabus","name":"Custom web layouts with Grid and Flexbox","timeRequired":"PT59S","description":"In this video, explore a course overview and get an introduction to this course."},{"@type":"Syllabus","name":"Using the exercise files","timeRequired":"PT2M42S","description":"In this video, learn how to use the exercise files."},{"@type":"Syllabus","name":"What you should know","timeRequired":"PT1M32S"},{"@type":"Syllabus","name":"Using development tools","timeRequired":"PT5M7S"},{"@type":"Syllabus","name":"What is Flexbox?","timeRequired":"PT2M38S","description":"CSS Flexible Box Layout Module (Flexbox) is a layout mode used almost exclusively in responsive websites. It provides for a better arrangement of all of the page elements that behave in a predictable mode. Flexbox deals with the layout one dimension at a time, either as a row or a column."},{"@type":"Syllabus","name":"Flexbox syntax","timeRequired":"PT4M16S","description":"Flexbox has several properties that allow you to control how elements will lay out along their relevant axis and allow for customization of the display of elements."},{"@type":"Syllabus","name":"Flexbox container properties","timeRequired":"PT3M4S","description":"Flexbox’s underlying principle is to make layouts flexible and intuitive. To accomplish this, it lets containers decide for themselves how to evenly distribute their children, including their size and the space between them."},{"@type":"Syllabus","name":"Flexbox item properties","timeRequired":"PT8M46S"},{"@type":"Syllabus","name":"Using Flexbox: Challenge","timeRequired":"PT2M56S"},{"@type":"Syllabus","name":"Using Flexbox: Solution","timeRequired":"PT5M35S","description":"Flexbox is all about taking a bunch of things that have varying sizes and fitting them into a container that itself has a varying size. Flexbox tries to create the best possible layout for your items, giving bigger items more space and smaller items less space, thus preserving the readability of content. In this video, explore some examples of when using Flexbox makes the most sense."},{"@type":"Syllabus","name":"What is Grid?","timeRequired":"PT3M8S","description":"Grid has a slew of properties that allow you to control how elements will lay out along both the horizontal and vertical axis. Learning the ins and outs of the Grid specification to customize and control your layouts."},{"@type":"Syllabus","name":"Grid syntax","timeRequired":"PT2M12S","description":"CSS Grid is a flexible layout system designed for controlling larger page layouts. It is a two-dimensional system, meaning it can handle both columns and rows."},{"@type":"Syllabus","name":"How does Grid work?","timeRequired":"PT8M22S","description":"A grid is a set of intersecting horizontal and vertical lines defining columns and rows. Elements can be placed onto the grid within these column and row lines. In this video, learn how to create a few layouts to show you how Grid works."},{"@type":"Syllabus","name":"Grid container properties","timeRequired":"PT10M6S","description":"Grid, like Flexbox, is a value of a grid that you apply to the display property. Therefore, to tell the browser that you want to use a grid layout, you use display: grid. Once you have done this, that element becomes a grid container and any direct children will start to participate in Grid formatting context. You can control all sorts of Grid behaviors by augmenting your grid container with subgrid properties."},{"@type":"Syllabus","name":"Grid item properties","timeRequired":"PT9M50S","description":"A grid container contains grid items. There are several ways to control the grid items by using your own set of subgrid properties. In this video, learn how to use these to lay out your grid in useful and effective ways."},{"@type":"Syllabus","name":"Functions and keywords","timeRequired":"PT8M29S","description":"CSS Grid has a few really helpful keywords and functions that allow you to really dial in your grid-based layouts. These enhance what you can already do with Grid. In this video, learn how you can harness the power of Grid by utilizing these property modifiers."},{"@type":"Syllabus","name":"Using Grid: Challenge","timeRequired":"PT2M57S"},{"@type":"Syllabus","name":"Using Grid: Solution","timeRequired":"PT4M44S"},{"@type":"Syllabus","name":"Grid vs. Flexbox","timeRequired":"PT5M31S","description":"What should you use: Grid or Flexbox? They seem similar, but which one is best? In this video, learn what each shines at and what the strengths and weaknesses of each are."},{"@type":"Syllabus","name":"Combining Flexbox and Grid","timeRequired":"PT2M2S","description":"To determine if Flexbox or CSS Grid works better for your development workflow, creating a standard layout that only uses one or the other is a good way to see how they work and if there are advantages of one over the another. Sometimes, you may need to utilize both to accomplish your layout."},{"@type":"Syllabus","name":"Analyzing a layout","timeRequired":"PT2M43S","description":"The first step in your web design journey should be to analyze the layout. In this video, learn how to identify sections that are best suited for Flexbox and Grid."},{"@type":"Syllabus","name":"Choosing the right solution for the job","timeRequired":"PT3M13S","description":"Asking whether your design should use Grid or Flexbox is a bit like asking if your design should use font size or color. You should probably use both, as needed and required."},{"@type":"Syllabus","name":"Using Grid and Flexbox: Challenge","timeRequired":"PT4M14S"},{"@type":"Syllabus","name":"Using Grid and Flexbox: Solution","timeRequired":"PT7M"},{"@type":"Syllabus","name":"Overview of the project","timeRequired":"PT2M41S","description":"In this video, learn how to build out a responsive website that takes advantage of both Grid and Flexbox so you can get the exact layout you want."},{"@type":"Syllabus","name":"Webpage header with hero section","timeRequired":"PT8M30S","description":"Your webpage will have a page header that contains a hero image and a call to action. In this video, learn how to combine both Grid and Flexbox to get your layout to function exactly as you want it to."},{"@type":"Syllabus","name":"Create a hamburger menu for mobile","timeRequired":"PT7M12S","description":"Starting at the mobile size layout, you need to focus on your navigation. To save space, the navigation will reside within the hamburger menu and appear as needed."},{"@type":"Syllabus","name":"Create a horizontal menu for desktops","timeRequired":"PT7M52S","description":"For larger screen layouts, you have the necessary real estate to display the entire navigation. In this video, learn how to build out a horizontal-based menu for larger screens."},{"@type":"Syllabus","name":"Web cards, part 1","timeRequired":"PT5M56S","description":"The third section of your website will contain cards. Cards are those little rectangles full of inclusive images and text that are a great option when it comes to balancing clear aesthetics with simple usability. In this video, learn how to harness both Grid and Flexbox to accomplish this portion of your page."},{"@type":"Syllabus","name":"Web cards, part 2","timeRequired":"PT6M56S"},{"@type":"Syllabus","name":"CTA summaries","timeRequired":"PT3M29S","description":"Both the second and fourth sections of your webpage will have a similar layout. In this video, learn how to utilize the same sorts of properties and techniques to build this portion of the page layout."},{"@type":"Syllabus","name":"Team section for mobile","timeRequired":"PT8M19S","description":"In this video, learn how to create overlaps without position and augment the order of items using Grid."},{"@type":"Syllabus","name":"Team section for desktops","timeRequired":"PT3M44S","description":"In this video, learn about overlaps and order."},{"@type":"Syllabus","name":"Problem section","timeRequired":"PT5M24S"},{"@type":"Syllabus","name":"Media objects for mobile","timeRequired":"PT6M59S","description":"The media object is a UI element perfect for repeatable and nestable content. In this video, learn how to use these on this section of your website. Both Grid and Flexbox will allow you to create these responsive elements."},{"@type":"Syllabus","name":"Media objects for desktop","timeRequired":"PT4M48S"},{"@type":"Syllabus","name":"Picture gallery","timeRequired":"PT9M45S","description":"In the first section of your webpage, you have a tiled layout at larger screen sizes. To create an appealing grid of elements, lean on the power of Flexbox and Gird. You can create a beautiful mosaic grid of images that are of various sizes."},{"@type":"Syllabus","name":"Footer for large screen","timeRequired":"PT7M5S","description":"Learn how to use both Flexbox and Grid to create your footer. This is a pretty complex component, but using these features together makes it much easier to create a responsive, good-looking footer."},{"@type":"Syllabus","name":"Footer for extra large screens","timeRequired":"PT6M4S"},{"@type":"Syllabus","name":"Overview of project","timeRequired":"PT3M24S","description":"In this video, learn how to create a form for your webpage. Forms are always challenging since the layout needs to change and the usability of these elements is paramount."},{"@type":"Syllabus","name":"Form for mobile","timeRequired":"PT3M57S","description":"There are multiple approaches to laying out the form elements. In this video, explore several methods and learn how to utilize those which are best suited for your form at small screen sizes."},{"@type":"Syllabus","name":"Form for desktops","timeRequired":"PT6M17S","description":"Once your page gets large, you have a couple of issues that you want to address. Since you have more horizontal real estate, it makes sense to augment the form elements so that they maximize the available space. In this video, learn how to use Grid and nested grids to ensure that your layout looks great on larger screens."},{"@type":"Syllabus","name":"Compatibility and resources","timeRequired":"PT3M4S","description":"In some cases, you need to ensure that your webpages are backward compatible. There are several approaches you can utilize to make both Flexbox and Grid work in older browsers. In this video, discover some resources for finding potential pitfalls and explore some code-based fixes."},{"@type":"Syllabus","name":"Feature queries","timeRequired":"PT6M46S"},{"@type":"Syllabus","name":"Next steps","timeRequired":"PT37S"}],"aggregateRating":{"@type":"AggregateRating","ratingCount":209,"ratingValue":4.8,"bestRating":5,"worstRating":1},"review":[{"@type":"Review","author":{"@type":"Person","name":"Namnika Janbandhu","jobTitle":"MCA Student (FSD Branch) || Front-End Software Developer (Fresher) || Proficient in HTML, CSS, JavaScript, React.js and Python","url":"https://in.linkedin.com/in/namnika-janbandhu"},"reviewRating":{"@type":"Rating","ratingValue":5},"reviewBody":"This is just an amazing course, what I was looking for!\nThank you for this course!","datePublished":"2024-06-29T06:33:28.193Z","publisher":{"@type":"Organization","name":"LinkedIn"},"bestRating":5,"worstRating":1},{"@type":"Review","author":{"@type":"Person","name":"Roderick Mitchell","jobTitle":"Unemployed","url":"https://www.linkedin.com/in/roderick-mitchell-194b011b8"},"reviewRating":{"@type":"Rating","ratingValue":5},"reviewBody":"This was the exact course I was looking for she was very clear and very understanding, she taught me something that I didn't know about flexbox and grid how to use them together .The Challenger was great and fun I would be doing this course over again","datePublished":"2024-02-04T15:22:49.649Z","publisher":{"@type":"Organization","name":"LinkedIn"},"bestRating":5,"worstRating":1},{"@type":"Review","author":{"@type":"Person","name":"Julian Maddock","jobTitle":"ICT Teacher at Box Hill Institute","url":"https://au.linkedin.com/in/julian-maddock-609bb511a"},"reviewRating":{"@type":"Rating","ratingValue":5},"reviewBody":"Excellent so far. Found that I struggled with the first activity, but was able to understand it better with the solution given. ","datePublished":"2023-11-27T02:02:32.878Z","publisher":{"@type":"Organization","name":"LinkedIn"},"bestRating":5,"worstRating":1}],"video":{"@type":"VideoObject","name":"Custom web layouts with Grid and Flexbox - CSS: Combining Grid and Flexbox","author":{"@type":"Person","name":"Emily Kay","description":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","jobTitle":"Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn","url":"https://www.linkedin.com/in/emikay","image":"https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ","description":"Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.","duration":"PT59S","datePublished":"2021-08-04","uploadDate":"2021-08-04","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://www.linkedin.com/learning/css-combining-grid-and-flexbox/custom-web-layouts-with-grid-and-flexbox"},"educationalLevel":"Advanced","educationalCredentialAwarded":[{"@type":"EducationalOccupationalCredential","name":"LinkedIn Learning Certificate of Completion","url":"https://www.linkedin.com/help/learning/answer/a598944/learning-certificates-of-completion-faqs","credentialCategory":"Certificate","offers":[{"@type":"Offer","category":"Subscription"}]}]} </script>  </head> <body dir="ltr">   <a href="#main-content" class="skip-link btn-md btn-primary absolute z-11 -top-[100vh] focus:top-0"> Skip to main content </a> <header class="header base-detail-page__header px-mobile-container-padding bg-color-background-container global-alert-offset sticky-header"> <nav class="nav pt-1.5 pb-2 flex items-center justify-between relative flex-nowrap babymamabear:py-1.5 nav--minified-mobile " aria-label="Primary"> <a href="https://www.linkedin.com/learning/?trk=learning-course_nav-header-logo" class="nav__logo-link link-no-visited-state z-1 mr-auto min-h-[52px] flex items-center babybear:z-0 hover:no-underline focus:no-underline active:no-underline babymamabear:mr-3" data-tracking-control-name="learning-course_nav-header-logo" data-tracking-will-navigate> <div class="learning-logo"> <icon class="learning-logo__inbug onload" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4zqr0f9jf98vi2nkijyc3bex2"></icon> <span class="learning-logo__text" aria-hidden="true">Learning</span> <span class="sr-only">LinkedIn Learning</span> </div> </a> <section class="search-bar relative flex flex-grow h-[40px] bg-cool-gray-20 min-w-0 max-w-full mx-4 rounded-sm babymamabear:mx-0 babymamabear:mb-1.5 babymamabear:bg-color-transparent babymamabear:w-full babymamabear:flex babymamabear:flex-wrap search-bar--minified-mobile" data-current-search-type="LEARNING"> <button class="search-bar__placeholder papabear:hidden text-input w-full mt-1.5 !pl-[14px] border-1 border-solid border-color-border-faint rounded-[2px] h-[40px] max-h-[40px] flex items-center overflow-hidden cursor-text" data-tracking-control-name="learning-course_search-switcher-opener"> <icon class="text-color-icon w-3 h-3 mr-1" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/397vrsk6op88l4981ji1xe1qt"></icon> <div class="search-bar__full-placeholder font-sans text-md text-color-text max-w-[calc(100%-40px)] text-left whitespace-nowrap overflow-hidden text-ellipsis">  Search skills, subjects, or software  </div> <span class="sr-only">Expand search</span> </button> <div class="switcher-tabs__trigger-and-tabs babymamabear:flex"> <button aria-expanded="false" class="switcher-tabs__placeholder flex !h-full !py-0 !pl-2 !pr-1.5 border-r-1 border-solid border-r-color-border-faint babymamabear:hidden tab-md papabear:tab-vertical papabear:justify-start cursor-pointer" data-tracking-control-name="learning-course_switcher-tabs-placeholder" aria-describedby="switcher-description"> <span class="switcher-tabs__placeholder-text m-auto"></span> <icon class="switcher-tabs__caret-down-filled onload pointer-events-none block my-auto min-h-[24px] min-w-[24px] h-[24px] babymamabear:hidden" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/7asbl4deqijhoy3z2ivveispv"></icon> </button> <div id="switcher-description" class="hidden">This button displays the currently selected search type. When expanded it provides a list of search options that will switch the search inputs to match the current selection. </div>  <div class="switcher-tabs hidden z-[1] w-auto min-w-[160px] mb-1.5 py-1 absolute top-[48px] left-0 border-solid border-1 border-color-border-faint papabear:container-raised babymamabear:static babymamabear:w-[100vw] babymamabear:h-[48px] babymamabear:p-0 overflow-y-hidden overflow-x-auto md:overflow-x-hidden"> <ul class="switcher-tabs__list flex flex-1 items-stretch papabear:flex-col" role="tablist"> <li class="switcher-tabs__tab h-[44px] babymamabear:basis-1/2" role="presentation"> <button aria-controls="jobs-search-panel" aria-selected="false" class="switcher-tabs__button w-full h-full tab-md papabear:tab-vertical papabear:justify-start cursor-pointer " data-switcher-type="JOBS" data-tracking-control-name="learning-course_switcher-tabs-jobs-search-switcher" id="job-switcher-tab" role="tab"> Jobs </button> </li> <li class="switcher-tabs__tab h-[44px] babymamabear:basis-1/2" role="presentation"> <button aria-controls="people-search-panel" aria-selected="false" class="switcher-tabs__button w-full h-full tab-md papabear:tab-vertical papabear:justify-start cursor-pointer " data-switcher-type="PEOPLE" data-tracking-control-name="learning-course_switcher-tabs-people-search-switcher" id="people-switcher-tab" role="tab"> People </button> </li> <li class="switcher-tabs__tab h-[44px] babymamabear:basis-1/2" role="presentation"> <button aria-controls="learning-search-panel" aria-selected="true" class="switcher-tabs__button w-full h-full tab-md papabear:tab-vertical papabear:justify-start cursor-pointer tab-selected" data-switcher-type="LEARNING" data-tracking-control-name="learning-course_switcher-tabs-learning-search-switcher" id="learning-switcher-tab" role="tab"> Learning </button> </li> </ul> <button aria-label="Close" class="switcher-tabs__cancel-btn papabear:hidden block w-6 h-6 m-auto text-color-text-low-emphasis" data-tracking-control-name="learning-course_switcher-tabs-cancel-search-switcher" type="button"> <icon class="switcher-tabs__cancel-icon block w-3 h-3 m-auto onload" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </div> </div> <section class="base-search-bar w-full h-full" data-searchbar-type="PEOPLE" aria-labelledby="people-switcher-tab" id="people-search-panel" role="tabpanel"> <form class="base-search-bar__form w-full flex babymamabear:mx-mobile-container-padding babymamabear:flex-col" role="search" action="/pub/dir" data-tracking-control-name="learning-course_people-search-bar_base-search-bar-form"> <section class="dismissable-input text-input !pr-3 bg-color-transparent flex items-center h-[40px] min-w-0 relative babybear:w-full babybear:mb-1 search-input"> <input aria-label="First Name" autocomplete="on" class="dismissable-input__input font-sans text-md text-color-text bg-color-transparent flex items-center flex-1 focus:outline-none placeholder:text-color-text-secondary" data-tracking-control-name="learning-course_people-search-bar_first-name_dismissable-input" maxlength="500" name="firstName" placeholder="First Name" type="search"> <button class="dismissable-input__button text-color-text h-[40px] min-w-[24px] w-[24px] -mr-2 opacity-0 transition-opacity duration-[0.1s] disabled:invisible focus:opacity-100" data-tracking-control-name="learning-course_people-search-bar_first-name_dismissable-input-clear" type="button"> <label class="sr-only">Clear text</label> <icon class="dismissable-input__button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </section> <section class="dismissable-input text-input !pr-3 bg-color-transparent flex items-center h-[40px] min-w-0 relative babybear:w-full babybear:mb-1 search-input"> <input aria-label="Last Name" autocomplete="on" class="dismissable-input__input font-sans text-md text-color-text bg-color-transparent flex items-center flex-1 focus:outline-none placeholder:text-color-text-secondary" data-tracking-control-name="learning-course_people-search-bar_last-name_dismissable-input" maxlength="500" name="lastName" placeholder="Last Name" type="search"> <button class="dismissable-input__button text-color-text h-[40px] min-w-[24px] w-[24px] -mr-2 opacity-0 transition-opacity duration-[0.1s] disabled:invisible focus:opacity-100" data-tracking-control-name="learning-course_people-search-bar_last-name_dismissable-input-clear" type="button"> <label class="sr-only">Clear text</label> <icon class="dismissable-input__button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </section> <input name="trk" value="learning-course_people-search-bar_search-submit" type="hidden"> <button class="base-search-bar__submit-btn block basis-[40px] flex-shrink-0 cursor-pointer babymamabear:invisible babymamabear:ml-[-9999px] babymamabear:w-[1px] babymamabear:h-[1px]" aria-label="Search" data-tracking-control-name="learning-course_people-search-bar_base-search-bar-search-submit" type="submit"> <icon class="base-search-bar__search-icon onload mx-auto" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cb5bsr4tsn2r4sjg9e3ls4tjl"></icon> </button> </form> </section> <section class="base-search-bar w-full h-full" data-searchbar-type="JOBS" aria-labelledby="job-switcher-tab" id="jobs-search-panel" role="tabpanel"> <form class="base-search-bar__form w-full flex babymamabear:mx-mobile-container-padding babymamabear:flex-col" role="search" action="/jobs/search" data-tracking-control-name="learning-course_jobs-search-bar_base-search-bar-form"> <code id="i18n_aria_live_text_no-suggestions" style="display: none"></code> <code id="i18n_aria_live_text_one-suggestion" style="display: none"></code> <code id="i18n_aria_live_text_multiple-suggestions" style="display: none"></code> <section class="dismissable-input text-input !pr-3 bg-color-transparent flex items-center h-[40px] min-w-0 relative babybear:w-full babybear:mb-1 typeahead-input keywords-typeahead-input text-input"> <input aria-autocomplete="list" aria-controls="job-search-bar-keywords-typeahead-list" aria-haspopup="listbox" aria-label="Search job titles or companies" autocomplete="off" class="dismissable-input__input font-sans text-md text-color-text bg-color-transparent flex items-center flex-1 focus:outline-none placeholder:text-color-text-secondary" data-tracking-control-name="learning-course_dismissable-input" id="job-search-bar-keywords" maxlength="500" name="keywords" placeholder="Search job titles or companies" role="combobox" type="search">  <div class="typeahead-input__dropdown container-lined absolute top-[calc(100%+3px)] left-0 w-full rounded-b-md rounded-t-none z-[10] overflow-hidden max-w-none babybear:min-w-full babybear:bottom-0 babybear:overflow-y-auto"> <template class="typeahead-item-template"> <li class="typeahead-input__dropdown-item py-1.5 px-2 hover:cursor-pointer hover:bg-color-surface-new-hover hover:border-y-2 hover:border-solid hover:border-color-container-primary" role="option"> <span class="typeahead-input__dropdown-text font-sans text-sm font-bold text-color-text"></span> </li> </template> <ul class="typeahead-input__dropdown-list w-full" id="job-search-bar-keywords-typeahead-list" role="listbox"></ul> </div>  <button class="dismissable-input__button text-color-text h-[40px] min-w-[24px] w-[24px] -mr-2 opacity-0 transition-opacity duration-[0.1s] disabled:invisible focus:opacity-100" data-tracking-control-name="learning-course_dismissable-input-clear" type="button"> <label class="sr-only">Clear text</label> <icon class="dismissable-input__button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </section>  <code id="i18n_aria_live_text_no-suggestions" style="display: none"></code> <code id="i18n_aria_live_text_one-suggestion" style="display: none"></code> <code id="i18n_aria_live_text_multiple-suggestions" style="display: none"></code> <section class="dismissable-input text-input !pr-3 bg-color-transparent flex items-center h-[40px] min-w-0 relative babybear:w-full babybear:mb-1 typeahead-input location-typeahead-input"> <input aria-autocomplete="list" aria-controls="job-search-bar-location-typeahead-list" aria-haspopup="listbox" aria-label="Location" autocomplete="off" class="dismissable-input__input font-sans text-md text-color-text bg-color-transparent flex items-center flex-1 focus:outline-none placeholder:text-color-text-secondary" data-tracking-control-name="learning-course_dismissable-input" id="job-search-bar-location" maxlength="500" name="location" placeholder="Location" role="combobox" value="Singapore" type="search">  <div class="typeahead-input__dropdown container-lined absolute top-[calc(100%+3px)] left-0 w-full rounded-b-md rounded-t-none z-[10] overflow-hidden max-w-none babybear:min-w-full babybear:bottom-0 babybear:overflow-y-auto"> <template class="typeahead-item-template"> <li class="typeahead-input__dropdown-item py-1.5 px-2 hover:cursor-pointer hover:bg-color-surface-new-hover hover:border-y-2 hover:border-solid hover:border-color-container-primary" role="option"> <span class="typeahead-input__dropdown-text font-sans text-sm font-bold text-color-text"></span> </li> </template> <ul class="typeahead-input__dropdown-list w-full" id="job-search-bar-location-typeahead-list" role="listbox"></ul> </div>  <button class="dismissable-input__button text-color-text h-[40px] min-w-[24px] w-[24px] -mr-2 opacity-0 transition-opacity duration-[0.1s] disabled:invisible focus:opacity-100" data-tracking-control-name="learning-course_dismissable-input-clear" type="button"> <label class="sr-only">Clear text</label> <icon class="dismissable-input__button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </section> <input name="geoId" value="111422291" type="hidden"> <input name="trk" value="learning-course_jobs-search-bar_search-submit" type="hidden"> <button class="base-search-bar__submit-btn block basis-[40px] flex-shrink-0 cursor-pointer babymamabear:invisible babymamabear:ml-[-9999px] babymamabear:w-[1px] babymamabear:h-[1px]" aria-label="Search" data-tracking-control-name="learning-course_jobs-search-bar_base-search-bar-search-submit" type="submit"> <icon class="base-search-bar__search-icon onload mx-auto" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cb5bsr4tsn2r4sjg9e3ls4tjl"></icon> </button> </form> </section> <section class="base-search-bar w-full h-full" data-searchbar-type="LEARNING" aria-labelledby="learning-switcher-tab" id="learning-search-panel" role="tabpanel"> <form class="base-search-bar__form w-full flex babymamabear:mx-mobile-container-padding babymamabear:flex-col" role="search" action="/learning/search" data-tracking-control-name="learning-course_learning-search-bar_base-search-bar-form"> <section class="dismissable-input text-input !pr-3 bg-color-transparent flex items-center h-[40px] min-w-0 relative babybear:w-full babybear:mb-1 search-input"> <input aria-label="Search skills, subjects, or software" autocomplete="on" class="dismissable-input__input font-sans text-md text-color-text bg-color-transparent flex items-center flex-1 focus:outline-none placeholder:text-color-text-secondary" data-tracking-control-name="learning-course_learning-search-bar_keywords_dismissable-input" maxlength="500" name="keywords" placeholder="Search skills, subjects, or software" type="search"> <button class="dismissable-input__button text-color-text h-[40px] min-w-[24px] w-[24px] -mr-2 opacity-0 transition-opacity duration-[0.1s] disabled:invisible focus:opacity-100" data-tracking-control-name="learning-course_learning-search-bar_keywords_dismissable-input-clear" type="button"> <label class="sr-only">Clear text</label> <icon class="dismissable-input__button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </section> <input class="nav__search-uoo" name="upsellOrderOrigin" type="hidden"> <input name="trk" value="learning-course_learning-search-bar_search-submit" type="hidden"> <button class="base-search-bar__submit-btn block basis-[40px] flex-shrink-0 cursor-pointer babymamabear:invisible babymamabear:ml-[-9999px] babymamabear:w-[1px] babymamabear:h-[1px]" aria-label="Search" data-tracking-control-name="learning-course_learning-search-bar_base-search-bar-search-submit" type="submit"> <icon class="base-search-bar__search-icon onload mx-auto" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cb5bsr4tsn2r4sjg9e3ls4tjl"></icon> </button> </form> </section> <div aria-live="polite" class="search-bar__live-text sr-only" role="status"></div> </section>  <div class="nav__cta-container order-3 flex gap-x-1 justify-end min-w-[100px] flex-nowrap flex-shrink-0 babybear:flex-wrap flex-2 babymamabear:min-w-[50px] ">  <a class="nav__button-tertiary btn-md btn-tertiary" href="http://www.linkedin.com/learning/subscription/products?courseSlug=css-combining-grid-and-flexbox&destRedirectURL=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Fcss-combining-grid-and-flexbox&trk=learning-course_nav-header-join&upsellTrk=lil_upsell_nav_subscription&session_redirect=https%3A%2F%2Fwww.linkedin.com%2Flearning%2Fcss-combining-grid-and-flexbox%3Ftrk%3Dlearning-topics_learning-search-card_search-card" data-tracking-control-name="lil_upsell_nav_subscription" data-tracking-impression-name="lil_upsell_nav_subscription" data-test-live-nav-primary-cta data-tracking-will-navigate> Start free trial </a> <a class="nav__button-secondary btn-secondary-emphasis btn-md" href="https://www.linkedin.com/learning-login/?redirect=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Fcss-combining-grid-and-flexbox%3Ftrk%3Dlearning-topics_learning-search-card_search-card%26trk%3Dlearning-topics_learning-search-card_search-card&fromSignIn=true&session_redirect=https%3A%2F%2Fwww.linkedin.com%2Flearning%2Fcss-combining-grid-and-flexbox%3Ftrk%3Dlearning-topics_learning-search-card_search-card&trk=learning-course_nav-header-signin" data-tracking-control-name="learning-course_nav-header-signin" data-tracking-will-navigate> Sign in </a> <a aria-label="Sign in" class="nav__link-person papabear:hidden mamabear:hidden" data-tracking-control-name="learning-course_nav-header-signin" data-tracking-will-navigate href="https://www.linkedin.com/learning-login/?redirect=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Fcss-combining-grid-and-flexbox%3Ftrk%3Dlearning-topics_learning-search-card_search-card%26trk%3Dlearning-topics_learning-search-card_search-card&fromSignIn=true&session_redirect=https%3A%2F%2Fwww.linkedin.com%2Flearning%2Fcss-combining-grid-and-flexbox%3Ftrk%3Dlearning-topics_learning-search-card_search-card&trk=learning-course_nav-header-signin"> <img class="inline-block relative rounded-[50%] w-4 h-4 bg-color-entity-ghost-background" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/9c8pery4andzj6ohjkjp54ma2" data-ghost-classes="bg-color-entity-ghost-background" data-ghost-url="https://static.licdn.com/aero-v1/sc/h/9c8pery4andzj6ohjkjp54ma2" alt> </a> </div>   </nav> </header>  <div class="cta-banner "> <div class="enterprise-nav"> <div class="enterprise-nav__content-wrapper"> <p id="enterprise-nav-solutions" class="enterprise-nav__content" tabindex="-1"> Solutions for: </p> <a href="https://learning.linkedin.com/for-entire-companies?src=li-learning-nav&trk=learning-course_enterprise-nav" aria-labelledby="enterprise-nav-solutions business-nav-business" class="enterprise-nav__content" data-tracking-control-name="learning-course_enterprise-nav" data-tracking-will-navigate="true" id="business-nav-business">Business</a> <a href="https://learning.linkedin.com/for-higher-education?src=li-learning-nav&trk=learning-course_enterprise-nav" aria-labelledby="enterprise-nav-solutions business-nav-education" class="enterprise-nav__content" data-tracking-control-name="learning-course_enterprise-nav" data-tracking-will-navigate="true" id="business-nav-education">Higher Education</a> <a href="https://learning.linkedin.com/for-governments?src=li-learning-nav&trk=learning-course_enterprise-nav" aria-labelledby="enterprise-nav-solutions business-nav-government" class="enterprise-nav__content" data-tracking-control-name="learning-course_enterprise-nav" data-tracking-will-navigate="true" id="business-nav-government">Government</a> <a href="/learning/subscription/teams?veh=lil_upx&src=li-learning-nav&trk=learning-course_enterprise-nav" aria-labelledby="enterprise-nav-solutions business-nav-buy" class="enterprise-nav__content" data-test-live-enterprise-upsell="true" data-tracking-control-name="learning-course_enterprise-nav" data-tracking-will-navigate="true" data-tracking-impression-name="lil_upsell_learning-course_enterprise-nav_teambuy" id="business-nav-buy">Buy for my team</a> </div> </div>   </div> <main class="main papabear:flex papabear:w-content-max-w papabear:mx-auto papabear:pt-desktop-content-top-margin mamabear:pt-desktop-content-top-margin " id="main-content" role="main"> <section class="core-rail mx-auto papabear:w-core-rail-width mamabear:max-w-[790px] babybear:max-w-[790px]"> <ol class="breadcrumb__list"> <li class="breadcrumb__item"> <a class="breadcrumb__link" href="https://www.linkedin.com/learning/browse?trk=learning-course_breadcrumb" data-tracking-control-name="learning-course_breadcrumb" data-tracking-will-navigate>All topics</a> </li> <li class="breadcrumb__item"> <a class="breadcrumb__link" href="https://www.linkedin.com/learning/topics/creative?trk=learning-course_breadcrumb" data-tracking-control-name="learning-course_breadcrumb" data-tracking-will-navigate>Creative</a> </li> <li class="breadcrumb__item"> <a class="breadcrumb__link" href="https://www.linkedin.com/learning/topics/web-design?trk=learning-course_breadcrumb" data-tracking-control-name="learning-course_breadcrumb" data-tracking-will-navigate>Web Design</a> </li> <li class="breadcrumb__item"> <a class="breadcrumb__link" href="https://www.linkedin.com/learning/topics/responsive-web-design?trk=learning-course_breadcrumb" data-tracking-control-name="learning-course_breadcrumb" data-tracking-will-navigate>Responsive Web Design</a> </li> </ol> <script type="application/ld+json"> {"@context":"http://schema.org/","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"All topics","item":"https://www.linkedin.com/learning/browse"},{"@type":"ListItem","position":2,"name":"Creative","item":"https://www.linkedin.com/learning/topics/creative"},{"@type":"ListItem","position":3,"name":"Web Design","item":"https://www.linkedin.com/learning/topics/web-design"},{"@type":"ListItem","position":4,"name":"Responsive Web Design","item":"https://www.linkedin.com/learning/topics/responsive-web-design"}]} </script> <section class="top-card-layout container-lined overflow-hidden babybear:rounded-[0px]"> <section class="top-card__image-container"> <img class="top-card__image" alt="CSS: Combining Grid and Flexbox" data-delayed-url="https://media.licdn.com/dms/image/v2/C560DAQEiVxZXG6qWcQ/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1627923772402?e=2147483647&v=beta&t=s27ZR4nQhK6_39778o4qRFzFMOQ2u4CIIJQ7dp6ndAQ"> <a class="top-card__overlay-button" data-tracking-control-name="course_preview" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/custom-web-layouts-with-grid-and-flexbox?autoplay=true&trk=course_preview"> <span class="top-card__preview-cta "> <icon class="top-card__preview-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l"> </icon> <span class="top-card__preview-cta-text">Preview</span> </span>  </a> </section> <div class="top-card-layout__card relative p-2 papabear:p-details-container-padding"> <div class="top-card-layout__entity-info-container flex flex-wrap papabear:flex-nowrap"> <div class="top-card-layout__entity-info flex-grow flex-shrink-0 basis-0 babybear:flex-none babybear:w-full babybear:flex-none babybear:w-full"> <h1 class="top-card-layout__title font-sans text-lg papabear:text-xl font-bold leading-open text-color-text mb-0"> CSS: Combining Grid and Flexbox </h1> <h2 class="top-card-layout__headline break-words font-sans text-md leading-open text-color-text"> <div class="top-card__headline-row"> <span class="top-card__headline-row-item top-card__headline-row-item--large">With Emily Kay</span> <span class="top-card__headline-row-item">Liked by 507 users</span> </div> <div class="top-card__headline-row"> <span class="top-card__headline-row-item">Duration: 3h 50m</span> <span class="top-card__headline-row-item">Skill level: Advanced</span> <span class="top-card__headline-row-item">Released: 8/4/2021</span> </div> </h2>   <div class="top-card-layout__cta-container flex flex-wrap mt-0.5 papabear:mt-0 ml-[-12px]"> <a href="http://www.linkedin.com/learning/subscription/products?courseSlug=css-combining-grid-and-flexbox&destRedirectURL=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Fcss-combining-grid-and-flexbox&trk=course_info&upsellTrk=lil_upsell_course_info_subscription" data-tracking-control-name="lil_upsell_course_info_subscription" data-tracking-impression-name="lil_upsell_course_info_subscription" data-litms-tracking-control-name="lil_upsell_course_info_subscription" data-tracking-will-navigate class="top-card__upsell-link top-card-layout__cta mt-2 ml-1.5 h-auto babybear:flex-auto top-card-layout__cta--primary btn-md btn-primary" data-test-live-course-sub-upsell> Start my 1-month free trial </a> <a class="buy-for-your-team-cta__link top-card-layout__cta mt-2 ml-1.5 h-auto babybear:flex-auto top-card-layout__cta--secondary btn-md btn-secondary" href="/learning/subscription/teams?veh=lil_upx&src=li-lil-upsell&trk=learning-course_buy-for-your-team-cta" data-tracking-control-name="learning-course_buy-for-your-team-cta" data-tracking-impression-name="lil_upsell_learning-course_buy-for-your-team-cta_teambuy" data-test-live-buy-for-your-team-upsell data-tracking-will-navigate> Buy for my team </a> </div> </div>  </div>   </div> </section> <div class="details mx-details-container-padding"> <section class="core-section-container my-3 course-details">  <h2 class="core-section-container__title section-title"> Course details </h2>  <div class="core-section-container__content break-words"> <section class="show-more-less-html course-details__description" data-max-lines="4"> <div class="show-more-less-html__markup show-more-less-html__markup--clamp-after-4 relative overflow-hidden"> With Grid and Flexbox, CSS is changing dramatically. Whereas in the past, creating complex layouts required all sorts of CSS hacks, JavaScript, or both, now you can use Flexbox and Grid—tools designed specifically for layouts—to create responsive web pages with precise, custom layouts. In this course, Emily Kay covers the basics of Flexbox and Grid separately, from syntaxes to properties to how they work in general. After that, she details instances where you may need to use both to accomplish your layout goals. As Emily shows, when you use Flexbox and Grid together to combine their separate strengths, you can create and display complex web content in a beautiful, user-friendly way. </div> <button class="show-more-less-html__button show-more-less-button show-more-less-html__button--more ml-0.5" data-tracking-control-name="learning-course_show-more-html-btn" aria-label="i18n_show_more" aria-expanded="false">  Show more <icon class="show-more-less-html__button-icon show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less-html__button show-more-less-button show-more-less-html__button--less ml-0.5" data-tracking-control-name="learning-course_show-less-html-btn" aria-label="i18n_show_less" aria-expanded="true">  Show less <icon class="show-more-less-html__button-icon show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button>  </section> </div> </section> <section class="core-section-container my-3 course-skills">  <h2 class="core-section-container__title section-title"> Skills you’ll gain </h2>  <div class="core-section-container__content break-words"> <ul class="course-skills__skill-list"> <li class="course-skills__skill-list-item"> <a href="https://www.linkedin.com/learning/search?keywords=CSS+Grid+Layout&trk=learning-course_pill-list" data-tracking-control-name="learning-course_pill-list" data-tracking-will-navigate class="pill flex w-fit mr-[6px] mb-1 hover:no-underline skill-pill"> CSS Grid Layout </a> </li> <li class="course-skills__skill-list-item"> <a href="https://www.linkedin.com/learning/search?keywords=CSS+Flexbox&trk=learning-course_pill-list" data-tracking-control-name="learning-course_pill-list" data-tracking-will-navigate class="pill flex w-fit mr-[6px] mb-1 hover:no-underline skill-pill"> CSS Flexbox </a> </li> </ul> </div> </section> <section class="core-section-container my-3">  <h2 class="core-section-container__title section-title"> Earn a sharable certificate </h2>  <div class="core-section-container__content break-words"> <p class="course-certificate__body-paragraph">Share what you’ve learned, and be a standout professional in your desired industry with a certificate showcasing your knowledge gained from the course.</p> <div class="course-certificate__image-container"> <img class="course-certificate__certificate-image" alt="Sample certificate" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/52nu8qc7cfcn7vrftr7ttceqt"> <div> <h3 class="course-certificate__detail-list-heading"> <div class="learning-logo"> <icon class="learning-logo__inbug onload" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4zqr0f9jf98vi2nkijyc3bex2"></icon> <span class="learning-logo__text learning-logo__text--show-on-mobile" aria-hidden="true">Learning</span> <span class="sr-only">LinkedIn Learning</span> </div> <span>Certificate of Completion</span> </h3> <ul> <li class="course-certificate__detail-list-item"> <div class="course-certificate__detail-list-item-icon-wrapper"><icon data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5lqa4dj5v9gp6yjh6s6iwtdbb"></icon></div> <p class="course-certificate__detail-list-item-text">Showcase on your LinkedIn profile under “Licenses and Certificate” section</p> </li> <li class="course-certificate__detail-list-item"> <div class="course-certificate__detail-list-item-icon-wrapper"><icon data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5lqa4dj5v9gp6yjh6s6iwtdbb"></icon></div> <p class="course-certificate__detail-list-item-text">Download or print out as PDF to share with others</p> </li> <li class="course-certificate__detail-list-item"> <div class="course-certificate__detail-list-item-icon-wrapper"><icon data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5lqa4dj5v9gp6yjh6s6iwtdbb"></icon></div> <p class="course-certificate__detail-list-item-text">Share as image online to demonstrate your skill</p> </li> </ul> </div> </div> </div> </section> <section class="core-section-container my-3 course-instructors">  <h2 class="core-section-container__title section-title"> Meet the instructor </h2>  <div class="core-section-container__content break-words"> <ul class="course-instructors__list"> <li class="course-instructors__list-item"> <a href="https://www.linkedin.com/in/emikay?trk=learning-course_instructor" target="_self" data-tracking-control-name="learning-course_instructor" data-tracking-will-navigate class="base-card relative w-full hover:no-underline focus:no-underline base-card--link base-main-card flex flex-wrap py-2 pr-2 babybear:pr-0 base-main-card--link ">  <img class="inline-block relative rounded-[50%] w-6 h-6 " data-delayed-url="https://media.licdn.com/dms/image/v2/C5603AQEaElMgab3Llw/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1571374152077?e=2147483647&v=beta&t=AZElYj53ztNw_vz75xRXUAA_8gnd3tVudymDiOBhXMk" data-ghost-classes="bg-color-entity-ghost-background" data-ghost-url="https://static.licdn.com/aero-v1/sc/h/9c8pery4andzj6ohjkjp54ma2" alt="Click here to view Emily Kay’s instructor page"> <div class="base-main-card__info self-center ml-1 flex-1 relative break-words papabear:min-w-0 mamabear:min-w-0 babybear:w-full ">  <h3 class="base-main-card__title font-sans text-[18px] font-bold text-color-text overflow-hidden "> Emily Kay </h3> <h4 class="base-main-card__subtitle body-text text-color-text overflow-hidden "> Professor at SDCCD, MiraCosta College, Freelancer web developer and Author at LinkedIn </h4>   </div>  </a> </li> </ul> </div> </section> <section class="core-section-container my-3 reviews-feed">  <h2 class="core-section-container__title section-title"> Learner reviews </h2>  <div class="core-section-container__content break-words"> <div class="reviews-feed__ratings-summary"> <section class="ratings-summary"> <div class="ratings-summary__overall-rating"> <h3 class="ratings-summary__header"><span class="ratings-summary__rating-average">4.8</span> <span class="ratings-summary__rating-max">out of 5</span></h3> <figure class="ratings-summary__figure"> <span class="star-rating" role="img" aria-label="Rating: 4.8 out of 5 stars"> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> </span> <figcaption class="ratings-summary__ratings-total">209 ratings</figcaption> </figure> </div> <div class="ratings-summary__breakdown"> <div class="ratings-summary__disclaimer"> <div class="tooltip"> <button class="tooltip__trigger ratings-summary__disclaimer-trigger" data-tracking-control-name="toggle_disclaimer" type="button"> <icon class="ratings-summary__disclaimer-icon" data-svg-class-name="ratings-summary__disclaimer-icon-svg" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/g8uts9v3k83n9e3iyvcxit0k"> </icon> <span class="ratings-summary__disclaimer-text">How are ratings calculated?</span> </button> <span role="tooltip" class="tooltip__popup" aria-hidden="true"> The overall rating is calculated using the average of submitted ratings. Ratings and reviews can only be submitted when non-anonymous learners complete at least 40% of the course. This helps us avoid fake reviews and spam. </span> </div> </div> <ul> <li> <figure class="ratings-summary__rating-count"> <figcaption class="ratings-summary__rating-count-label"> 5 star </figcaption> <progress class="ratings-summary__progress-bar" max="209" value="178" aria-valuemin="0" aria-valuenow="178" aria-valuemax="209"> Current value: 178 </progress> <span class="ratings-summary__rating-count-percent"> 85% </span> </figure> </li> <li> <figure class="ratings-summary__rating-count"> <figcaption class="ratings-summary__rating-count-label"> 4 star </figcaption> <progress class="ratings-summary__progress-bar" max="209" value="22" aria-valuemin="0" aria-valuenow="22" aria-valuemax="209"> Current value: 22 </progress> <span class="ratings-summary__rating-count-percent"> 11% </span> </figure> </li> <li> <figure class="ratings-summary__rating-count"> <figcaption class="ratings-summary__rating-count-label"> 3 star </figcaption> <progress class="ratings-summary__progress-bar" max="209" value="6" aria-valuemin="0" aria-valuenow="6" aria-valuemax="209"> Current value: 6 </progress> <span class="ratings-summary__rating-count-percent"> 3% </span> </figure> </li> <li> <figure class="ratings-summary__rating-count"> <figcaption class="ratings-summary__rating-count-label"> 2 star </figcaption> <progress class="ratings-summary__progress-bar" max="209" value="3" aria-valuemin="0" aria-valuenow="3" aria-valuemax="209"> Current value: 3 </progress> <span class="ratings-summary__rating-count-percent"> 1% </span> </figure> </li> <li> <figure class="ratings-summary__rating-count"> <figcaption class="ratings-summary__rating-count-label"> 1 star </figcaption> <progress class="ratings-summary__progress-bar" max="209" value="0" aria-valuemin="0" aria-valuenow="0" aria-valuemax="209"> Current value: 0 </progress> <span class="ratings-summary__rating-count-percent"> 0% </span> </figure> </li> </ul> </div> </section> </div> <ul class="reviews-feed__reviews-list"> <li class="reviews-feed__reviews-list-item"> <div class="review-card"> <div class="base-card relative w-full hover:no-underline focus:no-underline base-card--link base-main-card flex flex-wrap py-2 pr-2 babybear:pr-0 base-main-card--link review-card__entity"> <a class="base-card__full-link absolute top-0 right-0 bottom-0 left-0 p-0 z-[2]" href="https://in.linkedin.com/in/namnika-janbandhu" data-tracking-control-name="learning-course" data-tracking-will-navigate> <span class="sr-only"> Namnika Janbandhu  </span> </a> <img class="inline-block relative rounded-[50%] w-6 h-6 " data-delayed-url="https://media.licdn.com/dms/image/v2/D4D03AQERzFSUhFeKpA/profile-displayphoto-shrink_100_100/profile-displayphoto-shrink_100_100/0/1705761806574?e=2147483647&v=beta&t=NcCTWSDF6n90Q76I4iV_YXm-c1dsGZ2WydMzlzObLPs" data-ghost-classes="bg-color-entity-ghost-background" data-ghost-url="https://static.licdn.com/aero-v1/sc/h/9c8pery4andzj6ohjkjp54ma2" alt="Namnika Janbandhu"> <div class="base-main-card__info self-center ml-1 flex-1 relative break-words papabear:min-w-0 mamabear:min-w-0 babybear:w-full ">  <h3 class="base-main-card__title font-sans text-[18px] font-bold text-color-text overflow-hidden "> Namnika Janbandhu  </h3> <h4 class="base-main-card__subtitle body-text text-color-text overflow-hidden "> MCA Student (FSD Branch) || Front-End Software Developer (Fresher) || Proficient in HTML, CSS, JavaScript, React.js and Python </h4>  <div class="body-text text-color-text-low-emphasis base-main-card__metadata"> <div class="review-card__content"> <div class="review-card__centered-row"> <div class="review-card__star-container"> <span class="star-rating" role="img" aria-label="Rating: 5 out of 5 stars"> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> </span> </div> <span class="review-card__rating"> 5/5 </span> <span class="review-card__date"> June 29, 2024 </span> </div> <div class="review-card__text"> This is just an amazing course, what I was looking for! Thank you for this course! </div> <div class="review-card__centered-row review-card__actions"> <a class="review-card__centered-row review-card__action-button" aria-label="Namnika Janbandhu’s comment is helpful" data-tracking-control-name="learning-course_review-card-helpful-button" data-tracking-will-navigate href="https://www.linkedin.com/learning-login/?redirect=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Fcss-combining-grid-and-flexbox%3Ftrk%3Dlearning-topics_learning-search-card_search-card%26trk%3Dlearning-topics_learning-search-card_search-card&trk=learning-course_review-card-helpful-button" rel="nofollow"> <icon class="review-card__centered-row review-card__action-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5ptx189gjbxrh9wf3ncsehms9" data-svg-class-name="review-card__like-icon"></icon> Helpful </a> <span class="review-card__dot-delimiter">·</span> <a class="review-card__centered-row review-card__action-button" aria-label="Report Namnika Janbandhu’s comment" data-tracking-control-name="learning-course_review-card-report-button" data-tracking-will-navigate href="https://www.linkedin.com/learning-login/?redirect=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Fcss-combining-grid-and-flexbox%3Ftrk%3Dlearning-topics_learning-search-card_search-card%26trk%3Dlearning-topics_learning-search-card_search-card&trk=learning-course_review-card-report-button" rel="nofollow"> <icon class="review-card__centered-row review-card__action-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/d04ze1wt0ev8ck8e4ovqk762o" data-svg-class-name="review-card__flag-icon"></icon> Report </a> </div> </div> </div>  </div>  </div> </div> </li> <li class="reviews-feed__reviews-list-item"> <div class="review-card"> <div class="base-card relative w-full hover:no-underline focus:no-underline base-card--link base-main-card flex flex-wrap py-2 pr-2 babybear:pr-0 base-main-card--link review-card__entity"> <a class="base-card__full-link absolute top-0 right-0 bottom-0 left-0 p-0 z-[2]" href="https://www.linkedin.com/in/roderick-mitchell-194b011b8" data-tracking-control-name="learning-course" data-tracking-will-navigate> <span class="sr-only"> Roderick Mitchell  </span> </a> <img class="inline-block relative rounded-[50%] w-6 h-6 bg-color-entity-ghost-background" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/9c8pery4andzj6ohjkjp54ma2" data-ghost-classes="bg-color-entity-ghost-background" data-ghost-url="https://static.licdn.com/aero-v1/sc/h/9c8pery4andzj6ohjkjp54ma2" alt="Roderick Mitchell"> <div class="base-main-card__info self-center ml-1 flex-1 relative break-words papabear:min-w-0 mamabear:min-w-0 babybear:w-full ">  <h3 class="base-main-card__title font-sans text-[18px] font-bold text-color-text overflow-hidden "> Roderick Mitchell  </h3> <h4 class="base-main-card__subtitle body-text text-color-text overflow-hidden "> Unemployed </h4>  <div class="body-text text-color-text-low-emphasis base-main-card__metadata"> <div class="review-card__content"> <div class="review-card__centered-row"> <div class="review-card__star-container"> <span class="star-rating" role="img" aria-label="Rating: 5 out of 5 stars"> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> </span> </div> <span class="review-card__rating"> 5/5 </span> <span class="review-card__date"> February 4, 2024 </span> </div> <div class="review-card__text"> This was the exact course I was looking for she was very clear and very understanding, she taught me something that I didn't know about flexbox and grid how to use them together .The Challenger was great and fun I would be doing this course over again </div> <div class="review-card__centered-row review-card__actions"> <a class="review-card__centered-row review-card__action-button" aria-label="Roderick Mitchell’s comment is helpful" data-tracking-control-name="learning-course_review-card-helpful-button" data-tracking-will-navigate href="https://www.linkedin.com/learning-login/?redirect=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Fcss-combining-grid-and-flexbox%3Ftrk%3Dlearning-topics_learning-search-card_search-card%26trk%3Dlearning-topics_learning-search-card_search-card&trk=learning-course_review-card-helpful-button" rel="nofollow"> <icon class="review-card__centered-row review-card__action-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5ptx189gjbxrh9wf3ncsehms9" data-svg-class-name="review-card__like-icon"></icon> Helpful </a> <span class="review-card__dot-delimiter">·</span> <a class="review-card__centered-row review-card__action-button" aria-label="Report Roderick Mitchell’s comment" data-tracking-control-name="learning-course_review-card-report-button" data-tracking-will-navigate href="https://www.linkedin.com/learning-login/?redirect=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Fcss-combining-grid-and-flexbox%3Ftrk%3Dlearning-topics_learning-search-card_search-card%26trk%3Dlearning-topics_learning-search-card_search-card&trk=learning-course_review-card-report-button" rel="nofollow"> <icon class="review-card__centered-row review-card__action-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/d04ze1wt0ev8ck8e4ovqk762o" data-svg-class-name="review-card__flag-icon"></icon> Report </a> </div> </div> </div>  </div>  </div> </div> </li> <li class="reviews-feed__reviews-list-item"> <div class="review-card"> <div class="base-card relative w-full hover:no-underline focus:no-underline base-card--link base-main-card flex flex-wrap py-2 pr-2 babybear:pr-0 base-main-card--link review-card__entity"> <a class="base-card__full-link absolute top-0 right-0 bottom-0 left-0 p-0 z-[2]" href="https://au.linkedin.com/in/julian-maddock-609bb511a" data-tracking-control-name="learning-course" data-tracking-will-navigate> <span class="sr-only"> Julian Maddock  </span> </a> <img class="inline-block relative rounded-[50%] w-6 h-6 bg-color-entity-ghost-background" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/9c8pery4andzj6ohjkjp54ma2" data-ghost-classes="bg-color-entity-ghost-background" data-ghost-url="https://static.licdn.com/aero-v1/sc/h/9c8pery4andzj6ohjkjp54ma2" alt="Julian Maddock"> <div class="base-main-card__info self-center ml-1 flex-1 relative break-words papabear:min-w-0 mamabear:min-w-0 babybear:w-full ">  <h3 class="base-main-card__title font-sans text-[18px] font-bold text-color-text overflow-hidden "> Julian Maddock  </h3> <h4 class="base-main-card__subtitle body-text text-color-text overflow-hidden "> ICT Teacher at Box Hill Institute </h4>  <div class="body-text text-color-text-low-emphasis base-main-card__metadata"> <div class="review-card__content"> <div class="review-card__centered-row"> <div class="review-card__star-container"> <span class="star-rating" role="img" aria-label="Rating: 5 out of 5 stars"> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> </span> </div> <span class="review-card__rating"> 5/5 </span> <span class="review-card__date"> November 27, 2023 </span> </div> <div class="review-card__text"> Excellent so far. Found that I struggled with the first activity, but was able to understand it better with the solution given. </div> <div class="review-card__centered-row review-card__actions"> <a class="review-card__centered-row review-card__action-button" aria-label="Julian Maddock’s comment is helpful" data-tracking-control-name="learning-course_review-card-helpful-button" data-tracking-will-navigate href="https://www.linkedin.com/learning-login/?redirect=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Fcss-combining-grid-and-flexbox%3Ftrk%3Dlearning-topics_learning-search-card_search-card%26trk%3Dlearning-topics_learning-search-card_search-card&trk=learning-course_review-card-helpful-button" rel="nofollow"> <icon class="review-card__centered-row review-card__action-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5ptx189gjbxrh9wf3ncsehms9" data-svg-class-name="review-card__like-icon"></icon> Helpful </a> <span class="review-card__dot-delimiter">·</span> <a class="review-card__centered-row review-card__action-button" aria-label="Report Julian Maddock’s comment" data-tracking-control-name="learning-course_review-card-report-button" data-tracking-will-navigate href="https://www.linkedin.com/learning-login/?redirect=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Fcss-combining-grid-and-flexbox%3Ftrk%3Dlearning-topics_learning-search-card_search-card%26trk%3Dlearning-topics_learning-search-card_search-card&trk=learning-course_review-card-report-button" rel="nofollow"> <icon class="review-card__centered-row review-card__action-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/d04ze1wt0ev8ck8e4ovqk762o" data-svg-class-name="review-card__flag-icon"></icon> Report </a> </div> </div> </div>  </div>  </div> </div> </li> </ul> </div> </section> </div> </section> <section class="right-rail papabear:w-right-rail-width papabear:ml-column-gutter mamabear:max-w-[790px] mamabear:px-mobile-container-padding babybear:max-w-[790px] babybear:px-mobile-container-padding"> <section class="table-of-contents mb-4 table-of-contents--with-max-height"> <h2 class="table-of-contents__header"> Contents </h2> <ul class="table-of-contents__list"> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> Introduction <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> Introduction <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/custom-web-layouts-with-grid-and-flexbox?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Custom web layouts with Grid and Flexbox </div> <div class="table-of-contents__item-duration"> 59s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/using-the-exercise-files?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Using the exercise files </div> <div class="table-of-contents__item-duration"> 2m 42s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/what-you-should-know?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> What you should know </div> <div class="table-of-contents__item-duration"> 1m 32s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/using-development-tools?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Using development tools </div> <div class="table-of-contents__item-duration"> 5m 7s </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 1. What Is Flex? <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 1. What Is Flex? <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/what-is-flexbox?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> What is Flexbox? </div> <div class="table-of-contents__item-duration"> 2m 38s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/flexbox-syntax?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Flexbox syntax </div> <div class="table-of-contents__item-duration"> 4m 16s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/flexbox-container-properties?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Flexbox container properties </div> <div class="table-of-contents__item-duration"> 3m 4s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/flexbox-item-properties?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Flexbox item properties </div> <div class="table-of-contents__item-duration"> 8m 46s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/using-flexbox-challenge?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Using Flexbox: Challenge </div> <div class="table-of-contents__item-duration"> 2m 56s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/using-flexbox-solution?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Using Flexbox: Solution </div> <div class="table-of-contents__item-duration"> 5m 35s </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 2. What is Grid? <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 2. What is Grid? <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/what-is-grid?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> What is Grid? </div> <div class="table-of-contents__item-duration"> 3m 8s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/grid-syntax?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Grid syntax </div> <div class="table-of-contents__item-duration"> 2m 12s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/how-does-grid-work?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> How does Grid work? </div> <div class="table-of-contents__item-duration"> 8m 22s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/grid-container-properties?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Grid container properties </div> <div class="table-of-contents__item-duration"> 10m 6s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/grid-item-properties?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Grid item properties </div> <div class="table-of-contents__item-duration"> 9m 50s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/functions-and-keywords?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Functions and keywords </div> <div class="table-of-contents__item-duration"> 8m 29s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/using-grid-challenge?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Using Grid: Challenge </div> <div class="table-of-contents__item-duration"> 2m 57s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/using-grid-solution?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Using Grid: Solution </div> <div class="table-of-contents__item-duration"> 4m 44s </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 3. Combining Technologies <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 3. Combining Technologies <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/grid-vs-flexbox?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Grid vs. Flexbox </div> <div class="table-of-contents__item-duration"> 5m 31s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/combining-flexbox-and-grid?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Combining Flexbox and Grid </div> <div class="table-of-contents__item-duration"> 2m 2s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/analyzing-a-layout?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Analyzing a layout </div> <div class="table-of-contents__item-duration"> 2m 43s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/choosing-the-right-solution-for-the-job?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Choosing the right solution for the job </div> <div class="table-of-contents__item-duration"> 3m 13s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/using-grid-and-flexbox-challenge?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Using Grid and Flexbox: Challenge </div> <div class="table-of-contents__item-duration"> 4m 14s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/using-grid-and-flexbox-solution?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Using Grid and Flexbox: Solution </div> <div class="table-of-contents__item-duration"> 7m </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 4. Build a Webpage Using Flexbox and Grid <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 4. Build a Webpage Using Flexbox and Grid <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/overview-of-the-project?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Overview of the project </div> <div class="table-of-contents__item-duration"> 2m 41s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/webpage-header-with-hero-section?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Webpage header with hero section </div> <div class="table-of-contents__item-duration"> 8m 30s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/create-a-hamburger-menu-for-mobile?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Create a hamburger menu for mobile </div> <div class="table-of-contents__item-duration"> 7m 12s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/create-a-horizontal-menu-for-desktops?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Create a horizontal menu for desktops </div> <div class="table-of-contents__item-duration"> 7m 52s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/web-cards-part-1?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Web cards, part 1 </div> <div class="table-of-contents__item-duration"> 5m 56s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/web-cards-part-2?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Web cards, part 2 </div> <div class="table-of-contents__item-duration"> 6m 56s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/cta-summaries?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> CTA summaries </div> <div class="table-of-contents__item-duration"> 3m 29s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/team-section-for-mobile?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Team section for mobile </div> <div class="table-of-contents__item-duration"> 8m 19s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/team-section-for-desktops?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Team section for desktops </div> <div class="table-of-contents__item-duration"> 3m 44s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/problem-section?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Problem section </div> <div class="table-of-contents__item-duration"> 5m 24s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/media-objects-for-mobile?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Media objects for mobile </div> <div class="table-of-contents__item-duration"> 6m 59s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/media-objects-for-desktop?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Media objects for desktop </div> <div class="table-of-contents__item-duration"> 4m 48s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/picture-gallery?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Picture gallery </div> <div class="table-of-contents__item-duration"> 9m 45s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/footer-for-large-screen?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Footer for large screen </div> <div class="table-of-contents__item-duration"> 7m 5s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/footer-for-extra-large-screens?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Footer for extra large screens </div> <div class="table-of-contents__item-duration"> 6m 4s </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 5. Build a Form Using Flexbox and Grid <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 5. Build a Form Using Flexbox and Grid <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/overview-of-project?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Overview of project </div> <div class="table-of-contents__item-duration"> 3m 24s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/form-for-mobile?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Form for mobile </div> <div class="table-of-contents__item-duration"> 3m 57s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/form-for-desktops?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Form for desktops </div> <div class="table-of-contents__item-duration"> 6m 17s </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 6. Support <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 6. Support <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/compatibility-and-resources?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Compatibility and resources </div> <div class="table-of-contents__item-duration"> 3m 4s </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/feature-queries?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Feature queries </div> <div class="table-of-contents__item-duration"> 6m 46s </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> Conclusion <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> Conclusion <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://www.linkedin.com/learning/css-combining-grid-and-flexbox/next-steps?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Locked)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Next steps </div> <div class="table-of-contents__item-duration"> 37s </div> </div> </a> </li> </ul>  </div> </li> </ul> </section> <section class="aside-section-container mb-4 subscription-value-props-aside-section"> <h2 class="aside-section-container__title section-title"> What’s included </h2>  <div class="aside-section-container__content break-words"> <ul> <li class="subscription-value-props-aside-section__list-item"> <span class="subscription-value-props-aside-section__value-prop-label">Practice while you learn</span> <span class="subscription-value-props-aside-section__value-prop-sublabel">1 exercise file</span> </li>  <li class="subscription-value-props-aside-section__list-item"> <span class="subscription-value-props-aside-section__value-prop-label">Learn on the go</span> <span class="subscription-value-props-aside-section__value-prop-sublabel">Access on tablet and phone</span> </li>  </ul> </div> </section> <section class="aside-section-container mb-4 similar-courses-aside-section"> <h2 class="aside-section-container__title section-title"> Similar courses </h2>  <div class="aside-section-container__content break-words"> <ul> <li>  <a href="https://www.linkedin.com/learning/css-advanced-layouts-with-grid-2017?trk=learning-course_similar-courses" target="_self" data-tracking-control-name="learning-course_similar-courses" data-tracking-will-navigate class="base-card relative w-full hover:no-underline focus:no-underline base-card--link base-aside-card flex my-1.5 hover:show-play-button focus:show-play-button base-aside-card--link aside-learning-course-card">  <div class="base-aside-card__media flex-shrink-0 mr-0.5 overflow-hidden relative rounded-md h-[54px] w-[95px]"> <img class="base-aside-card__media-element w-[100px] h-full object-cover" alt data-delayed-url="https://media.licdn.com/dms/image/v2/C4E0DAQFiMj9Bl4IeXg/learning-public-crop_144_256/learning-public-crop_144_256/0/1619129848790?e=2147483647&v=beta&t=_OHAycx7H8xULVJJQ67kIYhgPOmQjZcnxdYDYhdkfRU"> <div class="aside-learning-course-card__duration duration">3h 21m</div> <icon class="base-aside-card__play-button w-auto play-button overlay-center" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/9n9raq7fmdu241tpsxwodsmcd" data-svg-class-name="base-aside-card__play-button-svg"></icon> </div> <div class="base-aside-card__info self-center pl-0.5 flex flex-col flex-1"> <h3 class="base-aside-card__title font-sans text-md font-bold text-color-text relative"> CSS: Advanced Layouts with Grid (2017)  </h3>      </div>  </a> </li> <li>  <a href="https://www.linkedin.com/learning/css-layouts-from-float-to-flexbox-and-grid?trk=learning-course_similar-courses" target="_self" data-tracking-control-name="learning-course_similar-courses" data-tracking-will-navigate class="base-card relative w-full hover:no-underline focus:no-underline base-card--link base-aside-card flex my-1.5 hover:show-play-button focus:show-play-button base-aside-card--link aside-learning-course-card">  <div class="base-aside-card__media flex-shrink-0 mr-0.5 overflow-hidden relative rounded-md h-[54px] w-[95px]"> <img class="base-aside-card__media-element w-[100px] h-full object-cover" alt data-delayed-url="https://media.licdn.com/dms/image/v2/C4E0DAQHliL819SNhiA/learning-public-crop_144_256/learning-public-crop_144_256/0/1568668686910?e=2147483647&v=beta&t=DUyFuVjyWrGQc__v_h8W2H4cwLqS0lrbkSyQgWnd1Fw"> <div class="aside-learning-course-card__duration duration">1h 46m</div> <icon class="base-aside-card__play-button w-auto play-button overlay-center" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/9n9raq7fmdu241tpsxwodsmcd" data-svg-class-name="base-aside-card__play-button-svg"></icon> </div> <div class="base-aside-card__info self-center pl-0.5 flex flex-col flex-1"> <h3 class="base-aside-card__title font-sans text-md font-bold text-color-text relative"> CSS Layouts: From Float to Flexbox and Grid  </h3>      </div>  </a> </li> <li>  <a href="https://www.linkedin.com/learning/advanced-responsive-layouts-with-css-flexbox?trk=learning-course_similar-courses" target="_self" data-tracking-control-name="learning-course_similar-courses" data-tracking-will-navigate class="base-card relative w-full hover:no-underline focus:no-underline base-card--link base-aside-card flex my-1.5 hover:show-play-button focus:show-play-button base-aside-card--link aside-learning-course-card">  <div class="base-aside-card__media flex-shrink-0 mr-0.5 overflow-hidden relative rounded-md h-[54px] w-[95px]"> <img class="base-aside-card__media-element w-[100px] h-full object-cover" alt data-delayed-url="https://media.licdn.com/dms/image/v2/C4E0DAQHCgk8qhAKWLQ/learning-public-crop_144_256/learning-public-crop_144_256/0/1567117959804?e=2147483647&v=beta&t=gHUf8-tcHm7ep8lJ_vVcVGpAIdDvSFXYBwc4ZL6eqM8"> <div class="aside-learning-course-card__duration duration">1h 48m</div> <icon class="base-aside-card__play-button w-auto play-button overlay-center" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/9n9raq7fmdu241tpsxwodsmcd" data-svg-class-name="base-aside-card__play-button-svg"></icon> </div> <div class="base-aside-card__info self-center pl-0.5 flex flex-col flex-1"> <h3 class="base-aside-card__title font-sans text-md font-bold text-color-text relative"> Advanced Responsive Layouts with CSS Flexbox  </h3>      </div>  </a> </li> </ul> </div> </section> <section class="aside-section-container mb-4"> <h2 class="aside-section-container__title section-title"> Download courses </h2>  <div class="aside-section-container__content break-words"> <p>Use your iOS or Android LinkedIn Learning app, and watch courses on your mobile device without an internet connection.</p> <div class="app-links-aside-section__link-container"> <a class="app-links-aside-section__link" href="https://itunes.apple.com/app/apple-store/id1084807225?ls=1&pt=10746&mt=8&ct=learning_course_app_links&trk=learning-course_apple-app-store" data-tracking-control-name="learning-course_apple-app-store" data-tracking-will-navigate rel="noopener noreferrer" target="_blank"> <img alt="Download on the App Store" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/emczv26hz24woii2j4aleyry" height="42px" width="142px"> </a> <a class="app-links-aside-section__link" href="https://play.google.com/store/apps/details?id=com.linkedin.android.learning&referrer=utm_source%3Dlinkedinlearning%26utm_medium%3DmobileWeb%26utm_campaign%3Dlearning_guest&ct=learning_course_app_links&trk=learning-course_google-play-store" data-tracking-control-name="learning-course_google-play-store" data-tracking-will-navigate rel="noopener noreferrer" target="_blank"> <img alt="Get it on Google Play" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/535kqf5rsexfx0lucb3t6palb" height="42px" width="142px"> </a> </div> </div> </section> </section> </main> <div class="pre-footer "> <section class="core-section-container my-3 price-disclaimer">    <div class="core-section-container__content break-words"> <p class="price-disclaimer__copy"> <sup class="price-disclaimer__copy--sup">*</sup>Price may change based on profile and billing country information entered during Sign In or Registration </p> </div> </section> <section class="tw-linkster bg-cool-gray-20 browse-map" data-impression-id="learning-course_linkster" data-js-module-id="linkster"> <div class="max-w-screen-content-max-w w-full flex justify-between my-0 mx-auto mamabear:px-3 babybear:px-2 babybear:flex-col"> <div class="flex-1 w-1/2 pt-2 pr-4 pb-4 pl-0 babybear:pb-2 babybear:w-full babybear:border-b-1 babybear:border-solid babybear:border-color-border-low-emphasis babybear:last:border-b-0"> <h3 class="text-md font-bold text-color-text leading-open"> Explore Business Topics </h3> <ul class="my-1"> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/business-analysis-and-strategy?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Business Analysis and Strategy </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/business-software-and-tools?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Business Software and Tools </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/career-development-5?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Career Development </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/customer-service-3?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Customer Service </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/diversity-equity-and-inclusion-dei?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Diversity, Equity, and Inclusion (DEI) </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/finance-and-accounting?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Finance and Accounting </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/human-resources-3?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Human Resources </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/leadership-and-management?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Leadership and Management </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/marketing-2?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Marketing </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/professional-development?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Professional Development </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/project-management?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Project Management </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/sales-3?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Sales </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/small-business-and-entrepreneurship?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Small Business and Entrepreneurship </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/training-and-education?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Training and Education </a> </li> </ul> <a class="link tw-linkster-general-link" aria-label="See all business courses" href="https://www.linkedin.com/learning/topics/business?trk=learning-course_browsemap_general-link" data-tracking-control-name="learning-course_browsemap_general-link" data-tracking-will-navigate> See all </a> </div> <div class="flex-1 w-1/2 pt-2 pr-4 pb-4 pl-0 babybear:pb-2 babybear:w-full babybear:border-b-1 babybear:border-solid babybear:border-color-border-low-emphasis babybear:last:border-b-0"> <h3 class="text-md font-bold text-color-text leading-open"> Explore Creative Topics </h3> <ul class="my-1"> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/aec?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> AEC </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/animation-and-illustration?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Animation and Illustration </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/audio-and-music?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Audio and Music </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/graphic-design?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Graphic Design </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/motion-graphics-and-vfx?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Motion Graphics and VFX </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/photography-2?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Photography </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/product-and-manufacturing?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Product and Manufacturing </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/user-experience?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> User Experience </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/2015-54?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Video </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/visualization-and-real-time?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Visualization and Real-Time </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/web-design?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Web Design </a> </li> </ul> <a class="link tw-linkster-general-link" aria-label="See all creative courses" href="https://www.linkedin.com/learning/topics/creative?trk=learning-course_browsemap_general-link" data-tracking-control-name="learning-course_browsemap_general-link" data-tracking-will-navigate> See all </a> </div> <div class="flex-1 w-1/2 pt-2 pr-4 pb-4 pl-0 babybear:pb-2 babybear:w-full babybear:border-b-1 babybear:border-solid babybear:border-color-border-low-emphasis babybear:last:border-b-0"> <h3 class="text-md font-bold text-color-text leading-open"> Explore Technology Topics </h3> <ul class="my-1"> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/artificial-intelligence?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Artificial Intelligence (AI) </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/cloud-computing-5?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Cloud Computing </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/security-3?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Cybersecurity </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/data-science?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Data Science </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/database-management?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Database Management </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/devops?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> DevOps </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/hardware?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Hardware </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/it-help-desk-5?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> IT Help Desk </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/mobile-development?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Mobile Development </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/network-and-system-administration?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Network and System Administration </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/software-development?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Software Development </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://www.linkedin.com/learning/topics/web-development?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Web Development </a> </li> </ul> <a class="link tw-linkster-general-link" aria-label="See all technology courses" href="https://www.linkedin.com/learning/topics/technology?trk=learning-course_browsemap_general-link" data-tracking-control-name="learning-course_browsemap_general-link" data-tracking-will-navigate> See all </a> </div> </div> </section> </div> <footer class="li-footer bg-transparent w-full "> <ul class="li-footer__list flex flex-wrap flex-row items-start justify-start w-full h-auto min-h-[50px] my-[0px] mx-auto py-3 px-2 papabear:w-[1128px] papabear:p-0"> <li class="li-footer__item font-sans text-xs text-color-text-solid-secondary flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <span class="sr-only">LinkedIn</span> <icon class="li-footer__copy-logo text-color-logo-brand-alt inline-block self-center h-[14px] w-[56px] mr-1" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/e12h2cd8ac580qen9qdd0qks8"></icon> <span class="li-footer__copy-text flex items-center">© 2025</span> </li> <li class="li-footer__item font-sans text-xs text-color-text-solid-secondary flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-solid-secondary hover:text-color-link-hover focus:text-color-link-focus" href="https://about.linkedin.com?trk=d_learning_course_guest_footer-about" data-tracking-control-name="d_learning_course_guest_footer-about" data-tracking-will-navigate> About </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-solid-secondary flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-solid-secondary hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/accessibility?trk=d_learning_course_guest_footer-accessibility" data-tracking-control-name="d_learning_course_guest_footer-accessibility" data-tracking-will-navigate> Accessibility </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-solid-secondary flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-solid-secondary hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/legal/user-agreement?trk=d_learning_course_guest_footer-user-agreement" data-tracking-control-name="d_learning_course_guest_footer-user-agreement" data-tracking-will-navigate> User Agreement </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-solid-secondary flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-solid-secondary hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/legal/privacy-policy?trk=d_learning_course_guest_footer-privacy-policy" data-tracking-control-name="d_learning_course_guest_footer-privacy-policy" data-tracking-will-navigate> Privacy Policy </a> </li>  <li class="li-footer__item font-sans text-xs text-color-text-solid-secondary flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-solid-secondary hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/legal/cookie-policy?trk=d_learning_course_guest_footer-cookie-policy" data-tracking-control-name="d_learning_course_guest_footer-cookie-policy" data-tracking-will-navigate> Cookie Policy </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-solid-secondary flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-solid-secondary hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/legal/copyright-policy?trk=d_learning_course_guest_footer-copyright-policy" data-tracking-control-name="d_learning_course_guest_footer-copyright-policy" data-tracking-will-navigate> Copyright Policy </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-solid-secondary flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-solid-secondary hover:text-color-link-hover focus:text-color-link-focus" href="https://brand.linkedin.com/policies?trk=d_learning_course_guest_footer-brand-policy" data-tracking-control-name="d_learning_course_guest_footer-brand-policy" data-tracking-will-navigate> Brand Policy </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-solid-secondary flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-solid-secondary hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/psettings/guest-controls?trk=d_learning_course_guest_footer-guest-controls" data-tracking-control-name="d_learning_course_guest_footer-guest-controls" data-tracking-will-navigate> Guest Controls </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-solid-secondary flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-solid-secondary hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/legal/professional-community-policies?trk=d_learning_course_guest_footer-community-guide" data-tracking-control-name="d_learning_course_guest_footer-community-guide" data-tracking-will-navigate> Community Guidelines </a> </li>  <li class="li-footer__item font-sans text-xs text-color-text-solid-secondary flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <div class="collapsible-dropdown collapsible-dropdown--footer collapsible-dropdown--up flex items-center relative hyphens-auto language-selector z-2">  <ul class="collapsible-dropdown__list hidden container-raised absolute w-auto overflow-y-auto flex-col items-stretch z-1 bottom-[100%] top-auto" role="menu" tabindex="-1"> <li class="language-selector__item" role="presentation">  <button aria-label="العربية (Arabic)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ar_AE" data-locale="ar_AE" role="menuitem" lang="ar_AE"> العربية (Arabic) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="বাংলা (Bangla)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-bn_IN" data-locale="bn_IN" role="menuitem" lang="bn_IN"> বাংলা (Bangla) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Čeština (Czech)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-cs_CZ" data-locale="cs_CZ" role="menuitem" lang="cs_CZ"> Čeština (Czech) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Dansk (Danish)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-da_DK" data-locale="da_DK" role="menuitem" lang="da_DK"> Dansk (Danish) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Deutsch (German)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-de_DE" data-locale="de_DE" role="menuitem" lang="de_DE"> Deutsch (German) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Ελληνικά (Greek)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-el_GR" data-locale="el_GR" role="menuitem" lang="el_GR"> Ελληνικά (Greek) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="English (English) selected" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link--selected" data-tracking-control-name="language-selector-en_US" data-locale="en_US" role="menuitem" lang="en_US"> <strong>English (English)</strong> </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Español (Spanish)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-es_ES" data-locale="es_ES" role="menuitem" lang="es_ES"> Español (Spanish) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="فارسی (Persian)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-fa_IR" data-locale="fa_IR" role="menuitem" lang="fa_IR"> فارسی (Persian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Suomi (Finnish)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-fi_FI" data-locale="fi_FI" role="menuitem" lang="fi_FI"> Suomi (Finnish) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Français (French)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-fr_FR" data-locale="fr_FR" role="menuitem" lang="fr_FR"> Français (French) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="हिंदी (Hindi)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-hi_IN" data-locale="hi_IN" role="menuitem" lang="hi_IN"> हिंदी (Hindi) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Magyar (Hungarian)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-hu_HU" data-locale="hu_HU" role="menuitem" lang="hu_HU"> Magyar (Hungarian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Bahasa Indonesia (Indonesian)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-in_ID" data-locale="in_ID" role="menuitem" lang="in_ID"> Bahasa Indonesia (Indonesian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Italiano (Italian)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-it_IT" data-locale="it_IT" role="menuitem" lang="it_IT"> Italiano (Italian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="עברית (Hebrew)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-iw_IL" data-locale="iw_IL" role="menuitem" lang="iw_IL"> עברית (Hebrew) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="日本語 (Japanese)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ja_JP" data-locale="ja_JP" role="menuitem" lang="ja_JP"> 日本語 (Japanese) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="한국어 (Korean)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ko_KR" data-locale="ko_KR" role="menuitem" lang="ko_KR"> 한국어 (Korean) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="मराठी (Marathi)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-mr_IN" data-locale="mr_IN" role="menuitem" lang="mr_IN"> मराठी (Marathi) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Bahasa Malaysia (Malay)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ms_MY" data-locale="ms_MY" role="menuitem" lang="ms_MY"> Bahasa Malaysia (Malay) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Nederlands (Dutch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-nl_NL" data-locale="nl_NL" role="menuitem" lang="nl_NL"> Nederlands (Dutch) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Norsk (Norwegian)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-no_NO" data-locale="no_NO" role="menuitem" lang="no_NO"> Norsk (Norwegian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="ਪੰਜਾਬੀ (Punjabi)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-pa_IN" data-locale="pa_IN" role="menuitem" lang="pa_IN"> ਪੰਜਾਬੀ (Punjabi) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Polski (Polish)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-pl_PL" data-locale="pl_PL" role="menuitem" lang="pl_PL"> Polski (Polish) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Português (Portuguese)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-pt_BR" data-locale="pt_BR" role="menuitem" lang="pt_BR"> Português (Portuguese) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Română (Romanian)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ro_RO" data-locale="ro_RO" role="menuitem" lang="ro_RO"> Română (Romanian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Русский (Russian)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ru_RU" data-locale="ru_RU" role="menuitem" lang="ru_RU"> Русский (Russian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Svenska (Swedish)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-sv_SE" data-locale="sv_SE" role="menuitem" lang="sv_SE"> Svenska (Swedish) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="తెలుగు (Telugu)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-te_IN" data-locale="te_IN" role="menuitem" lang="te_IN"> తెలుగు (Telugu) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="ภาษาไทย (Thai)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-th_TH" data-locale="th_TH" role="menuitem" lang="th_TH"> ภาษาไทย (Thai) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Tagalog (Tagalog)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-tl_PH" data-locale="tl_PH" role="menuitem" lang="tl_PH"> Tagalog (Tagalog) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Türkçe (Turkish)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-tr_TR" data-locale="tr_TR" role="menuitem" lang="tr_TR"> Türkçe (Turkish) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Українська (Ukrainian)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-uk_UA" data-locale="uk_UA" role="menuitem" lang="uk_UA"> Українська (Ukrainian) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Tiếng Việt (Vietnamese)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-vi_VN" data-locale="vi_VN" role="menuitem" lang="vi_VN"> Tiếng Việt (Vietnamese) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="简体中文 (Chinese (Simplified))" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-zh_CN" data-locale="zh_CN" role="menuitem" lang="zh_CN"> 简体中文 (Chinese (Simplified)) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="正體中文 (Chinese (Traditional))" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-zh_TW" data-locale="zh_TW" role="menuitem" lang="zh_TW"> 正體中文 (Chinese (Traditional)) </button> </li>  </ul> <button class="language-selector__button select-none relative pr-2 font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover hover:cursor-pointer focus:text-color-link-focus focus:outline-dotted focus:outline-1" aria-expanded="false" data-tracking-control-name="footer-lang-dropdown_trigger"> <span class="language-selector__label-text mr-0.5 break-words"> Language </span> <icon class="language-selector__label-chevron w-2 h-2 absolute top-0 right-0" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> </div> </li> </ul>  </footer> <script src="https://static.licdn.com/aero-v1/sc/h/7itt46rafycxiwozfd111d2we" async></script>  <script src="https://static.licdn.com/aero-v1/sc/h/3iztwohxe2bmun1nouya4b56h" async defer></script> <script data-delayed-url="https://static.licdn.com/aero-v1/sc/h/zjknc3m26x2ha3j6ctgfqond" data-module-id="media-player"></script> <code id="trackingData" style="display: none"></code> <code id="alcOnlyData" style="display: none"></code>  </body> </html>

CINXE.COM

CSS: Combining Grid and Flexbox Online Class | LinkedIn Learning, formerly Lynda.com