Dear Coder, html { /* font-size: 10px; */ /* 10px / 16px = 0.625 = 62.5% */ /* Percentage of user's browser font-size setting */ font-size: 62.5%; } with this trick you don't have to use calculator. If you want 18 px, just write, 1.8 rem, 20px is 2 rem and so on. I like your videos keep follow :-)!
My favorite part was when you got stuck on why there's extra space below the icons. I do the same thing and can't let go of something until it's perfect, but I learned that sometimes it's much more important to look at the big picture. I write down the details I want to fix later if there's time. Cheers, great stuff!
For sure, and that's very true! In a real work environment with a deadline I wouldn't spend quite as much time on this, but in these tutorials I'm trying to do everything "right" 😅 Writing things down for later is a great strategy!
@ Kehinde Fasunle - I've worked with some very perfectionist designers, where everything had to be pixel perfect lol. But like I said earlier, if I was on a deadline I wouldn't spend quite as much time on stuff like this. I think it's worth it for this video tho
I think you might have the best tutorials on YT as far as explaning how we can go about figuring out how to style things goes. I absolutely love your videos! Thank you!
You're super chill when coding and I absolutely love that! By the way I've found a different solution to the SVG's having space at the bottom, but its kind of similar to yours. I just set the anchor element's display property to flex and that fixed the issue. I guess it doesn't matter now, but I thought I'd share that with you! Happy coding
I super like this concept of coding videos tut, before I watch video code along believing that its just simple typing the code and then tadaaa! project is finished but this one is the real scenario of what really front-end developer's IRL way of how to solve problems how to initiative to solved problems and the preparation especially reading the web design. I highly recommend this to new beginners. Kudos to you Coder Coder keep healthy and share more knowledge with our fellow community your a great help.
Just started learning web development last nov(career shift) and is literally stuck at starting a project, that first project for beginners in frontend mentor. Wish me luck! Thank you Ms Coder Coder!
Hello I have listened to your video and it is very good. Thanks for uploading. But I would like to know if you have uploaded any video on how to build a portfolio website using only the basic concepts of HTML, CSS, and JavaScript (as I don't want to use any intermediate or advanced concepts for now). Thank you
Hi Coder Coder! Whenever I’m doing a FEM project, I put the copy in a block comment, and that stops Prettier formatting it into one block. Very useful once you start writing the markup.
With a single page developer portfolio are we able to include sections like “home” “about me” “projects” “contact” so that when we click on those tabs you get brought to those pages? Or would that be considered several pages?
really like the way you did it! showing us how you'd develop a website in real world scenarios. when I watched other videos, I always wonder how they come up with the way they write the code. seeing you googling and revising back and forth really helps me understand how the pieces come together. thanks~
Wow can't wait until the part 2, this video makes me as ux designer think why i cant make my own coded portfolio using this as a guide. Thanks really thanks
1:29:23 I came across a similsr issue in WordPress regarding mysterious spaces under svg icons. I discovered it was actually a line height value and I was able to zap it by declaring line-height: 0; to the icon's class styling rules. Not sure if that would work in this case though. Terrific video, many thanks for your time and generosity.
Hey Coder Coder, I tried installing and using the Gulp-Browser sync, but I noticed it has some high vulnerabilities. I'd love to ask if you still use it or now use an alternative to reload your browser without clicking reload each time.?
I haven't completed watching this video. I will watch it after a bit. But I really am waiting for coder coder to do a chatGPT3 video. I know I know hype this hype that but I trust her opinions so I think it will be cool to hear what she says
i love your humility , you browsing and talking about some stuffs like you don't know them , just to make your viewers relate, got me thinking that i can try a little bit better than you , 😩💔. In my dreams tho.
Great jobs doing this tutorial i think you should do more of this in the future i think this will be really helpful for anyone who wants to get into the tech industry!
idk why her voice is so calming and reliable.. like "I'll guide you to proper coding techniques follow me".. recently watched her px vs rem shorts.. the way she explains is really neat!
This girl is one of the best teacher here in developer world. Amazing!. I like the way you explain how codes work. you explained it clearly. Many people will learn a lot from your videos and I'm one of them. Thank you. i hope you will make a tutorial also about REACT.JS . Godbless you.
why you are not using sass anymore? im stuck with one of your older videos because of sass and gulp, so im trying to figure out the solution from your new projects, but i see you are not using sass anymore, sass is so helpful but files, forward and use are so confusing
Thank you so much Jessica for a real, true to life, coding project, with all of the thought processes and challenges along the way. This IS what tech is like on a daily basis. 100% best way to learn. Most 'tech teaching' videos are too polished; without the pitfalls!
Hey Jessica 👋 This is my first time taking your tutorial. It is pretty cool. I have a suggestion for the anchor link bottom space. The svg images are of different sizes and flex adjusted the anchor to fill 100% of available space but the svg image size remains the same since it is not a flex item (its parent is). This is normal. We can fix this by using `padding: auto` on header__link class or `margin: auto` on the svg image. Reference 1:34:34
I don't think those fixes work (at least they didn't when I tried) because the little space under the SVG img is due to the SVG being inline elements by default. This makes the browser add space under them to make room for descenders-- when letters like lowercase g, p, y, etc have lines that descend below the baseline. Also, using padding or margin auto will definitely help for horizontal spacing, but it unfortunately doesn't work for vertical space, which is what is happening here. I'd be interested to know if I'm wrong tho, so feel free to send me a codepen link with your code solution and I'll check it out!
Love your workflow and definitely learning a lot, thank you so much. One question tho, how do you expand the HTML tags to be in separate lines? I searched a lot but couldn't find any useful sources.😅
Dear Coder,
html {
/* font-size: 10px; */
/* 10px / 16px = 0.625 = 62.5% */
/* Percentage of user's browser font-size setting */
font-size: 62.5%;
}
with this trick you don't have to use calculator. If you want 18 px, just write, 1.8 rem, 20px is 2 rem and so on.
I like your videos keep follow :-)!
Wake Up! Coder Coder uploaded
🙌🙌
🙌🏻
🙌🏾
🙌
Great tutorial, for sure it will be useful to many people. I believe that sometimes the power of HTML and CSS is underestimated. Learn the basics 👍🏻
Thank you for your kind words!
My favorite part was when you got stuck on why there's extra space below the icons. I do the same thing and can't let go of something until it's perfect, but I learned that sometimes it's much more important to look at the big picture. I write down the details I want to fix later if there's time. Cheers, great stuff!
Perfectionist mindset. I wonder if this is good though 🤔
For sure, and that's very true! In a real work environment with a deadline I wouldn't spend quite as much time on this, but in these tutorials I'm trying to do everything "right" 😅 Writing things down for later is a great strategy!
@ Kehinde Fasunle - I've worked with some very perfectionist designers, where everything had to be pixel perfect lol. But like I said earlier, if I was on a deadline I wouldn't spend quite as much time on stuff like this. I think it's worth it for this video tho
wow happy to see im not the only one :)
Hey Coder Coder, what a nice content, thanks for sharing it!
I love the way you explain complex things, making it look simple and easy.
Thanks so much!
I think you might have the best tutorials on YT as far as explaning how we can go about figuring out how to style things goes. I absolutely love your videos! Thank you!
I'm a beginner I want tutorials on HTML and CSS
I love your calm vibes also accurate tips that are easy to follow up. Thanks for sharing this with us :)
You're super chill when coding and I absolutely love that! By the way I've found a different solution to the SVG's having space at the bottom, but its kind of similar to yours. I just set the anchor element's display property to flex and that fixed the issue. I guess it doesn't matter now, but I thought I'd share that with you! Happy coding
Glory to Ukraine.
But where is the layout of the figma?
:)
I super like this concept of coding videos tut, before I watch video code along believing that its just simple typing the code and then tadaaa! project is finished but this one is the real scenario of what really front-end developer's IRL way of how to solve problems how to initiative to solved problems and the preparation especially reading the web design. I highly recommend this to new beginners.
Kudos to you Coder Coder keep healthy and share more knowledge with our fellow community your a great help.
Just started learning web development last nov(career shift) and is literally stuck at starting a project, that first project for beginners in frontend mentor.
Wish me luck! Thank you Ms Coder Coder!
Nice one @Vico Sotto, reach out to the slack channel for help. Someone would help when they are free.
Hello
I have listened to your video and it is very good. Thanks for uploading. But I would like to know if you have uploaded any video on how to build a portfolio website using only the basic concepts of HTML, CSS, and JavaScript (as I don't want to use any intermediate or advanced concepts for now).
Thank you
Hi Coder Coder! Whenever I’m doing a FEM project, I put the copy in a block comment, and that stops Prettier formatting it into one block. Very useful once you start writing the markup.
Never knew what name you use in your channel could have subscribed a long time ago but thank God I found you,took your course at freecode camp❤
With a single page developer portfolio are we able to include sections like “home” “about me” “projects” “contact” so that when we click on those tabs you get brought to those pages? Or would that be considered several pages?
And I thought " front end is easy"
Thanks!
really like the way you did it! showing us how you'd develop a website in real world scenarios. when I watched other videos, I always wonder how they come up with the way they write the code. seeing you googling and revising back and forth really helps me understand how the pieces come together. thanks~
Where was this video 3 days ago when I had an exam in HTML and CSS 😂
😅
Wow can't wait until the part 2, this video makes me as ux designer think why i cant make my own coded portfolio using this as a guide. Thanks really thanks
Nice tutorials but I’m having with the hovering on the socials. Part
1:29:23 I came across a similsr issue in WordPress regarding mysterious spaces under svg icons. I discovered it was actually a line height value and I was able to zap it by declaring line-height: 0; to the icon's class styling rules. Not sure if that would work in this case though. Terrific video, many thanks for your time and generosity.
Hey Coder Coder, I tried installing and using the Gulp-Browser sync, but I noticed it has some high vulnerabilities. I'd love to ask if you still use it or now use an alternative to reload your browser without clicking reload each time.?
Why do you use windows over macOS as a personal operating system
I haven't completed watching this video. I will watch it after a bit. But I really am waiting for coder coder to do a chatGPT3 video. I know I know hype this hype that but I trust her opinions so I think it will be cool to hear what she says
i love your humility , you browsing and talking about some stuffs like you don't know them , just to make your viewers relate, got me thinking that i can try a little bit better than you , 😩💔. In my dreams tho.
how do i know if i have the enough knowledge of front-end. i mean when i should apply for small companies?
can u plz tell why justify content alone does not centre the name and the svg images??
When you are releasing the course?
I'm not sure, hopefully in 2023
Great jobs doing this tutorial i think you should do more of this in the future i think this will be really helpful for anyone who wants to get into the tech industry!
Can you choose the Free pro membership or do you need to choose the $8/month subscription?
html { font-size: 100%;}
Why not 62.5% ?
Which vs code theme are you using kindly
❤️❤️❤️❤️❤️❤️❤️❤️❤️
Hi, can we expect tailwind CSS videos from you 😬
Welcome back ma😊😊😊
idk why her voice is so calming and reliable.. like "I'll guide you to proper coding techniques follow me".. recently watched her px vs rem shorts.. the way she explains is really neat!
short* vid
Thanks so much!
Hi 👋
This girl is one of the best teacher here in developer world. Amazing!. I like the way you explain how codes work. you explained it clearly. Many people will learn a lot from your videos and I'm one of them. Thank you. i hope you will make a tutorial also about REACT.JS . Godbless you.
1:29:20 maby vertical-align: ? ...or line-height
Hello coder coder. Big fan your tutorials.
thanks for watching!
what CAMERA are you using?!
why you are not using sass anymore? im stuck with one of your older videos because of sass and gulp, so im trying to figure out the solution from your new projects, but i see you are not using sass anymore, sass is so helpful but files, forward and use are so confusing
I usually use Sass but just didn't for this series. I explain more about Sass and @use in my Sass for Beginners video, in my channel. Hope that helps!
Where have you been? Nice tutors
thanks!
Thank you so much Jessica for a real, true to life, coding project, with all of the thought processes and challenges along the way. This IS what tech is like on a daily basis. 100% best way to learn. Most 'tech teaching' videos are too polished; without the pitfalls!
Looking forward to Part 2 :-)
Love css content! Thank you
Thanks for watching!
Perfect!. Thanks for sharing I was struggling to build my own. I will use this tutorial as a reference.
Quality content! Keep it up
Thanks so much!
what is your vs code theme
Hey Jess!
There's another new frontendmentor challenge at the intermediate level and it will be nice to see you this kind of overview on that.
Thanks!
New Subscriber ❤
😻
Hey Jessica 👋
This is my first time taking your tutorial. It is pretty cool. I have a suggestion for the anchor link bottom space.
The svg images are of different sizes and flex adjusted the anchor to fill 100% of available space but the svg image size remains the same since it is not a flex item (its parent is). This is normal.
We can fix this by using `padding: auto` on header__link class or `margin: auto` on the svg image.
Reference 1:34:34
I don't think those fixes work (at least they didn't when I tried) because the little space under the SVG img is due to the SVG being inline elements by default. This makes the browser add space under them to make room for descenders-- when letters like lowercase g, p, y, etc have lines that descend below the baseline. Also, using padding or margin auto will definitely help for horizontal spacing, but it unfortunately doesn't work for vertical space, which is what is happening here.
I'd be interested to know if I'm wrong tho, so feel free to send me a codepen link with your code solution and I'll check it out!
At first I thought this was a tutorial and not a challenge, still very informative thanks a lot!
Fab! Thanks) But where's Part2?
playlist link in the description!
Do you have courses on Udemy? if not, why not?
Can you make detailed video of DIY vs Nicepage and Wappler etc. ?
Difference, pro and cons....
Sorry, I haven't worked with any of those yet 😅
Why pure Css? Why not go with Sass?
Hi, thank you for this tutorial 🔥
You're very welcome!
why use header with class="header" ?
Thank you so much! I learn a lot from this.
I don’t know if you’re gonna read this but I think you should’ve added some background music
We decided to try no music this time, just to see if people liked it didn't like it. But maybe next time we'll add it back in!
@@TheCoderCoder I liked the no music, I was very focused and engaged the whole time, Thank you!!
Wait for a video like this Thanks 🙏🥰
your videos very informative
Thanks for watching!
Thankue for this tutorial...
thank you for this, it is so awesome!
Excellent tutorial... ^__^ Thank you....
Thanks for this videol, but I would like to ask about the extension name for turn off all CSS style that you did in the beginning. Thanks 😄
Sorry, not sure what you are referring to. Do you have a timestamp I could look at?
@@TheCoderCoder7:11
@@sohaildotcss it's called Stylus, it's a Firefox extension. Super handy!
Thanks Jess 💝@@TheCoderCoder
Can't thank you enough sis😊
Please give more html css projects
I loved the 8:55 moment xD
You are absolutely amazing.
I recommend you to use px to rem extension
1:27:39
worth watching keep it up
The Coder Coder de Best
Using?
Thank you so much 1 !
You are amazing!!!
nice to see you uploading again! very helpful as always.
Thanks for watching!
Very useful
i love it. thanks
Thanks
Quality content!
Let's gooo
48:17
Love your workflow and definitely learning a lot, thank you so much.
One question tho, how do you expand the HTML tags to be in separate lines? I searched a lot but couldn't find any useful sources.😅
use VS-code extension called Prettier - Code format , when you hit ctrl + s it automatically formats your file.
Any Reformat Plugin will do this Job for you 🙂 - You can use prettier, saveActions, etc.
@@jatinahir5770 I was looking for such a comment here, but ctrl + s is for saving a file 🙉
If you have Prettier installed, it's Shift + Alt + F (for Windows)
Awesome 👌
thank you!
why i need to code to build this. I can build this inside webflow insiden an hour
stop wasting time in Javascript for backend use java spring boot 🤩
I don't know why but i like you
1:31:44 lol , I just put margin-top: 10.5px at header_social
can you please share those assets to me