title
Build a Portfolio Website With React & Sanity.io

description
The beginner's guide to building out your own portfolio using React, Sanity, and Tailwind. From scratch, learn the basics of React, how Sanity can manage the content for your portfolio, and how Tailwind can help create beautiful designs. Kapehe's Social Links: Twitter: https://twitter.com/kapehe_ok YouTube: https://www.youtube.com/c/kapehe Website: https://kapehe.io 0:00 - Intro 02:23 - Setup React app, Sanity Studio, and GitHub 15:06 - Setup TailwindCSS 18:32 - React Routing 27:09 - Navbar component 41:17 - Home component 45:51 - Posts component 01:06:10 - Projects component 01:29:34 - Single Post component 01:49:42 - About component 01:58:50 - Wrap up and push to GitHub 01:59:28 - Deploy to Netlify and Sanity 02:05:19 - Outro (We did it!)

detail
{'title': 'Build a Portfolio Website With React & Sanity.io', 'heatmap': [{'end': 385.001, 'start': 227.079, 'weight': 0.906}, {'end': 609.237, 'start': 529.434, 'weight': 0.706}, {'end': 850.701, 'start': 759.966, 'weight': 0.977}, {'end': 1078.038, 'start': 911.478, 'weight': 1}, {'end': 2744.279, 'start': 2662.961, 'weight': 0.77}, {'end': 3123.447, 'start': 3043.621, 'weight': 0.737}, {'end': 3731.535, 'start': 3576.301, 'weight': 0.996}, {'end': 4339.474, 'start': 4256.275, 'weight': 0.793}, {'end': 4569.615, 'start': 4490.711, 'weight': 0.821}, {'end': 5256.679, 'start': 5173.545, 'weight': 0.79}], 'summary': 'Learn to build a portfolio website using react for frontend, sanity for backend, and tailwind css for styling with detailed steps for setting up, styling, and integrating components, including social links, blog posts, web design projects, and author page, and deploy to netlify for real-time updates.', 'chapters': [{'end': 129.166, 'segs': [{'end': 60.953, 'src': 'embed', 'start': 30.729, 'weight': 0, 'content': [{'end': 34.072, 'text': 'Now this whole front end is built with React.', 'start': 30.729, 'duration': 3.343}, {'end': 36.314, 'text': "We're going to be building out a single page application.", 'start': 34.112, 'duration': 2.202}, {'end': 41.658, 'text': 'If you prefer a static site generator, you can use Next.js as a great alternative.', 'start': 36.854, 'duration': 4.804}, {'end': 43.88, 'text': "So that's going to be our front end.", 'start': 42.319, 'duration': 1.561}, {'end': 49.364, 'text': 'Our back end where all of our content is going to be managed is going to be with Sanity.', 'start': 44.42, 'duration': 4.944}, {'end': 51.986, 'text': 'Sanity has the Sanity Studio.', 'start': 49.805, 'duration': 2.181}, {'end': 60.953, 'text': 'And this is where we will have titles for our blog posts, slugs, author, all that good content, projects, that kind of stuff.', 'start': 53.127, 'duration': 7.826}], 'summary': 'Front end built with react, back end managed with sanity studio.', 'duration': 30.224, 'max_score': 30.729, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc30729.jpg'}, {'end': 129.166, 'src': 'embed', 'start': 74.899, 'weight': 1, 'content': [{'end': 79.261, 'text': "It's kind of like a shorthand way of writing CSS and it turns out beautiful.", 'start': 74.899, 'duration': 4.362}, {'end': 81.062, 'text': 'So super excited for that.', 'start': 79.501, 'duration': 1.561}, {'end': 84.219, 'text': 'Now, some prerequisites that you will need.', 'start': 81.638, 'duration': 2.581}, {'end': 87.221, 'text': 'You will need Node installed on your computer.', 'start': 85.12, 'duration': 2.101}, {'end': 94.044, 'text': 'So if you go to nodejs.org, be sure to follow the instructions and get that downloaded onto your computer.', 'start': 87.541, 'duration': 6.503}, {'end': 100.147, 'text': 'Now, let me tell you about my social links and where to find me.', 'start': 95.044, 'duration': 5.103}, {'end': 101.687, 'text': 'So we have Twitter.', 'start': 100.747, 'duration': 0.94}, {'end': 103.728, 'text': 'Twitter, you can find me at capeje,ok.', 'start': 102.068, 'duration': 1.66}, {'end': 114.056, 'text': 'For my YouTube, I do have my own channel, slash Kapehe, and then LinkedIn, slash Kapehe as well.', 'start': 106.391, 'duration': 7.665}, {'end': 122.682, 'text': 'Now, on my Twitter, my Twitter DMs are open, so feel free to send over your project, send over your portfolio.', 'start': 114.917, 'duration': 7.765}, {'end': 125.864, 'text': 'When you are done with it, I would love to see how yours turned out.', 'start': 122.762, 'duration': 3.102}, {'end': 129.166, 'text': 'I would love to see how you customized it, what content you have on there.', 'start': 126.184, 'duration': 2.982}], 'summary': 'Tutorial on using shorthand css, requires node.js. social links: twitter, youtube, linkedin.', 'duration': 54.267, 'max_score': 74.899, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc74899.jpg'}], 'start': 7.697, 'title': 'Building portfolios with react and sanity', 'summary': 'Introduces the process of building a portfolio using react for frontend, sanity for backend, and tailwind css for styling. it requires node installation and includes the addition of social links.', 'chapters': [{'end': 129.166, 'start': 7.697, 'title': 'Building portfolios with react and sanity', 'summary': 'Introduces building a portfolio using react for frontend, sanity for backend, and tailwind css for styling with the requirement of node installation and the availability of social links.', 'duration': 121.469, 'highlights': ['The chapter introduces building a portfolio using React for frontend, Sanity for backend, and Tailwind CSS for styling. The portfolio is being built using React for frontend, Sanity for backend, and Tailwind CSS for styling.', 'The requirement of Node installation is mentioned for setting up the development environment. Node installation is required for setting up the development environment.', 'The availability of social links including Twitter, YouTube, and LinkedIn, and the invitation to share portfolios through Twitter DMs are mentioned. Social links for Twitter, YouTube, and LinkedIn are provided, and viewers are encouraged to share their portfolios through Twitter DMs.']}], 'duration': 121.469, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc7697.jpg', 'highlights': ['The chapter introduces building a portfolio using React for frontend, Sanity for backend, and Tailwind CSS for styling.', 'The requirement of Node installation is mentioned for setting up the development environment.', 'Social links for Twitter, YouTube, and LinkedIn are provided, and viewers are encouraged to share their portfolios through Twitter DMs.']}, {'end': 1100.019, 'segs': [{'end': 404.88, 'src': 'heatmap', 'start': 227.079, 'weight': 3, 'content': [{'end': 228.78, 'text': 'So if we hit control tilde.', 'start': 227.079, 'duration': 1.701}, {'end': 230.941, 'text': 'Oh, let me bring that up.', 'start': 228.8, 'duration': 2.141}, {'end': 236.131, 'text': "Control, tilde, and then in here, we're gonna do npm start.", 'start': 232.967, 'duration': 3.164}, {'end': 246.542, 'text': 'npm start will start it on localhost 3000 in our browser, and I have it on the other monitor, but let me bring that in, and it looks good.', 'start': 236.631, 'duration': 9.911}, {'end': 250.306, 'text': "So that's what the Create React app did for us.", 'start': 247.003, 'duration': 3.303}, {'end': 251.007, 'text': 'So awesome.', 'start': 250.507, 'duration': 0.5}, {'end': 253.15, 'text': 'Our React application is all set up.', 'start': 251.368, 'duration': 1.782}, {'end': 257.673, 'text': "Now, back into our code, I'm going to hit this little plus sign.", 'start': 254.131, 'duration': 3.542}, {'end': 265.6, 'text': "So what I'm doing here is I'm adding another terminal window and I'm going to start building out my Sanity Studio.", 'start': 258.053, 'duration': 7.547}, {'end': 272.505, 'text': "Okay, so there's a couple of things we need to do beforehand if we don't have Sanity installed on our computer already.", 'start': 265.82, 'duration': 6.685}, {'end': 280.75, 'text': "So if you need the Sanity CLI, you can do npm install dash G and then it's at Sanity slash CLI.", 'start': 273.045, 'duration': 7.705}, {'end': 285.632, 'text': 'That will allow us to run the Sanity commands that we need to run throughout building this project.', 'start': 281.17, 'duration': 4.462}, {'end': 287.693, 'text': "I'm not going to run that because I already have it.", 'start': 286.032, 'duration': 1.661}, {'end': 297.737, 'text': "Then to make sure you are logged into your Sanity account, you can do Sanity login and then follow the login prompts and you're good to go.", 'start': 288.553, 'duration': 9.184}, {'end': 300.578, 'text': 'So, because I already have both of those already set up.', 'start': 297.977, 'duration': 2.601}, {'end': 308.361, 'text': "the next command we're going to do is sanity and it, and this is going to initialize a brand new project for us.", 'start': 300.578, 'duration': 7.783}, {'end': 311.022, 'text': "So it's going to ask us a series of questions.", 'start': 308.961, 'duration': 2.061}, {'end': 312.122, 'text': "Let's go through them.", 'start': 311.402, 'duration': 0.72}, {'end': 313.623, 'text': 'So creating a project.', 'start': 312.623, 'duration': 1}, {'end': 316.064, 'text': 'Yep So press enter project name.', 'start': 313.903, 'duration': 2.161}, {'end': 318.645, 'text': "Let's call this studio.", 'start': 317.124, 'duration': 1.521}, {'end': 322.867, 'text': 'Yeah hit enter default data set.', 'start': 318.665, 'duration': 4.202}, {'end': 325.188, 'text': "Yes So it's creating the data set.", 'start': 323.147, 'duration': 2.041}, {'end': 331.111, 'text': "And then next is going to give us the path for our project to make sure it's correct.", 'start': 325.729, 'duration': 5.382}, {'end': 332.992, 'text': 'Portfolio slash studio.', 'start': 331.512, 'duration': 1.48}, {'end': 340.216, 'text': "Cool And then here are the different templates we can choose from there's movie e-commerce blog, or a clean project.", 'start': 333.213, 'duration': 7.003}, {'end': 343.438, 'text': 'So blog and portfolio are so similar.', 'start': 340.656, 'duration': 2.782}, {'end': 346.342, 'text': "Um, we're going to actually use the blog template.", 'start': 344.142, 'duration': 2.2}, {'end': 353.224, 'text': 'So what this is doing is all of our content will live in sanity in our sanity studio.', 'start': 346.382, 'duration': 6.842}, {'end': 360.905, 'text': "So, and we'll, we'll show the studio in a second, but this is creating a boiler plate template for us.", 'start': 353.744, 'duration': 7.161}, {'end': 365.226, 'text': 'We can start building on a blog or e-commerce or movie project.', 'start': 360.945, 'duration': 4.281}, {'end': 368.347, 'text': 'So navigate to blog with the arrow keys and hit enter.', 'start': 365.666, 'duration': 2.681}, {'end': 371.177, 'text': "And it's doing stuff.", 'start': 370.117, 'duration': 1.06}, {'end': 372.858, 'text': "It's adding files.", 'start': 371.537, 'duration': 1.321}, {'end': 375.018, 'text': 'You can see studios right here.', 'start': 373.438, 'duration': 1.58}, {'end': 376.238, 'text': "So it's building it all out.", 'start': 375.118, 'duration': 1.12}, {'end': 380.259, 'text': 'And it should be done very soon.', 'start': 378.279, 'duration': 1.98}, {'end': 385.001, 'text': "And once that's done, we will see a couple of different commands.", 'start': 380.279, 'duration': 4.722}, {'end': 388.321, 'text': 'We will need to cd into our new project.', 'start': 385.461, 'duration': 2.86}, {'end': 395.163, 'text': 'And that will be using cd studio in our case, or whatever you named it.', 'start': 389.502, 'duration': 5.661}, {'end': 400.015, 'text': "So hit enter and now that we're in the studio let's get it started.", 'start': 396.192, 'duration': 3.823}, {'end': 404.88, 'text': 'So to get it started all you need to run is sanity start.', 'start': 400.196, 'duration': 4.684}], 'summary': 'Setting up react app on localhost 3000 and building sanity studio using npm commands.', 'duration': 29.762, 'max_score': 227.079, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc227079.jpg'}, {'end': 637.45, 'src': 'heatmap', 'start': 529.434, 'weight': 4, 'content': [{'end': 532.996, 'text': "We'll do sanity lowercase camel case.", 'start': 529.434, 'duration': 3.562}, {'end': 534.516, 'text': 'I keep hitting it.', 'start': 533.776, 'duration': 0.74}, {'end': 536.097, 'text': 'Sanity client.', 'start': 535.137, 'duration': 0.96}, {'end': 550.849, 'text': "open that up and in here we're going to have our project ID and our data set, which we set to production when we set up our entire project,", 'start': 536.681, 'duration': 14.168}, {'end': 551.909, 'text': 'when we did Sanity in it.', 'start': 550.849, 'duration': 1.06}, {'end': 562.235, 'text': "So project ID, what is that? Every Sanity project that you have has a project ID and there's two spots we can find it.", 'start': 553.57, 'duration': 8.665}, {'end': 564.676, 'text': 'Let me show you those two spots.', 'start': 562.695, 'duration': 1.981}, {'end': 569.089, 'text': 'So if we go into Studio, And we go to sanity.json.', 'start': 565.096, 'duration': 3.993}, {'end': 569.85, 'text': "It's right here.", 'start': 569.129, 'duration': 0.721}, {'end': 576.625, 'text': "So I'm actually going to copy that cause I'm going to need it, but that's our project ID.", 'start': 573.083, 'duration': 3.542}, {'end': 580.107, 'text': 'So if we come back here, save it there.', 'start': 577.105, 'duration': 3.002}, {'end': 582.788, 'text': 'Awesome Now we have it linked up.', 'start': 580.127, 'duration': 2.661}, {'end': 585.75, 'text': 'Let me show you another place you can find it.', 'start': 583.449, 'duration': 2.301}, {'end': 592.113, 'text': "So if you go to manage.sanity.io and you're logged in, this will pop up.", 'start': 586.35, 'duration': 5.763}, {'end': 594.054, 'text': 'This is where all of our projects will live.', 'start': 592.153, 'duration': 1.901}, {'end': 595.955, 'text': 'So I named it studio.', 'start': 594.715, 'duration': 1.24}, {'end': 597.336, 'text': 'So this is where this one is.', 'start': 595.996, 'duration': 1.34}, {'end': 600.298, 'text': 'Click on that and we will see our project ID.', 'start': 597.897, 'duration': 2.401}, {'end': 604.83, 'text': 'Same thing as what was right there.', 'start': 602.506, 'duration': 2.324}, {'end': 609.237, 'text': 'Nice So those are the two spots that we can find our project ID.', 'start': 604.85, 'duration': 4.387}, {'end': 613.927, 'text': 'Now our React application knows which project to look at.', 'start': 610.544, 'duration': 3.383}, {'end': 618.23, 'text': "And from React to Sanity, it's all good.", 'start': 614.767, 'duration': 3.463}, {'end': 620.712, 'text': "Now let's do from Sanity to React.", 'start': 618.691, 'duration': 2.021}, {'end': 627.117, 'text': "So we want Sanity to tell React, hey, you're asking for this data.", 'start': 621.152, 'duration': 5.965}, {'end': 628.458, 'text': "I don't know if you're trusted.", 'start': 627.197, 'duration': 1.261}, {'end': 637.45, 'text': 'So to do that, to make sure we have trusted URLs in place, In our manage.sanity, go into the project and click on settings.', 'start': 628.758, 'duration': 8.692}], 'summary': 'Configuring project id and trusted urls for react-sanity integration', 'duration': 108.016, 'max_score': 529.434, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc529434.jpg'}, {'end': 731.137, 'src': 'embed', 'start': 700.279, 'weight': 1, 'content': [{'end': 706.446, 'text': "We're not going to be committing throughout this entire video, but it's a good practice to be committing as you do changes.", 'start': 700.279, 'duration': 6.167}, {'end': 708.588, 'text': "But let's get it set up now.", 'start': 707.086, 'duration': 1.502}, {'end': 711.151, 'text': "So I'm going to go to my GitHub.", 'start': 708.988, 'duration': 2.163}, {'end': 718.734, 'text': 'And I have a brand new repository set up.', 'start': 715.433, 'duration': 3.301}, {'end': 724.956, 'text': "I'm going to call this my portfolio.", 'start': 719.914, 'duration': 5.042}, {'end': 729.777, 'text': "You can name it whatever you'd like, but my portfolio, we'll skip all that for now.", 'start': 725.936, 'duration': 3.841}, {'end': 731.137, 'text': "We'll do create repository.", 'start': 729.797, 'duration': 1.34}], 'summary': 'Setting up a new repository on github for a portfolio project.', 'duration': 30.858, 'max_score': 700.279, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc700279.jpg'}, {'end': 850.701, 'src': 'heatmap', 'start': 759.966, 'weight': 0.977, 'content': [{'end': 770.714, 'text': "And all we want to do is remove this forward slash on node modules, save that, come here, refresh that, now it's down to 22 instead of 5,000.", 'start': 759.966, 'duration': 10.748}, {'end': 771.235, 'text': 'Much better.', 'start': 770.714, 'duration': 0.521}, {'end': 774.457, 'text': 'And now we are good to push this to GitHub.', 'start': 772.235, 'duration': 2.222}, {'end': 776.31, 'text': "So we'll do git, Init.", 'start': 774.557, 'duration': 1.753}, {'end': 778.351, 'text': 'Okay Initialize.', 'start': 776.33, 'duration': 2.021}, {'end': 783.094, 'text': "Now we'll do git commit dash M and this is just our first initial commit.", 'start': 778.792, 'duration': 4.302}, {'end': 784.735, 'text': "So we'll just do first commit.", 'start': 783.134, 'duration': 1.601}, {'end': 790.758, 'text': "We'll do git branch main to change that.", 'start': 785.855, 'duration': 4.903}, {'end': 795.401, 'text': "And then we'll do git remote add origin.", 'start': 791.278, 'duration': 4.123}, {'end': 803.689, 'text': "And then I'm going to just copy the path to my New repository.", 'start': 795.561, 'duration': 8.128}, {'end': 804.65, 'text': 'Hit enter.', 'start': 804.13, 'duration': 0.52}, {'end': 807.611, 'text': "And then we'll do git push origin main.", 'start': 805.07, 'duration': 2.541}, {'end': 810.032, 'text': 'And that is good.', 'start': 809.371, 'duration': 0.661}, {'end': 812.132, 'text': "Now I didn't add any files.", 'start': 810.532, 'duration': 1.6}, {'end': 815.254, 'text': 'It was just initialized and it has the boilerplate stuff.', 'start': 812.413, 'duration': 2.841}, {'end': 817.334, 'text': "So let's add all the things that we added.", 'start': 815.694, 'duration': 1.64}, {'end': 818.495, 'text': 'So we have 22 files.', 'start': 817.474, 'duration': 1.021}, {'end': 820.635, 'text': "So we'll do git status.", 'start': 819.155, 'duration': 1.48}, {'end': 822.976, 'text': "That's checking to see what's been changed.", 'start': 820.936, 'duration': 2.04}, {'end': 826.137, 'text': 'Everything in red has not been added.', 'start': 823.296, 'duration': 2.841}, {'end': 827.778, 'text': "It's kind of just like hanging out.", 'start': 826.157, 'duration': 1.621}, {'end': 830.602, 'text': "So we'll do git add period.", 'start': 829.161, 'duration': 1.441}, {'end': 832.424, 'text': 'Git add period adds all of them.', 'start': 830.682, 'duration': 1.742}, {'end': 836.007, 'text': 'Everything that was modified or added or deleted, git add period.', 'start': 832.684, 'duration': 3.323}, {'end': 840.531, 'text': 'And then I always like to do git status again, because I like to see the green.', 'start': 836.027, 'duration': 4.504}, {'end': 850.701, 'text': "And then we'll do git commit dash m, and we'll say adding in Sanity Studio.", 'start': 841.412, 'duration': 9.289}], 'summary': 'Reduced node modules to 22, initialized, added and pushed to github', 'duration': 90.735, 'max_score': 759.966, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc759966.jpg'}, {'end': 1078.038, 'src': 'heatmap', 'start': 878.813, 'weight': 0, 'content': [{'end': 885.88, 'text': "And if you're working on a bigger project, that you're going to spend more time on more days on, you would commit as you go,", 'start': 878.813, 'duration': 7.067}, {'end': 887.442, 'text': "because you don't want to lose your progress.", 'start': 885.88, 'duration': 1.562}, {'end': 888.563, 'text': 'So yeah.', 'start': 888.062, 'duration': 0.501}, {'end': 896.498, 'text': "So we've created the React application, the Sanity Studio, connected the two.", 'start': 891.274, 'duration': 5.224}, {'end': 898.459, 'text': "It's now safely in our GitHub.", 'start': 896.918, 'duration': 1.541}, {'end': 901.181, 'text': "Let's move on to making it ours.", 'start': 898.939, 'duration': 2.242}, {'end': 907.746, 'text': "Okay, so now that we have our application set up and ready to go, let's set up our tailwind, our styling.", 'start': 902.402, 'duration': 5.344}, {'end': 910.938, 'text': "that as we build it out, it'll all look nice.", 'start': 908.677, 'duration': 2.261}, {'end': 920.303, 'text': 'So Tailwind is a CSS framework that is highly customizable as it says here, and it gives us all the building blocks we need to build our designs.', 'start': 911.478, 'duration': 8.825}, {'end': 922.224, 'text': "So yeah, we're gonna be using this today.", 'start': 920.643, 'duration': 1.581}, {'end': 925.405, 'text': "Let's get it installed into our application so that it's ready for us.", 'start': 922.424, 'duration': 2.981}, {'end': 932.69, 'text': 'So up here at the top, type in installation, and here are just different ways to install Tailwind.', 'start': 925.585, 'duration': 7.105}, {'end': 941.536, 'text': "We are, because this is just a quick demo, we're just going to take this URL, and I'm gonna copy that.", 'start': 933.411, 'duration': 8.125}, {'end': 948.701, 'text': 'If you want to customize it more, definitely look at these other installation processes that are available.', 'start': 941.857, 'duration': 6.844}, {'end': 955.806, 'text': "So I'm going to bring in our application and if we go to index.css within the source folder,", 'start': 949.161, 'duration': 6.645}, {'end': 968.888, 'text': "we're gonna come in here and we're gonna delete all that and we'll do at import URL inside there and we're going to put in that URL that we just copied from Tailwind.", 'start': 955.806, 'duration': 13.082}, {'end': 974.712, 'text': "Now, there is one more thing we also need and it's for our block content.", 'start': 969.588, 'duration': 5.124}, {'end': 982.719, 'text': 'So if we type in pros, this pros class will allow us to get that proper styling.', 'start': 976.072, 'duration': 6.647}, {'end': 991.107, 'text': 'So if we have a P tag, if we have an H1, if we have a list of items, it does the correct styling that we would expect.', 'start': 982.799, 'duration': 8.308}, {'end': 992.969, 'text': "So we're going to want to bring that in.", 'start': 991.528, 'duration': 1.441}, {'end': 995.312, 'text': "So I'm going to get that.", 'start': 993.51, 'duration': 1.802}, {'end': 1004.223, 'text': "So in here, I'm going to bring that down and at the top, just so this gets applied before the Tailwind does, put it above.", 'start': 996.633, 'duration': 7.59}, {'end': 1006.646, 'text': 'So that is for our pros class.', 'start': 1004.724, 'duration': 1.922}, {'end': 1011.293, 'text': 'Now the last thing we wanna do to import is we want to do a font.', 'start': 1007.027, 'duration': 4.266}, {'end': 1018.376, 'text': "But I'm not going to spend so much time looking through fonts right now because I definitely can waste a lot of time on fonts.", 'start': 1011.933, 'duration': 6.443}, {'end': 1019.817, 'text': "But we're not going to do that today.", 'start': 1018.796, 'duration': 1.021}, {'end': 1024.598, 'text': "So I'm using Emotic today and you can find that on Google's font page.", 'start': 1020.157, 'duration': 4.441}, {'end': 1027.099, 'text': 'But yeah, definitely go through and pick the one that you would like.', 'start': 1024.699, 'duration': 2.4}, {'end': 1034.164, 'text': "Okay, so there's a couple different custom CSS things that we need and I'm just going to add those in right now because I know we need them.", 'start': 1027.3, 'duration': 6.864}, {'end': 1040.547, 'text': "So the first one I'm going to call cursive and font family is going to be that Emotic.", 'start': 1034.604, 'duration': 5.943}, {'end': 1049.413, 'text': "EmoticSC and then it will go to cursive if that's not available and then weight 700.", 'start': 1041.186, 'duration': 8.227}, {'end': 1058.06, 'text': "And then under here we're going to use that pros class but we're going to dive into the image of it.", 'start': 1049.413, 'duration': 8.647}, {'end': 1061.782, 'text': "We're going to do margin left auto.", 'start': 1058.56, 'duration': 3.222}, {'end': 1065.265, 'text': "We're going to do margin right auto.", 'start': 1061.802, 'duration': 3.463}, {'end': 1078.038, 'text': "And then we're going to do border radius pixels and the reason why we're doing a custom one for this is because we're diving into the pros and so this just allows us tailwind.", 'start': 1066.226, 'duration': 11.812}], 'summary': 'React and sanity studio connected, tailwind css framework installed for styling.', 'duration': 43.411, 'max_score': 878.813, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc878813.jpg'}], 'start': 129.306, 'title': 'Setting up react app, connecting sanity, and installing tailwind css', 'summary': 'Covers setting up a react application with create-react-app and a sanity studio using the sanity cli, connecting a sanity project to a react project, and setting up github along with installing tailwind css for styling, including detailed steps and processes for project initialization, data exchange, and customization.', 'chapters': [{'end': 457.642, 'start': 129.306, 'title': 'Setting up react app and sanity studio', 'summary': 'Covers setting up a react application using create-react-app and a sanity studio using the sanity cli, including navigating through the project initialization process and starting the development server.', 'duration': 328.336, 'highlights': ['The chapter covers setting up a React application using create-react-app and a Sanity Studio using the Sanity CLI. The chapter discusses the process of setting up a React application using create-react-app and a Sanity Studio using the Sanity CLI, including the installation and initialization steps for both.', 'Navigating through the project initialization process and starting the development server. The chapter details the process of navigating through the project initialization process for the React application and Sanity Studio, including starting the development server for both.', 'Using create-react-app to create a React app and explaining the purpose of the project name. The speaker explains the usage of create-react-app to create a React app and the significance of specifying the project name during the setup process.', "Starting the development server for the React application using npm start. The chapter highlights the command 'npm start' to start the development server for the React application, running on localhost 3000.", "Initializing a new project for Sanity Studio using the command 'sanity init'. The chapter explains the process of initializing a new project for Sanity Studio using the command 'sanity init', which initiates a series of questions to set up the project."]}, {'end': 680.643, 'start': 457.942, 'title': 'Connecting sanity and react', 'summary': 'Covers setting up a sanity project and connecting it to a react project, including installing the sanity client package, linking the project id, and setting up trusted urls for data exchange between sanity and react.', 'duration': 222.701, 'highlights': ['Setting up the Sanity project and connecting it to a React project The chapter covers the process of setting up a Sanity project and connecting it to a React project.', "Installing the Sanity client package The process involves installing the Sanity client package using the command 'npm install @sanity/client'.", 'Linking the project ID to the Sanity client The project ID is linked to the Sanity client by adding it to the client.js file, allowing React to know which project to look at.', 'Setting up trusted URLs for data exchange between Sanity and React The process involves adding the localhost URL to the course origins in the Sanity project settings, ensuring that React is trusted to receive data from Sanity.']}, {'end': 1100.019, 'start': 680.643, 'title': 'Setting up github and installing tailwind css', 'summary': 'Covers setting up a project on github with detailed steps for initialization, committing, and pushing files, while also installing tailwind css for styling and customization of the project.', 'duration': 419.376, 'highlights': ['Setting up a project on GitHub with detailed steps for initialization, committing, and pushing files The chapter details the process of initializing, committing, and pushing files to a GitHub repository, ensuring that the progress is saved and the project is safely stored on GitHub.', 'Installing Tailwind CSS for styling and customization of the project The chapter demonstrates the installation of Tailwind CSS for styling and customization of the project, providing detailed steps for importing the required URLs and custom CSS.']}], 'duration': 970.713, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc129306.jpg', 'highlights': ['Covers setting up a React application using create-react-app and a Sanity Studio using the Sanity CLI.', 'Setting up a project on GitHub with detailed steps for initialization, committing, and pushing files.', 'Installing Tailwind CSS for styling and customization of the project.', 'Navigating through the project initialization process and starting the development server.', 'Setting up the Sanity project and connecting it to a React project.']}, {'end': 2628.778, 'segs': [{'end': 1173.433, 'src': 'embed', 'start': 1100.019, 'weight': 0, 'content': [{'end': 1105.304, 'text': "you'll see as we go through, we'll use these throughout and I'll show where we're using it, where it's not Tailwind,", 'start': 1100.019, 'duration': 5.285}, {'end': 1107.285, 'text': "where it's one of these custom ones.", 'start': 1105.304, 'duration': 1.981}, {'end': 1108.907, 'text': "but yeah, that's all set up.", 'start': 1107.285, 'duration': 1.622}, {'end': 1111.369, 'text': "now let's go set up our components.", 'start': 1108.907, 'duration': 2.462}, {'end': 1116.49, 'text': "if we go into source, We'll do new folder and we'll type in components.", 'start': 1111.369, 'duration': 5.121}, {'end': 1118.89, 'text': 'This is going to be all of our separate pages.', 'start': 1116.85, 'duration': 2.04}, {'end': 1125.872, 'text': "So, because we're building a single page application, we're going to break it up into different components or different pages,", 'start': 1119.27, 'duration': 6.602}, {'end': 1126.772, 'text': 'however you want to call it.', 'start': 1125.872, 'duration': 0.9}, {'end': 1131.593, 'text': 'And each one will have its own view, its own functionality.', 'start': 1127.452, 'duration': 4.141}, {'end': 1137.354, 'text': "So we're going to go here and we're going to do new file and we have a home.", 'start': 1131.613, 'duration': 5.741}, {'end': 1140.935, 'text': 'We have a home JS.', 'start': 1139.615, 'duration': 1.32}, {'end': 1145.963, 'text': "We have an about that's in our about page.", 'start': 1142.742, 'duration': 3.221}, {'end': 1150.105, 'text': 'We have our nav bar nav bar is going to live on all of these.', 'start': 1146.744, 'duration': 3.361}, {'end': 1151.065, 'text': "We're going to do posts.", 'start': 1150.145, 'duration': 0.92}, {'end': 1162.227, 'text': "We're going to do project and last one, single post, single post 1, 2, 3, 4, 5, 6.", 'start': 1152.406, 'duration': 9.821}, {'end': 1162.87, 'text': "Yep That's it.", 'start': 1162.23, 'duration': 0.64}, {'end': 1164.671, 'text': 'Okay So these are our pages.', 'start': 1163.03, 'duration': 1.641}, {'end': 1165.711, 'text': 'These are our components.', 'start': 1164.731, 'duration': 0.98}, {'end': 1173.433, 'text': "And so every time we visit the about page, it's going to pull up this about component or page, however you wanna call it.", 'start': 1166.271, 'duration': 7.162}], 'summary': 'Setting up components for single page application with separate pages for home, about, nav bar, posts, projects, and single posts.', 'duration': 73.414, 'max_score': 1100.019, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc1100019.jpg'}, {'end': 1229.024, 'src': 'embed', 'start': 1204.893, 'weight': 4, 'content': [{'end': 1211.816, 'text': "So because we're using the react router, we need to be able to, let me get that error goes away.", 'start': 1204.893, 'duration': 6.923}, {'end': 1215.338, 'text': 'So we need to install the react router DOM.', 'start': 1212.517, 'duration': 2.821}, {'end': 1225.082, 'text': "So in order to do that within our terminal that we have for our project, we're gonna do NPM install react router DOM.", 'start': 1215.878, 'duration': 9.204}, {'end': 1229.024, 'text': 'And this is the package we need in order to navigate within react.', 'start': 1225.462, 'duration': 3.562}], 'summary': 'Installing react router dom for navigating within react.', 'duration': 24.131, 'max_score': 1204.893, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc1204893.jpg'}, {'end': 1501.6, 'src': 'embed', 'start': 1463.856, 'weight': 5, 'content': [{'end': 1471.62, 'text': 'but we do want to do kind of like a um, an empty component for each one, just so like it can kind of show something.', 'start': 1463.856, 'duration': 7.764}, {'end': 1480.965, 'text': "So we're going to do import react from react export default function.", 'start': 1471.64, 'duration': 9.325}, {'end': 1484.407, 'text': 'And this is the about page and then.', 'start': 1481.906, 'duration': 2.501}, {'end': 1492.132, 'text': "We'll do that, about page.", 'start': 1489.07, 'duration': 3.062}, {'end': 1495.495, 'text': "Okay, so I'm going to copy all this.", 'start': 1492.152, 'duration': 3.343}, {'end': 1500.019, 'text': 'And this is just like a very simple component setup.', 'start': 1495.955, 'duration': 4.064}, {'end': 1501.6, 'text': "We're importing the React so we can use it.", 'start': 1500.059, 'duration': 1.541}], 'summary': 'Creating an empty component for the about page using react.', 'duration': 37.744, 'max_score': 1463.856, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc1463856.jpg'}, {'end': 1801.462, 'src': 'embed', 'start': 1773.224, 'weight': 6, 'content': [{'end': 1775.884, 'text': "And if it's the singular one, go to the homepage.", 'start': 1773.224, 'duration': 2.66}, {'end': 1778.685, 'text': "Okay So right now navbar isn't really being used.", 'start': 1776.325, 'duration': 2.36}, {'end': 1779.786, 'text': "We can't really test it right now.", 'start': 1778.705, 'duration': 1.081}, {'end': 1781.426, 'text': "So let's test it.", 'start': 1780.026, 'duration': 1.4}, {'end': 1785.347, 'text': "So I'm going to go over here and we need to come to app.js.", 'start': 1782.066, 'duration': 3.281}, {'end': 1794.439, 'text': "Let's import our navbar from Awesome.", 'start': 1786.508, 'duration': 7.931}, {'end': 1801.462, 'text': "Okay And then right under browser router, we're going to add in nav bar.", 'start': 1795.28, 'duration': 6.182}], 'summary': 'Testing singular navbar import from awesome in app.js.', 'duration': 28.238, 'max_score': 1773.224, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc1773224.jpg'}, {'end': 1880.745, 'src': 'embed', 'start': 1851.389, 'weight': 7, 'content': [{'end': 1859.232, 'text': 'So for our nav bar in our header, this is where, this is how Tailwind will look for our entire project.', 'start': 1851.389, 'duration': 7.843}, {'end': 1862.493, 'text': "So we're gonna do class name and class name is how React does styling.", 'start': 1859.592, 'duration': 2.901}, {'end': 1869.975, 'text': "We're going to do in here, I'm gonna start off with BG red 600.", 'start': 1863.153, 'duration': 6.822}, {'end': 1876.041, 'text': 'So what this is, is background color is going to be red at a darkness level of 600.', 'start': 1869.975, 'duration': 6.066}, {'end': 1880.745, 'text': '900 is the darkest, 100 is the lightest, so we are at a 600.', 'start': 1876.041, 'duration': 4.704}], 'summary': "Using tailwind for project's nav bar styling with bg red 600.", 'duration': 29.356, 'max_score': 1851.389, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc1851389.jpg'}, {'end': 2006.001, 'src': 'embed', 'start': 1965.614, 'weight': 10, 'content': [{'end': 1972.636, 'text': "So right here, we'll do class name is equal to, so inline flex.", 'start': 1965.614, 'duration': 7.022}, {'end': 1977.377, 'text': 'So the flex is going to be in line with each other items.', 'start': 1972.896, 'duration': 4.481}, {'end': 1981.469, 'text': 'Center center, the items padding Y of three.', 'start': 1978.007, 'duration': 3.462}, {'end': 1985.711, 'text': 'So Patty on the Y axis of three Patty on the X axis of three.', 'start': 1981.529, 'duration': 4.182}, {'end': 1990.433, 'text': 'Oh, wait, no, not three on this one.', 'start': 1985.731, 'duration': 4.702}, {'end': 1992.634, 'text': 'I wanted six for the Y.', 'start': 1990.453, 'duration': 2.181}, {'end': 1999.638, 'text': 'Okay And then we want margin, right? A four.', 'start': 1992.634, 'duration': 7.004}, {'end': 2005.241, 'text': 'And we want a text red of 100.', 'start': 2000.898, 'duration': 4.343}, {'end': 2006.001, 'text': 'So pretty light.', 'start': 2005.241, 'duration': 0.76}], 'summary': 'Using inline flex with center alignment, padding y of 6, margin of 4, and light red text.', 'duration': 40.387, 'max_score': 1965.614, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc1965614.jpg'}, {'end': 2260.294, 'src': 'embed', 'start': 2221.959, 'weight': 8, 'content': [{'end': 2227.624, 'text': "So let's come here and underneath this nav, we're going to open up for another div.", 'start': 2221.959, 'duration': 5.665}, {'end': 2232.988, 'text': "We're going to be using another package.", 'start': 2227.884, 'duration': 5.104}, {'end': 2237.132, 'text': "So this one's called react social icons.", 'start': 2233.409, 'duration': 3.723}, {'end': 2239.294, 'text': "So I'm gonna do control tilde.", 'start': 2238.253, 'duration': 1.041}, {'end': 2243.258, 'text': "I'm going to control C that so it ends it.", 'start': 2240.336, 'duration': 2.922}, {'end': 2249.903, 'text': "We're going to do npm install react social icons.", 'start': 2243.278, 'duration': 6.625}, {'end': 2253.686, 'text': 'Let me show you react social icons real quick.', 'start': 2251.084, 'duration': 2.602}, {'end': 2260.294, 'text': "Okay Now in here, it's going to look like this.", 'start': 2257.512, 'duration': 2.782}], 'summary': "Using 'react social icons' package for web development.", 'duration': 38.335, 'max_score': 2221.959, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc2221959.jpg'}, {'end': 2485.99, 'src': 'embed', 'start': 2462.719, 'weight': 9, 'content': [{'end': 2469.886, 'text': 'It takes me to my YouTube and it opens up a new tab every time that was the target, uh, underscore blank.', 'start': 2462.719, 'duration': 7.167}, {'end': 2472.108, 'text': "So yeah, there's our nav bar.", 'start': 2470.687, 'duration': 1.421}, {'end': 2474.911, 'text': 'Our nav bar is totally set up and ready to go.', 'start': 2472.148, 'duration': 2.763}, {'end': 2476.493, 'text': "Let's style our homepage.", 'start': 2475.051, 'duration': 1.442}, {'end': 2483.329, 'text': "Okay, next we're going to work on the home page and the home page is going to have that background image and then words.", 'start': 2477.287, 'duration': 6.042}, {'end': 2485.99, 'text': "I do aloha, I'm Kapehe.", 'start': 2484.189, 'duration': 1.801}], 'summary': 'Setting up nav bar, styling homepage, adding background image and text to home page.', 'duration': 23.271, 'max_score': 2462.719, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc2462719.jpg'}], 'start': 1100.019, 'title': 'Setting up components for single page application, react routing, component and navigation setup, and styling nav bar and home page', 'summary': 'Details the process of setting up separate components for a single page application, including creating folders for different pages and defining individual components for home, about, nav bar, posts, projects, and single posts. it covers the installation and usage of react router for navigating to different components based on specific urls, with the need to navigate to five different pages and import them accordingly. additionally, it covers setting up react components for about, post, project, and home page, configuring navigation bar using react router dom, and styling the navigation bar using tailwind css. the chapter also covers the process of styling the navigation bar with active class names and social icons using react social icons, and then proceeds to style the home page with a background image and text, detailing the specific css properties and inline styling used.', 'chapters': [{'end': 1173.433, 'start': 1100.019, 'title': 'Setting up components for single page application', 'summary': 'Details the process of setting up separate components for a single page application, including creating folders for different pages and defining individual components for home, about, nav bar, posts, projects, and single posts.', 'duration': 73.414, 'highlights': ['Creating separate components for a single page application to ensure each page has its own view and functionality.', 'Defining individual components for home, about, nav bar, posts, projects, and single posts.', "Organizing components into a 'components' folder within the source directory for better management and structure."]}, {'end': 1463.856, 'start': 1174.073, 'title': 'Setting up react routing', 'summary': 'Covers the installation and usage of react router for navigating to different components based on specific urls, with the need to navigate to five different pages and import them accordingly.', 'duration': 289.783, 'highlights': ['The need to navigate to five different pages and import them accordingly, including the homepage, about page, single post, regular posts, and projects.', "The installation of React Router DOM using the command 'NPM install react router DOM' to enable navigation within React.", 'The usage of browser router, route, and switch from React router DOM for navigation and displaying specific components based on URL paths.']}, {'end': 2034.89, 'start': 1463.856, 'title': 'React component and navigation setup', 'summary': 'Covers setting up react components for about, post, project, and home page, configuring navigation bar using react router dom, and styling the navigation bar using tailwind css.', 'duration': 571.034, 'highlights': ['Setting up React components for about, post, project, and home page The speaker sets up simple React components for about, post, project, and home pages, using import and export statements and adding basic content to each component.', 'Configuring navigation bar using React router Dom The speaker explains how to configure the navigation bar using React router Dom, including importing NavLink, setting up nav links for different pages, and testing the navigation functionality.', 'Styling the navigation bar using Tailwind CSS The speaker demonstrates styling the navigation bar using Tailwind CSS, using class names to apply background color, container styling, flex properties, padding, margin, and hover effects for the navigation links.']}, {'end': 2628.778, 'start': 2034.911, 'title': 'Styling nav bar and home page', 'summary': 'Covers the process of styling the navigation bar with active class names and social icons using react social icons, and then proceeds to style the home page with a background image and text, detailing the specific css properties and inline styling used.', 'duration': 593.867, 'highlights': ['The chapter covers the process of styling the navigation bar with active class names and social icons using React Social Icons The transcript discusses the styling of the navigation bar with active class names for different pages and the addition of social icons using React Social Icons package.', "The chapter proceeds to style the home page with a background image and text The transcript details the process of styling the home page with a background image and text, utilizing specific CSS properties such as 'absolute', 'object cover', 'width full', and 'height full'.", "The usage of specific CSS properties and inline styling for the navigation bar and home page The transcript provides detailed information on the usage of CSS properties like 'inline flex', 'padding Y', 'padding X', 'margin Y', 'rounded', 'text red', 'hover', 'foreground color', and 'height' in the styling process."]}], 'duration': 1528.759, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc1100019.jpg', 'highlights': ['Creating separate components for a single page application to ensure each page has its own view and functionality.', 'Defining individual components for home, about, nav bar, posts, projects, and single posts.', "Organizing components into a 'components' folder within the source directory for better management and structure.", 'The need to navigate to five different pages and import them accordingly, including the homepage, about page, single post, regular posts, and projects.', "The installation of React Router DOM using the command 'NPM install react router DOM' to enable navigation within React.", 'Setting up React components for about, post, project, and home page using import and export statements and adding basic content to each component.', 'Configuring navigation bar using React router Dom, including importing NavLink, setting up nav links for different pages, and testing the navigation functionality.', 'Styling the navigation bar using Tailwind CSS, using class names to apply background color, container styling, flex properties, padding, margin, and hover effects for the navigation links.', 'The chapter covers the process of styling the navigation bar with active class names and social icons using React Social Icons package.', "The chapter proceeds to style the home page with a background image and text, utilizing specific CSS properties such as 'absolute', 'object cover', 'width full', and 'height full'.", "The usage of specific CSS properties and inline styling for the navigation bar and home page, providing detailed information on the usage of CSS properties like 'inline flex', 'padding Y', 'padding X', 'margin Y', 'rounded', 'text red', 'hover', 'foreground color', and 'height' in the styling process."]}, {'end': 3075.45, 'segs': [{'end': 2744.279, 'src': 'heatmap', 'start': 2629.178, 'weight': 0, 'content': [{'end': 2631.599, 'text': "It's going to have a flex and a justify center.", 'start': 2629.178, 'duration': 2.421}, {'end': 2643.187, 'text': 'It will also have a min height screen and then a padding top of 12.', 'start': 2633.34, 'duration': 9.847}, {'end': 2647.569, 'text': 'And then on large screens, okay, this is a really awesome thing about Tailwind.', 'start': 2643.187, 'duration': 4.382}, {'end': 2654.554, 'text': "In Tailwind, you can do responsive styling within your styling that's happening right here.", 'start': 2648.31, 'duration': 6.244}, {'end': 2660.038, 'text': "So if you don't do anything before it, so like hover happens when you hover.", 'start': 2655.194, 'duration': 4.844}, {'end': 2662.82, 'text': 'LG means for large screens.', 'start': 2660.798, 'duration': 2.022}, {'end': 2665.163, 'text': "We're going to have a particular styling.", 'start': 2662.961, 'duration': 2.202}, {'end': 2668.006, 'text': "And then there's medium screens and then small screens.", 'start': 2665.924, 'duration': 2.082}, {'end': 2669.047, 'text': "But we're going to work on large.", 'start': 2668.066, 'duration': 0.981}, {'end': 2673.467, 'text': 'So large would be padding top of 64.', 'start': 2669.087, 'duration': 4.38}, {'end': 2677.091, 'text': 'And then always padding X of eight.', 'start': 2673.467, 'duration': 3.624}, {'end': 2683.877, 'text': "Okay And then our H1 class name is equal to, we'll do text of six XL.", 'start': 2677.351, 'duration': 6.526}, {'end': 2684.698, 'text': 'So pretty big.', 'start': 2683.897, 'duration': 0.801}, {'end': 2687.201, 'text': "We're gonna do text green of 100.", 'start': 2685.139, 'duration': 2.062}, {'end': 2689.183, 'text': 'So pretty light on the one on the green.', 'start': 2687.201, 'duration': 1.982}, {'end': 2699.993, 'text': "We're gonna do a font bold and then we're going to use our Custom CSS that we made, the cursive. we're gonna do leading none, so like the area around.", 'start': 2689.203, 'duration': 10.79}, {'end': 2703.796, 'text': "Large screens, we're gonna do leading snug, so it's close.", 'start': 2700.693, 'duration': 3.103}, {'end': 2708.902, 'text': "And then we're gonna use that home name that we did in our index.css.", 'start': 2704.317, 'duration': 4.585}, {'end': 2713.284, 'text': 'And that should be everything for our homepage.', 'start': 2710.443, 'duration': 2.841}, {'end': 2715.085, 'text': "Let's pull that up.", 'start': 2713.944, 'duration': 1.141}, {'end': 2718.006, 'text': "And sure enough, now this I'm zoomed in a little bit.", 'start': 2715.305, 'duration': 2.701}, {'end': 2723.288, 'text': 'So this is what it looked like not zoomed in, but yeah, our homepage is done.', 'start': 2718.026, 'duration': 5.262}, {'end': 2724.668, 'text': 'We brought in our background image.', 'start': 2723.388, 'duration': 1.28}, {'end': 2727.589, 'text': 'We brought in our text and our styling for it.', 'start': 2724.928, 'duration': 2.661}, {'end': 2728.81, 'text': 'So it looks super good.', 'start': 2727.949, 'duration': 0.861}, {'end': 2735.992, 'text': "And again, if we were to navigate around, those aren't styled, but Kapehe homepage and nav bar are all styled and ready to go.", 'start': 2729.35, 'duration': 6.642}, {'end': 2738.173, 'text': "So let's move on to.", 'start': 2736.372, 'duration': 1.801}, {'end': 2742.017, 'text': "Let's do our blog post page next.", 'start': 2739.755, 'duration': 2.262}, {'end': 2744.279, 'text': "And we're actually gonna be getting into our content.", 'start': 2742.377, 'duration': 1.902}], 'summary': 'Styling for homepage completed with tailwind, including responsive design for large screens and specific class names and properties.', 'duration': 60.005, 'max_score': 2629.178, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc2629178.jpg'}, {'end': 2744.279, 'src': 'embed', 'start': 2715.305, 'weight': 2, 'content': [{'end': 2718.006, 'text': "And sure enough, now this I'm zoomed in a little bit.", 'start': 2715.305, 'duration': 2.701}, {'end': 2723.288, 'text': 'So this is what it looked like not zoomed in, but yeah, our homepage is done.', 'start': 2718.026, 'duration': 5.262}, {'end': 2724.668, 'text': 'We brought in our background image.', 'start': 2723.388, 'duration': 1.28}, {'end': 2727.589, 'text': 'We brought in our text and our styling for it.', 'start': 2724.928, 'duration': 2.661}, {'end': 2728.81, 'text': 'So it looks super good.', 'start': 2727.949, 'duration': 0.861}, {'end': 2735.992, 'text': "And again, if we were to navigate around, those aren't styled, but Kapehe homepage and nav bar are all styled and ready to go.", 'start': 2729.35, 'duration': 6.642}, {'end': 2738.173, 'text': "So let's move on to.", 'start': 2736.372, 'duration': 1.801}, {'end': 2742.017, 'text': "Let's do our blog post page next.", 'start': 2739.755, 'duration': 2.262}, {'end': 2744.279, 'text': "And we're actually gonna be getting into our content.", 'start': 2742.377, 'duration': 1.902}], 'summary': 'Homepage design completed with background image, text, and styling; now moving on to blog post page and content.', 'duration': 28.974, 'max_score': 2715.305, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc2715305.jpg'}, {'end': 2809.191, 'src': 'embed', 'start': 2764.494, 'weight': 3, 'content': [{'end': 2773.581, 'text': 'Okay, so in this, this is where all of our blog posts are going to live or any content that you may have that you want to showcase on your portfolio.', 'start': 2764.494, 'duration': 9.087}, {'end': 2776.963, 'text': "We're going to be pulling in the data from our Sanity Studio.", 'start': 2774.061, 'duration': 2.902}, {'end': 2783.406, 'text': "And so that's where we're going to finally like see the connection between the two and how that's going to work.", 'start': 2777.444, 'duration': 5.962}, {'end': 2787.927, 'text': "There's two different ways you can query for your information with Sanity.", 'start': 2783.947, 'duration': 3.98}, {'end': 2790.448, 'text': "So there's either GraphQL or Grok.", 'start': 2788.387, 'duration': 2.061}, {'end': 2792.688, 'text': "We're going to be using the Grok way today.", 'start': 2790.588, 'duration': 2.1}, {'end': 2797.749, 'text': 'So Grok is an in-house, in Sanity house made query language.', 'start': 2793.048, 'duration': 4.701}, {'end': 2800.929, 'text': "And we'll walk through how it looks.", 'start': 2798.509, 'duration': 2.42}, {'end': 2804.47, 'text': "But if you're familiar with GraphQL, this will also look familiar.", 'start': 2801.089, 'duration': 3.381}, {'end': 2809.191, 'text': "But if you're familiar with either one of them, then welcome to Grok.", 'start': 2804.97, 'duration': 4.221}], 'summary': 'Using grok, an in-house query language in sanity studio for showcasing content from blog posts and portfolio, familiar to graphql users.', 'duration': 44.697, 'max_score': 2764.494, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc2764494.jpg'}, {'end': 2893.832, 'src': 'embed', 'start': 2865.375, 'weight': 4, 'content': [{'end': 2867.275, 'text': 'React hooks was introduced a couple years ago.', 'start': 2865.375, 'duration': 1.9}, {'end': 2876.018, 'text': "So we're going to be setting our state, and then we're going to be using that state with a useState, and then we're going to be setting that state.", 'start': 2867.616, 'duration': 8.402}, {'end': 2878.38, 'text': "That's how our data will flow.", 'start': 2876.958, 'duration': 1.422}, {'end': 2883.826, 'text': 'So state, use the state, and then set our new state, our new data.', 'start': 2878.46, 'duration': 5.366}, {'end': 2890.594, 'text': 'So we are going to import not only React, but also useState.', 'start': 2884.647, 'duration': 5.947}, {'end': 2893.832, 'text': 'use effect.', 'start': 2892.43, 'duration': 1.402}], 'summary': 'React hooks introduced couple years ago, used usestate for state management and useeffect for side effects.', 'duration': 28.457, 'max_score': 2865.375, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc2865375.jpg'}], 'start': 2629.178, 'title': 'Styling homepage and setting up blog post page', 'summary': 'Demonstrates using tailwind css to style a homepage, including responsive styling for large screens, with specific attributes, and covers setting up the blog post section in the sanity studio, using the grok query language and implementing react hooks, resulting in a visually appealing homepage and functional blog post page.', 'chapters': [{'end': 2738.173, 'start': 2629.178, 'title': 'Styling homepage with tailwind css', 'summary': 'Demonstrates using tailwind css to style a homepage, including responsive styling for large screens, with specific attributes such as padding, text size, and font, resulting in a visually appealing and ready-to-go homepage.', 'duration': 108.995, 'highlights': ['Using Tailwind CSS for responsive styling Demonstrates the use of Tailwind CSS for responsive styling, including specific attributes for large screens, with the capability to apply styling based on screen size.', 'Setting specific attributes for large screens Specifies padding, text size, font, and leading attributes for large screens, resulting in a visually appealing and finely-tuned layout for large screen displays.', 'Completion of homepage styling Confirms the completion of homepage styling, including background image, text, and styling, ready for navigation and further development.']}, {'end': 3075.45, 'start': 2739.755, 'title': 'Setting up blog post page with sanity studio', 'summary': 'Covers setting up the blog post section in the sanity studio, using the grok query language to pull data from the sanity studio, and implementing react hooks like usestate and useeffect to set and fetch state data.', 'duration': 335.695, 'highlights': ['Using Grok query language to pull data from Sanity Studio The chapter explains the use of the Grok query language, an in-house query language, to fetch data from the Sanity Studio, providing an alternative to GraphQL.', 'Implementing React hooks like useState and useEffect to set and fetch state data The transcript details the implementation of React hooks, such as useState and useEffect, to set and fetch state data, demonstrating the use of modern React features for managing component state.', 'Setting up the blog post section in the Sanity Studio The chapter includes instructions for setting up the blog post section within the Sanity Studio, showcasing the process of integrating content from the Sanity Studio to the blog post page.']}], 'duration': 446.272, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc2629178.jpg', 'highlights': ['Demonstrates the use of Tailwind CSS for responsive styling, including specific attributes for large screens, with the capability to apply styling based on screen size.', 'Specifies padding, text size, font, and leading attributes for large screens, resulting in a visually appealing and finely-tuned layout for large screen displays.', 'Confirms the completion of homepage styling, including background image, text, and styling, ready for navigation and further development.', 'The chapter explains the use of the Grok query language, an in-house query language, to fetch data from the Sanity Studio, providing an alternative to GraphQL.', 'The transcript details the implementation of React hooks, such as useState and useEffect, to set and fetch state data, demonstrating the use of modern React features for managing component state.', 'The chapter includes instructions for setting up the blog post section within the Sanity Studio, showcasing the process of integrating content from the Sanity Studio to the blog post page.']}, {'end': 3556.124, 'segs': [{'end': 3344.597, 'src': 'embed', 'start': 3258.987, 'weight': 0, 'content': [{'end': 3264.108, 'text': "So class name equal to, so we're going to be making a grid with this.", 'start': 3258.987, 'duration': 5.121}, {'end': 3267.229, 'text': "It'll be a grid of tiles of all of our blog posts.", 'start': 3264.428, 'duration': 2.801}, {'end': 3276.851, 'text': 'So grid on a medium screen, the grid we want to be columns of two and on a large screen grid columns of three.', 'start': 3267.709, 'duration': 9.142}, {'end': 3282.19, 'text': "So If it's a large screen, it's gonna have three columns, medium screen.", 'start': 3277.231, 'duration': 4.959}, {'end': 3285.831, 'text': 'So like an iPad, two columns, anything smaller than that one column.', 'start': 3282.33, 'duration': 3.501}, {'end': 3291.014, 'text': 'So we just did responsiveness in line with a tailwind.', 'start': 3286.112, 'duration': 4.902}, {'end': 3291.454, 'text': "That's awesome.", 'start': 3291.054, 'duration': 0.4}, {'end': 3292.855, 'text': 'And then a gap of eight.', 'start': 3291.935, 'duration': 0.92}, {'end': 3294.396, 'text': "So that's the spacing around all the tiles.", 'start': 3292.875, 'duration': 1.521}, {'end': 3300.159, 'text': 'Okay Now that looks really good.', 'start': 3296.517, 'duration': 3.642}, {'end': 3301.04, 'text': "Let's save that.", 'start': 3300.199, 'duration': 0.841}, {'end': 3304.881, 'text': "Now this is where we're going to use the data that we've pulled in from sanity studio.", 'start': 3301.42, 'duration': 3.461}, {'end': 3309.182, 'text': "We're going to be using it in this because that's where we're going to have like our blog post title.", 'start': 3305.121, 'duration': 4.061}, {'end': 3315.124, 'text': 'Like we brought in up here, title, main image, all that good stuff.', 'start': 3309.662, 'duration': 5.462}, {'end': 3319.965, 'text': 'So we want to link to, oh, we need to bring in, cause this is react router Dom.', 'start': 3315.384, 'duration': 4.581}, {'end': 3325.327, 'text': 'We need to bring in the right here, import.', 'start': 3320.586, 'duration': 4.741}, {'end': 3328.628, 'text': "We'll do link.", 'start': 3327.628, 'duration': 1}, {'end': 3332.954, 'text': 'from react router Dom.', 'start': 3330.213, 'duration': 2.741}, {'end': 3336.034, 'text': 'Awesome So now we can officially use it.', 'start': 3333.774, 'duration': 2.26}, {'end': 3344.597, 'text': "Okay So in here, when you click on a tile in your blog post page, we want to link to, it's not going to be hard coded.", 'start': 3336.054, 'duration': 8.543}], 'summary': 'Creating a responsive grid layout for blog posts with 1, 2, or 3 columns based on screen size, integrating data from sanity studio using react router dom.', 'duration': 85.61, 'max_score': 3258.987, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc3258987.jpg'}, {'end': 3416.848, 'src': 'embed', 'start': 3376.265, 'weight': 5, 'content': [{'end': 3378.868, 'text': 'That will be the unique key that it gets.', 'start': 3376.265, 'duration': 2.603}, {'end': 3384.721, 'text': "Cool Now in our span around this, we're going to give it a class name.", 'start': 3380.077, 'duration': 4.644}, {'end': 3386.983, 'text': 'This is just so we can style our card.', 'start': 3384.761, 'duration': 2.222}, {'end': 3394.93, 'text': "We'll do block, height of 64, relative, so that's like location.", 'start': 3387.684, 'duration': 7.246}, {'end': 3396.891, 'text': "It's relative to the stuff around it.", 'start': 3395.19, 'duration': 1.701}, {'end': 3399.414, 'text': "Rounded, it's going to have a little rounded edge.", 'start': 3397.532, 'duration': 1.882}, {'end': 3400.995, 'text': "We're going to give it a shadow.", 'start': 3399.794, 'duration': 1.201}, {'end': 3416.848, 'text': 'leading snug, so spacing around it, around like the letters, background of white, border on the left side of eight, border will be green at 400.', 'start': 3403.484, 'duration': 13.364}], 'summary': 'Styling the card with class name, height of 64, shadow, and green border.', 'duration': 40.583, 'max_score': 3376.265, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc3376265.jpg'}, {'end': 3471.413, 'src': 'embed', 'start': 3442.648, 'weight': 7, 'content': [{'end': 3444.009, 'text': 'then we could bring that in.', 'start': 3442.648, 'duration': 1.361}, {'end': 3450.912, 'text': 'But because we want it to be particular to whatever content we have in our studio and whatever we have for that blog post,', 'start': 3444.069, 'duration': 6.843}, {'end': 3457.656, 'text': 'we are going to do post that main image dot asset dot URL.', 'start': 3450.912, 'duration': 6.744}, {'end': 3466.889, 'text': "The alt, remember the alt text is going to be, if it's using a screen reader, this is what it will say instead of showing the image.", 'start': 3458.902, 'duration': 7.987}, {'end': 3471.413, 'text': "We're going to do post.main image.alt, and we brought that in in our grok.", 'start': 3467.43, 'duration': 3.983}], 'summary': 'Using post.main image.asset.url for blog post images with alt text for screen readers', 'duration': 28.765, 'max_score': 3442.648, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc3442648.jpg'}, {'end': 3556.124, 'src': 'embed', 'start': 3519.971, 'weight': 8, 'content': [{'end': 3529.259, 'text': "We're gonna do a class name of text gray 800, text large, font bold.", 'start': 3519.971, 'duration': 9.288}, {'end': 3536.065, 'text': "We'll do a padding X of three, padding Y of four, background red at 700, so pretty dark.", 'start': 3529.499, 'duration': 6.566}, {'end': 3543.482, 'text': 'Text is going to be red 100.', 'start': 3537.406, 'duration': 6.076}, {'end': 3547.389, 'text': "Now we're going to have a background opacity of 75.", 'start': 3543.482, 'duration': 3.907}, {'end': 3554.26, 'text': "So it'll be a little see-through kind of, so it won't be like just like a block with the title on it and then rounded.", 'start': 3547.389, 'duration': 6.871}, {'end': 3556.124, 'text': 'Save that.', 'start': 3555.643, 'duration': 0.481}], 'summary': 'Styling class with red background at 700, opacity of 75% and red text.', 'duration': 36.153, 'max_score': 3519.971, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc3519971.jpg'}], 'start': 3075.73, 'title': 'Web page layout setup, react grid layout and data integration, and styling a card component', 'summary': 'Covers the setup of web page layout including specific class names and styles, creating a responsive grid layout for blog posts with dynamic data integration, and detailed styling of a card component with specific attributes and values.', 'chapters': [{'end': 3258.367, 'start': 3075.73, 'title': 'Web page layout setup', 'summary': 'Explains the setup of a web page layout, including the main section, subsections, headings, and styling, with specific class names and styles provided for each element.', 'duration': 182.637, 'highlights': ['Explaining the setup of the web page layout Describing the main section, subsections, headings, and styling', 'Providing specific class names and styles for different elements Class names and styles for main section, subsections, headings, and div', 'Highlighting the specific styling properties for H1 and H2 elements Styling properties for H1 and H2 including text size, color, and alignment']}, {'end': 3376.205, 'start': 3258.987, 'title': 'React grid layout and data integration', 'summary': 'Outlines the process of creating a responsive grid layout for blog posts using react, with two columns for medium screens and three columns for large screens, and integrating data from sanity studio to dynamically link blog post tiles based on their slug.', 'duration': 117.218, 'highlights': ['The grid layout is designed with two columns for medium screens and three columns for large screens, ensuring responsiveness and optimal display of content.', 'Data from sanity studio is integrated to dynamically link blog post tiles based on their slug, enhancing the user experience and navigation.', 'The spacing around all the tiles is set to a gap of eight, contributing to a visually appealing layout and user-friendly design.', 'The usage of react router Dom allows for seamless linking and navigation within the blog post page, ensuring a smooth user experience.', "The process involves importing 'link' from react router Dom to enable the dynamic linking of blog post tiles, enhancing the interactivity and user engagement."]}, {'end': 3556.124, 'start': 3376.265, 'title': 'Styling a card component', 'summary': 'Covers the detailed process of styling a card component, including setting class names, image source, alt text, and various styling attributes with specific values like height, width, border, and background opacity.', 'duration': 179.859, 'highlights': ['The chapter covers the detailed process of styling a card component, including setting class names, image source, alt text, and various styling attributes with specific values like height, width, border, and background opacity.', 'The card component is styled with specific attributes like height of 64, relative positioning, rounded edges, shadow, background color, left border, and green border color at 400.', "The image source for the card component is set to 'post.main image dot asset dot URL', and the alt text is specified as 'post.main image.alt' for accessibility.", 'Specific styles for the card component include width full, height full, rounded on the right, object cover, and absolute positioning for the image area.', 'The chapter also includes styling for the title with attributes like text color, font size, font weight, padding, background color, and background opacity.']}], 'duration': 480.394, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc3075730.jpg', 'highlights': ['Covers the setup of web page layout including specific class names and styles, creating a responsive grid layout for blog posts with dynamic data integration, and detailed styling of a card component with specific attributes and values.', 'The grid layout is designed with two columns for medium screens and three columns for large screens, ensuring responsiveness and optimal display of content.', 'Data from sanity studio is integrated to dynamically link blog post tiles based on their slug, enhancing the user experience and navigation.', 'The spacing around all the tiles is set to a gap of eight, contributing to a visually appealing layout and user-friendly design.', "The process involves importing 'link' from react router Dom to enable the dynamic linking of blog post tiles, enhancing the interactivity and user engagement.", 'The chapter covers the detailed process of styling a card component, including setting class names, image source, alt text, and various styling attributes with specific values like height, width, border, and background opacity.', 'The card component is styled with specific attributes like height of 64, relative positioning, rounded edges, shadow, background color, left border, and green border color at 400.', "The image source for the card component is set to 'post.main image dot asset dot URL', and the alt text is specified as 'post.main image.alt' for accessibility.", 'The chapter also includes styling for the title with attributes like text color, font size, font weight, padding, background color, and background opacity.']}, {'end': 3953.479, 'segs': [{'end': 3694.647, 'src': 'embed', 'start': 3663.45, 'weight': 2, 'content': [{'end': 3669.543, 'text': 'So while that goes, we will have Localhost 3000 has our stuff.', 'start': 3663.45, 'duration': 6.093}, {'end': 3672.425, 'text': "I don't want to click on blog posts yet, but it should look really good.", 'start': 3669.563, 'duration': 2.862}, {'end': 3675.127, 'text': 'Localhost 3333.', 'start': 3673.586, 'duration': 1.541}, {'end': 3677.289, 'text': 'This is where our sanity studio lives.', 'start': 3675.127, 'duration': 2.162}, {'end': 3679.991, 'text': "So let's make sure we add in some content.", 'start': 3677.909, 'duration': 2.082}, {'end': 3688.057, 'text': 'So when we go to our posts, so this post is same as get rid of this.', 'start': 3680.711, 'duration': 7.346}, {'end': 3690.322, 'text': 'this post.', 'start': 3689.741, 'duration': 0.581}, {'end': 3694.647, 'text': 'Now let me show you how that looks in the sanity code.', 'start': 3691.223, 'duration': 3.424}], 'summary': 'Setting up localhost 3000 and 3333 for sanity studio and adding content to posts.', 'duration': 31.197, 'max_score': 3663.45, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc3663450.jpg'}, {'end': 3754.093, 'src': 'heatmap', 'start': 3576.301, 'weight': 0, 'content': [{'end': 3584.546, 'text': "So starting right above the article, because this contains all this stuff that we're doing, we're going to map over our post data.", 'start': 3576.301, 'duration': 8.245}, {'end': 3591.33, 'text': 'So let me remove that curly and bring it down below this article.', 'start': 3585.006, 'duration': 6.324}, {'end': 3596.493, 'text': 'And then once we hit save on prettier, that should help it out.', 'start': 3593.571, 'duration': 2.922}, {'end': 3598.524, 'text': "So right here, we're going to do post data.", 'start': 3596.943, 'duration': 1.581}, {'end': 3605.107, 'text': "So we're finding that data that we've set for the post data and post data dot map.", 'start': 3598.564, 'duration': 6.543}, {'end': 3607.188, 'text': "So we're going to map over all this information.", 'start': 3605.147, 'duration': 2.041}, {'end': 3616.072, 'text': "We're going to do post and the index of it, do an arrow function and open that up.", 'start': 3609.309, 'duration': 6.763}, {'end': 3626.177, 'text': 'Now these two, we want to cut that and bring it down right in front of that curly.', 'start': 3616.752, 'duration': 9.425}, {'end': 3628.225, 'text': 'Save that.', 'start': 3627.785, 'duration': 0.44}, {'end': 3631.546, 'text': "Now we're mapping over all the information that is clickable.", 'start': 3628.945, 'duration': 2.601}, {'end': 3637.828, 'text': "So this whole like grid system, it's mapping over and it's making sure we're showing all of the data that we need to.", 'start': 3631.586, 'duration': 6.242}, {'end': 3639.828, 'text': 'And then that should be it.', 'start': 3638.488, 'duration': 1.34}, {'end': 3644.609, 'text': 'So let me bring up my terminal, do NPM start.', 'start': 3640.048, 'duration': 4.561}, {'end': 3650.511, 'text': "And then in another terminal, oops, that's just reloading.", 'start': 3645.11, 'duration': 5.401}, {'end': 3662.89, 'text': "In another terminal, we will CD into Now we're in Studio and let's do Sanity Start to get our Sanity Studio going.", 'start': 3651.011, 'duration': 11.879}, {'end': 3669.543, 'text': 'So while that goes, we will have Localhost 3000 has our stuff.', 'start': 3663.45, 'duration': 6.093}, {'end': 3672.425, 'text': "I don't want to click on blog posts yet, but it should look really good.", 'start': 3669.563, 'duration': 2.862}, {'end': 3675.127, 'text': 'Localhost 3333.', 'start': 3673.586, 'duration': 1.541}, {'end': 3677.289, 'text': 'This is where our sanity studio lives.', 'start': 3675.127, 'duration': 2.162}, {'end': 3679.991, 'text': "So let's make sure we add in some content.", 'start': 3677.909, 'duration': 2.082}, {'end': 3688.057, 'text': 'So when we go to our posts, so this post is same as get rid of this.', 'start': 3680.711, 'duration': 7.346}, {'end': 3690.322, 'text': 'this post.', 'start': 3689.741, 'duration': 0.581}, {'end': 3694.647, 'text': 'Now let me show you how that looks in the sanity code.', 'start': 3691.223, 'duration': 3.424}, {'end': 3696.829, 'text': "So if we come over here, let's collapse that.", 'start': 3695.107, 'duration': 1.722}, {'end': 3698.091, 'text': "Let's open up our studio.", 'start': 3696.949, 'duration': 1.142}, {'end': 3707.315, 'text': 'If we come to schemas and we click on post, this is where our post document type lives.', 'start': 3699.83, 'duration': 7.485}, {'end': 3710.317, 'text': 'So we have name of post and title of post.', 'start': 3707.775, 'duration': 2.542}, {'end': 3721.003, 'text': "So that name, that type is what we're looking for right here, that lowercase, but it has a title of capital P post.", 'start': 3710.457, 'duration': 10.546}, {'end': 3723.104, 'text': "And that's what lives right here.", 'start': 3721.664, 'duration': 1.44}, {'end': 3731.535, 'text': 'So we have title, we have slug, we have author, main image, all this stuff that you see here.', 'start': 3724.325, 'duration': 7.21}, {'end': 3737.929, 'text': 'we go back to our studio, click on post and we click on that little thing to add a new one.', 'start': 3731.535, 'duration': 6.394}, {'end': 3743.05, 'text': 'And we have all that stuff that was over in our code right here.', 'start': 3738.389, 'duration': 4.661}, {'end': 3754.093, 'text': "So if we clicked on title and we did my very first blog post, we generate that slug and it's gonna create a slug for us.", 'start': 3744.03, 'duration': 10.063}], 'summary': 'Mapping over post data and ensuring all information is shown in sanity studio.', 'duration': 29.768, 'max_score': 3576.301, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc3576301.jpg'}, {'end': 3902.48, 'src': 'embed', 'start': 3874.696, 'weight': 1, 'content': [{'end': 3877.179, 'text': "Voila So let's see what it looks like.", 'start': 3874.696, 'duration': 2.483}, {'end': 3878.921, 'text': "It's all published.", 'start': 3877.199, 'duration': 1.722}, {'end': 3881.884, 'text': "If we come back here, let's just refresh it just in case.", 'start': 3879.241, 'duration': 2.643}, {'end': 3883.506, 'text': 'We click on blog post.', 'start': 3882.465, 'duration': 1.041}, {'end': 3887.27, 'text': 'We should see that blog post and our grid all set up.', 'start': 3883.546, 'duration': 3.724}, {'end': 3892.937, 'text': "It'll only show one, so we actually kind of won't see the grid, but we should see our blog post that we just created.", 'start': 3887.37, 'duration': 5.567}, {'end': 3893.657, 'text': "So we'll click on it.", 'start': 3892.997, 'duration': 0.66}, {'end': 3896.098, 'text': 'and there it is.', 'start': 3894.478, 'duration': 1.62}, {'end': 3900.339, 'text': "so if we click on it, it'll do nothing right now, because that's our single post component.", 'start': 3896.098, 'duration': 4.241}, {'end': 3902.48, 'text': 'but yeah, it looks super good.', 'start': 3900.339, 'duration': 2.141}], 'summary': 'Demonstration of a published blog post and a grid setup.', 'duration': 27.784, 'max_score': 3874.696, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc3874696.jpg'}], 'start': 3556.484, 'title': 'Mapping data and setting up sanity studio for blog posts', 'summary': 'Discusses dynamically generating blog post titles using post data attributes and setting up a sanity studio for blog posts, resulting in successful creation and display of blog posts with related data and images.', 'chapters': [{'end': 3631.546, 'start': 3556.484, 'title': 'Mapping data for blog post titles', 'summary': 'Discusses mapping over post data to dynamically generate blog post titles without hard coding, utilizing the post.title attribute, and mapping over all clickable information.', 'duration': 75.062, 'highlights': ['Mapping over post data to dynamically generate blog post titles without hard coding', 'Utilizing the post.title attribute to match whatever title the blog post is', 'Mapping over all clickable information to display all the information']}, {'end': 3953.479, 'start': 3631.586, 'title': 'Setting up sanity studio for blog posts', 'summary': 'Covers the process of setting up a sanity studio for blog posts, including adding content, images, and authors, resulting in the successful creation and display of blog posts with related data and images.', 'duration': 321.893, 'highlights': ['The process of setting up a Sanity Studio for blog posts is detailed, including adding content, images, and authors. The transcript provides a step-by-step guide to setting up a Sanity Studio for blog posts, covering the addition of content, images, and authors to create a functional blog post display.', 'The successful creation and display of blog posts with related data and images is demonstrated. The successful creation and display of blog posts, including the addition of related data and images, is highlighted as a result of the setup process.', 'The process involves the generation and publishing of blog posts, including the addition of images and related content. The process involves the generation and publishing of blog posts, including the addition of images and related content, resulting in the successful display of the created blog posts.']}], 'duration': 396.995, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc3556484.jpg', 'highlights': ['The process involves the generation and publishing of blog posts, including the addition of images and related content.', 'The successful creation and display of blog posts with related data and images is demonstrated.', 'The process of setting up a Sanity Studio for blog posts is detailed, including adding content, images, and authors.']}, {'end': 5354.865, 'segs': [{'end': 4102.49, 'src': 'embed', 'start': 4076.665, 'weight': 3, 'content': [{'end': 4082.566, 'text': "a title and we'll call it project just with a capital P because that's what is going to show up in our studio.", 'start': 4076.665, 'duration': 5.901}, {'end': 4086.287, 'text': 'The type is going to be document.', 'start': 4083.286, 'duration': 3.001}, {'end': 4090.548, 'text': "Now within this, we're going to have different fields.", 'start': 4088.428, 'duration': 2.12}, {'end': 4093.369, 'text': 'The fields are going to be not curly.', 'start': 4091.188, 'duration': 2.181}, {'end': 4102.49, 'text': 'The fields are going to be what we see when we are adding stuff like title or that kind of thing.', 'start': 4094.529, 'duration': 7.961}], 'summary': 'Creating a document type project with fields for adding content.', 'duration': 25.825, 'max_score': 4076.665, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc4076665.jpg'}, {'end': 4339.474, 'src': 'heatmap', 'start': 4256.275, 'weight': 0.793, 'content': [{'end': 4269.372, 'text': "And then we will come out of here and we will do name of link and we're going to link to the URL.", 'start': 4256.275, 'duration': 13.097}, {'end': 4277.096, 'text': "that's going to be our type of our project, because if our project is hosted, we can take them right to the link them with the URL to the project.", 'start': 4269.372, 'duration': 7.724}, {'end': 4278.237, 'text': 'And so they can just see it right away.', 'start': 4277.136, 'duration': 1.101}, {'end': 4282.279, 'text': "And then, yeah, we'll add tags.", 'start': 4279.357, 'duration': 2.922}, {'end': 4286.581, 'text': "We won't do much with these tags, but just so we can see how tags are added in a schema.", 'start': 4282.459, 'duration': 4.122}, {'end': 4298.147, 'text': "So type will be array and it'll be tags of type will be string.", 'start': 4287.061, 'duration': 11.086}, {'end': 4300.102, 'text': "That's really far down there.", 'start': 4299.141, 'duration': 0.961}, {'end': 4300.602, 'text': 'Let me pull it up.', 'start': 4300.122, 'duration': 0.48}, {'end': 4309.349, 'text': 'Options will be the layout of tags.', 'start': 4304.305, 'duration': 5.044}, {'end': 4313.653, 'text': "And you'll see how tags are done in just a moment.", 'start': 4309.409, 'duration': 4.244}, {'end': 4315.875, 'text': 'Okay, so that should look good.', 'start': 4314.433, 'duration': 1.442}, {'end': 4318.557, 'text': 'We have an error.', 'start': 4316.815, 'duration': 1.742}, {'end': 4320.118, 'text': 'Oh, I know.', 'start': 4318.577, 'duration': 1.541}, {'end': 4322.16, 'text': "It's fields with an S.", 'start': 4320.138, 'duration': 2.022}, {'end': 4326.783, 'text': 'Okay So fields, not field, save that and it should be good now.', 'start': 4323.28, 'duration': 3.503}, {'end': 4328.545, 'text': 'Cool Okay.', 'start': 4327.524, 'duration': 1.021}, {'end': 4329.145, 'text': 'So here it is.', 'start': 4328.605, 'duration': 0.54}, {'end': 4332.368, 'text': 'We have our post author and project project.', 'start': 4329.205, 'duration': 3.163}, {'end': 4339.474, 'text': "We'll have nothing so far cause we don't have anything, but if we click here, we'll see that whole schema that we just did.", 'start': 4332.408, 'duration': 7.066}], 'summary': 'Creating schema for project with tags and link to url.', 'duration': 83.199, 'max_score': 4256.275, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc4256275.jpg'}, {'end': 4454.327, 'src': 'embed', 'start': 4418.107, 'weight': 0, 'content': [{'end': 4423.81, 'text': "So let's add in, we know we're going to be using use effect and use state.", 'start': 4418.107, 'duration': 5.703}, {'end': 4424.97, 'text': 'Save that.', 'start': 4424.47, 'duration': 0.5}, {'end': 4427.812, 'text': "We know we're going to be using the sanity client.", 'start': 4425.431, 'duration': 2.381}, {'end': 4434.737, 'text': "I think it's up one more.", 'start': 4430.835, 'duration': 3.902}, {'end': 4436.458, 'text': 'Yeah Okay.', 'start': 4435.197, 'duration': 1.261}, {'end': 4439.44, 'text': "Let's query for our data.", 'start': 4436.578, 'duration': 2.862}, {'end': 4450.845, 'text': "So let's set our state first and we'll do project data and set project data, just like our other one.", 'start': 4439.96, 'duration': 10.885}, {'end': 4454.327, 'text': "And we'll do use state and we'll set that to no.", 'start': 4450.925, 'duration': 3.402}], 'summary': "Using useeffect and usestate, querying for data and setting state to 'no'.", 'duration': 36.22, 'max_score': 4418.107, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc4418107.jpg'}, {'end': 4569.615, 'src': 'heatmap', 'start': 4490.711, 'weight': 0.821, 'content': [{'end': 4492.093, 'text': 'We want to pull out the place.', 'start': 4490.711, 'duration': 1.382}, {'end': 4495.818, 'text': 'We want to pull out the description.', 'start': 4493.114, 'duration': 2.704}, {'end': 4501.165, 'text': 'We want to pull out the project type, the link, and the tags.', 'start': 4495.838, 'duration': 5.327}, {'end': 4506.892, 'text': 'So now we can do whatever we need to with that information.', 'start': 4504.451, 'duration': 2.441}, {'end': 4510.234, 'text': "And just like the other one, we'll do a .then.", 'start': 4507.493, 'duration': 2.741}, {'end': 4517.799, 'text': "And we're getting the data and setting it to, we called it set project data.", 'start': 4510.254, 'duration': 7.545}, {'end': 4520.34, 'text': "And that's now our data.", 'start': 4517.819, 'duration': 2.521}, {'end': 4524.683, 'text': 'And then a .catch.', 'start': 4522.141, 'duration': 2.542}, {'end': 4529.686, 'text': 'And then console.error.', 'start': 4526.404, 'duration': 3.282}, {'end': 4533.708, 'text': 'Okay, and then we want to run just once.', 'start': 4529.706, 'duration': 4.002}, {'end': 4536.489, 'text': 'And there we go.', 'start': 4535.949, 'duration': 0.54}, {'end': 4539.931, 'text': "We're done with the rock query side of things.", 'start': 4537.07, 'duration': 2.861}, {'end': 4542.532, 'text': "So let's now work on the return.", 'start': 4540.651, 'duration': 1.881}, {'end': 4545.754, 'text': "So in here, let's open it up.", 'start': 4544.593, 'duration': 1.161}, {'end': 4548.635, 'text': 'And we have, we have a main section.', 'start': 4545.954, 'duration': 2.681}, {'end': 4551.337, 'text': 'We have a section.', 'start': 4550.136, 'duration': 1.201}, {'end': 4557.54, 'text': "And this is going to look very similar to our blog post because it's still going to be like a grid type thing of just our projects.", 'start': 4551.357, 'duration': 6.183}, {'end': 4560.661, 'text': 'Section, we have an H1.', 'start': 4558.28, 'duration': 2.381}, {'end': 4562.682, 'text': "Oh, let's not open that up yet.", 'start': 4560.681, 'duration': 2.001}, {'end': 4569.615, 'text': 'H1, we have an H2.', 'start': 4567.254, 'duration': 2.361}], 'summary': 'Extracted place, description, project type, link, and tags for processing.', 'duration': 78.904, 'max_score': 4490.711, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc4490711.jpg'}, {'end': 4669.085, 'src': 'embed', 'start': 4609.537, 'weight': 1, 'content': [{'end': 4612.499, 'text': 'And then within that, we have a span.', 'start': 4609.537, 'duration': 2.962}, {'end': 4616.819, 'text': "Okay, so let's just look at what's going on here.", 'start': 4613.996, 'duration': 2.823}, {'end': 4620.683, 'text': 'So we have our main section, we have a section for that.', 'start': 4617.42, 'duration': 3.263}, {'end': 4624.647, 'text': 'Within that we have our header, we have our subtitle.', 'start': 4621.424, 'duration': 3.223}, {'end': 4625.688, 'text': 'we have our subtitle.', 'start': 4624.647, 'duration': 1.041}, {'end': 4634.277, 'text': 'we have a section, another one that takes care of the article that has the title of the project and then all the information of the project.', 'start': 4625.688, 'duration': 8.589}, {'end': 4641.602, 'text': 'And this is where like the project type, the date, all that kind of stuff is gonna live.', 'start': 4635.398, 'duration': 6.204}, {'end': 4644.905, 'text': 'So on the main section, we just need to add some styling.', 'start': 4641.863, 'duration': 3.042}, {'end': 4654.812, 'text': "We'll do a class name of, we'll do background green at 100 and we'll do a min height screen and a padding of 12.", 'start': 4645.025, 'duration': 9.787}, {'end': 4666.903, 'text': "This section is gonna have a class name of, we're gonna give it a container Margin auto.", 'start': 4654.812, 'duration': 12.091}, {'end': 4669.085, 'text': 'H1, this is our header.', 'start': 4667.904, 'duration': 1.181}], 'summary': 'The main section includes a header, subtitle, and article with project information. styling involves adding class names for background, height, and padding.', 'duration': 59.548, 'max_score': 4609.537, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc4609537.jpg'}, {'end': 5256.679, 'src': 'heatmap', 'start': 5173.545, 'weight': 0.79, 'content': [{'end': 5181.608, 'text': "And to pull up on a Mac, the emojis command control space bar opens it up and I'm going to do the pointer.", 'start': 5173.545, 'duration': 8.063}, {'end': 5183.509, 'text': 'And now we have.', 'start': 5182.869, 'duration': 0.64}, {'end': 5192.48, 'text': "our little emoji, but yeah, this ARIA label is just like saying like, what is the emoji? It's kind of like the alt tag for it.", 'start': 5185.717, 'duration': 6.763}, {'end': 5198.843, 'text': 'Now, same thing as before we have to do a, um, we have to map over all this information.', 'start': 5193.4, 'duration': 5.443}, {'end': 5203.665, 'text': "Okay So above article and below section, let's do our map.", 'start': 5199.283, 'duration': 4.382}, {'end': 5209.928, 'text': "So we're going to do project data, project data dot map.", 'start': 5203.965, 'duration': 5.963}, {'end': 5220.697, 'text': "We're going to open that up and in here we're going to put project index, do an arrow function, open that up.", 'start': 5210.709, 'duration': 9.988}, {'end': 5232.208, 'text': 'And before we open that up, we want to wrap these three around down here, right there.', 'start': 5221.178, 'duration': 11.03}, {'end': 5234.53, 'text': 'Yeah Okay.', 'start': 5233.289, 'duration': 1.241}, {'end': 5243.989, 'text': "So now we're mapping over that section of all of the tiles of the projects that we're gonna have, and it all looks good.", 'start': 5236.198, 'duration': 7.791}, {'end': 5248.715, 'text': 'So if everything is correct, We have our project.', 'start': 5244.35, 'duration': 4.365}, {'end': 5251.637, 'text': 'We published one, go to our react app.', 'start': 5248.755, 'duration': 2.882}, {'end': 5256.679, 'text': "Cool So we have our homepage blog posts, projects, and it's there.", 'start': 5251.837, 'duration': 4.842}], 'summary': 'Using emojis in coding and mapping project data in a react app.', 'duration': 83.134, 'max_score': 5173.545, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc5173545.jpg'}], 'start': 3955.387, 'title': 'Web design project development', 'summary': 'Discusses setting up the project schema, creating and querying data, web page styling and structure, and detailed html coding for a web design project, covering fields, tags, react hooks, sanity client, and html/css elements.', 'chapters': [{'end': 4269.372, 'start': 3955.387, 'title': 'Setting up project schema', 'summary': 'Discusses setting up the project schema, removing a category, adding a project schema, and defining fields such as title, date, place, description, and project type with options like personal, client, and school.', 'duration': 313.985, 'highlights': ['Defining fields for the project schema The chapter outlines the process of defining fields for the project schema, including title, date, place, description, and project type with options like personal, client, and school.', 'Removing the category from the schema The chapter explains the removal of the category from the schema, cleaning up the unnecessary data to optimize the schema.', 'Adding a project schema The chapter details the addition of a project schema, demonstrating the creation of a new file, importing the project, and building the schema for the project.']}, {'end': 4533.708, 'start': 4269.372, 'title': 'Creating project schema and querying data', 'summary': 'Details the process of creating a project schema, adding tags, and querying data using react hooks and the sanity client, emphasizing the importance of hosting the project and providing a detailed example of the schema creation process.', 'duration': 264.336, 'highlights': ['The chapter details the process of creating a project schema, adding tags, and querying data using React hooks and the Sanity client. Creating project schema, adding tags, querying data, using React hooks, using Sanity client', 'Emphasizes the importance of hosting the project and providing a detailed example of the schema creation process. Importance of hosting project, detailed example of schema creation process', 'Provides a step-by-step example of querying data using React hooks and the Sanity client. Step-by-step example of querying data, using React hooks, using Sanity client']}, {'end': 4939.047, 'start': 4535.949, 'title': 'Web page styling and structure', 'summary': 'Focuses on styling and structuring a web page, including adding classes, styling attributes, and creating clickable links, with a detailed breakdown of the html and css elements used.', 'duration': 403.098, 'highlights': ['The chapter focuses on styling and structuring a web page The transcript details the process of structuring and styling a web page, including adding classes, styling attributes, and creating clickable links.', 'Detailed breakdown of HTML and CSS elements used The transcript provides a detailed breakdown of the HTML and CSS elements used, including specific class names, styling attributes, and the creation of clickable links.', "Use of JavaScript to format the date The chapter explains the use of JavaScript to format the date, utilizing the 'new Date' function and 'toLocaleDateString' method to display the date in a user's local format."]}, {'end': 5354.865, 'start': 4939.387, 'title': 'Web design project html coding', 'summary': 'Covers the detailed coding process for a web design project, including html markup and css styling, with specific instructions on structuring and styling elements such as tags, classes, and links.', 'duration': 415.478, 'highlights': ['The chapter covers the detailed coding process for a web design project, including HTML markup and CSS styling, with specific instructions on structuring and styling elements such as tags, classes, and links.', 'The process involves creating tags with specific class names for elements like company, project type, description, and clickable links, with detailed instructions on formatting and styling.', 'Specific instructions are provided for adding emojis and aria labels to elements, along with mapping over project data and testing the functionality of the web page.']}], 'duration': 1399.478, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc3955387.jpg', 'highlights': ['Creating project schema, adding tags, querying data, using React hooks, using Sanity client', 'The chapter covers the detailed coding process for a web design project, including HTML markup and CSS styling, with specific instructions on structuring and styling elements such as tags, classes, and links.', 'The chapter focuses on styling and structuring a web page The transcript details the process of structuring and styling a web page, including adding classes, styling attributes, and creating clickable links.', 'The chapter outlines the process of defining fields for the project schema, including title, date, place, description, and project type with options like personal, client, and school.']}, {'end': 6203.264, 'segs': [{'end': 5409.633, 'src': 'embed', 'start': 5355.565, 'weight': 1, 'content': [{'end': 5356.625, 'text': "It's the easiest one.", 'start': 5355.565, 'duration': 1.06}, {'end': 5365.167, 'text': 'And then tags will say university, school, project, and education.', 'start': 5356.705, 'duration': 8.462}, {'end': 5373.028, 'text': 'publish that, and we go back here, give it a little refresh, and there it is.', 'start': 5367.145, 'duration': 5.883}, {'end': 5380.792, 'text': "Okay, so now that our projects page is talking to the Sanity Studio, let's actually make our blog post.", 'start': 5373.648, 'duration': 7.144}, {'end': 5385.174, 'text': 'So projects click into a URL and it takes us somewhere else, but blog posts.', 'start': 5380.812, 'duration': 4.362}, {'end': 5387.976, 'text': 'if we were to click into one of these, it takes us to our single post page.', 'start': 5385.174, 'duration': 2.802}, {'end': 5390.537, 'text': "So let's get that up and running.", 'start': 5388.676, 'duration': 1.861}, {'end': 5398.363, 'text': "So the way we're doing our image for this is we are bringing in the image directly from the grot query and using it like that.", 'start': 5390.717, 'duration': 7.646}, {'end': 5407.011, 'text': 'A different way we can use our images is by using our image URL package that Sanity has.', 'start': 5399.024, 'duration': 7.987}, {'end': 5409.633, 'text': 'So let me show you how that works.', 'start': 5407.671, 'duration': 1.962}], 'summary': 'Setting up project and blog post pages, using different methods to display images', 'duration': 54.068, 'max_score': 5355.565, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc5355565.jpg'}, {'end': 5665.488, 'src': 'embed', 'start': 5635.824, 'weight': 0, 'content': [{'end': 5637.265, 'text': 'And it looks like that was installed.', 'start': 5635.824, 'duration': 1.441}, {'end': 5641.148, 'text': 'Awesome So that was added and we can collapse this.', 'start': 5638.066, 'duration': 3.082}, {'end': 5647.025, 'text': "Okay So now that we have that, and we're not going to use it yet.", 'start': 5642.901, 'duration': 4.124}, {'end': 5648.186, 'text': "We're going to use that in our return.", 'start': 5647.045, 'duration': 1.141}, {'end': 5650.849, 'text': "Let's build out our grout query.", 'start': 5648.406, 'duration': 2.443}, {'end': 5654.152, 'text': "So same as last time, we'll do use effect.", 'start': 5651.75, 'duration': 2.402}, {'end': 5665.488, 'text': "And then in here, we'll do an arrow function that uses the sanity client that fetches our Rock query.", 'start': 5655.453, 'duration': 10.035}], 'summary': 'Installed a component, prepared for future use, and initiated a query.', 'duration': 29.664, 'max_score': 5635.824, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc5635824.jpg'}, {'end': 5742.079, 'src': 'embed', 'start': 5705.786, 'weight': 3, 'content': [{'end': 5706.686, 'text': 'We want the ID.', 'start': 5705.786, 'duration': 0.9}, {'end': 5708.687, 'text': 'We want the slug.', 'start': 5706.706, 'duration': 1.981}, {'end': 5710.308, 'text': 'We want the main image.', 'start': 5709.247, 'duration': 1.061}, {'end': 5717.331, 'text': 'We want to pull out the ID of that.', 'start': 5712.209, 'duration': 5.122}, {'end': 5723.325, 'text': 'And last thing is we need the body.', 'start': 5720.124, 'duration': 3.201}, {'end': 5730.467, 'text': "And because we want the, like the author card to show up on this, we're going to give it.", 'start': 5723.345, 'duration': 7.122}, {'end': 5734.769, 'text': "Okay Let me, let me explain what I'm doing here.", 'start': 5732.848, 'duration': 1.921}, {'end': 5738.23, 'text': 'Cause this is kind of fun, but let me just finish typing it out.', 'start': 5734.889, 'duration': 3.341}, {'end': 5742.079, 'text': "And we'll do author image.", 'start': 5739.838, 'duration': 2.241}], 'summary': 'Requesting id, slug, main image, and body for an author card.', 'duration': 36.293, 'max_score': 5705.786, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc5705786.jpg'}, {'end': 5860.105, 'src': 'embed', 'start': 5832.719, 'weight': 4, 'content': [{'end': 5844.701, 'text': "We're also going to be using another sanity package that I won't give any spoilers yet, but let me clean that up and yeah, we're going to have.", 'start': 5832.719, 'duration': 11.982}, {'end': 5848.501, 'text': "And we're going to do our whole HTML setup thing real quick.", 'start': 5846.24, 'duration': 2.261}, {'end': 5851.042, 'text': "Main, we're going to have an article.", 'start': 5848.961, 'duration': 2.081}, {'end': 5854.363, 'text': "We're going to have a header.", 'start': 5851.062, 'duration': 3.301}, {'end': 5860.105, 'text': "We're going to have a div within that, another div within that, an h1.", 'start': 5854.383, 'duration': 5.722}], 'summary': 'Using a sanity package for html setup with article, header, and h1.', 'duration': 27.386, 'max_score': 5832.719, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc5832719.jpg'}, {'end': 5950.163, 'src': 'embed', 'start': 5909.708, 'weight': 5, 'content': [{'end': 5919.091, 'text': 'Cool So we have article, we have our header and in that header, we have an H one, an image and a P tag.', 'start': 5909.708, 'duration': 9.383}, {'end': 5926.494, 'text': "So yeah, let's style these out slowly one by one and we'll make it look good.", 'start': 5920.031, 'duration': 6.463}, {'end': 5938.638, 'text': 'So main class name is going to be equal to background of gray at 200 min height screen and padding of 12.', 'start': 5926.794, 'duration': 11.844}, {'end': 5947.382, 'text': 'Our article is going to have class name of container.', 'start': 5938.638, 'duration': 8.744}, {'end': 5950.163, 'text': 'So this should look very similar to the other ones.', 'start': 5947.942, 'duration': 2.221}], 'summary': 'Styling includes a gray background, 200 min height, and 12 padding.', 'duration': 40.455, 'max_score': 5909.708, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc5909708.jpg'}], 'start': 5355.565, 'title': 'Building and extracting blog post data', 'summary': 'Discusses building a blog post page using sanity, fetching data, using image url package, and implementing grout query. it also covers extracting specific data from a clicked post, including id, slug, main image, body, html setup, and styling.', 'chapters': [{'end': 5665.488, 'start': 5355.565, 'title': 'Building blog post page with sanity', 'summary': 'Discusses the process of building a blog post page using sanity, including fetching data from sanity studio, using image url package, and implementing grout query with sanity client.', 'duration': 309.923, 'highlights': ['Fetching data from Sanity Studio The chapter explains the process of fetching data from Sanity Studio to populate the projects page and the single post page.', 'Using image URL package for images The speaker demonstrates the use of the image URL package provided by Sanity to manipulate image URLs, offering an alternative to fetching images directly from the grout query.', 'Implementing grout query with sanity client The chapter details the implementation of grout query with the sanity client to fetch data for the blog post page, using useEffect and arrow function to define the query.']}, {'end': 6203.264, 'start': 5666.388, 'title': 'Extracting data from a clicked post', 'summary': 'Focuses on extracting specific data such as id, slug, main image, and body from a clicked post, while also incorporating html setup and styling for elements like the article, header, and author card.', 'duration': 536.876, 'highlights': ['The chapter demonstrates the process of extracting specific data such as ID, slug, main image, and body from a clicked post. The speaker explains the process of retrieving key data elements, including ID, slug, main image, and body, from a clicked post.', 'The chapter covers the incorporation of HTML setup and styling for elements like the article, header, and author card. The chapter delves into the implementation of HTML setup and styling for various elements, including the article, header, and author card, to enhance the visual presentation.', 'The speaker emphasizes the usage of specific class names and styling attributes to enhance the visual presentation of elements like the article, header, and author card. The speaker highlights the importance of using specific class names and styling attributes to improve the visual presentation of elements such as the article, header, and author card.']}], 'duration': 847.699, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc5355565.jpg', 'highlights': ['The chapter details the implementation of grout query with the sanity client to fetch data for the blog post page, using useEffect and arrow function to define the query.', 'The chapter explains the process of fetching data from Sanity Studio to populate the projects page and the single post page.', 'The speaker demonstrates the use of the image URL package provided by Sanity to manipulate image URLs, offering an alternative to fetching images directly from the grout query.', 'The chapter demonstrates the process of extracting specific data such as ID, slug, main image, and body from a clicked post. The speaker explains the process of retrieving key data elements, including ID, slug, main image, and body, from a clicked post.', 'The chapter covers the incorporation of HTML setup and styling for elements like the article, header, and author card. The chapter delves into the implementation of HTML setup and styling for various elements, including the article, header, and author card, to enhance the visual presentation.', 'The speaker emphasizes the usage of specific class names and styling attributes to enhance the visual presentation of elements like the article, header, and author card. The speaker highlights the importance of using specific class names and styling attributes to improve the visual presentation of elements such as the article, header, and author card.']}, {'end': 7610.608, 'segs': [{'end': 6234.919, 'src': 'embed', 'start': 6206.803, 'weight': 3, 'content': [{'end': 6208.724, 'text': 'You can add a width to it.', 'start': 6206.803, 'duration': 1.921}, {'end': 6211.065, 'text': 'You can add a height to it.', 'start': 6209.985, 'duration': 1.08}, {'end': 6212.966, 'text': 'You can add a blur to it.', 'start': 6211.966, 'duration': 1}, {'end': 6215.548, 'text': "There's a lot of different things you can do to it.", 'start': 6213.006, 'duration': 2.542}, {'end': 6222.112, 'text': "And it's just quick styling and manipulation of the photo without having to do a lot of work.", 'start': 6215.988, 'duration': 6.124}, {'end': 6224.253, 'text': 'So this package is really awesome.', 'start': 6222.672, 'duration': 1.581}, {'end': 6233.278, 'text': "We're not showing the true potential of it here because this is just a quick portfolio that we're creating.", 'start': 6226.074, 'duration': 7.204}, {'end': 6234.919, 'text': 'You can choose how you want to use it.', 'start': 6233.578, 'duration': 1.341}], 'summary': 'Quickly manipulate photos with added width, height, blur, and more, making it easy to style without much effort.', 'duration': 28.116, 'max_score': 6206.803, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc6206803.jpg'}, {'end': 6483.423, 'src': 'embed', 'start': 6457.222, 'weight': 4, 'content': [{'end': 6462.488, 'text': 'this So if I clicked activate and I make this big, we can add images.', 'start': 6457.222, 'duration': 5.266}, {'end': 6464.71, 'text': 'We can add different styling.', 'start': 6462.668, 'duration': 2.042}, {'end': 6467.793, 'text': 'We can add bulleted lists, URL strong.', 'start': 6464.75, 'duration': 3.043}, {'end': 6474.957, 'text': 'So in order for all this to look correct, We added in block content and this one is specific for react.', 'start': 6468.134, 'duration': 6.823}, {'end': 6476.258, 'text': "That's why we use this one.", 'start': 6475.277, 'duration': 0.981}, {'end': 6483.423, 'text': 'So block content is taking all of our portable text and putting it all together in one,', 'start': 6476.758, 'duration': 6.665}], 'summary': 'Adding images, styling, bulleted lists, and urls to portable text in react using block content.', 'duration': 26.201, 'max_score': 6457.222, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc6457222.jpg'}, {'end': 6722.548, 'src': 'embed', 'start': 6694.574, 'weight': 2, 'content': [{'end': 6697.756, 'text': "Now, if there's no author, we can do the thing that we've been doing.", 'start': 6694.574, 'duration': 3.182}, {'end': 6705.141, 'text': "The if no author, then we'll return a div that says loading.", 'start': 6697.776, 'duration': 7.365}, {'end': 6709.664, 'text': "Now for our background image, I'm just going to use an image from my downloads.", 'start': 6706.242, 'duration': 3.422}, {'end': 6711.025, 'text': 'Let me grab that real quick.', 'start': 6709.965, 'duration': 1.06}, {'end': 6719.267, 'text': "So in here, in the source, we'll drop it in there and we have our Plumeria picture.", 'start': 6711.426, 'duration': 7.841}, {'end': 6722.548, 'text': 'This is going to be our background for our about page.', 'start': 6719.327, 'duration': 3.221}], 'summary': 'Creating a background image for the about page using a plumeria picture.', 'duration': 27.974, 'max_score': 6694.574, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc6694574.jpg'}, {'end': 7350.301, 'src': 'embed', 'start': 7319.644, 'weight': 0, 'content': [{'end': 7321.485, 'text': "Let's see how our Netlify is doing.", 'start': 7319.644, 'duration': 1.841}, {'end': 7325.486, 'text': 'Still deploying, still working on it.', 'start': 7322.685, 'duration': 2.801}, {'end': 7334.409, 'text': 'And this is still working on it, being able to deploy our studio and our front end.', 'start': 7327.647, 'duration': 6.762}, {'end': 7343.436, 'text': "And every time we add something to our front end, it's going to or anything we add to our studio will show up in our front end.", 'start': 7335.109, 'duration': 8.327}, {'end': 7345.037, 'text': "So I'm going to take this.", 'start': 7344.297, 'duration': 0.74}, {'end': 7349.3, 'text': "That's where our studio lives now.", 'start': 7347.399, 'duration': 1.901}, {'end': 7349.941, 'text': "That's pretty awesome.", 'start': 7349.32, 'duration': 0.621}, {'end': 7350.301, 'text': "That's fun.", 'start': 7349.961, 'duration': 0.34}], 'summary': 'Netlify is still deploying and working on deploying the studio and front end, with updates reflecting immediately.', 'duration': 30.657, 'max_score': 7319.644, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc7319644.jpg'}], 'start': 6206.803, 'title': 'Styling and manipulation of photos, author page with background image, and portfolio deployment and customization', 'summary': 'Covers quick styling and manipulation of photos, setting up author page with background image, and portfolio deployment process, including deployment to netlify and real-time content updates.', 'chapters': [{'end': 6586.911, 'start': 6206.803, 'title': 'Styling and manipulation of photos', 'summary': 'Discusses the quick styling and manipulation of photos, including adding width, height, blur, and different styling options, while also showcasing the usage of block content and the installation of a sanity dependency for react.', 'duration': 380.108, 'highlights': ['The chapter discusses the quick styling and manipulation of photos, including adding width, height, blur, and different styling options, showcasing the usage of block content and the installation of a sanity dependency for React.', 'The package allows for quick styling and manipulation of photos without a lot of work, providing a convenient way to add different effects to the photos.', 'The transcript also covers the usage of block content for React, which allows for the consolidation of portable text and the integration of different elements like images, bulleted lists, and URLs for a beautiful single post body.']}, {'end': 7111.226, 'start': 6588.292, 'title': 'Creating author page with background image', 'summary': 'Details the process of setting up the author state and fetching author data using sanityclient, incorporating a background image and displaying author information on the web page.', 'duration': 522.934, 'highlights': ["Setting up author state and fetching author data using SanityClient The chapter discusses setting up the author state with initial state as null and using SanityClient.fetch to retrieve author data, including the author's name, bio, and image URL.", 'Incorporating a background image for the about page The chapter explains the inclusion of a background image for the about page, importing an image and setting it as the background, creating a visually appealing layout for the webpage.', "Displaying author information on the web page The process of displaying author information, including the author's name and bio, using HTML elements and styling, ensuring a visually pleasing presentation of the author's details on the webpage."]}, {'end': 7610.608, 'start': 7111.286, 'title': 'Portfolio deployment and customization', 'summary': 'Covers the deployment process of a portfolio, including adding redirects for a single-page application, deploying the front end to netlify, and deploying the back end in sanity studio. it also emphasizes the real-time content updates and customization options available in tailwind and sanity.', 'duration': 499.322, 'highlights': ['The deployment process includes adding redirects for a single-page application, deploying the front end to Netlify, and deploying the back end in Sanity Studio. The process involves adding a redirects file for Netlify, creating a new site from GitHub on Netlify, and deploying the Sanity Studio.', 'Real-time content updates are possible by making changes in the Sanity Studio that reflect immediately on the deployed site. Changes made in the Sanity Studio, such as modifying the bio, are instantly reflected on the deployed site, enabling real-time updates without the need to work locally.', 'Customization options are available in Tailwind and Sanity, including themes, colors, and customizable studio. Tailwind offers themes and colors for customization, while Sanity Studio can be customized with preferred colors. Additionally, the chapter suggests exploring Tailwind and Sanity documentation for further customization options and joining the Sanity community for support.']}], 'duration': 1403.805, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NO7_jgzVgbc/pics/NO7_jgzVgbc6206803.jpg', 'highlights': ['Real-time content updates are possible by making changes in the Sanity Studio that reflect immediately on the deployed site.', 'The deployment process includes adding redirects for a single-page application, deploying the front end to Netlify, and deploying the back end in Sanity Studio.', 'Incorporating a background image for the about page The chapter explains the inclusion of a background image for the about page, importing an image and setting it as the background, creating a visually appealing layout for the webpage.', 'The package allows for quick styling and manipulation of photos without a lot of work, providing a convenient way to add different effects to the photos.', 'The transcript also covers the usage of block content for React, which allows for the consolidation of portable text and the integration of different elements like images, bulleted lists, and URLs for a beautiful single post body.']}], 'highlights': ['Learn to build a portfolio website using React for frontend, Sanity for backend, and Tailwind CSS for styling with detailed steps for setting up, styling, and integrating components, including social links, blog posts, web design projects, and author page, and deploy to Netlify for real-time updates.', 'Real-time content updates are possible by making changes in the Sanity Studio that reflect immediately on the deployed site.', 'The deployment process includes adding redirects for a single-page application, deploying the front end to Netlify, and deploying the back end in Sanity Studio.', 'Covers setting up a React application using create-react-app and a Sanity Studio using the Sanity CLI.', 'The requirement of Node installation is mentioned for setting up the development environment.', 'Social links for Twitter, YouTube, and LinkedIn are provided, and viewers are encouraged to share their portfolios through Twitter DMs.', 'Creating separate components for a single page application to ensure each page has its own view and functionality.', 'Demonstrates the use of Tailwind CSS for responsive styling, including specific attributes for large screens, with the capability to apply styling based on screen size.', 'The process involves the generation and publishing of blog posts, including the addition of images and related content.', 'The successful creation and display of blog posts with related data and images is demonstrated.', 'The process of setting up a Sanity Studio for blog posts is detailed, including adding content, images, and authors.', 'The chapter covers the detailed coding process for a web design project, including HTML markup and CSS styling, with specific instructions on structuring and styling elements such as tags, classes, and links.']}