Building a portfolio website with HTML & CSS | Part 1

In this video (Part 1 of 4) I'll be building a Frontend Mentor challenge, the single-page developer portfolio. I set up global styles and build the header in this video.

00:00:00 - Intro
00:01:25 - Design file
00:05:27 - Getting set up
00:11:19 - Adding fonts and colors
00:29:17 - Add global styles
00:40:18 - Building the header

____________________________

SUPPORT THE CHANNEL
👏🏽 Hit the THANKS button in any video!

WANT TO LEARN WEB DEV?
Check out my courses:

RECOMMENDATIONS

🔽 FOLLOW CODER CODER

#webdevelopment #coding #programming

[weblearningd]

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 :-)!

[DoubleDYouTube]

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!

[mattoattacko]

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!

[universecode]

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 👍🏻

[imnothere]

I love your calm vibes also accurate tips that are easy to follow up. Thanks for sharing this with us :)

[moonchild_ankita]

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!

[stoyanvisuals]

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 <3

[VicoSotto.]

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!

[peacelover]

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~

[DevMadeEasy]

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.

[juansebastianlozanolamus]

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

[bitcointvphilippines]

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.

[mikalgoobric]

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!

[freaxwoz]

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.

[jp.cortes]

Perfect!. Thanks for sharing I was struggling to build my own. I will use this tutorial as a reference.

[TheoRichard-rqrv]

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!

[ElementoryMyDearWatson]

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.

[nelsonleone]

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.

[MrGZM]

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!

[davi_mirrrsanjuan]

At first I thought this was a tutorial and not a challenge, still very informative thanks a lot!