Design & Build A Website Crash Course - HTML & CSS

Поділитися
Вставка
  • Опубліковано 17 лис 2024

КОМЕНТАРІ • 419

  • @mattemate
    @mattemate 5 років тому +121

    Best card trick yet. You're a talented guy Ed.

  • @NikhilAdiga
    @NikhilAdiga 5 років тому +103

    People who dislike. What do you want?
    He provides knowledge and entertainment. What more can you ask?

    • @sabasgt
      @sabasgt 5 років тому +29

      They disliked because the awesome magic trick was too much for their little minds

    • @literallybiras
      @literallybiras 5 років тому +1

      You know is possible to missclick right? Specially in small mobile devices

    • @NikhilAdiga
      @NikhilAdiga 5 років тому +7

      @@literallybiras it's also possible to undo that and like the damn video

    • @sanchitverma2892
      @sanchitverma2892 5 років тому

      @@NikhilAdiga l a z y

    • @mohamedjaouadi86
      @mohamedjaouadi86 5 років тому +2

      i diskliked because he's just looking to the code in the sceen next to him and copying it

  • @Jeff-bb8mp
    @Jeff-bb8mp 5 років тому +189

    "Now its empty like our lives. It gets better, I promise." -Dev Ed

  • @wandilenxumalo735
    @wandilenxumalo735 5 років тому +33

    I came for the magic trick and stayed for the code. You the best Ed.

    • @lucyboy8276
      @lucyboy8276 3 роки тому

      Paraphrasing you:
      "I came here for copper, but I found gold"

  • @manuellabor2759
    @manuellabor2759 4 роки тому +1

    Watching this after watching your "Learn HTML5 and CSS3 For Beginners - Crash Course." I noticed this video seems clearer. Keep these coming. Jedi Master! 👍👍👍👍👍

  • @CalmLemon05
    @CalmLemon05 4 роки тому

    Honestly learned more from him than school, HTML CSS and Coding in general sounded way waayy better.

  • @mandalorian7645
    @mandalorian7645 5 років тому

    Dev Ed,the Man soon to Conquer all lovers of Programming...Coding+Magic+Comedy....Keep it up bruh...because of you I just got my Junior Web Dev job...Can't thank you enough

  • @sprintwithcarlos
    @sprintwithcarlos 5 років тому

    Hi Dimitri! :-D I'm just kidding... just card trick was very good! Ok, folks, I have downloaded the zip version, chef and barber are not displaying properly. Basically what you have to do is go to both html files and at the top find this line and change it for it's just one dot instead of two dots. Have a nice day everybody and thank you very much Edwin for the value you provide for all!

  • @bigarm6624
    @bigarm6624 5 років тому +1

    I watched the weather API tutorial you did months ago when you were at 10k subs. Congrats on the recent success, you are helping many aspiring developers :)

  • @SubhomoyHaldar
    @SubhomoyHaldar 5 років тому +7

    I think you accidentally put inside the and forgot to change it? Great video series btw! Absolutely love it especially the structure of it.

  • @Yash-ns2pv
    @Yash-ns2pv 5 років тому +3

    Man that explanation and specially the magic trick is totally on next level.

  • @spiritcore1
    @spiritcore1 5 років тому +9

    Thanks!
    Could you make a quick video how to setup VS Code for html/css/python etc? some useful plugins?

  • @explorer_exe
    @explorer_exe 5 років тому +3

    Just a bit: same font of different weight can be named in the same way manipulating just the font-weight property.
    e.g. you can declare the Poppins font using those declarations:
    @font-face {
    font-family: Poppins;
    font-weight: normal;
    src: url("Popping-Regular.ttf");
    }
    @font-face {
    font-face: Poppins;
    font-weight: lighter;
    src: url("Poppins-Light.ttf");
    }
    and calling the font like others:
    font-family: Poppins, Arial, sans-serif;
    font-weight: regular; // lighter or bold

  • @hungnguyenphan5101
    @hungnguyenphan5101 5 років тому +1

    2 clips of you certainly saved my project good work ed, hope to see more useful tips thanks a lot

  • @xBrOwNeDoG
    @xBrOwNeDoG 5 років тому +2

    that intro alone deserves a like

  • @AbuMaxeem
    @AbuMaxeem 5 років тому +5

    Great UA-camr, Great videos ..
    I could not found the images used in this video , repository is empty!?

  •  4 роки тому

    I really liked the overall look of his VSCode workspace, and wanted to copy it, and if you're interested in replicating it, I think I found what he's using and just wanted to share with anyone whose interested.
    1. Theme: I think he's using the 'Material Theme Palenight High Contrast' theme (search for 'Material Theme' in the Extensions tab and download it to get that theme and a bunch more)
    2. Brackets: To get the brackets to be color coded so that you can quickly and easily identify the opening and closing brackets of different parts of your code, you could use 'Bracket Pair Colorizer' which can also be found in the Extensions tab.

  • @jmmacatangay_grizzlybear
    @jmmacatangay_grizzlybear 5 років тому

    Please don't stop making videos, I learned a lot from you. and could you build a Full Stack Web? Just like an Attendance Management a small one just for a demo. you're a Master in Web Development

  • @ganeshbagaria
    @ganeshbagaria 5 років тому +4

    It seems so easy while watching this but if we try that on our own...then we realize how hard it is

  • @sergeiknyazev5564
    @sergeiknyazev5564 5 років тому

    You could also specify the font-weight in @font-face declarations to avoid having 3 font-families for a single font of different weights.

  • @emceedeep
    @emceedeep 5 років тому +1

    Big fan of your tutorials ... I am impressed by your explanations. Learnt many languages/ tools from your videos

  • @umersaeed259
    @umersaeed259 5 років тому

    You have a great future Ed. I'm saying it with all my heart. Love your stuff.

  • @dmays67
    @dmays67 3 роки тому

    Just stopped by for little inspiration and some laughs. You sir came through on both. Much love 🥰🤣

  • @josslynoringi4120
    @josslynoringi4120 5 років тому

    Bruh! I swear I love and appreciate you videos. PLEASE keep up the work. I’d love to see more react projects from you perhaps a full stack with node and react! But thanks for the tuts tho!

  • @remax110
    @remax110 5 років тому

    I like that you make this tutorial fun with your good sense of humor. I do love your video and always look forward for the new one.

  • @iUmerFarooq
    @iUmerFarooq 5 років тому +2

    The way of your explanation is awesome, lub you Sir.

  • @NbaLive4ever
    @NbaLive4ever 4 роки тому

    All your random side comments crack me up man! 😂😂😂 “We’re gonna go on our body...that’s what she said” all nonchalant. I love it lmao. Laughing and learning on your channel. The best combo, so thank you for this!

  • @shamaeelahmed3561
    @shamaeelahmed3561 Рік тому +1

    thanks a bunch for these amazing and fun tutorials

  • @veechannel4672
    @veechannel4672 4 роки тому

    Lol. That card trick put a big smile on my morning.

  • @artems8342
    @artems8342 5 років тому

    Is using the tag more than once not a bad practice?
    It would be more appropriate to replace with , and wherever you could use or tag

    • @Italiafani
      @Italiafani 5 років тому

      Using more than once _is_ a very bad practice, that will not only affect your SEO negatively, but also people who use screen readers. Headings should always be structured in hierarchy, so h1 is the one defining the main content of the page, and h2 would be defining a section after h1. The only headings that can come after h2 are h2 and h3. Read more on html.com/tags/heading

    • @Luzac-1
      @Luzac-1 5 років тому

      @@Italiafani interesting, didn't know it matters for accessibility.

  • @amarnathmukherjee3900
    @amarnathmukherjee3900 5 років тому +3

    Sir can you make video about back end . We really need for backend programming

  • @noone-gr4is
    @noone-gr4is 4 роки тому

    I have seen a tutorial on that trick! You change the cards with your thumb and pinky. Cool trick btw!

  • @olivercarrington3588
    @olivercarrington3588 Рік тому

    Hey Ed, thank you so much for being around. You've saved a lot of us from watching crazy tutorials... It's a shame I'm watching this 3yrs later...
    I have a question tho, after following the course, I realized that clicking on the first page whilst on the first page fades out it's content. How do I fix that?

    • @olivercarrington3588
      @olivercarrington3588 Рік тому

      Thanks bro for the Javascript tutorial for beginners course, I used the if statement to solve the issue, comparing "current" to "pageNumber" and running the tl animation if they are not the same, else, no animation runs...
      Thanks bro, feeling a lot more confident...

  • @martynasmacevicius4087
    @martynasmacevicius4087 5 років тому

    You are the best programing youtuber. I want to learn html/css, and i started to know about these languages from you. You explain them very well. I would a tutorial on transform: translate and etc. I don't understand how they work..

  • @ericnguyen2328
    @ericnguyen2328 3 роки тому

    You are by far the best Ed. Love your works. Thanks bro

  • @RezwanHossain_09
    @RezwanHossain_09 5 років тому

    some a grade stuffs right there! looking forward to the next part Dimitrii!

  • @arslankasupovic4155
    @arslankasupovic4155 5 років тому

    You are awesome! I have just started making web sites professionally and You sir are a big help!

  • @guddetiajaymanikanta
    @guddetiajaymanikanta 5 років тому

    Magic trick is very good...!! Your way of talking is 👌👌👌

  • @bodzu_YT
    @bodzu_YT 5 років тому +3

    how named is vscode theme that you using?
    edit: oh and what is that photo viewer/editor, i like how it looks like :D

  • @NatHollings
    @NatHollings 5 років тому +3

    2/2/2018, the time that I stayed on the toilet... Haha UA-cam gold

  • @ronir.kpradhan1785
    @ronir.kpradhan1785 5 років тому

    Love your videos man...........Your videos are really calm and peacefull to watch and gets absorbed really good...........Thanks for your effort

  • @devsquaredTV
    @devsquaredTV 5 років тому +2

    is there a reason why the main div is nested within the header?

  • @ahnaftalukder2847
    @ahnaftalukder2847 5 років тому +1

    I am so excited to finish my website!!!!

  • @zaleox1342
    @zaleox1342 4 роки тому

    That magic trick is actually clean af

  • @edwardtofan8783
    @edwardtofan8783 5 років тому +1

    Great video Ed!As always.I want to ask you some question if you don't mind.Why won't you use display flex on the banner to center the text?

  • @Crazyfish66
    @Crazyfish66 4 роки тому +4

    Hi, I cannot locate the image files. There doesn't appear to be a link and I can't see them on your patreon. Thanks.

    • @RaouldeVries
      @RaouldeVries 4 роки тому

      Here you go: www.patreon.com/posts/build-and-design-29344172?

    • @purnaniroshan
      @purnaniroshan 3 роки тому

      @@RaouldeVries thank you sir. you're a hero

  • @canersanli
    @canersanli 5 років тому

    Great video, just one recommendation tho! Show us what you gonna design at the beginning of the video or the final result at the end of the video. Thanks

  • @ashleyhoward14
    @ashleyhoward14 5 років тому

    Very easy to follow, and funny too! Keep up the good work!

  • @javierquiroga6774
    @javierquiroga6774 5 років тому

    Damn, Ed! You're rocking and shining like a star.

  • @ppg68
    @ppg68 4 роки тому

    Really great video, literally one of my favorite dev youtuber.

  • @shade1108
    @shade1108 4 роки тому

    Normally I skip intros, but I can't do that with yours. Magic Ed! (Could be your new channel name?)

  • @sueholder703
    @sueholder703 5 років тому

    You’re hilarious, “that’s what she said!”! Learned some awesome new stuff today. Thank you. 🤩

  • @n_fan329
    @n_fan329 4 роки тому +1

    where are these pictures i don't see them in the description

  • @hitchlander3800
    @hitchlander3800 4 роки тому

    Great tutorial , one of my best channels so far. I’m trying to do the same concept with photo split but I was wondering if I can get another image in place once the other two parts of original image come together in css?

  • @hasirahmad8597
    @hasirahmad8597 3 роки тому +2

    Where can i get the resources used to make this website ???
    Anyone pls tell me !!
    I can't find it in the description :(

  • @vaibhavbhandare6777
    @vaibhavbhandare6777 4 роки тому

    Please create more full website using CSS grid ,flexbox. I am good in flexbox but struggle at css grid layout.. so please make full website demo.. so we can know exactly where and how can we use grid flex and more

  • @Viktorb63
    @Viktorb63 5 років тому +2

    your intro just made me smile

  • @vaughantesta6986
    @vaughantesta6986 4 роки тому

    Hey Ed great videos, just a quick note. The ::before and the ::after are pronounced sudo elements.

  • @SuboptimalEng
    @SuboptimalEng 5 років тому +2

    What are your VSCode settings? They look poppin'

    • @Mwtorres89
      @Mwtorres89 2 роки тому

      The theme is Community Material Theme Palenight High Contrast... and to get the colors, paste the following code in your JSON settings:
      // Code to change colors of only the community material palenight theme
      "workbench.colorCustomizations": {
      "[Community Material Theme Palenight High Contrast]": {
      // Editor background color
      "editor.background": "#1d2337",
      "breadcrumb.background": "#1d2337",
      "editorGroupHeader.tabsBackground": "#1d2337",
      // Darker colored side bars and top menu of editor
      "sideBar.background": "#0e0f20",
      "activityBar.background": "#0e0f20",
      "statusBar.background": "#0e0f20",
      "titleBar.activeBackground": "#0e0f20",
      "sideBarSectionHeader.background": "#0e0f20"
      }
      },

  • @earldelacruz3727
    @earldelacruz3727 4 роки тому

    Ed, it gets better indeed all we need is to count our blessings :)

  • @KVMRLover
    @KVMRLover 5 років тому +3

    Growing so fast 😍😍

  • @tshepilekwana5254
    @tshepilekwana5254 3 роки тому

    Loool, my jaws dropped...that was a good magic trick.

  • @rodrigocharnichart7939
    @rodrigocharnichart7939 3 роки тому

    OMG! You are amazing in web programming code and in the magic tricks!!

  • @nartaliti4751
    @nartaliti4751 5 років тому +6

    whats the name of that program that you were using to display the layout of the images
    Edit:
    The name ofthe program is Figma

  • @czarscrib3680
    @czarscrib3680 3 роки тому

    Hey dev. How can I access those images in the description? You said you'll dorp the link but I can't find it

  • @shecodes94623
    @shecodes94623 4 роки тому

    The magic tricks are the best intro.... luuuuv em, aren't they expensive tho?

  • @altini884
    @altini884 5 років тому

    i used to do magic and now im coding i really love this channel.

  • @fardinshahriar6404
    @fardinshahriar6404 5 років тому +7

    Hey, I can't find the image files. Would you please give the link?

  • @Glitchs247365
    @Glitchs247365 5 років тому

    ok that was actually an insane card trick

  • @abrahamndinga2517
    @abrahamndinga2517 5 років тому +1

    The download files are not in the description still....

  • @dimuthuathapaththu
    @dimuthuathapaththu 4 роки тому

    You are my favorite programmer. Love your stuff

  • @thangtea18bec
    @thangtea18bec 5 років тому

    Ohhh.. I thought there will be no magic.. But here it is... 😂 😂 😂 😂. I enjoy watching you than your tutorial. You have an unique character which funny to me. You will never be bored to me...

  • @sulthan4448
    @sulthan4448 5 років тому

    Hey! You are my favorite web designer..if you can please make the video for responsive navigation bar

  • @nadrenders4149
    @nadrenders4149 3 роки тому

    I swear I'll do big donation to you Ed once I get paid for the hello world projects I make

  • @IvarsRuza
    @IvarsRuza 5 років тому +1

    Why U R not setting font size for root, and after use rem. Just wonder how U manage the font sizes for 2k and 4k.

  • @tushardeshmukh7253
    @tushardeshmukh7253 5 років тому

    Iike always ur best buddy! ...I find ur all videos full of creativity plzz keep the work up!

  • @avocode1487
    @avocode1487 5 років тому

    only three words n that is - u are awesome........!

  • @swoorp
    @swoorp 4 роки тому

    great magic trick Ed, it was so interesting as all of your tricks

  • @vaibhavbhandare6777
    @vaibhavbhandare6777 4 роки тому

    Hello Dev.🙏. The Problem 👈is ur amazing . I mean u just make coding in fun way.. not like serious teaching guy.. that's why I request u that please make Full 😍JavaScript Course 👈on project base.. many of us are newbie to programming.. it's(JavaScript)👈 really need of us... Please make full course For UR loyal Viewers.. as soon as possible.. please🙏

  • @THEARPE07
    @THEARPE07 4 роки тому +1

    cant see any images in description ... do I need better glasses ?

  • @cebuanoninoy
    @cebuanoninoy 5 років тому

    This video is really good except for the link for where the images are so we could follow along?

  • @sylviacastro2282
    @sylviacastro2282 5 років тому

    Best trick card ever!!! You’re a magician! 😱

  • @mdshahebhussain3984
    @mdshahebhussain3984 5 років тому

    Dev, you did one mistake, you should have closed header tag and then you should have started with main tag outside of header tag. Please check it.

  • @mohammadshamim5470
    @mohammadshamim5470 4 роки тому +1

    I haven’t found those photos.please help me out

  • @rajeshrout648
    @rajeshrout648 5 років тому

    I learnt a lot from you sir. Thankyou so much for guiding us. Please make tutorial videos on animation , transition and all the property used in animation

  • @HocineFerradj
    @HocineFerradj 3 роки тому

    I learn a lot from your tuts... thanks

  • @InnaZweig
    @InnaZweig 4 роки тому

    Hi Ed! I have a question. I put hover into my css like you did for the MODEL one, and didn't put for the others one. Yet in your video there is an animation for all the pictures and I have at one only (checked many times, compared with your own code). So I had to write these properties separately for each one:
    .chef_right {
    transform: translate(0%, 10%);
    }
    .chef_left {
    transform: translate(0%, -10%);
    }
    .hero:hover .chef_right {
    transform: translate(0%, 0%);
    }
    .hero:hover .chef_left {
    transform: translate(0%, 0%);
    }
    .hair_right {
    transform: translate(0%, 10%);
    }
    .hair_left {
    transform: translate(0%, -10%);
    }
    .hero:hover .hair_right {
    transform: translate(0%, 0%);
    }
    .hero:hover .hair_left {
    transform: translate(0%, 0%);
    }
    - does it look too scary? And why don't I see this in your code and all the hover effects work?.. I'm confused.

  • @timbl4189
    @timbl4189 4 роки тому

    Why did you place tag inside a ? Is this a mistake?

  • @user-zp1dv4yh5e
    @user-zp1dv4yh5e 5 років тому

    I will love to see these kinds of tutorials more 🤓

  • @abdulboriy_alimov
    @abdulboriy_alimov 5 років тому

    Even could not realize how i came till the end of the video) Nice job!

  • @Richard-wh6wg
    @Richard-wh6wg 5 років тому

    I don't like it to ask for content, but this one I'll have to. On your 100k special, you showed a dinamic portpholio, could you teach us how to do it?

  • @sumitaggarwal3258
    @sumitaggarwal3258 5 років тому

    sir your tutorials are nice, but i think its better to put responsive design code in separate file, because it is messing with other code and creating confusions sometime.

  • @Usurperhk
    @Usurperhk 3 роки тому

    Mr. @DevEd, I didn't find any links to images in description, please update if possible.

  • @chikkiidehalvi5561
    @chikkiidehalvi5561 4 роки тому

    i like your videos before i watch them. :)

  • @optimusPrimeOne
    @optimusPrimeOne 5 років тому

    Your awesome man....your videos taught me a lot.thank you so much

  • @MR6278
    @MR6278 3 роки тому

    Hi Ed, I have one question, what is the tool that you utilize for layout design, I wanna say that you amazing person that teaches. Thanks for everything

  • @ryansaedi
    @ryansaedi 3 роки тому +1

    Hi, I couldn't find the source code of this course 🥲🧑🏻‍💻

  • @alejandroalonso8324
    @alejandroalonso8324 5 років тому +4

    3:30 to 3:38 "It's empty like our lives"
    LMAO

  • @JamesWelbes
    @JamesWelbes 5 років тому +1

    I NEED THE NEXT VIDEOOOOOOO *breathes heavily*