Build A Responsive Website With HTML & CSS Tutorial

Рет қаралды 821,553

Күн бұрын

skl.sh/deved3 First 500 people to click the link will get 2 months of Skillshare for free!
Disclaimer : This video is sponsored by Skillshare
Check out my courses and become more creative!
developedbyed.com/
Microphones I Use
Audio-Technica AT2020 - geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - geni.us/AcbCpd9 (Amazon)
Camera Gear
Fujifilm X-T3 - geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - geni.us/sztaN (Amazon)
PC Specs
Kingston SQ500S37/480G 480GB - geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - geni.us/YAtI (Amazon)
DeepCool ATX Mid Tower - geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - geni.us/bilekX (Amazon)
Logitech G305 - geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - geni.us/YBsCVX0 (Amazon)
DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.
In todays episode we are going back to the basics and learn how to build a responsive website with html and css from scratch.
We are going to take a look on how we can add css animations and work with flexbox to change up our media queries to make it work on mobile devices.
You can check out my laptop UI design if you are interested on how this website got designed and after you can follow this tutorial to build it out with html and css.
LINK FOR FILES : github.com/DevEdwin/laptop-ui
❤Become a patreon for exclusive videos and more!
/ dev_ed
🛴 Follow me on:
Twitter: / deved94
Instagram: / developedbyed
Github: github.com/DevEdwin
🎵 Music:
Outro:
LAKEY INSPIRED - Me 2 (Feat. Julian Avila)
Music By: / lakeyinspired
Intro:
Dj Quads
Track Name: "Every Morning"
Music By: Dj Quads @ / aka-dj-quads
Creative Commons - Attribution-ShareAlike 3.0 Unported- CC BY-SA 3.0
creativecommons.org/licenses/b...

Пікірлер: 933

@nicksmith1237 4 жыл бұрын

17:52 - "That's what she said" LMFAO, killed me lol

@asharayub4636 3 жыл бұрын

5:40 for those who want to know the shortcut, hold alt and click on multiple lines where you want the cursor to be and the cursor will appear on all those lines, and you can type the same thing in all places. In some IDEs, its shift + alt.

@azure-hawk 3 жыл бұрын

To help remember the order of the margins: trbl (for top, right, bottom, left) looks like the word "trouble."

@hightowergaming5301 3 жыл бұрын

This deserves *WAY* more likes. Thanks!

@tily5939 3 жыл бұрын

it's clockwise order: 12, 3, 6, 9

@mohamedyamani8502 3 жыл бұрын

@@tily5939 That's how I used to memorize it but DAMN is trbl better, THANKS FOR BOTH OF YALL!

@kiddhkane 2 жыл бұрын

Shows how old I am. I still remember watches without with pointers, that helps me.

@ddpaw7 3 жыл бұрын

SERIOUSLY - I have been looking for support on responsive web design for over 3 days while working on a tech challenge. FML I find your vid the day before my challenge is due to a bootcamp lmao. Thank you so much, it was really helpful seeing someone code a website instead of explain the theory behind everything.

@zewpyae7711 Ай бұрын

O0lop

@jeen_yuhs000 5 жыл бұрын

Thank you for showing the process in designing a website. I always get so scared looking at a blank file. I truly appreciate you and your work🙌🏾🔥

@lyricssongs4all686 5 жыл бұрын

17:56 that's what she said 😂

@undefined95 4 жыл бұрын

HAHAHAHA what a god

@memes4life273 4 жыл бұрын

so original

@thesouthsidedev1812 4 жыл бұрын

Dead on Lol

@noelk.9526 4 жыл бұрын

😂

@mamyname 4 жыл бұрын

31:09 another one lol

@Davijorge 4 жыл бұрын

"oh my god, that's huge" - that's what she said! You're a legend, brother.

@zuzannac8105 5 жыл бұрын

Ahh how nice, I needed this kind of video. Adding to watch later for tomorrow morning!

@Zeproe 5 жыл бұрын

Definitely keep doing these 'Design and Code' projects. This video alone has helped me understand how it's all done, down to the nitty gritty bits.

@TheElkster 3 жыл бұрын

I just love watching and following along to your tutorials! You are a born teacher and have a great sense of humour! Thanks for posting so much interesting and educational information!🥰

@jonathanalexander9881 Жыл бұрын

I can't stress enough how wholesome and informative these videos are. It feels as if Ed was learning just as much as he's teaching the viewer, I love it so much. No extravagant purple RGB strips in the background of a room, no constant jazz buzzing to distract, no fancy quick talking that expects you to know what he's doing before doing it. Just a chill step-by-step walkthrough as if from one person to another. Lovely.

@radhusingh1740 Жыл бұрын

netflix clone using html and css with source code kzfaq.info/get/bejne/lb1lp8R_nrPcdGw.html

@bondstar927 4 жыл бұрын

He coughed, I thought it was corona then realized it was 2019

@The242511 4 жыл бұрын

shit thanks for the info

@bondstar927 4 жыл бұрын

@@The242511 Don't die

@Pavfixers 4 жыл бұрын

corona was discovered 2019 thats why its called covid-19 :)

@bondstar927 4 жыл бұрын

@@PavfixersYeah, but then it was just some Chinese myth.

@farhad0101 4 жыл бұрын

we might thank him beside that bro, good job sir.

@succorhacks389 5 жыл бұрын

this is probably the best video I have found for real dev coding start to finish. You are a great teacher

@programmingisfun2417 3 жыл бұрын

1 day is remaining hello guys this us my first course on udemy for free this is a coupon code unlimited for 3 dayswww.udemy.com/course/javascript-reactjs-nodejs-and-mongodb/?couponCode=ABCDEF234

@jjts1018 4 жыл бұрын

I have enjoyed a lot watching the tutorial. Actually I am in Korea, What a small world! thanks for ur job!

@alperentopay1164 4 жыл бұрын

You are a genius. I needed a refresher for my css skills and watching you built this website has taught me a million things.

@aalayer2834 3 жыл бұрын

All teachers need to be absolutely like you, total inspire and easy to understand.

@niket4884 4 жыл бұрын

I was just searching How to create this type of layout, and after 2 days of searching so many videos, I found this one. This is just awesome and fun. You Always Help Me. Thank You 💖💖💖💖💖💖🥰🥰🥰🥰

@hardboiled2000 5 жыл бұрын

Really cool tut, hadn't done any web dev in ages, this was a great reminder!

@trutatj 4 жыл бұрын

I haven't coded in over a year and following this tutorial was super refreshing for me! At school, they never teached me about flexbox but OMG, it is soooo helpful and quick! Subscribed you, you're a great teacher and you explain things very well, thank you! :)

@jijiandme 3 жыл бұрын

The youtube algorithm always blesses me! Thats why I always find the best KZfaq tutorial channels like this of Dev Ed...I absolutely love your tutorials.. I am really lucky to have found your channel!!

@marcpineda2106 4 жыл бұрын

You’re amazing teacher and funny too. Keep doing what you do sir. Thank you 😊

@wickedheals 5 жыл бұрын

I just want to say that i appreciate your videos, keep up the good work!

@ericvandenberge5439 5 жыл бұрын

I study being a front-end developer for 2 years now, and this video is still interesting. I wanted to give a small tip for using css on the header for using in the future. you can use padding: 0 5vw on the header instead of width: 90% and margin: 0 auto. That's a little bit cleaner.

@flolegend6402 3 жыл бұрын

Dude, you are simply a magician, who would think you are gonna laugh watching a learning video and also at the same time learn so much

@mostmojo 5 жыл бұрын

Love that you're going back to the core fundamentals. People get caught in the buzzwords and forget how good the "easy" stuff can be ☺️ Such wow much fun! 🐕

@mostmojo 5 жыл бұрын

17:58 "That's kinda huge. That's what she said, let's move on" LMAO, so subtly! 😆

@momentum3120 5 жыл бұрын

Hello I'm a student of software engineering and I'm really into web development/designing, you help me a lot by doing these kind of videos Liked+Subscribed

@huse305 2 жыл бұрын

Honestly the best tutorial on KZfaq for absolute beginners like me. I would love if you could do more videos like this.

@solohere5608 5 жыл бұрын

Built my first HTML site from this tutorial. More motivated to learn Javascript than ever. Thanks much Ed!

@PuzaExplores 5 жыл бұрын

I love to see your videos every day♥️😍😘 addicted!

@heyyana9549 5 жыл бұрын

hi! thank u! I'm getting into web design and this helps a lot. more to come please! and lol, bruh, those puns made this learning more enjoyable

@eyenfernandotuyon5075 3 жыл бұрын

bro your content is literally INCREDIBLE i love it

@NeSpravedliviy114 3 жыл бұрын

Your deserve support from viewers! Thank you for this basic small project without javascript. Most tutorials are directly with sass and so on and it's difficult when you are practising only with html and css before you go into javascript.

@zayarmyothwin1779 5 жыл бұрын

I like this Ed,please keep making more.I learn a lot from your videos thanks u so much.

@michaelpatterson3846 5 жыл бұрын

Thanks for the free 2 month trial, love your tutorials, keep it up as it keeps me motivated. Keep posting, keep posting more great tutorials

@victorschweitz3506 5 жыл бұрын

For the multiple cursors shortcut: If you're on a Windows machine, hold down the ALT key while clicking where you want your cursors to be. If you're on a Mac, simply switch out the alt key with the CMD key. Love your content! Keep it up! :)

@gregoriogarciacastro2442 3 жыл бұрын

this is one of the best tutorial, thanks, i saw other folks but never finished a project they just play around the code, but this tutorial is great!!

@claudiaelisa9028 5 жыл бұрын

I really love these kinds of video's. Adobe xd and then to code😍. Keep going💪

@kjn5991 5 жыл бұрын

The multiple cursors shortcut is CTRL-ALT + Up / Down arrow key.

@gideonyeboahasante8886 5 жыл бұрын

It's SHIFT-ALT+Up/Down arrow in my vscode😎

@brunopaula 4 жыл бұрын

Ed thanks for adding those background colors while you design your items, it does help a lot for us. 👏👏👏

@PentaxEnthusiast 4 жыл бұрын

It's refreshing to see these videos making sites using HTML and CSS; I'm personally not a huge fan of the trend to use CMS, but I understand the concept and that time is money for many. Definitely subbing!

@salehmajeed 5 жыл бұрын

Hey bro, thank you so much. You are the best!

@moonsdonut5188 5 жыл бұрын

this guy seems like a nice guy love your video's

@PeriMoritz 5 жыл бұрын

I really like the background-clip and gradient effect. I'd seen it before and forgotten about it. Thanks for the reminder. Also, if you set your H1 to inline-block the gradient only stretches the width of the text, so more gradient effect on the text. Great videos!

@ahumblesoul6679 3 жыл бұрын

40 Minutes of quality content. So glad I did not miss this.

@RickBeacham 4 жыл бұрын

"Oh my goodness this is kinda huge.. That's what she said" Nailed it! 😂😂😂

@malamhari_ 4 жыл бұрын

26:56 - 26:57 the laptop moves on its own lol, thanks for the video Ed :D

@Howling_Moon 5 жыл бұрын

amazing! that's the best way to learn stuff, pure practic! please more!

@MyFukinBass 4 жыл бұрын

My man, thank you for all this content, I learned A LOT. Nedless to say, I´m subscribed with bell on.

@mpauser8399 5 жыл бұрын

All your tutorials are very informative. Can make video tutorial especially dedicated for UI Controller with Functionality using Google Materialized CSS and JavaScript, ( Range Slider, Radio Button, Check Box, Chip, etc…)

@dontbeafraid5313 5 жыл бұрын

Hi Ed I saw you click on one of Andrei Nagoei's Javacsript tutorial. That advance tutorial is the course I really wish you can do. I really want to become a great Javascript developer like you. Thanks again for your wonderful tutorials

@sapo_rhoeming7224 3 жыл бұрын

Advanced comes with practice though...

@elctricguy7639 3 жыл бұрын

I love the fact that he told us the small shortcuts during the video for us.

@yevs.studio 4 жыл бұрын

This is so helpful! thank you! I would love you to do more practice projects like this or maybe something like a homework could be cool too. Seems like a good way to learn a lot in a short period of time

@cassandrasampson23 3 жыл бұрын

I've been coding in C#. I forgot how many lines of code are needed for a basic nav bar. Bootstrap is growing on me.

@mzgz4216 4 жыл бұрын

13:34 "Why you do this to me ?!" :DD

@alwinvillero4404 3 жыл бұрын

y u do dis 2 me*

@verisence 3 жыл бұрын

These are the videos. I can spend hours watching such. Really inspires my own work

@mk30645 3 жыл бұрын

looking for more of these tutorials. Your teaching method is Awesome ED!

@kapilchouhan3762 4 жыл бұрын

The way he casually says *that's what she said* kills me everytime 😂

@rene78 4 жыл бұрын

5:38 CTRL + ALT + Arrow up/down

@Jason-mx8dl 4 жыл бұрын

I think that changes the screen orientation. CTRL + SHIFT + ALT inserts multiple cursors.

@memebeatzz 4 жыл бұрын

love your tutorials very simple and easy to understand

@nigerutebale3147 3 жыл бұрын

Short, clear and informative. Boldely appreciated.

@IndelibleprintsIP 4 жыл бұрын

Truly amazing tutorial. This is my third one by you. Loved them all. One issue however. It works perfectly with Chrome but with Firefox the responsive layout goes kaputt and the laptop image turns out really very big and incomplete.

@daars8925 3 жыл бұрын

Thank you so much for saying the Firefox problem, I spent half an hour checking over the code and was getting so pissed.

@maxiequa567 5 жыл бұрын

Great! Can you make the inline (laptop image) carousel functional?

@djordjek3916 3 жыл бұрын

I like to combine CSS Grid and Flexbox. In this example, I would use Flexbox for the navigation and CSS Grid for the main section. With Grid you don't have to write all the necessary code when doing it with Flexbox in an example simple like this one. The video is great, easy to follow and understand.

@mohamedelkashef7771 4 жыл бұрын

You are such an amazing person ... Keep going man. I love your creative work. And i am asking if you make a lot of this vedios as a course and thanks in advance ❤️❤️❤️

@kapa4208 5 жыл бұрын

Fun Fact: Form elements don't inherit font settings, you have to set these properties manually. Example: body, input, textarea, button { font-family: 'Poppin', sans-serif } or body { font-family: 'Poppin', sans-serif } input, textarea, button { font-family: inherit }

@developedbyed 5 жыл бұрын

There we go! Thank you!

@RuturajJadejarj21 5 жыл бұрын

Tell me anyone got the reference of the joke Ed made at 17:55!😂😂btw great video keep going!💪

@developedbyed 5 жыл бұрын

;)

@matthewc1m2m3m2 5 жыл бұрын

Awesome! Exactly what I was wanting you to do, but completely forgot to comment on the video.

@Anthony-ru7su 4 жыл бұрын

dude this is exactly the website style I love thanks and you will inspire me to do the same

@SwagTech600 4 жыл бұрын

Nobody: Him: Types height:80% *The image becomes bigger instead* Him: Is it smaller...I have eye issues *Moments later* Him: yeah it does.🙂

@naveen-ib5ly 5 жыл бұрын

Theme name of your VS code bro? And great tutorial too

@tibaytibs3865 3 жыл бұрын

cool tutorial, helps me a lot actually, been coding front end with minimum idea, now I do have a solid foundation, thanks a lot Dev Ed

@BilalAhmed-xn5pz 3 жыл бұрын

Learned a lot about how to place things all over the web page. Thank you for the help!

@dassault8203 5 жыл бұрын

Our enemy are -wix -sitebeat -divi wp theme

@anish9053 4 жыл бұрын

2 ads in 40 mins

@keels952 4 жыл бұрын

Not necessarily. I use divi for some clients who prefer to retain the ability to make edits themselves if they need to. Can also be a good selling point for a website plus quicker work for yourself. Unfortunately, as humans, we migrate to what's quicker and easier to do.

@vatsalaykhobragade 4 жыл бұрын

Square space, add that bastard to the list

@FordExplorer-rm6ew 4 жыл бұрын

Even godaddys static site generator is getting a free tier lmao

@BMikel 4 жыл бұрын

elementor

@kirthimedia5235 3 жыл бұрын

In case any beginners struck in CSS: header, nav doesn't need 'dot' to be pre-fixed in css. class of html elements require 'dot'. Ex: .logo-container, .cart

@neelamchaubey28 5 жыл бұрын

I'm in the middle of watching the video, and I came just to say that you're a great teacher who's funny as it goes. I mean, what is this bull? Haha! Keep it up! :)

@fabsarom9979 4 жыл бұрын

you know what.. its a 40min video but play-and-push to understand and side by side practicing i spend 2:40hrs to complete & understanding it. BIG THANKS..

@refiloedigoamaye8536 5 жыл бұрын

@27:29 add shadows to png images trick

@internap627 5 жыл бұрын

"That's what she said....." 😂😅

@504octo 3 жыл бұрын

I was able to build one with few modifications thanks to you. Great explanation as well as fun. And the fun continues after. Also checked your other videos. Very appreciated! Big love! 🐙❤👏👏👏

@darkknight4816 5 жыл бұрын

I love your videos. Keep doing the great job man.

@prashikganer4820 4 жыл бұрын

Svg images not loading when we I imported it on my pc. Although, it's opening when I open it separately.

@elikia6apples941 4 жыл бұрын

Same shit on me, did you found the solution ?

@muhammadiffathaikalbinsaab7508 4 жыл бұрын

Hi, you can solve this by downloading those images in his github. Then create folder name "img" and save those icons in it :)

@dailydoseofchocolate9411 4 жыл бұрын

@@muhammadiffathaikalbinsaab7508 i get 404 error when i clicked the github link. do you have the same problem? i need those circles svgs

@pratikgk9384 3 жыл бұрын

@@dailydoseofchocolate9411 if you have it then upload it to online storage and import those svg from the uploaded link this is the final solution!

@chadieljamal3673 3 жыл бұрын

How can you be a Web Developer and a comedian at the same time that's hard dude ❤🌹

@creativegravedigger7289 3 жыл бұрын

it's not that hard, believe me

@britneyh8679 3 жыл бұрын

This was incredibly helpful and easy to follow. Thank you for posting

@sukhveersingh910 3 жыл бұрын

Thankyou so much . I was looking for this today

@dolanbright3733 4 жыл бұрын

that time when your code doesnt work and you struggle 2 hours to fix it, have a mental breakdown and then realize you havent linked your CSS or JS file :P

@ghostkiller_xx1298 3 жыл бұрын

Ore you just forget the close something in css with ;

@hudsoncurren1592 5 жыл бұрын

if you'd don't mind me asking what plugins do you have on VS Code?

@chorko696 5 жыл бұрын

Asking the right questions.

@soad2609 5 жыл бұрын

@Hudson Curren 1. 'Emmet' for auto-completion(which comes default with VS Code) 2. 'Prettier' for code formatting 3. 'Live Server' for running code live.

@maskman4821 4 жыл бұрын

Mr. Ed is so creative, I have learned a lot from this video, Thank you !!!

@taitronghoang 3 жыл бұрын

I learn so many things from this video. Thank you.

@kesavnarean23 3 жыл бұрын

Other people: This video is sponsored by skillshare!! **Transition into sponsor promotion** Dev Ed in the description: *DISCLAIMER: THIS VIDEO WAS SPONSORED BY SKILLSHARE!!* LOL 🤣🤣🤣😂

@andrejprenkelushaj9499 4 жыл бұрын

Me: impossible Dev ed: makes only with html and css reactive website

@user-zg8wq6vp2n 4 жыл бұрын

Actually, responsive one. That's the difference

@chiragmadan1693 3 жыл бұрын

Ed my friend, I'm just grateful. Thanks for helping young developers like me. :)

@nateplaysgamesonyt 5 жыл бұрын

Enjoying your videos! Keep them coming!

@sophearathoeun7595 5 жыл бұрын

Thank you so much Can you make more video relate to responsive website and also include JavaScript?

@sneezygibz6403 5 жыл бұрын

Hey there I have a question. I was using bootstrap which is a framework for css to make a website. Can I include javascript too? Or is it just html css bootstrap? Can I mix everything together like html css bootstrap javascript