Styling Fixes in our Hunting coder Blog | NextJs Tutorial for Beginners #28
Styling Fixes in our Hunting coder Blog | NextJs Tutorial for Beginners #28
In this video, we will be fixing the styling of our hunting coder blog. We created a lot of pages with not enough focus on styling. This video is dedicated to improving the styling of our nextjs app
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 -> We made our Next.js blog, which is Hunting Coder.
4.534 -> We focused on all its functionality
7.668 -> but we forgot to focus on one thing while pursuing logic
11.309 -> and that thing is styling, our styling is still shaky,
15.188 -> our pages are not responsive.
16.979 -> Well, I'll talk about responsiveness in upcoming videos
19.874 -> but if we look at our blog in full screen,
23.127 -> it's not very appealing to the eyes.
25.735 -> So, to make the blog appealing, we'll visit all pages
30.122 -> and style them, especially the contact page
35.344 -> which looks very ugly at this point.
37.935 -> Let's go to the computer screen and see how it's done.
41.039 -> We'll style all the pages of our blog
44.262 -> and while keeping the concerns separate,
48 -> making different css modules for different pages,
50.865 -> how to keep different css for every page and component.
54.834 -> Let's get started with this video now.
56.834 -> [MUSIC]
66 -> See, our Hunting Coder blog does look good
68.925 -> but there are some style fixes that I'd like to do.
72 -> The first is that Hunting Coder looks very big.
75.402 -> First of all, I'll fix the home page's style.
78.178 -> You can see there are different styles for home, about,
83.012 -> and we've separated all these styles.
85.579 -> If we start with about.js, I like its styles.
90.473 -> I might write service 1, service 2, and service 3 here.
93.696 -> You'll do that, it's no big deal.
99.067 -> But I just want to tell you how to style them individually.
104.617 -> I'm very happy with the about page.
109.123 -> You might find this text replaced.
113.062 -> I'll replace it with good, meaningful text.
116.076 -> I'll replace the contact us section too.
117.957 -> I might add more sections here.
120.136 -> About Hunting Coder is perfect.
121.927 -> Some images can be added here, you can do that.
124.434 -> If I do, I'll add an image to the public folder and use it.
131.087 -> Not a big deal, I'll come to the home page now.
134.101 -> Hunting Coder looks too big to me.
136.101 -> First of all, I'll close about and module.css.
140.756 -> The home.module.css, that is the styles I imported here,
145.083 -> I'll do a little bit of clean-up and fix the styles.
150.335 -> So, if I format document and save it, it works like this.
157.283 -> First of all, I'll remove style jsx, I don't want to use it.
162.147 -> I'll reload and many styles will move,
165.919 -> which is fine because I'm going to fix it.
168.921 -> See, I've used className = styles.container here
173.039 -> Description, keywords, icon, all these are here.
177.217 -> I want to reduce the Hunting Coder text first.
182.319 -> Who is governing it? style.title, I'll remove it.
187.123 -> I think the default size in Next.js will be perfect.
192.852 -> It's not, I'll have to increase it.
195.986 -> I'll go to styles.title and then the title, where is it?
203.236 -> What I'll do is, the size of .title,
207.951 -> styles.title, .title is nothing.
210.846 -> I'll make .title.
217.142 -> .title exists, here.
219.947 -> Here the font size is 4 rem, I'll try making it 8 rem.
225.109 -> Did it increase?
227.676 -> I'll inspect and set it, where's h1?
232.334 -> Span, h1 span.
235.289 -> If the h1 size where I've given class title,
238.96 -> did I not save it? Yeah, I didn't.
242.362 -> It's too big, let's reduce it.
248.121 -> 5 rem, 4 rem, 3 rem should be fine, what do you think?
253.194 -> Or 4 rem? 4 rem, 3 rem, 3.5 rem, 3.5 rem.
260.892 -> 3.5 would be good, great.
264.95 -> I think the image is fine, no complaints.
268.501 -> A blog for hunting coders by a hunting coder.
271.366 -> I'll write something like this blog will solve your queries.
275.305 -> To save time, I'll write lorem23.
280.915 -> It didn't come here as I didn't write JavaScript react, word wrap.
288.255 -> It looks like this now.
289.957 -> Is this container in styles.container? Yeah.
297.356 -> This paragraph, is it? Yeah, it's overflowing.
301.743 -> I can add max-width to styles.description, 40 vw.
309.739 -> It'll get centered, I feel the font size is big too.
312.962 -> I'll let it be 1 rem, I think it's a bit big.
317.11 -> I've done it this way.
319.11 -> A blog for hunting coder by a hunting coder, we'll write.
323.234 -> What if I remove this text? I don't like it.
327.113 -> You'll say I keep changing what I do.
329.799 -> But I don't like it, I'm removing the description text.
333.977 -> I'll save it and you can see how it looks.
338.632 -> If we talk about latest blogs, which is h2,
342 -> did I use any style in it?
345.074 -> Where are you h2? It's hiding here.
350.176 -> I haven't used any class in it.
352.683 -> I'll use className = styles.h2 and I'll write h2 below.
361.634 -> .h2
363.932 -> In h2, I'll try making the font size 1 rem
370.534 -> and increase it to how I like it.
372.743 -> 1 rem, 2 rem, 3 rem, so 2.5 rem.
382.141 -> With that, I'll also change the sizing of this.
386.319 -> How to learn JavaScript in 2022, I'll change its styling.
391.481 -> A circular logo would look so good, if I want that,
396.792 -> I'll give it a set width like 344 pixels, it's a lot.
401.238 -> 144, I'll make it a square first.
404.7 -> After that, I'll give it circular cropping.
410.578 -> Maybe reducing the width will make it circular, yeah.
415.024 -> I'll replace the border radius in this.
419.351 -> The class in my image, where is the image?
428.48 -> Got it, so the myImg class
432.628 -> I'll replace its border radius with this.
437.492 -> I can't find the format option, I'll do it like this then.
442.803 -> Now I'll bring Hunting Coder down.
446.116 -> I just want to give it a good design, understand it.
451.397 -> I'm trying to give it a good design.
455.396 -> If I move it like this, will it look good?
459.186 -> Hunting Coder latest blogs.
463.215 -> It looks fine, Hunting Coder.
465.722 -> I'll change this, I'll make Hunting Coder like this.
470.317 -> I know I'm wasting time a bit here
473.152 -> and you know the design should be made beforehand
478.344 -> otherwise, things don't look good, you know that.
481.567 -> Even then I'm trying to make it look good.
486.61 -> I'll make the title a 1.5 rem font size.
494.755 -> I have also changed the Hunting Coder text.
499.798 -> I'll also copy it from here.
503.051 -> Now the margins that I've given the image,
508.392 -> above image wrap, I'll reduce that too.
513.227 -> I copied the text.
516.898 -> I'll replace it, save it.
519.614 -> I'll tell you what I'll have to do here.
522.628 -> < and >
529.968 -> Because the angular brackets don't get rendered this way
534.832 -> They will be when I reload this.
536.832 -> For the image wrap class,
544.159 -> I'll change the padding from 30 to 15.
548.08 -> I just want to give it a good shape.
550.796 -> It looks good, these are going to be latest blogs.
556.197 -> If I inspect this page, I'll have to increase h3's font size.
564.79 -> This className called blogItem,
570 -> I'll remove that first, right-click, change all occurrences.
574.446 -> And in h3, change all occurrences.
581.726 -> className = styles.h3
586.918 -> After this, I'll make an h3 in styles.
591.066 -> I'll make this big, a little smaller than h2.
595.751 -> Let's try making h3 2 rems, might look good.
602.912 -> Not bad, let's decrease it, 1 rem.
608.434 -> Is it too small? No, but maybe 1.5 rem will look better.
615.684 -> Yeah, I like 1.5 rem, the spacing isn't good but alright.
619.981 -> A read more button would look better but won't do it now.
625.978 -> If I do, how long would it take? I'll do it.
629.649 -> button, Read More, and class = style.btn.
640.181 -> See what happens now. We'll style this button.
645.761 -> What style? Let's make its colour white,
651.371 -> we'll make the background black
654.385 -> and give it a padding of 3 pixels.
658.921 -> And now, sorry, what did I do?
664.411 -> Padding 3 pixels and then let's increase it a little.
672 -> Top less than bottom, left more than right, so 7 pixels,
676.565 -> and 10 pixels, then border radius.
680.743 -> Border radius, 9 pixels, let's decrease it a little.
686.353 -> Okay, this works.
690.322 -> We won't make the colour black, let's have it grayish.
697.99 -> Leave it, let's have it jet black and read more is done.
702 -> Cursor pointer, we'll copy it and put it in .btn.
714.413 -> Looks good, clicking it doesn't work though.
719.217 -> We'll add a listener like on click open the URL etc.
723.395 -> If we talk about styling, these spaces look very ugly,
727.662 -> especially in h3.
730.855 -> I'll have to make margin 0 in h3.
735.212 -> I'll have to reduce this paragraph's margin.
738.196 -> For that, I'll take 2 pixels for the top
744.402 -> I'll increase it a little and left-right zero.
748.371 -> I'll increase it from the top a little more
750.729 -> and along with that, for the bottom I wanted.
756.458 -> I'll decrease the top, 3 pixels.
759.293 -> Where's the space from? It's from h3.
763.322 -> I'll reduce it in h3 as well.
765.173 -> Where will I apply these margins? Here.
769.351 -> I'll make it className = styles.p.
777.287 -> So, my styles.p, my paragraph, I'll have to make it .p
784.15 -> and it looks like this.
785.792 -> I think everything else is fine.
788.061 -> I don't want to reduce h3's spacing or should I? I'll do it.
794.387 -> Margin top 0 and it looks good now.
799.668 -> I've made margin top 0.
801.668 -> I should make margin bottom 0, no I'll keep a little.
806.383 -> Margin bottom 4 pixels, should we add more?
812.649 -> Let it be the same size, it works.
815.514 -> I copied it and here's our h3.
822.884 -> Now see, the design depend on your creativity.
828.643 -> The design depends on how you want things to look.
833.537 -> Home's h3's font size was 1.5 rem.
838.311 -> If I increase it, this changes.
844.279 -> Now I'll try to wrap it up as soon as possible
846.279 -> because if I do styles, it'll take forever.
848.935 -> I'll add a margin bottom of 5 pixels
853.172 -> which will give me space, maybe it should be 9 pixels.
857.23 -> You might find this video boring as I'm styling a lot.
861.795 -> This video has become too opinionated.
864.69 -> If I keep the font size small, 15 or 16 pixels,
871.881 -> this button is too big, I'll reduce the font size further.
877.103 -> I should make it 10 pixels or 12 pixels.
879.431 -> I'll make it 12 pixels, reduce the padding and it looks good.
888.772 -> Read more looks good, I'll increase the padding.
894.411 -> I'll increase the padding from here too, looks good.
897.962 -> Okay, I won't waste a lot of time on designing.
901.301 -> I copied and pasted it.
903.808 -> I wrote margin bottom twice, no worries.
906.882 -> Now I have to paste this button in different places.
910.165 -> The design looks good for now.
911.801 -> If the font size is too small for someone, increase it.
914.726 -> I'll just duplicate button class name here and here.
922.126 -> And this should look fine now, it looks good now.
926.065 -> You might want h3 to be bigger.
930.183 -> I've done all this so I'll do that too.
934.033 -> So, our heading is now slightly bigger.
936.838 -> You may want it to be white on hovering or I don't know.
941.046 -> You guys can see to it and we'll implement this click.
945.194 -> On clicking this, a link will open, I haven't added a link yet.
949.759 -> So our home page design is good for now.
952.922 -> I won't think too much about it.
954.803 -> I also want to show you that if I write something here,
958.205 -> let us assume lorem12,
961.607 -> it might look better if the text was bigger.
965.606 -> It'd look better this way, so I'll do that.
969.843 -> After that, we come to our about page which is good.
973.156 -> Blog is also good because when there'll be more blogs,
975.941 -> small text will look good.
977.244 -> Blog post is also fine, we can control it with HTML.
982.645 -> Now comes contact form which might take time
987.658 -> but I'll invest time in this.
988.972 -> I'll open contact.js and contact.module.js.
995.178 -> I repeat, you may find this video boring as I'm only styling
1000.101 -> I'm not doing anything special.
1002.101 -> I'll simply implement the styles written here.
1008 -> I'll implement styles.mb3 with margin bottom.
1012.416 -> This we'll never share your you email text.
1016.146 -> First of all, I need to style this input box.
1021.785 -> So, padding of 3 pixels, font size 12 pixels maybe.
1026.231 -> Suppose I write this,
1028.857 -> border radius 9 pixels, I'll reduce it a little.
1038.494 -> 4 pixels, it's 4 pixels now.
1041.061 -> Then comes border 2 pixels, solid black.
1050.847 -> Or should I make it 1 pixel solid black? Yeah, I'll do that.
1056.218 -> I've added padding, everything looks fine to me.
1059.799 -> Maybe I should increase the font size a little.
1062.575 -> I'll increase it, I'll do this.
1067.319 -> This will be my input, so I'll make a .input class in this.
1074.688 -> This is my .input class and I'll implement it in all inputs.
1078.866 -> Right click, change all occurrences.
1081.343 -> I'll write className = styles.input.
1087.34 -> Now you can see all styles.input didn't change, why?
1093.129 -> Let's see, styles.input.
1095.593 -> Styles was added to all inputs but it still didn't change.
1100.021 -> Why so? I'll reload it.
1104.586 -> Why did styles.input not get implemented?
1108.406 -> Oh, this didn't get updated, why?
1110.794 -> I wrote className = style.input in input, why didn't it come?
1115.747 -> Let me see, className = styles.input, okay.
1118.791 -> There's another className.
1119.986 -> I'll have to remove className = form-control, change all occurrences.
1126.192 -> It was clashing with that, now it's done.
1129.534 -> My class = mb3 which I put here,
1136.397 -> first of all, I'll overwrite mb3,
1140 -> then this could be confusing.
1143.313 -> But I'll make mb3 into a display flex.
1148.117 -> Then I'll make its flex-direction column.
1153.876 -> This will make it look like this which I like.
1158.77 -> Here it's written enter your name which is a label,
1164.439 -> I'll give the label a margin at the top and bottom.
1171.272 -> I'll show you guys.
1172.795 -> Padding 2 pixels for the label, I'll increase it.
1177.539 -> Top and bottom 2 pixels, left and right 0 pixels.
1182.94 -> In fact, I'll make the margin 0 as well.
1188.699 -> I've given a margin of 14 pixels, I want to remove it
1194 -> and I want 7 pixels padding from the top and bottom.
1199.401 -> I've given the form label 7 pixels of margin.
1202.982 -> So, if I remove the form label margin and do this,
1208.502 -> then we get a very good contact form structure.
1212.918 -> But the label didn't get top bottom
1216.857 -> because I haven't given the label a label class.
1220.378 -> I've already given a form label.
1222.378 -> I'll cut this, paste it here, and that should be fine, save.
1230.225 -> Now you can see it here.
1231.688 -> Now the one thing giving us trouble is
1234.539 -> elaborate your concern.
1235.867 -> I can't see padding in elaborate your concern.
1239.101 -> Where? In elaborate your concern. Why so?
1243 -> Maybe our elaborate your concern is not in the label.
1245.984 -> But I want to put it in the label.
1247.745 -> No, it's in the label but it didn't get this class.
1256.278 -> Another thing I want is to give a class name to text area.
1263.29 -> I want to give it this class name.
1268.303 -> I gave it a name and text area also looks like this now.
1272.809 -> I want to remove write your concern here placeholder.
1279.701 -> Because I haven't given a placeholder anywhere else
1281.653 -> so I don't want it in this either.
1282.954 -> So, I have kept it here like this.
1285.64 -> I may want to shorten this text.
1289.251 -> So, this className = form-text,
1294.532 -> I'll make a class called .formtext.
1299.455 -> And in this, I'll have a very small font size.
1304.134 -> I know 3 pixels is too small but I want to take it up here.
1309.087 -> This looks so tiny.
1313.295 -> It'll look better in small size.
1316.458 -> It'll look good in a grayish colour.
1321.441 -> And I want the padding from the top to be 2 pixels.
1326.185 -> Should I increase it? And left-right 0, yes.
1330.601 -> And according to me, this should be fine.
1333.406 -> We'll have some padding from left-right too, this much.
1338.658 -> And I'll copy this and put it here.
1346.714 -> It looks great right?
1347.849 -> In the submit button, what I'll do is, our btn class
1351.341 -> I'll just copy it, I'm very lazy, what do I do?
1355.399 -> There's no cure for this disease.
1357.399 -> I'll bring the .btn from home.body.css and put it in contact.
1363.784 -> I'll add styles.btn and use it very shamelessly.
1373.033 -> And it'll look like this. What do you feel?
1375.6 -> Tell me for sure. Submit, thanks for contacting us.
1378.793 -> I'll add required to it, what that will do is
1384.283 -> it won't let you submit the form without filling the fields.
1387.506 -> So, if you add required here,
1389.901 -> if you submit it, it'll say please fill out this field.
1392.617 -> So, do all this HTML-related work.
1395.512 -> So for now, home, about, blog, contact, all this is sorted.
1401.867 -> Hunting Coder looks amazing. What a blog I've made!
1406.432 -> I feel very proud, I'm having a lot of fun.
1410 -> You might be too, comment down below.
1412 -> I feel very proud.
1413.821 -> Everything looks good, now quickly we have to.
1417.7 -> One more thing, I'll add the read more button here too.
1423.459 -> So, the read more button, where's my index?
1430.262 -> Where's my index? The read more button.
1434.887 -> I'll add it to blog.js too and we'll add a class like this.
1447.268 -> Blog, blog.module.css.
1452.341 -> By the way, I could've added this to global styles too.
1456.161 -> But that's alright.
1457.654 -> If it looks a little too dense, you can change its colour.
1461.712 -> If I make it gray, it'll look like this.
1467.113 -> If you want it between gray and black, do it like this.
1477.197 -> So that depends on you, how you like it.
1480.122 -> Our blog looks like this overall.
1483.554 -> You'd want to go to the blog link by clicking read more.
1490.208 -> I've written all this in the link tag.
1497.01 -> I'll copy the same link tag again, link, paste.
1503.664 -> It says Expression expected, blog.js failed to compile.
1508.737 -> Blog, link, div, what's the issue?
1517.48 -> The link here got closed by default.
1522.313 -> Now see, if I click on read more, I come here.
1524.611 -> Okay, blog, about, home.
1527.148 -> I could've done this here as well.
1528.85 -> In fact, I may bring down the top three blogs.
1532.252 -> But that's fine, it works for now.
1534.58 -> Blog, about, contact looks very good.
1537.117 -> Amazing, really amazing.
1539.654 -> I hope you guys had fun.
1541.654 -> And we'll improve this blog in the upcoming videos.
1544.996 -> That's all for this video.
1546.996 -> Thank you so much guys for watching this video
1548.847 -> and I will see you next time.
1551.652 -> [MUSIC]
Source: https://www.youtube.com/watch?v=k_UvCSj8A4k