title
Build & Deploy a Personal Portfolio with TailwindCSS - 2022 Edition
description
https://www.hostinger.com/designcourse - 10% coupon code: DESIGNCOURSE
-- https://designcourse.com - Learn UI/UX!
-- Today, I'm going to show you how I designed, and how to code (with TailwindCSS) a personal portfolio that might be suitable for either a designer or a developer. After that, I will also show you how to deploy it with automatic git deployment using Hostinger.
While we won't design it from scratch, I will spend 15 minutes talking about the design and the various sections that I think are *most* important if you're going to build a portfolio.
Then, we'll step into VS Code and use Tailwind to make the project a responsive-reality in the browser. Finally, we'll create a hosting account at Hostinger, and I will show you step-by-step how to deploy it using Github, along with automatic deployments.
Full code for this project:
https://coursetro.s3.amazonaws.com/stuff/personal-portfolio.zip
0:00 - Introduction
2:54 - Design Overview
18:34 - Project Setup
34:15 - Creating the Header
58:08 - Hero Section
1:19:07 - My Work Section
1:20:40 - Clients Section
1:22:41 - Hire me Section
1:24:37 - JavaScript
1:28:02 - Github
1:30:47 - Creating an Account at Hostinger
1:32:55 - Setting up Auto Git Deployment
1:37:00 - Final Thoughts
Let's get started!
#designer #coder #portfolio
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: https://designcourse.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro's Twitter: http://twitter.com/designcoursecom
Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!
detail
{'title': 'Build & Deploy a Personal Portfolio with TailwindCSS - 2022 Edition', 'heatmap': [{'end': 1414.433, 'start': 1351.106, 'weight': 0.79}, {'end': 1767.296, 'start': 1704.784, 'weight': 0.717}, {'end': 1887.713, 'start': 1821.956, 'weight': 0.912}, {'end': 2064.489, 'start': 1938.987, 'weight': 0.911}, {'end': 2471.995, 'start': 2409.083, 'weight': 0.728}, {'end': 3762.042, 'start': 3703.983, 'weight': 0.863}, {'end': 4763.737, 'start': 4698.01, 'weight': 0.761}, {'end': 5858.147, 'start': 5818.98, 'weight': 1}], 'summary': "Learn to build and deploy a modern portfolio using tailwind css, covering design considerations, responsive design, front-end development process, tailwind css configuration, font import, html header tag styling, flexbox, responsive design, web layout creation, and website deployment with hostinger, including github repository creation, git commands, hosting setup, costing $21.48 with coupon code 'designcourse', and deploying a project to github with auto deployment and webhook setup. also, emphasizes portfolio design best practices and professional photographs, effective project thumbnails, live projects, ui design principles, and accessible contact forms.", 'chapters': [{'end': 171.25, 'segs': [{'end': 52.374, 'src': 'embed', 'start': 20.537, 'weight': 1, 'content': [{'end': 22.679, 'text': 'And this is the design that I created.', 'start': 20.537, 'duration': 2.142}, {'end': 28.302, 'text': "And we're going to walk through a lot of the design considerations when you're setting up a portfolio.", 'start': 22.859, 'duration': 5.443}, {'end': 36.546, 'text': "And also I'm going to show you how to use Tailwind CSS to make this a reality in the browser.", 'start': 28.322, 'duration': 8.224}, {'end': 39.088, 'text': 'We can also see it is fully responsive.', 'start': 36.947, 'duration': 2.141}, {'end': 40.189, 'text': "And so we've got.", 'start': 39.528, 'duration': 0.661}, {'end': 43.89, 'text': "you know, It's a little bit more of the lengthy side of the tutorial,", 'start': 40.189, 'duration': 3.701}, {'end': 52.374, 'text': "but it's going to be very worth it if you're interested in the process of creating a really effective portfolio that will help you land jobs essentially,", 'start': 43.89, 'duration': 8.484}], 'summary': 'Tutorial on using tailwind css for a responsive portfolio design.', 'duration': 31.837, 'max_score': 20.537, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG2020537.jpg'}, {'end': 107.493, 'src': 'embed', 'start': 85.679, 'weight': 3, 'content': [{'end': 94.983, 'text': "make sure to click on the very top link here on the YouTube description to get access to Hostinger and the plans that we're going to create in order to deploy this process,", 'start': 85.679, 'duration': 9.304}, {'end': 98.705, 'text': 'and use the coupon code designcourse for a 10% off discount.', 'start': 94.983, 'duration': 3.722}, {'end': 102.909, 'text': "So Hostinger, they've sponsored a number of my videos previously.", 'start': 99.105, 'duration': 3.804}, {'end': 105.551, 'text': "They're a great web host with many different features.", 'start': 102.929, 'duration': 2.622}, {'end': 107.493, 'text': "As you can see, they're all listed here.", 'start': 105.951, 'duration': 1.542}], 'summary': 'Hostinger offers a 10% discount with coupon code designcourse for web hosting with various features.', 'duration': 21.814, 'max_score': 85.679, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG2085679.jpg'}, {'end': 171.25, 'src': 'embed', 'start': 147.855, 'weight': 0, 'content': [{'end': 155.54, 'text': "it's automatic Git deployment, which means every time you make a change to your website and you push that change to GitHub,", 'start': 147.855, 'duration': 7.685}, {'end': 165.746, 'text': 'it will automatically update the and just basically download those updates from github and automatically push it to your website live.', 'start': 155.54, 'duration': 10.206}, {'end': 171.25, 'text': "so it's a very seamless and just very simple process, and i'm going to show you how to walk through all of that.", 'start': 165.746, 'duration': 5.504}], 'summary': 'Automatic git deployment updates website seamlessly and simply.', 'duration': 23.395, 'max_score': 147.855, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG20147855.jpg'}], 'start': 0.109, 'title': 'Building modern portfolio', 'summary': 'Covers building and deploying a modern portfolio using tailwind css, focusing on design considerations, responsive design, and automatic git deployment, sponsored by hostinger.com.', 'chapters': [{'end': 171.25, 'start': 0.109, 'title': 'Build & deploy modern portfolio', 'summary': 'Covers building and deploying a modern portfolio using tailwind css, with a focus on design considerations, responsive design, and automatic git deployment, sponsored by hostinger.com.', 'duration': 171.141, 'highlights': ['The tutorial covers building and deploying a modern portfolio, applicable to designers and developers, using Tailwind CSS for efficiency. It covers building and deploying a modern portfolio, applicable to designers and developers, using Tailwind CSS for efficiency.', 'Emphasis on design considerations and responsive design to create an effective portfolio for job acquisition or client acquisition. Emphasis on design considerations and responsive design to create an effective portfolio for job acquisition or client acquisition.', "Introduction to Hostinger.com, with a 10% discount using the coupon code 'designcourse', focusing on the premium shared hosting plan. Introduction to Hostinger.com, with a 10% discount using the coupon code 'designcourse', focusing on the premium shared hosting plan.", 'Demonstration of automatic Git deployment, allowing seamless updates to the live website with every change pushed to GitHub. Demonstration of automatic Git deployment, allowing seamless updates to the live website with every change pushed to GitHub.']}], 'duration': 171.141, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG20109.jpg', 'highlights': ['Demonstration of automatic Git deployment, allowing seamless updates to the live website with every change pushed to GitHub.', 'Emphasis on design considerations and responsive design to create an effective portfolio for job acquisition or client acquisition.', 'The tutorial covers building and deploying a modern portfolio, applicable to designers and developers, using Tailwind CSS for efficiency.', "Introduction to Hostinger.com, with a 10% discount using the coupon code 'designcourse', focusing on the premium shared hosting plan."]}, {'end': 1089.508, 'segs': [{'end': 347.844, 'src': 'embed', 'start': 317.699, 'weight': 6, 'content': [{'end': 319.941, 'text': 'Outside of that, all the content is essentially the same.', 'start': 317.699, 'duration': 2.242}, {'end': 321.323, 'text': "We're just laying it out differently.", 'start': 319.981, 'duration': 1.342}, {'end': 324.366, 'text': 'So the very first section of a portfolio.', 'start': 321.863, 'duration': 2.503}, {'end': 325.767, 'text': 'I would say that is so important.', 'start': 324.366, 'duration': 1.401}, {'end': 329.891, 'text': "it is the most important section, in my opinion, is what's called the hero section.", 'start': 325.767, 'duration': 4.124}, {'end': 331.773, 'text': "And that's right here underneath this.", 'start': 329.971, 'duration': 1.802}, {'end': 335.076, 'text': 'Now, before we get to that, I will talk a little bit about your navigation.', 'start': 332.254, 'duration': 2.822}, {'end': 338.559, 'text': "Typically, it's going to be your name up here in the upper left.", 'start': 335.937, 'duration': 2.622}, {'end': 344.142, 'text': 'Branding across all websites and apps and stuff, for the most part, is typically found in the upper left.', 'start': 338.699, 'duration': 5.443}, {'end': 347.844, 'text': "That's where people are trained to look for the company name.", 'start': 344.162, 'duration': 3.682}], 'summary': 'The hero section is the most important part of a portfolio, typically found underneath the navigation with the company name in the upper left.', 'duration': 30.145, 'max_score': 317.699, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG20317699.jpg'}, {'end': 414.477, 'src': 'embed', 'start': 383.665, 'weight': 4, 'content': [{'end': 385.926, 'text': 'And then also your work.', 'start': 383.665, 'duration': 2.261}, {'end': 393.145, 'text': "That's the number one thing that a potential employer or somebody who's looking to hire a freelancer wants to see.", 'start': 386.84, 'duration': 6.305}, {'end': 395.727, 'text': "They wanna know what you're capable of.", 'start': 393.746, 'duration': 1.981}, {'end': 401.592, 'text': 'And so definitely include, you can word that differently, like my portfolio or something like that.', 'start': 396.268, 'duration': 5.324}, {'end': 403.833, 'text': 'but definitely showcase your work.', 'start': 402.052, 'duration': 1.781}, {'end': 406.114, 'text': "Also clients, that's another thing.", 'start': 404.273, 'duration': 1.841}, {'end': 409.195, 'text': "It kind of works with your portfolio and who you've worked for.", 'start': 406.134, 'duration': 3.061}, {'end': 414.477, 'text': 'You can have a client section and work that in just within the portfolio section.', 'start': 409.855, 'duration': 4.622}], 'summary': "Potential employers look for a freelancer's capabilities and portfolio, including client work.", 'duration': 30.812, 'max_score': 383.665, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG20383665.jpg'}, {'end': 457.093, 'src': 'embed', 'start': 427.622, 'weight': 5, 'content': [{'end': 437.324, 'text': 'but providing at least the bare minimum of information about yourself, such as location, uh, your name, obviously your age, i.', 'start': 427.622, 'duration': 9.702}, {'end': 445.846, 'text': 'these are all very important, obviously, um, and then also a way to either hire says hire me or contact me,', 'start': 437.324, 'duration': 8.522}, {'end': 452.71, 'text': 'so whatever you deem to be the most important element that you want them to see.', 'start': 445.846, 'duration': 6.864}, {'end': 457.093, 'text': "use what's called visual hierarchy in terms of UI design to emphasize that.", 'start': 452.71, 'duration': 4.383}], 'summary': 'Include location, name, age, and contact information to emphasize in ui design.', 'duration': 29.471, 'max_score': 427.622, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG20427622.jpg'}, {'end': 527.498, 'src': 'embed', 'start': 500.802, 'weight': 7, 'content': [{'end': 507.724, 'text': 'Marketing 101 when it comes to ad copy or copywriting is you want to emphasize benefits over features for your headline.', 'start': 500.802, 'duration': 6.922}, {'end': 515.167, 'text': 'So building beautiful web experiences is definitely better than saying something like software developer.', 'start': 508.124, 'duration': 7.043}, {'end': 518.11, 'text': "or i'm a web designer, or my name is gary simon.", 'start': 515.167, 'duration': 2.943}, {'end': 523.414, 'text': 'a lot of people use or misuse the headline when it could be much more effective,', 'start': 518.11, 'duration': 5.304}, {'end': 527.498, 'text': 'so i would definitely research effective ad copy for determining your headline.', 'start': 523.414, 'duration': 4.084}], 'summary': 'Emphasize benefits over features in ad copy for more effective headlines in marketing.', 'duration': 26.696, 'max_score': 500.802, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG20500802.jpg'}, {'end': 621.076, 'src': 'embed', 'start': 592.199, 'weight': 0, 'content': [{'end': 593.459, 'text': "it's your personal portfolio.", 'start': 592.199, 'duration': 1.26}, {'end': 603.22, 'text': "Sometimes they'll use the pictures of themselves that look like it was shot from an iPhone 4, and it's all pixelated and it's not good lighting.", 'start': 594.815, 'duration': 8.405}, {'end': 607.602, 'text': "Listen, if you're serious about this, invest a little bit of money.", 'start': 603.54, 'duration': 4.062}, {'end': 615.529, 'text': 'or if you have a friend with a good camera and maybe some lighting, invest in yourself so that you can create a really professional photograph.', 'start': 607.602, 'duration': 7.927}, {'end': 618.833, 'text': "It's going to go a long way more than what you probably think.", 'start': 615.569, 'duration': 3.264}, {'end': 621.076, 'text': 'Have a professional and well-designed site.', 'start': 619.113, 'duration': 1.963}], 'summary': 'Invest in professional photography for your portfolio to create a more professional and appealing site.', 'duration': 28.877, 'max_score': 592.199, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG20592199.jpg'}, {'end': 683.006, 'src': 'embed', 'start': 652.804, 'weight': 1, 'content': [{'end': 658.085, 'text': 'I had just a little paragraph here, a couple sentences, or rather just one sentence rather.', 'start': 652.804, 'duration': 5.281}, {'end': 662.626, 'text': "Then we have the project thumbnails based on what you've done.", 'start': 659.366, 'duration': 3.26}, {'end': 670.568, 'text': "Now, this is an area I've seen so many aspiring designers screw up on their portfolios because their thumbnails don't look very good.", 'start': 662.706, 'duration': 7.862}, {'end': 676.325, 'text': "Here's what a beginner will typically do.", 'start': 672.924, 'duration': 3.401}, {'end': 683.006, 'text': "They'll have a web design or some project they created and they take a screenshot of it and that's it.", 'start': 676.405, 'duration': 6.601}], 'summary': 'Aspiring designers often struggle with creating appealing project thumbnails for their portfolios, leading to potential issues in showcasing their work effectively.', 'duration': 30.202, 'max_score': 652.804, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG20652804.jpg'}, {'end': 814.939, 'src': 'embed', 'start': 788.83, 'weight': 2, 'content': [{'end': 793.831, 'text': 'because they want to learn how to make a portfolio, you have to understand UI design fundamentals and principles.', 'start': 788.83, 'duration': 5.001}, {'end': 797.333, 'text': "That's why I suggest going to designcourse.com and signing up for my course.", 'start': 793.851, 'duration': 3.482}, {'end': 800.714, 'text': 'But what are those principles? Just a real quick rundown.', 'start': 798.133, 'duration': 2.581}, {'end': 806.195, 'text': 'Color and contrast, understanding how to apply and use those effectively, especially when it comes to type.', 'start': 801.254, 'duration': 4.941}, {'end': 808.336, 'text': "There's also white space.", 'start': 806.855, 'duration': 1.481}, {'end': 811.838, 'text': "And that's the empty space in the areas of your design.", 'start': 809.136, 'duration': 2.702}, {'end': 814.939, 'text': "There's alignment to make sure things align up properly.", 'start': 811.958, 'duration': 2.981}], 'summary': 'Learn ui design fundamentals and principles at designcourse.com.', 'duration': 26.109, 'max_score': 788.83, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG20788830.jpg'}, {'end': 977.213, 'src': 'embed', 'start': 950.962, 'weight': 3, 'content': [{'end': 958.585, 'text': "that label doesn't go completely hidden and that can cause issues with people who might forget what they're supposed to be typing in that given field.", 'start': 950.962, 'duration': 7.623}, {'end': 964.426, 'text': "And then the final note I'll make about this is give other ways to contact you.", 'start': 959.425, 'duration': 5.001}, {'end': 967.867, 'text': 'Some people, they might not want to use a form to contact you.', 'start': 964.446, 'duration': 3.421}, {'end': 969.008, 'text': 'Maybe they want a phone.', 'start': 968.068, 'duration': 0.94}, {'end': 972.65, 'text': 'maybe they want an email, maybe Skype or Twitter.', 'start': 969.608, 'duration': 3.042}, {'end': 977.213, 'text': 'So put all those things, make yourself as available as possible.', 'start': 972.81, 'duration': 4.403}], 'summary': 'Incomplete labels can lead to user confusion and contact options should be diverse for accessibility.', 'duration': 26.251, 'max_score': 950.962, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG20950962.jpg'}], 'start': 171.25, 'title': 'Portfolio design best practices', 'summary': 'Discusses essential portfolio design practices, including the importance of professional photographs, effective project thumbnails, live projects, and ui design principles, with an emphasis on accessible and well-designed contact forms.', 'chapters': [{'end': 383.104, 'start': 171.25, 'title': 'Effective portfolio design tips', 'summary': 'Discusses the key elements of an effective portfolio design, emphasizing the importance of a hero section, navigation layout, and the use of ui/ux design tools like figma, with a focus on creating prototypes and adapting layouts for different devices.', 'duration': 211.854, 'highlights': ['The importance of the hero section in a portfolio Emphasizes the significance of the hero section as the most important part of a portfolio, providing a visual focal point to showcase key elements.', 'Navigation layout and branding placement Discusses the placement of branding and navigation links in the upper left section of the website or app, highlighting the importance of consistency in design.', 'Utilizing UI/UX design tools like Figma Highlights the use of Figma as a popular UI/UX design tool, emphasizing its role in prototyping and designing website layouts before coding.', 'Adapting layouts for different devices Stresses the necessity of adapting layouts for various devices and the importance of communicating layout changes effectively to front-end developers.']}, {'end': 565.966, 'start': 383.665, 'title': 'Portfolio design tips', 'summary': 'Discusses the importance of showcasing work, notable clients, and creating an effective hero section in a portfolio, emphasizing the need for visual hierarchy and effective ad copy.', 'duration': 182.301, 'highlights': ['The chapter discusses the importance of showcasing work and notable clients in a portfolio. Potential employers seek to see the capabilities of a freelancer through their work and notable clients, emphasizing the need to include a portfolio and client section, with the possibility of creating a separate page for notable clients.', "Emphasizing the need for visual hierarchy in UI design to highlight important elements such as the 'hire me' button. Visual hierarchy is crucial in UI design to emphasize key elements like the 'hire me' button, ensuring it stands out and catches the viewer's attention.", 'Importance of creating an effective hero section in a portfolio, including a compelling headline, a call to action, and a relevant illustration or photograph. The hero section in a portfolio plays a critical role in creating a first impression, with an emphasis on a compelling headline, a clear call to action, and a relevant illustration or photograph to engage the viewer.', 'Recommendation to use effective ad copy to determine the headline, focusing on emphasizing benefits over features. The chapter recommends researching effective ad copy to create a compelling headline that emphasizes benefits over features, highlighting the importance of effective copywriting for the headline in a portfolio.']}, {'end': 1089.508, 'start': 568.123, 'title': 'Portfolio design best practices', 'summary': 'Discusses essential portfolio design practices, including the importance of professional photographs, effective project thumbnails, live projects, and ui design principles, and emphasizes the significance of accessible and well-designed contact forms.', 'duration': 521.385, 'highlights': ['The importance of professional photographs for personal portfolios Investing in professional photography for a personal portfolio can significantly enhance the overall impression, leading to a more professional and well-designed site.', 'The significance of effective project thumbnails in portfolios Creating project thumbnails with perspective and thoughtful design can greatly impact the overall quality of the portfolio, providing a more professional presentation of the projects.', 'The value of live projects and UI design principles in portfolios Incorporating live projects and adhering to UI design principles can enhance the professional appeal of a portfolio, establishing credibility and expertise in the field.', 'Importance of accessible and well-designed contact forms Providing accessible and well-designed contact forms with multiple ways to contact, including email, phone, Skype, and Twitter, can make it easier for potential clients to reach out, enhancing the user experience.']}], 'duration': 918.258, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG20171250.jpg', 'highlights': ['The importance of professional photographs for personal portfolios Investing in professional photography for a personal portfolio can significantly enhance the overall impression, leading to a more professional and well-designed site.', 'The significance of effective project thumbnails in portfolios Creating project thumbnails with perspective and thoughtful design can greatly impact the overall quality of the portfolio, providing a more professional presentation of the projects.', 'The value of live projects and UI design principles in portfolios Incorporating live projects and adhering to UI design principles can enhance the professional appeal of a portfolio, establishing credibility and expertise in the field.', 'Importance of accessible and well-designed contact forms Providing accessible and well-designed contact forms with multiple ways to contact, including email, phone, Skype, and Twitter, can make it easier for potential clients to reach out, enhancing the user experience.', 'The chapter discusses the importance of showcasing work and notable clients in a portfolio. Potential employers seek to see the capabilities of a freelancer through their work and notable clients, emphasizing the need to include a portfolio and client section, with the possibility of creating a separate page for notable clients.', "Emphasizing the need for visual hierarchy in UI design to highlight important elements such as the 'hire me' button. Visual hierarchy is crucial in UI design to emphasize key elements like the 'hire me' button, ensuring it stands out and catches the viewer's attention.", 'Importance of creating an effective hero section in a portfolio, including a compelling headline, a call to action, and a relevant illustration or photograph. The hero section in a portfolio plays a critical role in creating a first impression, with an emphasis on a compelling headline, a clear call to action, and a relevant illustration or photograph to engage the viewer.', 'Recommendation to use effective ad copy to determine the headline, focusing on emphasizing benefits over features. The chapter recommends researching effective ad copy to create a compelling headline that emphasizes benefits over features, highlighting the importance of effective copywriting for the headline in a portfolio.', 'The importance of the hero section in a portfolio Emphasizes the significance of the hero section as the most important part of a portfolio, providing a visual focal point to showcase key elements.']}, {'end': 1667.068, 'segs': [{'end': 1141.72, 'src': 'embed', 'start': 1109.636, 'weight': 0, 'content': [{'end': 1112.917, 'text': 'otherwise yeah, it will be available on january, 4th of 2022..', 'start': 1109.636, 'duration': 3.281}, {'end': 1118.059, 'text': "okay, so now let's go ahead and get to the front end development process.", 'start': 1112.917, 'duration': 5.142}, {'end': 1130.092, 'text': "Alright, so now I'm here in the code editor and this is Visual Studio Code and it is basically the de facto most popular code editor for front-end developers doing this sort of work,", 'start': 1118.604, 'duration': 11.488}, {'end': 1133.174, 'text': 'working with HTML, CSS, JavaScript, etc.', 'start': 1130.092, 'duration': 3.082}, {'end': 1141.72, 'text': "And as we can see here, and by the way, it's free, so if you don't have it yet, just type in Visual Studio Code, you'll be able to download it.", 'start': 1133.955, 'duration': 7.765}], 'summary': 'Front end development process available on january 4th, 2022. visual studio code is free and popular for front-end development.', 'duration': 32.084, 'max_score': 1109.636, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG201109636.jpg'}, {'end': 1226.586, 'src': 'embed', 'start': 1196.331, 'weight': 1, 'content': [{'end': 1199.273, 'text': "And let's go ahead and open up the terminal.", 'start': 1196.331, 'duration': 2.942}, {'end': 1201.334, 'text': 'So view terminal.', 'start': 1199.293, 'duration': 2.041}, {'end': 1211.44, 'text': "And what I'll do is go ahead and we're going to, like I said, if you type npm-v, You can see mine's pretty outdated.", 'start': 1201.354, 'duration': 10.086}, {'end': 1219.183, 'text': 'But what we want is access to MPX, which is installed within the Node Package Manager by default.', 'start': 1211.8, 'duration': 7.383}, {'end': 1226.586, 'text': "And what we want to do is we're going to head on over real quick to the installation section of Tailwind CSS.", 'start': 1219.864, 'duration': 6.722}], 'summary': 'Using npm-v to check outdated version for mpx, and installing tailwind css.', 'duration': 30.255, 'max_score': 1196.331, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG201196331.jpg'}, {'end': 1275.226, 'src': 'embed', 'start': 1252.591, 'weight': 2, 'content': [{'end': 1261.815, 'text': 'But Tailwind CSS is a framework that allows you to build these websites in a different manner than if you were to do it just custom.', 'start': 1252.591, 'duration': 9.224}, {'end': 1264.896, 'text': "And it has a bunch of utility classes as they're called.", 'start': 1262.195, 'duration': 2.701}, {'end': 1274.445, 'text': "And it's essentially taking care of all the work within your HTML document rather than doing a bunch of custom work in your CSS document,", 'start': 1265.536, 'duration': 8.909}, {'end': 1275.226, 'text': 'if that makes sense.', 'start': 1274.445, 'duration': 0.781}], 'summary': 'Tailwind css simplifies website development with utility classes, reducing custom css work.', 'duration': 22.635, 'max_score': 1252.591, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG201252591.jpg'}, {'end': 1332.355, 'src': 'embed', 'start': 1306.133, 'weight': 3, 'content': [{'end': 1309.936, 'text': 'And as you can see, we have this command right here.', 'start': 1306.133, 'duration': 3.803}, {'end': 1311.658, 'text': 'Make it larger so we can see it.', 'start': 1310.517, 'duration': 1.141}, {'end': 1313.94, 'text': 'NPX Tailwind CSS init.', 'start': 1311.778, 'duration': 2.162}, {'end': 1317.763, 'text': "So that's going to create a configuration file in our empty folder.", 'start': 1314.12, 'duration': 3.643}, {'end': 1320.145, 'text': 'But before we can do that,', 'start': 1318.604, 'duration': 1.541}, {'end': 1329.072, 'text': 'you have to make sure that you have the Tailwind CLI or the command line interface utility included when you install Tailwind CSS.', 'start': 1320.145, 'duration': 8.927}, {'end': 1332.355, 'text': 'So we need the Tailwind CSS NPM package.', 'start': 1329.092, 'duration': 3.263}], 'summary': "Use 'npx tailwind css init' to create a configuration file in an empty folder.", 'duration': 26.222, 'max_score': 1306.133, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG201306133.jpg'}, {'end': 1414.433, 'src': 'heatmap', 'start': 1351.106, 'weight': 0.79, 'content': [{'end': 1353.268, 'text': 'We only have to do it one time for our particular machine.', 'start': 1351.106, 'duration': 2.162}, {'end': 1356.39, 'text': 'And there we go, it is now installed.', 'start': 1354.389, 'duration': 2.001}, {'end': 1364.235, 'text': 'Now, at that point, we can then run that command that I highlighted, mpx tailwind-css init.', 'start': 1357.31, 'duration': 6.925}, {'end': 1368.618, 'text': "So let's just paste that in, and we'll see what happens.", 'start': 1364.815, 'duration': 3.803}, {'end': 1373.061, 'text': 'All right, so now we can see it created this tailwind configuration file.', 'start': 1368.898, 'duration': 4.163}, {'end': 1382.487, 'text': 'Now, if you go back to the tailwind docs and you type in configuration or search bar, you will find this lengthy page right here.', 'start': 1373.641, 'duration': 8.846}, {'end': 1386.53, 'text': "It's all about learning how to customize your tailwind CSS.", 'start': 1382.547, 'duration': 3.983}, {'end': 1390.133, 'text': 'or Tailwind installation, essentially.', 'start': 1387.57, 'duration': 2.563}, {'end': 1399.821, 'text': "This allows you to just get the general scaffolding, your colors, your color scheme, any sizing, all of it's pretty much optional.", 'start': 1390.533, 'duration': 9.288}, {'end': 1409.749, 'text': "So things that you don't specify in the actual config file, they will be.", 'start': 1400.381, 'duration': 9.368}, {'end': 1414.433, 'text': "it'll just revert back to whatever's default, because they all have default settings.", 'start': 1409.749, 'duration': 4.684}], 'summary': 'Installing tailwind-css and creating a configuration file for customization.', 'duration': 63.327, 'max_score': 1351.106, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG201351106.jpg'}, {'end': 1474.385, 'src': 'embed', 'start': 1443.761, 'weight': 4, 'content': [{'end': 1447.241, 'text': 'These are just a bunch of objects that are nested within each other.', 'start': 1443.761, 'duration': 3.48}, {'end': 1450.142, 'text': 'If you know anything about JavaScript, essentially.', 'start': 1447.261, 'duration': 2.881}, {'end': 1460.004, 'text': 'But this is going to be where we can specify just overall colors that Tailwind will then use, essentially.', 'start': 1451.062, 'duration': 8.942}, {'end': 1465.285, 'text': 'So for instance, like our body, my fingers were not in the right spot on my keyboard.', 'start': 1460.504, 'duration': 4.781}, {'end': 1474.385, 'text': "So body, what's our body color, right? So we're going to revert back to our Where is it at? Oh, yeah, right here.", 'start': 1465.525, 'duration': 8.86}], 'summary': 'Javascript objects nested to specify tailwind colors.', 'duration': 30.624, 'max_score': 1443.761, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG201443761.jpg'}, {'end': 1544.246, 'src': 'embed', 'start': 1515.314, 'weight': 6, 'content': [{'end': 1517.936, 'text': 'Take them one by one based on the needs of your project.', 'start': 1515.314, 'duration': 2.622}, {'end': 1522.3, 'text': 'If you go to Google and you type in Tailwind how to configure X, Y or Z,', 'start': 1517.976, 'duration': 4.324}, {'end': 1530.347, 'text': "chances are you're going to find something on the documentation itself or from somebody who asked the same question on a site like Stack Overflow.", 'start': 1522.3, 'duration': 8.047}, {'end': 1536.861, 'text': "So there's a lot that we can specify and talk about here, but we're going to keep this pretty simple.", 'start': 1530.867, 'duration': 5.994}, {'end': 1544.246, 'text': "So I have a number of other colors that I want to specify, and I'm just going to go ahead and paste these in.", 'start': 1537.422, 'duration': 6.824}], 'summary': 'Use google search for tailwind configuration; simple approach for specifying colors.', 'duration': 28.932, 'max_score': 1515.314, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG201515314.jpg'}, {'end': 1650.742, 'src': 'embed', 'start': 1626.292, 'weight': 5, 'content': [{'end': 1632.374, 'text': "So we're just going to create a new file and then I'm going to hit exclamation point enter,", 'start': 1626.292, 'duration': 6.082}, {'end': 1638.377, 'text': 'and that will get us here just with a quick starter template for our HTML document.', 'start': 1632.374, 'duration': 6.003}, {'end': 1643.76, 'text': "So for me, what I'm going to put in, just for our title, is just personal portfolio.", 'start': 1638.797, 'duration': 4.963}, {'end': 1647.381, 'text': 'course you would want to use something much more better than that.', 'start': 1644.56, 'duration': 2.821}, {'end': 1649.162, 'text': "in fact, let's talk about that.", 'start': 1647.381, 'duration': 1.781}, {'end': 1650.742, 'text': 'um, google.', 'start': 1649.162, 'duration': 1.58}], 'summary': 'Creating a new html file with a quick starter template for a personal portfolio and discussing the use of better titles.', 'duration': 24.45, 'max_score': 1626.292, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG201626292.jpg'}], 'start': 1089.508, 'title': 'Front-end development process and tailwind css configuration', 'summary': 'Covers front-end development process using visual studio code, and the installation of node package manager and tailwind css, available for download on january 4th, 2022. it also explains configuring tailwind css by specifying colors, font family, and creating an html document for a personal portfolio.', 'chapters': [{'end': 1390.133, 'start': 1089.508, 'title': 'Front end development process', 'summary': 'Discusses the front-end development process using visual studio code, emphasizing the installation of node package manager and tailwind css, which is available for download on january 4th, 2022.', 'duration': 300.625, 'highlights': ['Visual Studio Code is the most popular code editor for front-end developers, free to download and use, supporting HTML, CSS, and JavaScript. Visual Studio Code is the preferred code editor for front-end development, supporting HTML, CSS, and JavaScript, and is freely available for download.', "Node Package Manager (NPM) installation is necessary for the front-end development process, with the command 'npm -v' to check the version, and Tailwind CSS is introduced as a framework for building websites with utility classes. NPM installation is crucial for front-end development, and the command 'npm -v' can be used to check the version. Tailwind CSS is introduced as a framework for building websites with utility classes.", 'Tailwind CSS is a framework that simplifies website development by providing utility classes, suitable for use after learning the basics of HTML and CSS. Tailwind CSS simplifies website development by providing utility classes, suitable for use after learning the basics of HTML and CSS.', "Installation of Tailwind CSS involves using the command 'npx tailwind-css init' and prior installation of the Tailwind CSS NPM package using the command 'npm i tailwind-css -g'. The installation of Tailwind CSS involves using the command 'npx tailwind-css init' and prior installation of the Tailwind CSS NPM package using the command 'npm i tailwind-css -g'."]}, {'end': 1667.068, 'start': 1390.533, 'title': 'Tailwind css configuration', 'summary': 'Explains how to configure tailwind css by specifying colors, font family, and creating an html document for a personal portfolio.', 'duration': 276.535, 'highlights': ["The chapter explains how to specify colors and font family for Tailwind CSS, allowing customization for UI design. It details the process of specifying colors for various elements and the font family called 'poppins' for the project.", 'Creating an HTML document for a personal portfolio is discussed, including the recommendation to use relevant keywords in the title for Google traffic. It includes the creation of an index.html file with a starter template and emphasizes the importance of using relevant keywords in the title for better search engine optimization.', 'The chapter emphasizes the need to refer to Tailwind documentation for configuring specific settings and advises taking a step-by-step approach based on project requirements. It advises readers to refer to the Tailwind documentation for specific settings and recommends a gradual learning approach based on project needs.']}], 'duration': 577.56, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG201089508.jpg', 'highlights': ['Visual Studio Code is the preferred code editor for front-end development, supporting HTML, CSS, and JavaScript, and is freely available for download.', "NPM installation is crucial for front-end development, and the command 'npm -v' can be used to check the version. Tailwind CSS is introduced as a framework for building websites with utility classes.", 'Tailwind CSS simplifies website development by providing utility classes, suitable for use after learning the basics of HTML and CSS.', "The installation of Tailwind CSS involves using the command 'npx tailwind-css init' and prior installation of the Tailwind CSS NPM package using the command 'npm i tailwind-css -g'.", 'The chapter explains how to specify colors and font family for Tailwind CSS, allowing customization for UI design.', 'Creating an HTML document for a personal portfolio is discussed, including the recommendation to use relevant keywords in the title for Google traffic.', 'It advises readers to refer to the Tailwind documentation for specific settings and recommends a gradual learning approach based on project needs.']}, {'end': 2136.44, 'segs': [{'end': 1767.296, 'src': 'heatmap', 'start': 1667.068, 'weight': 0, 'content': [{'end': 1672.651, 'text': 'um, outside of that, what we also want to do is we want to import that Poppins font,', 'start': 1667.068, 'duration': 5.583}, {'end': 1678.078, 'text': "because that's the font that's used in our Figma project when I created the design.", 'start': 1672.651, 'duration': 5.427}, {'end': 1685.466, 'text': "So what we want to do is go to fonts.google.com, and we know that it's a Google font.", 'start': 1678.478, 'duration': 6.988}, {'end': 1686.487, 'text': "so I'm going to type in Poppins.", 'start': 1685.466, 'duration': 1.021}, {'end': 1689.958, 'text': 'We click here, we choose all the weights that we want.', 'start': 1687.517, 'duration': 2.441}, {'end': 1696.04, 'text': "I forget all three of the weights I have already saved, but I'm just gonna choose.", 'start': 1690.798, 'duration': 5.242}, {'end': 1704.284, 'text': "typically you don't want any more than three font weights, because every weight that you added ends up adding more load times, more download.", 'start': 1696.04, 'duration': 8.244}, {'end': 1708.085, 'text': "So once you have them all selected, which actually it's the weight 400, 600 and 700.", 'start': 1704.784, 'duration': 3.301}, {'end': 1708.926, 'text': "So these aren't actually correct.", 'start': 1708.085, 'duration': 0.841}, {'end': 1724.075, 'text': "So 400, we'll find 600 right here and then 700, And essentially what you wanna do is copy this code right here.", 'start': 1708.966, 'duration': 15.109}, {'end': 1726.896, 'text': 'If you use import.', 'start': 1724.095, 'duration': 2.801}, {'end': 1732.979, 'text': "you can use this, but it's not recommended usually, but you can actually import it inside of another CSS file if you wish to go that route.", 'start': 1726.896, 'duration': 6.083}, {'end': 1737.822, 'text': "But I'm just going to copy what I have on the side here.", 'start': 1733.54, 'duration': 4.282}, {'end': 1741.106, 'text': 'on my reference monitor, this right here.', 'start': 1738.905, 'duration': 2.201}, {'end': 1744.789, 'text': 'So yours should basically look like this code up to this point.', 'start': 1741.307, 'duration': 3.482}, {'end': 1754.916, 'text': "Now, before we import those, we're also going to link another style sheet that doesn't yet exist in our project called tailwind.css.", 'start': 1745.509, 'duration': 9.407}, {'end': 1761.06, 'text': "All right, so we're gonna create an index.css first though.", 'start': 1755.016, 'duration': 6.044}, {'end': 1767.296, 'text': "Now index.css is where we're going to write all of our custom CSS.", 'start': 1762.674, 'duration': 4.622}], 'summary': 'Import poppins font from fonts.google.com with weights 400, 600, and 700, and create index.css for custom css.', 'duration': 41.858, 'max_score': 1667.068, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG201667068.jpg'}, {'end': 1774.178, 'src': 'embed', 'start': 1741.307, 'weight': 3, 'content': [{'end': 1744.789, 'text': 'So yours should basically look like this code up to this point.', 'start': 1741.307, 'duration': 3.482}, {'end': 1754.916, 'text': "Now, before we import those, we're also going to link another style sheet that doesn't yet exist in our project called tailwind.css.", 'start': 1745.509, 'duration': 9.407}, {'end': 1761.06, 'text': "All right, so we're gonna create an index.css first though.", 'start': 1755.016, 'duration': 6.044}, {'end': 1767.296, 'text': "Now index.css is where we're going to write all of our custom CSS.", 'start': 1762.674, 'duration': 4.622}, {'end': 1774.178, 'text': "And trust me, there's not many role sets because the whole point of Tailwind is to avoid having to write custom CSS.", 'start': 1767.336, 'duration': 6.842}], 'summary': 'Creating index.css to write custom css for tailwind, aiming to minimize role sets.', 'duration': 32.871, 'max_score': 1741.307, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG201741307.jpg'}, {'end': 1813.185, 'src': 'embed', 'start': 1784.943, 'weight': 4, 'content': [{'end': 1792.689, 'text': 'we are going to have a script that runs and we have to create that package.json file in a second to run that script.', 'start': 1784.943, 'duration': 7.746}, {'end': 1803.197, 'text': "But it's going to take everything we write here and it's going to transform it into a Tailwind.css file, which will include Tailwind itself,", 'start': 1793.049, 'duration': 10.148}, {'end': 1805.758, 'text': 'along with anything we write here custom.', 'start': 1803.197, 'duration': 2.561}, {'end': 1813.185, 'text': "So it's going to be looking for Tailwind.css, but we're going to be writing our CSS here in index.css.", 'start': 1806.279, 'duration': 6.906}], 'summary': 'Creating a script to transform input into tailwind.css, including custom css', 'duration': 28.242, 'max_score': 1784.943, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG201784943.jpg'}, {'end': 1887.713, 'src': 'heatmap', 'start': 1821.956, 'weight': 0.912, 'content': [{'end': 1828.404, 'text': 'we can type in npm init hyphen y, and that means yes, just answer yes to all the default questions or whatever.', 'start': 1821.956, 'duration': 6.448}, {'end': 1833.447, 'text': "If you don't put that flag there, it's going to ask you, like you know, what are the keywords and what's the name and all that.", 'start': 1829.265, 'duration': 4.182}, {'end': 1842.15, 'text': "So now in our package.json file, we're going to create our custom script and we're going to call it build.", 'start': 1833.987, 'duration': 8.163}, {'end': 1843.191, 'text': 'All right.', 'start': 1842.911, 'duration': 0.28}, {'end': 1850.844, 'text': "Now inside build, we're going to specify the following npx command that is going to be tailwind css.", 'start': 1843.939, 'duration': 6.905}, {'end': 1856.728, 'text': 'So this is just like specifying this following command here down in the command line,', 'start': 1851.264, 'duration': 5.464}, {'end': 1863.053, 'text': "but instead it's going to run this like every time we save our files here, and you'll see how in a second.", 'start': 1856.728, 'duration': 6.325}, {'end': 1873.06, 'text': "So we're going to put dash i for input forward slash index dot css and then hyphen o for output to tailwind dot css.", 'start': 1863.693, 'duration': 9.367}, {'end': 1879.59, 'text': "All right, and then we're gonna add the flag hyphen W right there.", 'start': 1875.629, 'duration': 3.961}, {'end': 1887.713, 'text': "All right, so we're almost ready and we're gonna make sure everything's working and everything's connected up here in a second.", 'start': 1880.571, 'duration': 7.142}], 'summary': "Setting up custom script 'build' in package.json for tailwind css.", 'duration': 65.757, 'max_score': 1821.956, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG201821956.jpg'}, {'end': 1938.887, 'src': 'embed', 'start': 1908.488, 'weight': 5, 'content': [{'end': 1909.829, 'text': "I've been using it for a long time.", 'start': 1908.488, 'duration': 1.341}, {'end': 1918.016, 'text': 'Once you have that installed, we can then right click on index.html and open with live server right here.', 'start': 1910.41, 'duration': 7.606}, {'end': 1922.619, 'text': "So that's going to open up this blank page right here.", 'start': 1918.877, 'duration': 3.742}, {'end': 1930.883, 'text': 'Now, the way we know if things are working here correctly, we need to first run our script here.', 'start': 1923.459, 'duration': 7.424}, {'end': 1934.725, 'text': "But before we do that, we're going to make a change really quickly to index.css.", 'start': 1931.643, 'duration': 3.082}, {'end': 1935.665, 'text': "We're going to say body.", 'start': 1934.765, 'duration': 0.9}, {'end': 1938.887, 'text': "We're going to remove this, of course, but we're just testing body.", 'start': 1936.185, 'duration': 2.702}], 'summary': 'Using live server, run script, test body for index.css', 'duration': 30.399, 'max_score': 1908.488, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG201908488.jpg'}, {'end': 2064.489, 'src': 'heatmap', 'start': 1938.987, 'weight': 0.911, 'content': [{'end': 1941.108, 'text': "We're just going to say background color blue.", 'start': 1938.987, 'duration': 2.121}, {'end': 1944.209, 'text': "So it's going to change from white to blue if this works correctly.", 'start': 1941.628, 'duration': 2.581}, {'end': 1952.466, 'text': "And then we're going to run this command And it's going to be NPM run build.", 'start': 1945.33, 'duration': 7.136}, {'end': 1953.166, 'text': 'All right.', 'start': 1952.886, 'duration': 0.28}, {'end': 1956.027, 'text': "Which will mean it's going to run this by default.", 'start': 1953.366, 'duration': 2.661}, {'end': 1957.368, 'text': "So let's try that out.", 'start': 1956.547, 'duration': 0.821}, {'end': 1960.008, 'text': 'NPM run and build.', 'start': 1957.448, 'duration': 2.56}, {'end': 1966.77, 'text': 'And notice it ran the command here and notice it created that tail1.css file.', 'start': 1961.749, 'duration': 5.021}, {'end': 1967.791, 'text': 'We click it.', 'start': 1967.331, 'duration': 0.46}, {'end': 1971.272, 'text': 'As you can see, it has our color there.', 'start': 1968.391, 'duration': 2.881}, {'end': 1977.974, 'text': 'And because index.html is looking for tail1.css, it should make our page blue.', 'start': 1971.852, 'duration': 6.122}, {'end': 1979.852, 'text': 'There it is.', 'start': 1979.332, 'duration': 0.52}, {'end': 1981.413, 'text': "So now we know it's working.", 'start': 1980.392, 'duration': 1.021}, {'end': 1989.875, 'text': 'Almost done with the setup, we have to go back to our index.css and we have to import a couple of things that are specific to Tailwind.', 'start': 1982.073, 'duration': 7.802}, {'end': 1998.797, 'text': "So if we go back to installation, we're going to take this right here, at Tailwind base, at Tailwind components and utilities.", 'start': 1990.455, 'duration': 8.342}, {'end': 2001.958, 'text': "All right, that's gonna import everything that we need.", 'start': 1999.418, 'duration': 2.54}, {'end': 2005.439, 'text': "It's essentially going to import Tailwind itself.", 'start': 2003.259, 'duration': 2.18}, {'end': 2012.342, 'text': "So, when we save this notice, this is going to run again, it's going to say done and it's going to take a little bit longer,", 'start': 2006.38, 'duration': 5.962}, {'end': 2016.743, 'text': 'because these things i they have six seconds 6.1 seconds or so.', 'start': 2012.342, 'duration': 4.401}, {'end': 2025.707, 'text': "now, if we click here and as you can see, it's a very long file that includes a tailwind along with i, anything that you created.", 'start': 2016.743, 'duration': 8.964}, {'end': 2027.228, 'text': 'that was custom.', 'start': 2025.707, 'duration': 1.521}, {'end': 2029.148, 'text': "now, if we go back, it's still going to be blue.", 'start': 2027.228, 'duration': 1.92}, {'end': 2032.05, 'text': 'so we know that our CSS is working as well.', 'start': 2029.148, 'duration': 2.902}, {'end': 2039.554, 'text': 'So every time we make a change to these files, the live reload refreshes the server or the browser for us automatically, which is very handy.', 'start': 2032.47, 'duration': 7.084}, {'end': 2044.076, 'text': 'All right, so now that we have it all set up, we can go back to body.', 'start': 2040.414, 'duration': 3.662}, {'end': 2046.138, 'text': "We'll remove that tag right there.", 'start': 2044.237, 'duration': 1.901}, {'end': 2055.563, 'text': 'And now we can start with the bulk of the tutorial which is going to be creating and getting our site ready, working here specifically,', 'start': 2046.278, 'duration': 9.285}, {'end': 2057.004, 'text': 'primarily in index.html.', 'start': 2055.563, 'duration': 1.441}, {'end': 2064.489, 'text': 'Okay, so the first thing we want to get started with when it comes to writing your HTML markup, as you should hopefully already know,', 'start': 2058.109, 'duration': 6.38}], 'summary': 'Setting up tailwind css, changing background color to blue, importing specific tailwind components and utilities, and making changes to html markup.', 'duration': 125.502, 'max_score': 1938.987, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG201938987.jpg'}, {'end': 2104.032, 'src': 'embed', 'start': 2076.833, 'weight': 7, 'content': [{'end': 2079.754, 'text': "So we don't need to import an image like an SVG or anything.", 'start': 2076.833, 'duration': 2.921}, {'end': 2085.739, 'text': "And then over here we have a navigation, very standard navigation, that we're all going to style up,", 'start': 2080.574, 'duration': 5.165}, {'end': 2092.745, 'text': 'try to get it looking as close as possible to this section, minding the white space all around the overall width.', 'start': 2085.739, 'duration': 7.006}, {'end': 2098.73, 'text': "And of course that will be flexible depending on the size of the browser and if it's maximized.", 'start': 2093.364, 'duration': 5.366}, {'end': 2100.931, 'text': 'given the resolution and all the other stuff.', 'start': 2099.25, 'duration': 1.681}, {'end': 2102.811, 'text': "So let's keep this in mind.", 'start': 2100.971, 'duration': 1.84}, {'end': 2104.032, 'text': "This is kind of what we're aiming for.", 'start': 2102.851, 'duration': 1.181}], 'summary': 'Styling standard navigation to match section, considering white space and flexibility based on browser size and resolution.', 'duration': 27.199, 'max_score': 2076.833, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG202076833.jpg'}], 'start': 1667.068, 'title': 'Importing fonts and setting up tailwind css', 'summary': 'Discusses importing the poppins font from google fonts for a figma project, emphasizing the selection of font weights 400, 600, and 700. it also covers the process of setting up tailwind css, including creating index.css, package.json, running scripts, and importing tailwind specific components, leading to a live server preview with custom styles.', 'chapters': [{'end': 1708.926, 'start': 1667.068, 'title': 'Importing poppins font from google', 'summary': 'Discusses importing the poppins font from google fonts for a figma project, emphasizing the selection of font weights 400, 600, and 700 to minimize load times and downloads.', 'duration': 41.858, 'highlights': ['The importance of importing the Poppins font for a Figma project is emphasized.', 'Selecting font weights 400, 600, and 700 is recommended to minimize load times and downloads.', 'It is advised not to use more than three font weights to avoid adding excessive load times and downloads.']}, {'end': 2136.44, 'start': 1708.966, 'title': 'Setting up tailwind css', 'summary': 'Covers the process of setting up tailwind css, including creating index.css, package.json, running scripts, and importing tailwind specific components, leading to a live server preview with custom styles.', 'duration': 427.474, 'highlights': ['Creating index.css and linking tailwind.css The process involves creating index.css and linking a non-existent tailwind.css file in the project.', "Creating package.json and custom build script The steps include creating a package.json file and a custom 'build' script to transform the code written in index.css into a Tailwind.css file.", 'Running scripts and live server preview The demonstration includes running scripts through npm and using live server to preview changes, such as altering the background color of the page.', 'Importing Tailwind specific components The process involves importing Tailwind specific components like base, components, and utilities into the index.css.', 'Creating HTML markup for navigation The tutorial focuses on creating HTML markup for a navigation section, emphasizing the use of utility classes to style it.']}], 'duration': 469.372, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG201667068.jpg', 'highlights': ['Importing the Poppins font for a Figma project is crucial.', 'Selecting font weights 400, 600, and 700 is recommended to minimize load times and downloads.', 'Avoid using more than three font weights to prevent excessive load times and downloads.', 'Creating index.css and linking tailwind.css is part of the process.', "Creating package.json and a custom 'build' script is essential for transforming code into a Tailwind.css file.", 'Running scripts through npm and using live server for previewing changes is demonstrated.', 'Importing Tailwind specific components like base, components, and utilities into the index.css is part of the process.', 'Creating HTML markup for navigation and using utility classes to style it is emphasized.']}, {'end': 2730.646, 'segs': [{'end': 2177.79, 'src': 'embed', 'start': 2136.44, 'weight': 0, 'content': [{'end': 2143.342, 'text': 'which classes do you have to use to make this thing not only look like it does here, but also here, and make it responsive essentially?', 'start': 2136.44, 'duration': 6.902}, {'end': 2146.065, 'text': "Okay, so let's get us started.", 'start': 2143.982, 'duration': 2.083}, {'end': 2151.191, 'text': "First tag we're going to use for HTML is going to be header.", 'start': 2146.926, 'duration': 4.265}, {'end': 2154.335, 'text': 'And by the way, you can use M abbreviation.', 'start': 2152.352, 'duration': 1.983}, {'end': 2157.579, 'text': "So I'm not going to sit here typing all these little brackets and stuff as you see here.", 'start': 2154.375, 'duration': 3.204}, {'end': 2159.481, 'text': 'Let me make this a little bit larger.', 'start': 2158.16, 'duration': 1.321}, {'end': 2161.543, 'text': 'And we can also close this.', 'start': 2160.342, 'duration': 1.201}, {'end': 2170.767, 'text': 'And that way, when we type tags, like maybe like a link, we just hit A and it gets the boilerplate out of the way.', 'start': 2163.383, 'duration': 7.384}, {'end': 2175.409, 'text': 'I do have an Emmet crash course you can look up on my YouTube channel search as well.', 'start': 2170.807, 'duration': 4.602}, {'end': 2177.79, 'text': "All right, so we're gonna have a header.", 'start': 2176.129, 'duration': 1.661}], 'summary': 'Using classes to create a responsive header and optimize workflow in html.', 'duration': 41.35, 'max_score': 2136.44, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG202136440.jpg'}, {'end': 2339.455, 'src': 'embed', 'start': 2310.528, 'weight': 2, 'content': [{'end': 2317.213, 'text': 'and and this will have some classes are this top one at least now, notice on our design.', 'start': 2310.528, 'duration': 6.685}, {'end': 2319.495, 'text': 'we have this one.', 'start': 2318.274, 'duration': 1.221}, {'end': 2320.857, 'text': 'this is the active link.', 'start': 2319.495, 'duration': 1.362}, {'end': 2324, 'text': "And there's different ways to show the active or currently active page.", 'start': 2321.157, 'duration': 2.843}, {'end': 2327.304, 'text': 'You can underline it, you can add an icon, et cetera, et cetera.', 'start': 2324.641, 'duration': 2.663}, {'end': 2329.006, 'text': "I'm choosing just to change the color.", 'start': 2327.384, 'duration': 1.622}, {'end': 2332.929, 'text': 'we have to find a way to denote that.', 'start': 2330.767, 'duration': 2.162}, {'end': 2339.455, 'text': "So we're going to put in a class of text selected hyphen text.", 'start': 2333.089, 'duration': 6.366}], 'summary': "Designating the currently active page with the class 'text-selected-text.'", 'duration': 28.927, 'max_score': 2310.528, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG202310528.jpg'}, {'end': 2395.171, 'src': 'embed', 'start': 2373.409, 'weight': 3, 'content': [{'end': 2382.479, 'text': 'All right, so before we start working on the HTML for this section and making it look like a Figma, we are going to work with the body element first.', 'start': 2373.409, 'duration': 9.07}, {'end': 2389.126, 'text': "So what I mean by that is this is the very first tag in terms of what's rendered on the browser.", 'start': 2382.859, 'duration': 6.267}, {'end': 2395.171, 'text': 'So in body here, we can start applying some of our first Tailwind utility classes.', 'start': 2389.586, 'duration': 5.585}], 'summary': 'Preparing to work on html section to resemble figma using tailwind classes.', 'duration': 21.762, 'max_score': 2373.409, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG202373409.jpg'}, {'end': 2471.995, 'src': 'heatmap', 'start': 2409.083, 'weight': 0.728, 'content': [{'end': 2413.72, 'text': 'So if we save that look, it is the color of our design.', 'start': 2409.083, 'duration': 4.637}, {'end': 2415.502, 'text': 'how did it know to use that color?', 'start': 2413.72, 'duration': 1.782}, {'end': 2424.013, 'text': "well, if you recall, back here in our config file, it says body right there, and that's where it grabbed.", 'start': 2415.502, 'duration': 8.511}, {'end': 2427.525, 'text': 'that i information from essentially.', 'start': 2424.013, 'duration': 3.512}, {'end': 2429.166, 'text': 'Very cool stuff.', 'start': 2428.226, 'duration': 0.94}, {'end': 2434.508, 'text': "Now there's some other things we want to specify like our default font color.", 'start': 2429.786, 'duration': 4.722}, {'end': 2436.748, 'text': "We're going to put text hyphen white.", 'start': 2434.528, 'duration': 2.22}, {'end': 2441.87, 'text': "So where am I getting that from? Again, we're going to refer back to our documentation.", 'start': 2437.709, 'duration': 4.161}, {'end': 2451.533, 'text': "We're going to search and we're going to type in text and we can kind of scroll down here and see if there's a specific area in terms of text color.", 'start': 2441.89, 'duration': 9.643}, {'end': 2459.283, 'text': "So text colors, we just hit that, and it's gonna give us different areas.", 'start': 2452.697, 'duration': 6.586}, {'end': 2466.189, 'text': "Now sometimes it may be a little bit tricky to find exactly what you're looking for.", 'start': 2459.323, 'duration': 6.866}, {'end': 2471.254, 'text': 'So if I type in text white, for instance, There we go.', 'start': 2466.309, 'duration': 4.945}, {'end': 2471.995, 'text': 'Now we found it.', 'start': 2471.354, 'duration': 0.641}], 'summary': 'Config file specifies body color and default font color for design implementation.', 'duration': 62.912, 'max_score': 2409.083, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG202409083.jpg'}], 'start': 2136.44, 'title': 'Html header tag and styling', 'summary': 'Discusses utilizing the html header tag for responsive design, introduces the use of emmet abbreviation for faster coding, and covers creating a header with a logo, navigation links, and button elements, applying body styling with tailwind utility classes such as background color, font color, and padding, and provides examples and explanations of each.', 'chapters': [{'end': 2177.79, 'start': 2136.44, 'title': 'Html header tag for responsive design', 'summary': 'Discusses using the html header tag for responsive design and introduces the use of emmet abbreviation for faster coding.', 'duration': 41.35, 'highlights': ['Introducing the use of Emmet abbreviation for faster coding, saving time and increasing efficiency.', 'Using the HTML header tag for creating a responsive design, demonstrating practical application of coding concepts.']}, {'end': 2730.646, 'start': 2178.35, 'title': 'Creating header and body styling', 'summary': 'Covers creating a header with a logo, navigation links, and button elements, and applying body styling with tailwind utility classes such as background color, font color, and padding, and provides examples and explanations of each.', 'duration': 552.296, 'highlights': ['Creating a header with a logo, navigation links, and button elements The transcript discusses creating a header with a logo, navigation links, and button elements, including specifying classes for text size and active link color, and planning for smooth scrolling to different sections of a one-page website.', 'Applying body styling with Tailwind utility classes The transcript explains applying body styling using Tailwind utility classes for background color, font color, and padding, with references to the configuration file and documentation for selecting specific styles.']}], 'duration': 594.206, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG202136440.jpg', 'highlights': ['Using the HTML header tag for creating a responsive design, demonstrating practical application of coding concepts.', 'Introducing the use of Emmet abbreviation for faster coding, saving time and increasing efficiency.', 'Creating a header with a logo, navigation links, and button elements, including specifying classes for text size and active link color, and planning for smooth scrolling to different sections of a one-page website.', 'Applying body styling with Tailwind utility classes for background color, font color, and padding, with references to the configuration file and documentation for selecting specific styles.']}, {'end': 3498.169, 'segs': [{'end': 2782.559, 'src': 'embed', 'start': 2755.623, 'weight': 2, 'content': [{'end': 2758.784, 'text': "If you understand CSS, maybe you've heard of flexbox before.", 'start': 2755.623, 'duration': 3.161}, {'end': 2763.566, 'text': 'We want to make this a flexbox container because we have two elements.', 'start': 2759.684, 'duration': 3.882}, {'end': 2767.188, 'text': 'We have the actual logo and we have the navigation here.', 'start': 2763.626, 'duration': 3.562}, {'end': 2771.811, 'text': 'And we want to create those, at least on desktop, to be two columns.', 'start': 2767.888, 'duration': 3.923}, {'end': 2773.892, 'text': "So we're making a Flexbox container.", 'start': 2772.071, 'duration': 1.821}, {'end': 2777.975, 'text': "If you don't know what Flexbox or what the CSS grid is, pause right now.", 'start': 2773.973, 'duration': 4.002}, {'end': 2781.458, 'text': 'Go do a search on Google, read up.', 'start': 2778.676, 'duration': 2.782}, {'end': 2782.559, 'text': "There's videos.", 'start': 2781.738, 'duration': 0.821}], 'summary': 'Using flexbox to create a two-column layout for logo and navigation on desktop.', 'duration': 26.936, 'max_score': 2755.623, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG202755623.jpg'}, {'end': 2826.85, 'src': 'embed', 'start': 2802.852, 'weight': 1, 'content': [{'end': 2809.658, 'text': 'we can also specify some flexbox specific properties like we want to justify, uh, the space between.', 'start': 2802.852, 'duration': 6.806}, {'end': 2814.402, 'text': "so that's going to move the logo all the way over here and then the navigation all the way over here.", 'start': 2809.658, 'duration': 4.744}, {'end': 2824.549, 'text': "so We're also going to put items-center and let's just see what this does by default, just to see what's happening so far.", 'start': 2814.402, 'duration': 10.147}, {'end': 2826.85, 'text': 'Okay, so we see we have this container.', 'start': 2825.189, 'duration': 1.661}], 'summary': 'Using flexbox to justify space between items and center them in a container.', 'duration': 23.998, 'max_score': 2802.852, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG202802852.jpg'}, {'end': 2920.11, 'src': 'embed', 'start': 2898.581, 'weight': 0, 'content': [{'end': 2908.906, 'text': 'it kind of loses it, And so we can also specify certain things, certain CSS properties or Tailwind properties, to only be specified at certain widths.', 'start': 2898.581, 'duration': 10.325}, {'end': 2909.646, 'text': 'All right.', 'start': 2909.346, 'duration': 0.3}, {'end': 2916.929, 'text': "And so these are, that's an entire section on responsive design, responsive design right here in Tailwind CSS.", 'start': 2909.686, 'duration': 7.243}, {'end': 2918.61, 'text': "And it's going to tell you all about that.", 'start': 2916.989, 'duration': 1.621}, {'end': 2920.11, 'text': "So here's the breakpoints.", 'start': 2919.05, 'duration': 1.06}], 'summary': 'Tailwind css includes a section on responsive design with breakpoints.', 'duration': 21.529, 'max_score': 2898.581, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG202898581.jpg'}], 'start': 2730.746, 'title': 'Using flexbox and responsive design in tailwind css', 'summary': 'Covers using flexbox in tailwind css to create a two-column layout on desktop, emphasizing the importance of understanding css properties like flex and css grid. it also discusses implementing flexbox properties for layout alignment, responsive design with specific breakpoints, and white space adjustments for different device sizes, demonstrated with detailed examples and visual representations.', 'chapters': [{'end': 2802.852, 'start': 2730.746, 'title': 'Using flexbox in tailwind css', 'summary': 'Discusses using flexbox in tailwind css to create a two-column layout on desktop and emphasizes the importance of understanding css properties such as flex and css grid.', 'duration': 72.106, 'highlights': ['The chapter explains the concept of using Flexbox in Tailwind CSS to create a two-column layout on desktop.', 'It emphasizes the importance of understanding CSS properties such as flex and CSS grid.', 'The instructor encourages users to search for more information on Flexbox and CSS grid if they are unfamiliar with these concepts.']}, {'end': 3498.169, 'start': 2802.852, 'title': 'Flexbox and responsive design in tailwind css', 'summary': 'Covers the implementation of flexbox properties like justify-content and items-center to achieve layout alignment, as well as the use of tailwind css to create responsive design with specific breakpoints and white space adjustments for different device sizes, demonstrated with detailed examples and visual representations.', 'duration': 695.317, 'highlights': ['Implementation of flexbox properties like justify-content and items-center to achieve layout alignment The speaker demonstrates the use of flexbox properties like justify-content and items-center to align the layout, achieving a visually appealing design.', 'Demonstration of Tailwind CSS for responsive design with specific breakpoints and white space adjustments for different device sizes The chapter provides detailed examples and visual representations of using Tailwind CSS to create responsive design, incorporating specific breakpoints and white space adjustments for different device sizes.']}], 'duration': 767.423, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG202730746.jpg', 'highlights': ['The chapter provides detailed examples and visual representations of using Tailwind CSS to create responsive design, incorporating specific breakpoints and white space adjustments for different device sizes.', 'Implementation of flexbox properties like justify-content and items-center to achieve layout alignment The speaker demonstrates the use of flexbox properties like justify-content and items-center to align the layout, achieving a visually appealing design.', 'The chapter explains the concept of using Flexbox in Tailwind CSS to create a two-column layout on desktop.', 'It emphasizes the importance of understanding CSS properties such as flex and CSS grid.', 'The instructor encourages users to search for more information on Flexbox and CSS grid if they are unfamiliar with these concepts.']}, {'end': 4669.98, 'segs': [{'end': 3546.484, 'src': 'embed', 'start': 3520.907, 'weight': 0, 'content': [{'end': 3525.628, 'text': "We're gonna give ourselves a little bit more lines to work with and let's get started.", 'start': 3520.907, 'duration': 4.721}, {'end': 3535.31, 'text': "So there's gonna be overall a class, that's gonna be an overall container that just houses those three elements, or those three blocks the navigation,", 'start': 3525.668, 'duration': 9.642}, {'end': 3538.291, 'text': 'the headline and the call to action, and then the picture.', 'start': 3535.31, 'duration': 2.981}, {'end': 3542.119, 'text': "So we're gonna put container here And open that up.", 'start': 3538.751, 'duration': 3.368}, {'end': 3546.484, 'text': "And then inside the container, we're going to have a mess of other utility classes for this.", 'start': 3542.88, 'duration': 3.604}], 'summary': 'Designing a class to house navigation, headline, call to action, and picture with additional utility classes.', 'duration': 25.577, 'max_score': 3520.907, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG203520907.jpg'}, {'end': 3692.582, 'src': 'embed', 'start': 3638.146, 'weight': 1, 'content': [{'end': 3649.088, 'text': "So we're going to have our div class of flex, and we're going to put in flex wrap, and wrap is another Flexbox specific property.", 'start': 3638.146, 'duration': 10.942}, {'end': 3653.189, 'text': "And then also on medium, we're going to say flex no wrap.", 'start': 3649.769, 'duration': 3.42}, {'end': 3656.51, 'text': "And we'll see how these things sort of work once we..", 'start': 3654.189, 'duration': 2.321}, {'end': 3661.233, 'text': 'add the actual content in and we adjust the size of the browser.', 'start': 3658.07, 'duration': 3.163}, {'end': 3666.859, 'text': "After that, we're going to have a specific section just for the left navigation.", 'start': 3662.294, 'duration': 4.565}, {'end': 3671.323, 'text': "And that's the dotted navigation that we saw in the design.", 'start': 3666.879, 'duration': 4.444}, {'end': 3676.068, 'text': "So we're going to put nav and we're going to give it a class.", 'start': 3671.363, 'duration': 4.705}, {'end': 3680.996, 'text': 'And this is going to be displayed as inline block.', 'start': 3678.055, 'duration': 2.941}, {'end': 3687.159, 'text': "So it's the same as saying display inline block in CSS, but this is the Tailwind way of doing it.", 'start': 3681.177, 'duration': 5.982}, {'end': 3692.582, 'text': 'And then we have some other properties that we have to put in here.', 'start': 3687.86, 'duration': 4.722}], 'summary': 'Using flexbox properties for layout, including flex wrap and inline block, in tailwind css.', 'duration': 54.436, 'max_score': 3638.146, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG203638146.jpg'}, {'end': 3762.042, 'src': 'heatmap', 'start': 3703.983, 'weight': 0.863, 'content': [{'end': 3704.804, 'text': 'on large and up.', 'start': 3703.983, 'duration': 0.821}, {'end': 3706.625, 'text': "So it's quite a bit higher.", 'start': 3704.884, 'duration': 1.741}, {'end': 3709.867, 'text': "On large, we're also going to put margin right.", 'start': 3707.686, 'duration': 2.181}, {'end': 3710.848, 'text': 'Oops, sorry.', 'start': 3710.127, 'duration': 0.721}, {'end': 3713.89, 'text': 'I meant width is going to be four.', 'start': 3711.929, 'duration': 1.961}, {'end': 3721.295, 'text': "It's also going to be fixed, which means when we scroll down on this page it's going to stay in view the entire time,", 'start': 3714.991, 'duration': 6.304}, {'end': 3724.077, 'text': 'which is typical for that dot sort of side navigation.', 'start': 3721.295, 'duration': 2.782}, {'end': 3732.222, 'text': "We're going to put in here another tailwind property of left or utility, rather a left percentage,", 'start': 3725.117, 'duration': 7.105}, {'end': 3739.267, 'text': 'and then hidden on devices that are smaller all the way up until xl.', 'start': 3732.222, 'duration': 7.045}, {'end': 3744.17, 'text': "so this side navigation we don't have enough room for on smaller devices.", 'start': 3739.267, 'duration': 4.903}, {'end': 3747.792, 'text': 'so we hide it on everything up until large devices.', 'start': 3744.17, 'duration': 3.622}, {'end': 3749.754, 'text': 'hopefully that makes sense, all right.', 'start': 3747.792, 'duration': 1.962}, {'end': 3752.135, 'text': "so that's that for that portion.", 'start': 3749.754, 'duration': 2.381}, {'end': 3756.618, 'text': 'now we have to create the markup here almost for each individual icon.', 'start': 3752.135, 'duration': 4.483}, {'end': 3762.042, 'text': "but we're going to have one more uh element that wraps a parent element, that wraps around it.", 'start': 3756.618, 'duration': 5.424}], 'summary': 'Configuring side navigation with fixed width and hidden on smaller devices.', 'duration': 58.059, 'max_score': 3703.983, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG203703983.jpg'}, {'end': 3749.754, 'src': 'embed', 'start': 3721.295, 'weight': 2, 'content': [{'end': 3724.077, 'text': 'which is typical for that dot sort of side navigation.', 'start': 3721.295, 'duration': 2.782}, {'end': 3732.222, 'text': "We're going to put in here another tailwind property of left or utility, rather a left percentage,", 'start': 3725.117, 'duration': 7.105}, {'end': 3739.267, 'text': 'and then hidden on devices that are smaller all the way up until xl.', 'start': 3732.222, 'duration': 7.045}, {'end': 3744.17, 'text': "so this side navigation we don't have enough room for on smaller devices.", 'start': 3739.267, 'duration': 4.903}, {'end': 3747.792, 'text': 'so we hide it on everything up until large devices.', 'start': 3744.17, 'duration': 3.622}, {'end': 3749.754, 'text': 'hopefully that makes sense, all right.', 'start': 3747.792, 'duration': 1.962}], 'summary': 'Implementing a side navigation using tailwind properties, hidden on smaller devices until extra large, due to limited space.', 'duration': 28.459, 'max_score': 3721.295, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG203721295.jpg'}, {'end': 3984.33, 'src': 'embed', 'start': 3960.632, 'weight': 6, 'content': [{'end': 3969.138, 'text': "Again, you could type in rounded corners, Tailwind CSS, and you'll find what the available ones obviously large and XL and small you can use as well.", 'start': 3960.632, 'duration': 8.506}, {'end': 3971.159, 'text': 'Margin left is going to be 10.', 'start': 3970.018, 'duration': 1.141}, {'end': 3975.002, 'text': "So we're pushing that label away from the little icons.", 'start': 3971.159, 'duration': 3.843}, {'end': 3980.627, 'text': "And then opacity is going to be zero by default because we're only going to show it on hover.", 'start': 3975.883, 'duration': 4.744}, {'end': 3984.33, 'text': "But I'm going to leave this off for now just so we can kind of see.", 'start': 3981.047, 'duration': 3.283}], 'summary': 'Using tailwind css to set rounded corners, sizes, margin, and opacity for hover effect.', 'duration': 23.698, 'max_score': 3960.632, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG203960632.jpg'}, {'end': 4625.253, 'src': 'embed', 'start': 4596.309, 'weight': 7, 'content': [{'end': 4598.89, 'text': 'And now it is down exactly where we want it.', 'start': 4596.309, 'duration': 2.581}, {'end': 4604.25, 'text': "There we go, now it's looking pretty solid in my opinion.", 'start': 4601.209, 'duration': 3.041}, {'end': 4610.791, 'text': 'All right, so the next section of the design is right over here where it says My Work.', 'start': 4604.79, 'duration': 6.001}, {'end': 4612.311, 'text': 'All right.', 'start': 4611.671, 'duration': 0.64}, {'end': 4617.672, 'text': 'so this is gonna get a lot easier now, because these sections share a lot of commonalities in the HTML structure,', 'start': 4612.311, 'duration': 5.361}, {'end': 4620.092, 'text': 'along with the classes that apply them.', 'start': 4617.672, 'duration': 2.42}, {'end': 4625.253, 'text': "So let's go ahead and get started with the My Work section right here.", 'start': 4620.653, 'duration': 4.6}], 'summary': 'Html design sections share commonalities, making it easier to work with.', 'duration': 28.944, 'max_score': 4596.309, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG204596309.jpg'}], 'start': 3498.169, 'title': 'Creating web layout and navigation with tailwind css', 'summary': 'Covers creating hero section markup, navigation dots, and web layout using tailwind css, emphasizing design elements, flexbox properties, and responsive design techniques.', 'chapters': [{'end': 3845.077, 'start': 3498.169, 'title': 'Creating hero section markup', 'summary': 'Describes the process of creating the markup for a hero section, involving the use of tailwind css utility classes to structure containers, apply flexbox properties, and specify navigation and positioning properties for different device sizes.', 'duration': 346.908, 'highlights': ["The process involves creating an overall container housing navigation, headline, call to action, and picture, utilizing Tailwind utility classes like 'container', 'margin-top-16', 'flex', 'justify-between', 'items-center', and 'mx-auto'. The overall container is structured using Tailwind CSS utility classes like 'container', 'margin-top-16', 'flex', 'justify-between', 'items-center', and 'mx-auto' to create space and align elements within the hero section.", "The use of Flexbox properties like 'flex' and 'flex-wrap' is demonstrated, along with conditional properties for different device sizes such as 'flex-no-wrap' for medium screens and 'hidden' for smaller devices. Flexbox properties like 'flex' and 'flex-wrap' are employed to organize and wrap content within the hero section, and conditional properties are used to adapt the layout for different device sizes.", 'The section covers the creation and styling of a specific left navigation element, including display properties, width, fixed positioning, and conditional hiding for smaller devices. The process involves creating and styling a left navigation element with display properties, width, fixed positioning, and conditional hiding to ensure its visibility on larger devices and adaptability to different screen sizes.', "The use of Tailwind CSS utility classes like 'absolute', 'left-50', 'transform', 'translate-x-1/2', 'space-y-x', and 'mt-36' is demonstrated for positioning and spacing of the navigation dots. Tailwind CSS utility classes like 'absolute', 'left-50', 'transform', 'translate-x-1/2', 'space-y-x', and 'mt-36' are used to position and space the navigation dots within the hero section."]}, {'end': 4221.555, 'start': 3845.737, 'title': 'Creating navigation dots with tailwind css', 'summary': 'Covers the creation of navigation dots using tailwind css, specifying the design elements, such as width, height, border, and color, and incorporating hover effects and custom classes into the design.', 'duration': 375.818, 'highlights': ['The chapter covers the creation of navigation dots using Tailwind CSS. The tutorial focuses on creating navigation dots using Tailwind CSS.', 'Specification of design elements such as width, height, border, and color for the navigation dots. The tutorial specifies the design elements for the navigation dots, including width, height, border, and color.', 'Incorporating hover effects and custom classes into the design. The tutorial demonstrates the incorporation of hover effects and custom classes into the design of the navigation dots.']}, {'end': 4669.98, 'start': 4221.575, 'title': 'Building beautiful web experiences', 'summary': 'Outlines the process of creating a web layout using html and css, focusing on the design and styling of elements such as headlines, buttons, and images, while utilizing flexbox properties and responsive design techniques.', 'duration': 448.405, 'highlights': ['The process of creating a web layout using HTML and CSS The transcript details the steps involved in creating a web layout using HTML and CSS, including the use of Flexbox properties and responsive design techniques.', 'Focus on the design and styling of elements such as headlines, buttons, and images The chapter emphasizes the design and styling of various elements such as headlines, buttons, and images within the web layout, showcasing the use of specific classes and properties to achieve the desired visual presentation.', "Utilization of Flexbox properties and responsive design techniques It highlights the use of Flexbox properties and responsive design techniques to ensure the layout's adaptability to different screen sizes, demonstrating the application of specific classes and settings for optimal responsiveness."]}], 'duration': 1171.811, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG203498169.jpg', 'highlights': ["The process involves creating an overall container housing navigation, headline, call to action, and picture, utilizing Tailwind utility classes like 'container', 'margin-top-16', 'flex', 'justify-between', 'items-center', and 'mx-auto'.", "The use of Flexbox properties like 'flex' and 'flex-wrap' is demonstrated, along with conditional properties for different device sizes such as 'flex-no-wrap' for medium screens and 'hidden' for smaller devices.", 'The section covers the creation and styling of a specific left navigation element, including display properties, width, fixed positioning, and conditional hiding for smaller devices.', "The use of Tailwind CSS utility classes like 'absolute', 'left-50', 'transform', 'translate-x-1/2', 'space-y-x', and 'mt-36' is demonstrated for positioning and spacing of the navigation dots.", 'The chapter covers the creation of navigation dots using Tailwind CSS.', 'Specification of design elements such as width, height, border, and color for the navigation dots.', 'Incorporating hover effects and custom classes into the design.', 'The process of creating a web layout using HTML and CSS.', 'Focus on the design and styling of elements such as headlines, buttons, and images.', 'Utilization of Flexbox properties and responsive design techniques.']}, {'end': 5858.788, 'segs': [{'end': 4763.737, 'src': 'heatmap', 'start': 4698.01, 'weight': 0.761, 'content': [{'end': 4703.035, 'text': "So we're going to say width is going to be three fourths of its parent container, margin top 12.", 'start': 4698.01, 'duration': 5.025}, {'end': 4712.085, 'text': "On medium, it's going to turn into absolute medium and up, making it absolute so that it can kind of go behind text if it needs to.", 'start': 4703.035, 'duration': 9.05}, {'end': 4718.951, 'text': 'And then margin top six on medium margin top will be zero.', 'start': 4712.105, 'duration': 6.846}, {'end': 4722.392, 'text': "and all these classes you kind of just create as you're you're.", 'start': 4718.951, 'duration': 3.441}, {'end': 4728.274, 'text': "you're dragging the browser in and out to see how it's responding and where it's sitting and where you want it to sit.", 'start': 4722.392, 'duration': 5.882}, {'end': 4731.275, 'text': 'so hopefully that makes sense also z um one.', 'start': 4728.274, 'duration': 3.001}, {'end': 4736.817, 'text': "that's a custom um css that we defined here in the index.css.", 'start': 4731.275, 'duration': 5.542}, {'end': 4739.238, 'text': "so now let's see if our person's there.", 'start': 4736.817, 'duration': 2.421}, {'end': 4742.339, 'text': 'yes, look at that.', 'start': 4739.238, 'duration': 3.101}, {'end': 4744.804, 'text': "It's like magic.", 'start': 4743.803, 'duration': 1.001}, {'end': 4745.204, 'text': 'I love it.', 'start': 4744.804, 'duration': 0.4}, {'end': 4748.947, 'text': 'Now we can proceed to the very next section.', 'start': 4745.924, 'duration': 3.023}, {'end': 4758.613, 'text': "So at this point because this is kind of a lengthy tutorial already what I'm going to do is just copy and paste each section and quickly go over the markup.", 'start': 4749.587, 'duration': 9.026}, {'end': 4763.737, 'text': 'So for the My Works section, this is the markup that we have here.', 'start': 4759.053, 'duration': 4.684}], 'summary': 'Adjusting width and margins for responsive design, using custom css, and proceeding to the next section.', 'duration': 65.727, 'max_score': 4698.01, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG204698010.jpg'}, {'end': 4728.274, 'src': 'embed', 'start': 4703.035, 'weight': 2, 'content': [{'end': 4712.085, 'text': "On medium, it's going to turn into absolute medium and up, making it absolute so that it can kind of go behind text if it needs to.", 'start': 4703.035, 'duration': 9.05}, {'end': 4718.951, 'text': 'And then margin top six on medium margin top will be zero.', 'start': 4712.105, 'duration': 6.846}, {'end': 4722.392, 'text': "and all these classes you kind of just create as you're you're.", 'start': 4718.951, 'duration': 3.441}, {'end': 4728.274, 'text': "you're dragging the browser in and out to see how it's responding and where it's sitting and where you want it to sit.", 'start': 4722.392, 'duration': 5.882}], 'summary': 'Styling adjustments for medium screens include making elements absolute and adjusting margins for responsive design.', 'duration': 25.239, 'max_score': 4703.035, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG204703035.jpg'}, {'end': 4804.94, 'src': 'embed', 'start': 4776.243, 'weight': 3, 'content': [{'end': 4780.545, 'text': "I'm not going to go through all these other ones because I think you're starting to get the process here.", 'start': 4776.243, 'duration': 4.302}, {'end': 4786.288, 'text': 'Outside of that, we have just a, this is all wrapped in a section as well with a width of full.', 'start': 4781.085, 'duration': 5.203}, {'end': 4788.589, 'text': 'We have our H2 element of my work.', 'start': 4786.868, 'duration': 1.721}, {'end': 4792.331, 'text': 'We have a paragraph of section paragraph is here.', 'start': 4789.409, 'duration': 2.922}, {'end': 4795.914, 'text': 'And then we have our grid.', 'start': 4793.132, 'duration': 2.782}, {'end': 4800.637, 'text': 'And the CSS grid is a great way to lay out things like thumbnails.', 'start': 4795.934, 'duration': 4.703}, {'end': 4804.94, 'text': "It's similar to Flexbox, but it's kind of enhanced in a way.", 'start': 4801.757, 'duration': 3.183}], 'summary': 'Introduction to web layout elements: h2, paragraph, and css grid for thumbnails.', 'duration': 28.697, 'max_score': 4776.243, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG204776243.jpg'}, {'end': 5001.398, 'src': 'embed', 'start': 4975.521, 'weight': 0, 'content': [{'end': 4981.728, 'text': "and we're just about done with the HTML markup and and we're gonna put that right here.", 'start': 4975.521, 'duration': 6.207}, {'end': 4988.131, 'text': 'So again, when it comes to form elements, I keep on clicking that by accident.', 'start': 4982.728, 'duration': 5.403}, {'end': 4996.895, 'text': 'It comes to form elements, you have your Tailwind specific classes that help you easily style all of that up.', 'start': 4989.071, 'duration': 7.824}, {'end': 5001.398, 'text': 'Again, same for opening elements that we have here.', 'start': 4997.775, 'duration': 3.623}], 'summary': 'Html markup using tailwind specific classes for easy styling.', 'duration': 25.877, 'max_score': 4975.521, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG204975521.jpg'}, {'end': 5112.029, 'src': 'embed', 'start': 5085.413, 'weight': 4, 'content': [{'end': 5094.257, 'text': "main.js, all right, and inside of main.js, we're going to create a function that will update everything.", 'start': 5085.413, 'duration': 8.844}, {'end': 5099.481, 'text': "Again, I'm just going to go ahead and paste this and then describe what's happening.", 'start': 5094.757, 'duration': 4.724}, {'end': 5101.842, 'text': "So here's a function called update list.", 'start': 5099.521, 'duration': 2.321}, {'end': 5112.029, 'text': "Now this is gonna be responsible for when a person's scrolling either with their finger on a phone or a tablet or their mouse in a browser,", 'start': 5101.902, 'duration': 10.127}], 'summary': "Main.js file will contain a function 'updatelist' responsible for handling scrolling behavior.", 'duration': 26.616, 'max_score': 5085.413, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG205085413.jpg'}, {'end': 5396.218, 'src': 'embed', 'start': 5339.744, 'weight': 5, 'content': [{'end': 5348.731, 'text': 'All right, so now it gives you some information in terms of how to initialize this to GitHub based on your project.', 'start': 5339.744, 'duration': 8.987}, {'end': 5351.533, 'text': "So there's a few things.", 'start': 5349.291, 'duration': 2.242}, {'end': 5355.055, 'text': 'You could set this up in desktop or you can do this in command line.', 'start': 5351.733, 'duration': 3.322}, {'end': 5355.956, 'text': "You're going to need Git.", 'start': 5355.075, 'duration': 0.881}, {'end': 5361.76, 'text': "So you're going to just type in Google install Git and get to that point where you have it already installed.", 'start': 5356.436, 'duration': 5.324}, {'end': 5364.022, 'text': "And so we're just going to use this method here.", 'start': 5362.24, 'duration': 1.782}, {'end': 5366.462, 'text': "and I'll show you how to do that.", 'start': 5364.842, 'duration': 1.62}, {'end': 5370.243, 'text': "So let's open up our personal portfolio section.", 'start': 5366.562, 'duration': 3.681}, {'end': 5375.084, 'text': "I'm gonna move this off screen and you'll see the commands that I'm about to write.", 'start': 5371.223, 'duration': 3.861}, {'end': 5384.066, 'text': "So view terminal, we're gonna put new terminal and we're going to type in git init.", 'start': 5376.204, 'duration': 7.862}, {'end': 5388.387, 'text': "All right, then we're going to type in git add new.", 'start': 5385.426, 'duration': 2.961}, {'end': 5391.537, 'text': 'period, which means simply all.', 'start': 5390.117, 'duration': 1.42}, {'end': 5396.218, 'text': "We're going to then git commit hyphen m.", 'start': 5392.398, 'duration': 3.82}], 'summary': 'Initiate github setup using git commands and terminal.', 'duration': 56.474, 'max_score': 5339.744, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG205339744.jpg'}, {'end': 5471.242, 'src': 'embed', 'start': 5439.02, 'weight': 1, 'content': [{'end': 5445.445, 'text': "So now if we go back and we refresh this, you're going to see all of our files.", 'start': 5439.02, 'duration': 6.425}, {'end': 5446.245, 'text': 'All right.', 'start': 5445.905, 'duration': 0.34}, {'end': 5447.746, 'text': "So that's the first step.", 'start': 5446.665, 'duration': 1.081}, {'end': 5451.749, 'text': 'And now we have to head on over to Hostinger.com.', 'start': 5448.167, 'duration': 3.582}, {'end': 5454.271, 'text': "I'm going to go ahead and choose under hosting.", 'start': 5452.17, 'duration': 2.101}, {'end': 5456.072, 'text': 'We could do shared web hosting for this.', 'start': 5454.351, 'duration': 1.721}, {'end': 5458.594, 'text': 'You have all the pricing options that you can there.', 'start': 5456.653, 'duration': 1.941}, {'end': 5460.416, 'text': 'You can then make your own decision.', 'start': 5458.754, 'duration': 1.662}, {'end': 5471.242, 'text': "I'm just going to choose this section right here for the premium and I'm going to leave this just at just for my purposes.", 'start': 5460.876, 'duration': 10.366}], 'summary': 'Select shared web hosting option at hostinger.com for premium services.', 'duration': 32.222, 'max_score': 5439.02, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG205439020.jpg'}, {'end': 5732.575, 'src': 'embed', 'start': 5684.864, 'weight': 8, 'content': [{'end': 5690.589, 'text': 'We could deploy it right here and then we can also set up automatic or auto deployment right here.', 'start': 5684.864, 'duration': 5.725}, {'end': 5695.453, 'text': "Now let's just set up auto deployment and it can make our life a little bit easier.", 'start': 5690.609, 'duration': 4.844}, {'end': 5698.335, 'text': "So what we'll do is we'll click this on the webhook URL.", 'start': 5695.513, 'duration': 2.822}, {'end': 5700.657, 'text': "We're going to go back to our GitHub project.", 'start': 5698.895, 'duration': 1.762}, {'end': 5704.8, 'text': "We're going to go to settings and then we're going to go over to webhooks.", 'start': 5700.677, 'duration': 4.123}, {'end': 5716.706, 'text': "So we're going to add a webhook and we're going to copy in this area right here, or paste rather that deploy key that we set up or the webhook URL.", 'start': 5706.061, 'duration': 10.645}, {'end': 5717.266, 'text': 'rather sorry.', 'start': 5716.706, 'duration': 0.56}, {'end': 5728.951, 'text': "We're going to leave content type as what it is by default and we're going to leave secret empty and just the push event is what we want and then add webhook right here.", 'start': 5717.286, 'duration': 11.665}, {'end': 5732.575, 'text': 'All right, so it should tell you it was successfully created.', 'start': 5729.892, 'duration': 2.683}], 'summary': 'Setting up auto deployment via webhook on github project.', 'duration': 47.711, 'max_score': 5684.864, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG205684864.jpg'}, {'end': 5858.147, 'src': 'heatmap', 'start': 5794.772, 'weight': 7, 'content': [{'end': 5804.755, 'text': 'So now with the automatic deployment, if we go back to our site here, this should now have updated to view my work.', 'start': 5794.772, 'duration': 9.983}, {'end': 5806.456, 'text': "So it's an automatic deployment.", 'start': 5804.795, 'duration': 1.661}, {'end': 5809.017, 'text': 'Every time you push to GitHub.', 'start': 5806.876, 'duration': 2.141}, {'end': 5818.639, 'text': 'GitHub will then send a ping, essentially to Hostinger, which will then download the updates and automatically deploy them to your website.', 'start': 5809.017, 'duration': 9.622}, {'end': 5820.3, 'text': 'Awesome Awesome stuff.', 'start': 5818.98, 'duration': 1.32}, {'end': 5822.682, 'text': 'All right, everybody, hopefully you enjoyed that.', 'start': 5820.68, 'duration': 2.002}, {'end': 5830.808, 'text': 'I know it was a bit lengthy, but hopefully now you have some confidence in terms of both what it means to create a really solid portfolio,', 'start': 5823.122, 'duration': 7.686}, {'end': 5839.535, 'text': "whether you're a designer or a developer of some sort, and also how to deploy a project with automatic GitHub deployment.", 'start': 5830.808, 'duration': 8.727}, {'end': 5846.4, 'text': 'I definitely check out the top link of this YouTube description, which is a sponsor of this video, Hostinger.com.', 'start': 5840.896, 'duration': 5.504}, {'end': 5850.422, 'text': "They're a really solid host and obviously with excellent pricing.", 'start': 5846.68, 'duration': 3.742}, {'end': 5856.346, 'text': "And as you've seen during the signup process, it is very smooth, very user-friendly and easy to use.", 'start': 5850.763, 'duration': 5.583}, {'end': 5858.147, 'text': 'All right, everybody, I will see you next time.', 'start': 5856.446, 'duration': 1.701}], 'summary': 'Automatic deployment from github to hostinger for website updates. confidence in creating solid portfolio and deploying projects with ease.', 'duration': 27.91, 'max_score': 5794.772, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG205794772.jpg'}], 'start': 4669.98, 'title': 'Using tailwind css and deploying a website', 'summary': "Covers building html markup with tailwind css, including image sources, utility classes, flex box layout, css grid, and javascript functions. it also details deploying a website using hostinger, including github repository creation, git commands, hosting setup, costing $21.48 with coupon code 'designcourse', and deploying a project to github with auto deployment and webhook setup.", 'chapters': [{'end': 5293.213, 'start': 4669.98, 'title': 'Building html markup with tailwind css', 'summary': 'Covers building html markup with tailwind css, including adding image sources, creating utility classes, flex box layout, css grid, and javascript functions for scrolling and smooth scrolling.', 'duration': 623.233, 'highlights': ['Creating utility classes for responsive design Utility classes are created for responsive design, such as setting the width to three fourths of the parent container and adjusting margins based on screen size.', 'Using flex box and CSS grid for layout Flex box and CSS grid are utilized for layout, with white space and grid elements used to structure sections and create a two-column layout for clients.', 'Implementation of JavaScript functions for scrolling JavaScript functions are implemented to update the display based on scrolling, including obtaining element positions and smooth scrolling to designated sections.']}, {'end': 5613.588, 'start': 5293.873, 'title': 'Deploying a website using hostinger', 'summary': "Details the process of deploying a website using hostinger, including creating a repository on github, initializing the project with git commands, and setting up hosting on hostinger, with a total cost of $21.48 and the use of a coupon code 'designcourse' for a discount.", 'duration': 319.715, 'highlights': ["Setting up hosting on Hostinger costs $21.48, with the option to apply a discount using the coupon code 'designcourse'. The process involves selecting a hosting plan, entering billing information, and applying the coupon code 'designcourse' for a discount on the total cost.", "The process involves creating a new repository on GitHub, initializing the project with Git commands, and uploading the files to the repository. The speaker demonstrates creating a new repository on GitHub, initializing the project with Git commands, and pushing the files to the repository using the 'git push' command.", "The speaker guides through the steps of initializing the project with Git commands, including 'git init', 'git add .', 'git commit -m', and 'git remote add origin'. The detailed steps of initializing the project with Git commands are explained, including 'git init', 'git add .', 'git commit -m', and 'git remote add origin'."]}, {'end': 5858.788, 'start': 5613.588, 'title': 'Github project deployment', 'summary': 'Covers the process of deploying a project to github, including setting up auto deployment, adding webhook, and demonstrating automatic deployment, ensuring easy and efficient project updates.', 'duration': 245.2, 'highlights': ['GitHub Project Deployment Process The transcript details the step-by-step process of deploying a project to GitHub, covering key actions such as generating an SSH key, adding a repository, and setting up auto deployment.', 'Setting up Auto Deployment The process includes setting up auto deployment for the project, ensuring that updates to the GitHub repository are automatically deployed to the website, minimizing manual intervention and ensuring efficient updates.', 'Adding Webhook for Automatic Deployment The transcript explains the addition of a webhook for automatic deployment, indicating the use of the webhook URL, setting the content type, and ensuring the proper event (push event) is selected for automatic deployment.', 'Demonstrating Automatic Deployment The transcript demonstrates the functionality of automatic deployment by making a change to the website, pushing the update to GitHub, and showing the automatic deployment of the update to the website, ensuring seamless and efficient project updates.']}], 'duration': 1188.808, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Vp6GC3jKG20/pics/Vp6GC3jKG204669980.jpg', 'highlights': ['Covers building html markup with tailwind css, including image sources, utility classes, flex box layout, css grid, and javascript functions.', "Setting up hosting on Hostinger costs $21.48, with the option to apply a discount using the coupon code 'designcourse'.", 'Creating utility classes for responsive design Utility classes are created for responsive design, such as setting the width to three fourths of the parent container and adjusting margins based on screen size.', 'Using flex box and CSS grid for layout Flex box and CSS grid are utilized for layout, with white space and grid elements used to structure sections and create a two-column layout for clients.', 'Implementation of JavaScript functions for scrolling JavaScript functions are implemented to update the display based on scrolling, including obtaining element positions and smooth scrolling to designated sections.', 'The process involves creating a new repository on GitHub, initializing the project with Git commands, and uploading the files to the repository.', "The speaker guides through the steps of initializing the project with Git commands, including 'git init', 'git add .', 'git commit -m', and 'git remote add origin'.", 'GitHub Project Deployment Process The transcript details the step-by-step process of deploying a project to GitHub, covering key actions such as generating an SSH key, adding a repository, and setting up auto deployment.', 'Setting up Auto Deployment The process includes setting up auto deployment for the project, ensuring that updates to the GitHub repository are automatically deployed to the website, minimizing manual intervention and ensuring efficient updates.', 'Adding Webhook for Automatic Deployment The transcript explains the addition of a webhook for automatic deployment, indicating the use of the webhook URL, setting the content type, and ensuring the proper event (push event) is selected for automatic deployment.']}], 'highlights': ['Demonstration of automatic Git deployment, allowing seamless updates to the live website with every change pushed to GitHub.', 'Emphasis on design considerations and responsive design to create an effective portfolio for job acquisition or client acquisition.', 'The tutorial covers building and deploying a modern portfolio, applicable to designers and developers, using Tailwind CSS for efficiency.', "Introduction to Hostinger.com, with a 10% discount using the coupon code 'designcourse', focusing on the premium shared hosting plan.", 'The importance of professional photographs for personal portfolios Investing in professional photography for a personal portfolio can significantly enhance the overall impression, leading to a more professional and well-designed site.', 'The significance of effective project thumbnails in portfolios Creating project thumbnails with perspective and thoughtful design can greatly impact the overall quality of the portfolio, providing a more professional presentation of the projects.', 'The value of live projects and UI design principles in portfolios Incorporating live projects and adhering to UI design principles can enhance the professional appeal of a portfolio, establishing credibility and expertise in the field.', 'Importing the Poppins font for a Figma project is crucial.', 'Selecting font weights 400, 600, and 700 is recommended to minimize load times and downloads.', 'The chapter provides detailed examples and visual representations of using Tailwind CSS to create responsive design, incorporating specific breakpoints and white space adjustments for different device sizes.', "The process involves creating an overall container housing navigation, headline, call to action, and picture, utilizing Tailwind utility classes like 'container', 'margin-top-16', 'flex', 'justify-between', 'items-center', and 'mx-auto'.", "Setting up hosting on Hostinger costs $21.48, with the option to apply a discount using the coupon code 'designcourse'.", 'Creating utility classes for responsive design Utility classes are created for responsive design, such as setting the width to three fourths of the parent container and adjusting margins based on screen size.', 'The process involves creating a new repository on GitHub, initializing the project with Git commands, and uploading the files to the repository.', 'GitHub Project Deployment Process The transcript details the step-by-step process of deploying a project to GitHub, covering key actions such as generating an SSH key, adding a repository, and setting up auto deployment.', 'Setting up Auto Deployment The process includes setting up auto deployment for the project, ensuring that updates to the GitHub repository are automatically deployed to the website, minimizing manual intervention and ensuring efficient updates.', 'Adding Webhook for Automatic Deployment The transcript explains the addition of a webhook for automatic deployment, indicating the use of the webhook URL, setting the content type, and ensuring the proper event (push event) is selected for automatic deployment.']}