Building a portfolio website with HTML & CSS | Part 1
Vložit
- čas přidán 5. 08. 2024
- Full playlist here: • Building a single-page...
🔥 My course: Responsive Design for Beginners! coder-coder.com/responsive/
💻 Become a full-stack web dev with Zero to Mastery: academy.zerotomastery.io/a/af...
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.
Full playlist here: • Building a single-page...
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
Link to Frontend Mentor challenge: www.frontendmentor.io/challen...
My code on GitHub: github.com/thecodercoder/fem-...
____________________________
SUPPORT THE CHANNEL
⭐ Join channel members and get perks: / @thecodercoder
👏🏽 Hit the THANKS button in any video!
🎨 Get my VS Code theme: marketplace.visualstudio.com/...
WANT TO LEARN WEB DEV?
Check out my courses:
🌟 Responsive Design for Beginners: coder-coder.com/responsive/
🌟 Gulp for Beginners: coder-coder.com/gulp-course/
RECOMMENDATIONS
⌨ My keyboard, Vissles V84 -- vissles.com/?ref=mu96kxst5w -- 🔥 get 10% off with code THECODERCODER --
💻 Other gear -- www.amazon.com/shop/thecoderc...
📚 My Favorite Books -- coder-coder.com/best-web-deve...
📺 My Favorite Courses -- coder-coder.com/best-web-deve...
🔽 FOLLOW CODER CODER
Blog -- coder-coder.com/
Twitter -- / thecodercoder
Instagram -- / thecodercoder
#webdevelopment #coding #programming - Věda a technologie
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 :-)!
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 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
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
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.
Perfect!. Thanks for sharing I was struggling to build my own. I will use this tutorial as a reference.
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 :)
Wake Up! Coder Coder uploaded
🙌🙌
🙌🏻
🙌🏾
🙌
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!
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 :-)
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!
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 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.
nice to see you uploading again! very helpful as always.
Thanks for watching!
At first I thought this was a tutorial and not a challenge, still very informative thanks a lot!
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!
Thank you so much! I learn a lot from this.
thank you for this, it is so awesome!
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.
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!
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?
Wait for a video like this Thanks 🙏🥰
Thanks!
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.
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.?
You are absolutely amazing.
Excellent tutorial... ^__^ Thank you....
Welcome back ma😊😊😊
worth watching keep it up
Quality content!
You are amazing!!!
Quality content! Keep it up
Thanks so much!
i love it. thanks
Love css content! Thank you
Thanks for watching!
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.
The Coder Coder de Best
Thankue for this tutorial...
Thank you so much 1 !
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!
can u plz tell why justify content alone does not centre the name and the svg images??
Hi, thank you for this tutorial 🔥
You're very welcome!
Hello coder coder. Big fan your tutorials.
thanks for watching!
Which vs code theme are you using kindly
Very useful
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.
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
Can't thank you enough sis😊
how do i know if i have the enough knowledge of front-end. i mean when i should apply for small companies?
Can you choose the Free pro membership or do you need to choose the $8/month subscription?
what CAMERA are you using?!
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❤
New Subscriber ❤
I recommend you to use px to rem extension
your videos very informative
Thanks for watching!
Awesome 👌
thank you!
Thanks
what is your vs code theme
Let's gooo
Why do you use windows over macOS as a personal operating system
When you are releasing the course?
I'm not sure, hopefully in 2023
This girl is on fire :)
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
1:29:20 maby vertical-align: ? ...or line-height
I loved the 8:55 moment xD
Where was this video 3 days ago when I had an exam in HTML and CSS 😂
😅
😻
I'm a beginner I want tutorials on HTML and CSS
Where have you been? Nice tutors
thanks!
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 use header with class="header" ?
Using?
Hi, can we expect tailwind CSS videos from you 😬
html { font-size: 100%;}
Why not 62.5% ?
Please give more html css projects
Do you have courses on Udemy? if not, why not?
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)
Why pure Css? Why not go with Sass?
❤️❤️❤️❤️❤️❤️❤️❤️❤️
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!
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
Nice tutorials but I’m having with the hovering on the socials. Part
Hi 👋
1:27:39
but is this not against their TOC?
Whose TOC?
@@TheCoderCoder Front end mentor, am not sure though. About their premium product.
@@mrlectus Oh, no they are fine with that! People post their code for premium challenges publicly on GitHub to get feedback. And as long as you don't share the actual Figma file FEM doesn't mind. Tbh videos like this probably helps them get more people signing up for Premium!
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!!
And I thought " front end is easy"
48:17
I don't know why but i like you
why i need to code to build this. I can build this inside webflow insiden an hour
Glory to Ukraine.
But where is the layout of the figma?
:)
stop wasting time in Javascript for backend use java spring boot 🤩
1:31:44 lol , I just put margin-top: 10.5px at header_social
can you please share those assets to me