Adding Responsive Design to Hunting Coder | NextJs Tutorial for Beginners #30
Adding Responsive Design to Hunting Coder | NextJs Tutorial for Beginners #30
All the source code and other material will be uploaded on https://codewithharry.com as and when available!
►Checkout my English channel here: / @programmingwithharry
►Instagram: www.instagram.com/codewithharry
python, C, C++, Java, JavaScript and Other Cheetsheets [++]:
Playlist: • Coding CheatSheets 🧾 by CodeWithHarry
►Learn in One Video[++]:
Python[15 Hr] - • Python Tutorial For Beginners In Hind…
Python Advance[3.5 Hr] - • Python Programming Course in Hindi (A…
Python[1 Hr] - • Learn Python In Hindi In One Video - …
Python[2 Hr] - • Python Tutorial In Hindi 🔥
Python[15 Min] - • 15 Minute Python Tutorial For Beginne…
JavaScript[1 Hr] - • JavaScript Tutorial
C[1.3 Hr]- • C Programming Tutorial For Beginners:…
php[1 Hr] - • Learn Php In One Video In Hindi - हिं…
php[2.3 Hr] - • Php Tutorial for Beginners in Hindi w…
php[Project]- • Login And Registration Form Using Php…
HTML[30 Min] - • HTML 5 Tutorial For Beginners In Hind…
CSS[8.5 Hr] - • CSS Tutorial In Hindi (With Notes) 🔥
CSS[1.4 Hr] - • CSS 3 Tutorial For Beginners: Learn C…
Wordpress[3.2 Hr] - • How To Make a WordPress Website | Wor…
Angular[2 Hr] - • Angular Tutorial in Hindi
Java[2.3 Hr] - • Java tutorial in hindi 🔥
Web Scraping[1 Hr] - • Web Scraping Tutorial using Python an…
MongoDB[2 Hr] - • MongoDb Tutorial For Beginners in Hin…
Numpy[1 Hr] - • Numpy Tutorial in Hindi
Android Dev[12 Hr]- • Android Development Tutorial For Begi…
Linux[1 Hr] - • Linux Tutorial For Beginners in Hindi
JQuery[1.1 Hr] - • jQuery Tutorial For Beginners In Hind…
Git and GitHub[1.1 Hr] - • Git \u0026 GitHub Tutorial For Beginners I…
►Complete course [playlist]:
React - • React Js Tutorials in Hindi
Python- • Python Tutorials For Absolute Beginne…
OOP Python- • Object Oriented Programming Tutorials…
Java - • Java Tutorials For Beginners In Hindi
JavaScript- • JavaScript Tutorials In Hindi
PHP- • PHP Tutorials in Hindi
C- • C Language Tutorials In Hindi
C++- • C++ Tutorials In Hindi
Git \u0026 GitHub- • Git and GitHub Tutorials In Hindi
Android Dev- • Android Development Tutorials in Hindi
Python GUI- • Python GUI: Tkinter Tutorial In Hindi…
Web Development- • Web Development Tutorials For Beginne…
Python Django - • Python Django Tutorials In Hindi
Projects Using HTML, CSS \u0026 Javascript- • Projects Using HTML, CSS \u0026 JavaScript…
Data Structure and Algo - • Data Structures and Algorithms Course…
Follow Me On Social Media
►Website (created using Django Rest \u0026 Angular) - https://www.codewithharry.com
►Facebook - https://www.facebook.com/CodeWithHarry
►Instagram - https://www.instagram.com/codewithharry/
Twitter - https://twitter.com/Haris_Is_Here
Comment “#HarryBhai” if you read this 😉😉
Content
0.212 -> Hunting coder blog is almost over.
2.446 -> All work is done.
4.212 -> Except for responsiveness.
6.212 -> Our website or our blog is not responsive yet.
9.427 -> And we are going to do this work.
11.504 -> We will make our blog responsive.
13.638 -> Let's move to the computer screen.
15.2 -> We will write media queries.
16.73 -> We will see how to use media queries in the CSS model.
20.405 -> And we will give our website a unique look.
23.482 -> In today's date responsiveness is a must.
27.004 -> Under any condition, you must keep your website responsive.
30.339 -> Without this, the work is not complete in today's date.
32.643 -> Previously if you used to deliver the website
34.736 -> And if you gave a responsiveness feature then it was an addon.
38.779 -> If you gave that then it was a favor.
41.809 -> You can say it like this.
42.919 -> In today's date if you are delivering a website
44.802 -> Then responsiveness is a must.
46.126 -> Let's move to the computer screen.
47.495 -> And see how we can give responsiveness to hunting coder blog.
61.208 -> Now we will make our blog responsive.
63.208 -> I will open and show you the condition of our blog.
69.541 -> It is somewhat like this.
70.838 -> So look over here about page is like this. Blog page is like this.
73.283 -> Everything is good.
74.033 -> Now, what we will do over here.
75.181 -> All the pages that we used over here,
78.344 -> Are they responsive?
79.842 -> Will they open properly open in the phone?
81.742 -> If I open on the phone
83.12 -> Like if I talk about navbar,
84.775 -> So I want that spacing should be reduced.
86.775 -> So if I talk about the navbar
88.669 -> Then I would like to reduce the spacing.
90.479 -> So if I right-click and inspect it
92.244 -> Here if I talk about home_mainnav
95.737 -> When we are on the phone,
97.683 -> This means when are on the width less than equal to 600 ok.
101.569 -> So I will add a media query.
104.124 -> Ok, I will copy the media query syntax.
107.108 -> Ok from anywhere.
108.267 -> Ok, what will I do now?
109.446 -> I will come over here and blog data no
113.225 -> In home.module.css
116.354 -> I will add one media query.
117.465 -> And here I will write the mainnav
120.083 -> The mainnav
122.748 -> Mainnav mainnav
124.326 -> Where are you mainnav?
125.623 -> The UL of mainnav
127.433 -> Which I have set to 024
130.01 -> I have set it to 024 in mainnav UL.
133.376 -> The margin is 024.
135.915 -> I have done top and justify content.
138.43 -> And maybe in Li also I have given something.
140.664 -> Here I have set it to 024.
142.664 -> So I want to reduce it.
143.799 -> And I want to make it 06 ok.
145.685 -> I want to make it 06 ok.
147.327 -> Only 06.
148.457 -> Ok.
149.003 -> So, if I do something like this,
151.37 -> It will slightly look good. I will do it 06.
154.354 -> Should I do it 011 or 06? I will do 06 ok.
157.384 -> So here the 024 over here
160.764 -> I will make it 06 ok.
162.764 -> Where? In mainnav.
165 -> So mainnav's UL ok.
167 -> So I will save it.
168.555 -> And I kept the max-width 600.
171.355 -> And if I show you then like this media query is not hitting.
176.063 -> Ok, so I did 024. I have to do it 06.
180 -> Now it will happen.
181.014 -> Ok
181.881 -> Look if I do it like this then it became like this,
183.881 -> And if I do it like this then it will become like this.
185.857 -> So if I see this on iPhone.
189.157 -> On iPhone 12 pro it looks like this.
190.806 -> Very well ok
191.716 -> Now look hunting coder & things look fine.
194.464 -> I can't see any problem in this.
196.019 -> Now let's move to the about page.
197.153 -> About page is also ok, except the fact
199.505 -> Maybe I need to reduce the font size.
201.646 -> And maybe its container over here
204.349 -> Container width over here instead of 45vw
208.128 -> Maybe I need to make it 90vw or 80vw.
211.627 -> Instead I will do 90vw
213.299 -> 90vw ok
214.643 -> So the about container in about.module.css
218.048 -> The container that I was using
220.376 -> I will use this media query over here.
223.425 -> And after using a media query, what will I do?
226.268 -> My container
228.244 -> I will make it 90vw.
232.772 -> Everything else will remain same.
234.678 -> Maybe I will reduce some margins.
237.02 -> 40 ok
238.817 -> Let's see how it looks over here.
240.185 -> Our about page is also sorted ok.
242.185 -> I will come on blog. Blog already looks sorted.
244.362 -> There is no issue.
245.171 -> Blog is fully sorted.
246.256 -> Ok, there is no need to worry.
247.4 -> Even if I scroll
249.002 -> Look over here you have seen it all. Very well.
251.634 -> Very well. I had fun.
253.634 -> Failed to load static proxy
255 -> What kind of joke is this?
256.041 -> Unhandled run time error.
258.333 -> This ok so what is happening over here
260.333 -> I will tell you what is happening.
262.926 -> Our slug is not matched with the slug inside it. Ok.
268.181 -> So this will be one problem
269.836 -> So for this, I will open one page here
272.679 -> In which its inside slug will match ok.
274.351 -> So I will do one thing. I will delete this data.
276.634 -> These Jsons, I will have to make them proper.
279.641 -> If here I have written, How to be a coder.json
282.367 -> How to be a coder.json
284.203 -> So I will need to write the same over here.
286.265 -> How to be a coder
290.115 -> Ok
290.615 -> .json I will have to write this.
292.17 -> And I will delete all these files ok.
294.736 -> I will delete this.
295.757 -> I will need to delete all the copy files.
297.757 -> I will come over here and do it ok.
299.593 -> I will delete all the copies that are present.
302.436 -> Because I made them to test infinite scroll.
306.005 -> For now, I will just keep 3 files.
307.537 -> Ok
308.134 -> And I will fix these.
310.427 -> How to learn flask? How to learn javascript?
312.872 -> Not flearn, How to learn javascript
314.872 -> I will save and remove the d of how.
318.141 -> Ok
318.759 -> Next js is also ok.
319.775 -> Now It should work.
320.959 -> Now It should work.
321.975 -> I will reload it.
323.291 -> I will click on how to learn flask and here it is visible.
325.619 -> Now look what is the problem over here, I will tell you.
328.181 -> The problem is this container over here
332.218 -> This container of ours
333.492 -> Blog post container
335.164 -> I have given some padding to it.
336.649 -> I will remove that padding ok.
338.062 -> I won't remove that padding I will reduce it.
340.062 -> The 22 rem that I have given
342.016 -> I will make it 1 rem ok.
344.016 -> Because I have to show content on the phone.
347.01 -> Or I will make 1.5 rem.
348.584 -> Ok, 1.5 rem will also be ok.
351.498 -> Will 2.5 rem be ok? Yes, 2.5 will be ok.
353.498 -> Ok, we will make 2.5 rem.
354.657 -> So I will make padding 0 2.5 rem
356.493 -> In blogpost container ok.
358.319 -> So in blogpost.module.css
361.303 -> I have to make it 2.5 rem.
363.022 -> Control D and I will paste it.
366.263 -> And from here I will bring media query syntax.
368.263 -> Ok from here.
372.207 -> And after doing this,
374.394 -> Where is media query syntax?
378.479 -> Control X control V.
382.212 -> Control S and reload.
385 -> Home, our page is looking good.
387.141 -> About page is already sorted.
389.141 -> Blog page is also sorted.
391.141 -> Contact page sorted.
393.403 -> It is kind off. We will make it correct.
394.794 -> We will make it correct now.Ok.
396.044 -> How will we make it correct?
397.201 -> We will do the same. The container of contact
399.201 -> We will increase its max-width a little bit ok.
401.833 -> It is increased ok.
404.559 -> Ok, 86 vw
406.134 -> Should we lock it? Ok, we will lock it.
408.626 -> So here media query
411.141 -> Ok by the way,
412.191 -> If anyone feels like what am I doing here,
414.818 -> Why am I adding media queries?
417.112 -> Look
418.62 -> I have to make it complete.
420.128 -> I know it is not a CSS tutorial
421.941 -> But making it complete is my job.
423.941 -> So I am completing it.
425.011 -> Ok.
425.727 -> So what will I do over here?
427.276 -> I will make it 88vw ok.
430.272 -> Now look it looks like this, Home, about, contact
434.512 -> Ok, and if I make it responsive then it looks like this.
438.011 -> Look at this.
439.341 -> The site became very well. It looks good. Can you see?
443.051 -> Very responsive.
444.37 -> Buttery responsive.
446.602 -> Look at this. Can you see?
448.602 -> The site looks so good.
450.375 -> Hunting coder I love you.
452.609 -> I love you. Everyone write hunting coder I love you in comments
455.218 -> Ok, because we are having fun.
456.609 -> And over here everything is good.
459.171 -> And we are ready to launch our blog.
463.092 -> So how is the blog? Do tell me in the comments section below.
466.333 -> Now before going I will cleanup some basics.
469.036 -> I will clean some basic.
471.036 -> And here you will see how to do basic clean up.
474.067 -> Now, do you know what the problem is?
475.154 -> The problem is I have added console logs in different places.
479.355 -> Console log Console log Console log
481.706 -> That will create many problems ok.
484.034 -> So here at home there is no console log
486.034 -> What we will do? By coming component by component
488.713 -> We will clean it all.
489.659 -> Firstly I will do one thing,
490.512 -> I will check in all my CSS modules
492.512 -> I have given proper spacing or not.
494.292 -> Is there any problem over here?
495.683 -> You can use prettier and all.
497.683 -> But I don't want to use it more.
500.845 -> I will give two spaces so my media query is separated.
504.571 -> Ok, and we will do this like this.
506.836 -> And everything else is ok.
508.309 -> I haven't used global CSS.
510.331 -> But we should use it. We should use global css.
512.67 -> Where you think that these are used throughout the site
518.259 -> Put that in global CSS.
520 -> So over here everything is alright.
522.89 -> The styles are very clear.
525 -> We will save this contact.
527.047 -> I will remove all the module.css and json from here.
530.265 -> Ok.
530.907 -> And blog.module.css
533.061 -> Module.css , module.css
535.951 -> We will come in blog.js
537.038 -> Now, we will start from index.js ok.
539.038 -> Look I am doing cleanup.
540.218 -> This is a standard process of cleanup.
542.054 -> We have to remove useless things from here.
544.241 -> So the comments and the things along with
547.411 -> Which I just told you to teach you.
550 -> All that will be removed from here.
551.531 -> And over here console.log detector will also work.
555.639 -> Ok, console.log will be removed from everywhere it is used.
557.897 -> Ok, console.log should not be there.
560.164 -> In our application ok.
562.164 -> It shouldn't be there it does not look professional ok.
565 -> Now over here,
566.813 -> Until and unless you yourself don't add console.log
569.843 -> Then it becomes a different story then.
571.843 -> There are many other console.log
573.256 -> Success data ok.
575.642 -> Thanks for contacting. Everything is alright.
578.064 -> After contact, we will also do it in API.
581.048 -> Firstly we will do here ok.
582.416 -> Here there is no console.log.
584.259 -> Format document.
585.8 -> Everything is going well ok.
586.91 -> I will save it first.
587.977 -> I am doing this cleanup in front of you
589.877 -> Because it should not happen that you see code change & say
592.905 -> How is the code changed?
594.015 -> We wrote something else in the video.
595.734 -> And now it is changed.
596.821 -> So I don't want that.
599.484 -> I will save this also.
600.641 -> And in the blog let me check is there any console log.
602.641 -> I will remove this from here.
605.429 -> Ok
606.827 -> Console log is there.
607.843 -> But I don't want it.
608.906 -> Ok
611.488 -> Format document.
613.792 -> Save
616.156 -> Format document
618.156 -> We will remove console log.
620.756 -> Save. Remove this also.
623.429 -> Code should be very clean ok.
625.422 -> Or handle any http method.
628.647 -> What have I written?
630.917 -> Remove everything from here also ok.
634.223 -> Process the post request ok
635.638 -> Console log is not there right. No it is not there.
638.177 -> Ok, now lets see if hunting coder is working or not
640.364 -> Let me check if I have deleted something.
642.27 -> Like blog stopped working.
644.483 -> About ok.
646.295 -> Blog
647.571 -> And contact ok.
649.22 -> By the let me tell you one thing,
650.166 -> Our homepage, I am keeping our homepage static.
653.618 -> I am not adding any logic,
655.212 -> Like the three blog post over here
658.196 -> I will fetch them dynamically.
659.409 -> What will I do over here?
660.252 -> The 3 blog post that you can see
662.556 -> What will I do in these 3 blogpost?
664.172 -> I turn on dark mode.
665.312 -> All the three blog post that you can see,
667.41 -> I will make them hard code.
668.332 -> For now they look same
669.814 -> But when I will deploy it I will make them hard code.
672.063 -> Which I will finally keep in our blog post.
674.463 -> Maybe I write and add some meaningful blogpost.
677.252 -> Ok
677.979 -> So let's see what happens.
679.387 -> But for now, our blog looks perfect.
682.668 -> Once, let me test the contact form.
685.443 -> And here I have password
686.637 -> Can you see instead of phone I wrote password.
687.999 -> Which is a problem ok.
689.451 -> I will submit it. Thanks for contacting us.
691.451 -> Ok, let me check if it is submitted or not.
693.641 -> Contact data.
696.343 -> This is submitted but,
698.179 -> We don't want password we want phone.
700.483 -> Ok, so what will we do here?
702.319 -> In contact.js we will fix this problem ok.
704.647 -> This is a problem.Big problem.
706.225 -> Password.
708.001 -> Phone
709.041 -> I just have to change this text.
710.843 -> And let me see if anywhere if I have done type=password.
713.691 -> Let me check if my types are correct or not.
716.417 -> Phone, Email, text and text area ok.
720 -> Ok, it will work.
721.064 -> Now, look what I will do,
722.08 -> Look what I will do.
723.096 -> I will come here inside hunting coder.
725.612 -> Firstly I will add all the content of blog data
729.814 -> Where will I add? I will tell you.
731.392 -> In gitignore ok.
732.859 -> These 3 blogdata written I will delete all of them.
735.585 -> You will ask why did I delete?
737.585 -> I deleted because we want to add meaningful blogpost.
740.382 -> After this what will I do?
742.382 -> Our gitignore file
744.335 -> Gitignore
746.937 -> In this I will add blog data ok.
748.913 -> One I will add blog data.
751.756 -> And after adding blog data what will I do?
754.014 -> I will also add contact data ok.
757.869 -> I will also add contact data.
759.543 -> Ok, here now you can see
761.332 -> I have added all these contact data here ok.
764.854 -> Contact data over here
766.573 -> I will remove all these contacts ok.
769.721 -> And after removing this,
771.955 -> If I submit this again,
780.689 -> Thanks for contacting us.
782.986 -> Then you can see contact data did not add this.
786.391 -> So our github
788.391 -> It can't see this change.
790.859 -> The 1.json ok.
793.18 -> It won't show 1.json
795.432 -> So yes our application is working properly.
797.854 -> Ok, so here what will I do?
799.854 -> I will run one git command.
802.205 -> Or else what is this happening over here like this
805.165 -> It was happening because of console.log
807.376 -> I did the clean up so now it won't happen.
809.001 -> I can write yarn dev.
810.626 -> Now if you don't know how to use git?
812.439 -> If you don't want to worry about git
814.298 -> Then don't look at this thing,
816.017 -> What will I do over here?
817.151 -> I will write git rm --cached
820.509 -> And here I will write contact data ok.
824.267 -> And after doing this thing,
826.254 -> I will write git rm-r.
829.896 -> --cached.
831.409 -> Now this up folder has stopped tracking ok.
834.182 -> And I will do the same thing,
835.76 -> For my blog data ok.
839.118 -> As this folder was getting tracked
840.533 -> Now, I don't want it to be tracked ok.
842.299 -> So now it is not getting tracked.
843.526 -> And now it is in gitignore.
844.847 -> It means again once if over here
849.587 -> If I talk about this file. Let me show you.
851.587 -> If I talk about 1.json then it is deleted.
854 -> It won't be pushed ok.
855.82 -> If you are not understanding anything that's fine.
858.006 -> Because it is not a git tutorial.
859.537 -> Everyone enjoy the next js.
861.359 -> But I was just telling you.
862.755 -> Ok, so we did all cleanups.
864.396 -> We did everything.
865.147 -> Our app works properly.
867.592 -> Now, what we will do?
868.936 -> We will deploy it quickly.
870.514 -> Our app is now responsive too.
872.327 -> And looks good.
873.775 -> If until now you haven't accessed next js playlist
876.269 -> Then definitely access it.
878.19 -> For now only this much for this video guys.
880.416 -> Thank you so much guys for watching this video.
882.275 -> And I will see you next time.
Source: https://www.youtube.com/watch?v=E2dlagIvE6g