Responsive HTML CSS Portfolio Website using Flexbox and Grid

Подписаться 113 тыс.

Просмотров 29 тыс.

50% 1

Learn how to make a portfolio website using HTML and CSS. We will create this using CSS Flexbox and CSS grid. It will be fully responsive as well.
The design for this website was created by Pierluigi, you can check out his RU-vid channel below
/ @pierluigigiglio
Source code:
www.codavilla.com/posts/respo...
Timeline:
0:00 What we're building
3:04 Creating Project Files
5:22 Creating Hero Section
8:38 Styling Hero Section
16:08 Creating About Section
18:38 Styling About Section
26:18 Creating Services Section
30:52 Styling Services Section
42:14 Creating Portfolio Section
45:28 Styling Portfolio Section
52:14 Creating Contact & Footer Section
54:22 Styling Contact & Footer Section
If you want to follow me along my coding journey, be sure to subscribe :)
/ @briandesign
HTML, CSS & Javascript Website Tutorial
• HTML CSS Javascript We...
My VS Code Theme
• Top 10 VS Code Themes
Host your Website for Free
• How to Host a Website ...

Опубликовано:

18 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 73

@DailyIntern 3 года назад

Yes man keep it up, and the style of including both html,css,javascript and react is helpful since they fit to each other.

@jdevcast6527 3 года назад

Thanks for sharing your styling. It is something I have to keep working on to get anywhere near decent. I was especially interested on how the page was structured.

@luisespinosallanos3142 2 года назад

Yoooo, amazing Job man. Thanks and congrats...

@monyetbesar 3 года назад

Just wanted to say your videos are really giving me new insights regarding web design. Very helpful content, thanks for that! Keep putting out content like this!

@briandesign 3 года назад

Thanks!

@spanabyss 5 месяцев назад

wow thanks i really appreciate ur effort and may god make u continue to suceed to educate people like us.

@sivamahalingam9009 2 года назад

Best ever in youtube.. u r awesome

@shaikmastan1603 3 года назад

great job bro please go ahead like this for your subcribers really awesome

@yudhiesh1997 3 года назад

Honestly you're the best for anything styling related for websites. I've always overlooked UI/UX of websites and your channel really helps me improve that.

@briandesign 3 года назад

Thanks Yudhiesh!

@oneofone_1333 3 года назад

Bro thank you! Let's go

@briandesign 3 года назад

Thanks Yassin!

@digigoliath 3 года назад

Awesome!!! TQVM!!

@briandesign 3 года назад

Thanks!

@PaksPromise Год назад

Thank You

@gauravrathod5858 3 года назад

Love you bro, thanks for your efforts ♥️♥️👑.

@briandesign 3 года назад

Thanks Gaurav!

@debasissaikia304 3 года назад

Amazing work🥳🥳

@briandesign 3 года назад

aye thanks Debasis!

@andrewmapemba2358 3 года назад

Dude motivates me

@briandesign 3 года назад

let's goo

@coding_den 3 года назад

Dude!!! Please do not stop making videos. I’m thinking for a future video, you could make a react webpage app, but take us through all the way to deploying it, (on netlify or someplace). Then I could def see you start selling courses online, or becoming an instructor on Scrimba.

@briandesign 3 года назад

I've made a vid on how to deploy with netlify already. It's pretty simple once you made a project

@zakariamadou1398 3 года назад

Yooo bro! Me luv that cool stuff

@briandesign 3 года назад

Yoo thanks Zakari!

@khoroshoigra8388 3 года назад

Hi thanks for your great content like this, I am now a junior web developer based in the Philippines and I have still doubt about my skill. Luckily I found this kind of short course about front end web designing. :)

@briandesign 3 года назад

awesome!

@khoroshoigra8388 3 года назад

@@briandesign thanks sir :)

@rahulvirat7859 3 года назад

Nice bro

@briandesign 3 года назад

Thanks Rakul!

@julianvelez6563 3 года назад

Cool

@briandesign 3 года назад

Thanks Julian!

@julianvelez6563 3 года назад

@@briandesign where are you from

@briandesign 3 года назад

@@julianvelez6563 US

@TechMGC 3 года назад

🚀🚀🚀

@ExplorationAT 3 года назад

nice, have you been using Sass much? I find it debugs easy, and would find it hard to go back to vanilla css after. Also Iv just started using BEM, hard to remember it at times!

@briandesign 3 года назад

I've messed with sass, but I've mainly been making sites with React & styled components lately and you don't even need class names with that.

@yoannruzza8927 3 года назад

The official documentation on CSS tells that "-webkit-text-fill-color" and "-webkit-text-stroke-width" are not standard and shouldn't be used. How can we have the same result without using it ?

@jonice4229 3 года назад

how your vscode when you click on first div highlight where is ending, mine if i click on a div is hilighting every div`s from file. Thanks for tutorial! Vue vs React what you recommend for a beginner?

@briandesign 3 года назад

check out highlight-matching-tag on extensions and I'd start with react

@nathanielfrema 3 года назад

Sir please how can I get help or assistance with some html and css project I want to work on

@sethtetteh1321 3 года назад

You doing incredibly well . But where can I find this?

@briandesign 3 года назад

what do you mean?

@muhammadsohail3205 3 года назад

What is the short cut key to put a commenting line like this ?

@kamalCode 3 года назад

Sir, admin dashboard pannel, graph represtation, data display table, invoice generate in html css javascript

@arnoldkibira4268 3 года назад

I am also waiting for something like this. Nobody is doing admin dashboards. I would especially love one in react.

@storm404 2 года назад

Where do you get your icons from

@judith7026 3 года назад

Nice portfolio ! Is there a reason the email is listed twice ?

@briandesign 3 года назад

I think that's just showing additional variations of where you could add your contact info

@judith7026 3 года назад

@@briandesign Ahh okay I see ! Thank you !

@fernandezalfredo3572 3 года назад

I understand that grid-column: span 3 is each column, in this case we take 3 columns from the grid but, which represents grid-column: span 3 / span 4 I thought it was grid-row but it does not work as such please any help is much appreciated

@briandesign 3 года назад

when you inspect, what does the grid look like when you hover over your design?

@premanjungle4555 3 года назад

Bro request react + typescript pls 🙏

@briandesign 3 года назад

soon!

@LA-cy1zj Год назад

why do you put a main text div inside a main context div? Why not just put the h2 and p inside the main context div at 16:50 (im a beginner looking to learn, not interrogating btw)

@LA-cy1zj Год назад

the only reason I can think of is it being easier to target in css

@pratibhalovesu 3 года назад

hi I'm new to CSS.. if I'm at below 420px my page is freaking... I mean services and all going miss aligned. what should I do

@briandesign 3 года назад

did you add my media queries for 468px or below?

@pratibhalovesu 3 года назад

@@briandesign yeah I added the same. But it is not working below 250px so I took min-width:250px and pasted same 468px media query and did some modifications. It's working for bellow 250px Now.

@pratibhalovesu 3 года назад

@@briandesign some how I finished this project got some idea on media queries and flex box and grid. Thank you a lot.