Building a portfolio website with HTML & CSS | Part 1

[@weblearningd2294]

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

[@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!

[@travels__fun]

Thanks!

[@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!

[@kehindefasunle4933]

Perfectionist mindset. I wonder if this is good though 🤔

[@TheCoderCoder]

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!

[@TheCoderCoder]

@ 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

[@adamsDevArt]

wow happy to see im not the only one :)

[@majoralter]

Wake Up! Coder Coder uploaded

[@TheCoderCoder]

🙌🙌

[@aryankhandelwal15]

🙌🏻

[@jd6306]

🙌🏾

[@thecrazyhumour995]

🙌

[@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!

[@kehindefasunle4933]

Nice one @Vico Sotto, reach out to the slack channel for help. Someone would help when they are free.

[@imnothere2802]

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

[@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

[@universecode1101]

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

[@TheCoderCoder]

Thank you for your kind words!

[@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!

[@mikalgoobric]

Looking forward to Part 2 :-)

[@peacelover2902]

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~

[@bitcointvphilippines6506]

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.

[@moonchild_아포방포]

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!

[@moonchild_아포방포]

short* vid

[@TheCoderCoder]

Thanks so much!

[@juansebastianlozanolamus6982]

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

[@freaxwoz2802]

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.

[@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.

[@TheCoderCoder]

Thanks so much!

[@satansatansatan]

nice to see you uploading again! very helpful as always.

[@TheCoderCoder]

Thanks for watching!

[@AntonioBenderas]

1:29:20 maby vertical-align: ? ...or line-height

[@nelsonleone2508]

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.

[@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.

[@jp.cortes]

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

[@kehindefasunle4933]

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

[@TheCoderCoder]

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!

[@TheoRichard-rq3rv]

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!

[@davi_mirr0rsanjuan253]

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

[@hakimchulan]

Love css content! Thank you

[@TheCoderCoder]

Thanks for watching!

[@danielemmanuel169]

Welcome back ma😊😊😊

[@MrGZM90]

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!

[@wheres.wolfgang]

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.

[@mrwhispersofficial]

Hello coder coder. Big fan your tutorials.

[@TheCoderCoder]

thanks for watching!

[@RonaldoAkum]

The Coder Coder de Best

[@91dgross]

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?

[@ムネタ]

Thank you so much! I learn a lot from this.

[@zaidasifmalik]

Quality content! Keep it up

[@TheCoderCoder]

Thanks so much!

[@suhaybcabdulahijirde9481]

Wait for a video like this Thanks 🙏🥰

[@tomisinergy4963]

Hello Coder Coder. Much respect for your videos and expertise. I try to learn how to code and i my school they teach us to use Python with Django for server side. What you think about Django in web dev?

[@nocode659]

When you are releasing the course?

[@TheCoderCoder]

I'm not sure, hopefully in 2023

[@shehzadahmad4820]

thank you for this, it is so awesome!

[@silvioukoth1699]

You are absolutely amazing.

[@tommyjames427]

I recommend you to use px to rem extension

[@mr_kiz]

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.?

[@RajagopallanV]

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

[@amoltandon3903]

can u plz tell why justify content alone does not centre the name and the svg images??

[@Leprechaun-nb7ck]

Fab! Thanks) But where's Part2?

[@TheCoderCoder]

playlist link in the description!

[@gklelei5163]

Which vs code theme are you using kindly

[@kentmiggalen9756]

how do i know if i have the enough knowledge of front-end. i mean when i should apply for small companies?

[@keshawnsmith320]

Why do you use windows over macOS as a personal operating system

[@JPUY25]

worth watching keep it up

[@SanjuNewa]

can you do it in angular?

[@stewtech]

Can you choose the Free pro membership or do you need to choose the $8/month subscription?

[@robertsampang9690]

Hi, thank you for this tutorial 🔥

[@TheCoderCoder]

You're very welcome!

[@igalanga]

Quality content!

[@rubengarciajr]

what CAMERA are you using?!

[@alfiartya23]

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 😄

[@TheCoderCoder]

Sorry, not sure what you are referring to. Do you have a timestamp I could look at?

[@sohaildotcss]

​@@TheCoderCoder7:11

[@TheCoderCoder]

@@sohaildotcss it's called Stylus, it's a Firefox extension. Super handy!

[@sohaildotcss]

Thanks Jess 💝@@TheCoderCoder

[@abdul-q-khan]

Can you make detailed video of DIY vs Nicepage and Wappler etc. ? Difference, pro and cons....

[@TheCoderCoder]

Sorry, I haven't worked with any of those yet 😅

[@JohnWickXD]

Can't thank you enough sis😊

[@kareem2928]

Excellent tutorial... ^__^ Thank you....

[@androroshen9205]

what is your vs code theme

[@mmelimahlobo7656]

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❤

[@ffzz007]

Thankue for this tutorial...

[@shahzadsheikh1459]

your videos very informative

[@TheCoderCoder]

Thanks for watching!

[@rubengarciajr]

You are amazing!!!

[@robertrelativo06225]

i love it. thanks

[@juliancandiani3938]

I loved the 8:55 moment xD

[@abdullahelsaid]

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.😅

[@jatinahir5770]

use VS-code extension called Prettier - Code format , when you hit ctrl + s it automatically formats your file.

[@patrickvogele7140]

Any Reformat Plugin will do this Job for you 🙂 - You can use prettier, saveActions, etc.

[@hardtosay5290]

@@jatinahir5770 I was looking for such a comment here, but ctrl + s is for saving a file 🙉

[@hardtosay5290]

If you have Prettier installed, it's Shift + Alt + F (for Windows)

[@AntonioBenderas]

html { font-size: 100%;} Why not 62.5% ?

[@hassaneoutouaya]

Thank you so much 1 !

[@bogdanpetrovic7940]

why use header with class="header" ?

[@daxtmd5652]

Do you have courses on Udemy? if not, why not?

[@chawaphiri1196]

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

[@webprogrammingtutorials-alo69]

Very useful

[@vishalsayyz]

Awesome 👌

[@TheCoderCoder]

thank you!

[@Forntenddeveloper]

New Subscriber ❤

[@boris7424]

Why pure Css? Why not go with Sass?

[@OceGameplays]

Where was this video 3 days ago when I had an exam in HTML and CSS 😂

[@TheCoderCoder]

😅

[@pawanthanay]

Hi, can we expect tailwind CSS videos from you 😬

[@astawesegngetachew9071]

Where have you been? Nice tutors

[@TheCoderCoder]

thanks!

[@barcalover016]

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

[@TheCoderCoder]

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!

[@prashlovessamosa]

Thanks

[@tGoldenPhoenix]

1:27:39

[@hassansasbangura]

I'm a beginner I want tutorials on HTML and CSS

[@oppomobile-ur4jd]

Using?

[@opeyemiadewusi5926]

Nice tutorials but I’m having with the hovering on the socials. Part

[@vinzz5282]

I don’t know if you’re gonna read this but I think you should’ve added some background music

[@TheCoderCoder]

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!

[@Trentvucich]

@@TheCoderCoder I liked the no music, I was very focused and engaged the whole time, Thank you!!

[@abner372]

48:17

[@moodymonstrosity1423]

Let's gooo

[@omorfaruk6986]

Please give more html css projects

[@VoloInTech]

❤️❤️❤️❤️❤️❤️❤️❤️❤️

[@abdullahalrumman09]

why i need to code to build this. I can build this inside webflow insiden an hour

[@koranKarim33]

I don't know why but i like you

[@alfiefelix7968]

😻

[@sakarpathak8704]

And I thought " front end is easy"

[@Soulful_Successor]

😂

[@abdul-q-khan]

Hi 👋

[@FirstnameLastname-re9ei]

Glory to Ukraine. But where is the layout of the figma? :)

[@shaikh.quadeer]

stop wasting time in Javascript for backend use java spring boot 🤩

[@PrabhatMishra-u3o]

1:31:44 lol , I just put margin-top: 10.5px at header_social

[@chandugamer28]

can you please share those assets to me