Free Course: Beginner Web Design using HTML5, CSS3 & Visual Studio Code
Vložit
- čas přidán 6. 07. 2024
- Access All 28 of My Courses for $12 per Month: bit.ly/39JTWJI
FREE exercise files: www.BYOL.com/WEBESS
Want to expand your skills? Learn Tailwind CSS & Alpine.JS for $10!: byol.com/mal1
Learn how to build a simple website in HTML5 & CSS3 in Visual Studio Code.
Sweet discount at Bluehost: bringyourownlaptop.com/blue
Listen to the BYOL Insider Podcast here: bit.ly/38bFpWK
Get Visual Studio Code here: code.visualstudio.com/Download
Free 33 Video extract from the full course: HTML5 and CSS3 Course for Beginners: Responsive Web Design Essentials using Visual Studio Code.
#visualstudiocode #webdesign #htmlcss
Follow us on Instagram: / bringyourownlaptop
Follow me on Twitter: / danlovesadobe
Join the Facebook group: www.bringyourownlaptop.com/fb
Join my subreddit: / bringyourownlaptop
Introduction to Web Design: 0:00
How this course is structured: 1:58
What to download: 3:39
Creating our first web page: 6:37
What is HTML5 & CSS3: 12:32
Head vs body vs html tag: 20:56
Title & description: 30:51
What code editor should I use?: 36:46
Using Div Tags: 40:26
What is a CSS Class: 46:52
How to nested divs: 55:58
Class Project 01: 1:01:01
External CSS: 1:06:26
Creating our index style pages: 1:15:33
Testing your website: 1:27:49
Check your code for errors: 1:36:34
What are HTML5 structure tags: 1:47:36
Add html5 structure elements: 1:53:23
How to color the background: 2:09:26
Adding images to a website: 2:14:36
How to center an image: 2:19:15
Change the font size & color: 2:20:29
Make a clickable link: 2:34:41
Stretching background image: 2:43:27
Making a div tag transparent: 2:49:05
Simple website text navigation: 2:51:42
CSS compound classes: 2:58:25
Class Project 02: 3:05:28
Class Project 02 - COMPLETE: 3:07:33
Add a email button to a website: 3:12:23
Add Google Maps to your website: 3:16:12
Making a website live: 3:27:35
Uploading via SFTP: 3:44:27
Outro: 3:56:16
Buy the Full Course and Own It Forever on Udemy: bit.ly/34kRvXQ
Hi there, my name is Daniel Scott and together we’re going to learn how to build professional responsive websites. which look good on mobiles, tablets and desktop screens.
We will build 4 sites together in the full course:
a simple but elegant restaurant website.
a bike repair website.
a responsive portfolio website.
a Bootstrap website.
We cover everything you need to build your first website. From creating your first page through to uploading your website to the internet. We’ll use the world’s most popular (and free) web design tool called Visual Studio Code.
There are exercise files you can download and then work along with me. At the end of each video I have a downloadable version of where we are in the process so that you can compare your project with mine. This will enable you to see easily where you might have a problem.
We will delve into all the good stuff such as how to create your very own mobile burger menu from scratch learning some basic JavaScript and jQuery.
You will:
Learn how to work with responsive images and icons. and stunning full screen background images and probably one too many gradients.
Learn how to create forms and to choose great fonts for your website.
Learn how to work with Bootstrap 4 to easily add carousels, cards and complex looking menus.
Setup a domain name with hosting so that your website is live on the internet for others to see.
There are fun class projects for you to work on which will enable you to practice what you learn. By the end of this course you’ll have a great understanding of important web design topics like HTML5, CSS3, Flex box, Responsive design and Bootstrap.
If that all sounds a little too fancy - don’t worry, this course is aimed at people new to web design and who have never coded before. We’ll start right at the beginning and work our way through step by step.
Who am I?
I’m Dan, and I’ve been building websites for about 15 years now. I am award winning instructor, and have won a MAX Master award for the last 2 years in a row at the prestigious Adobe Max conference.
Time to upgrade yourself?
Sign up for the course and let’s learn how to build responsive websites.
Music: Bright Hip-Hop by Trending Music, Courtesy of Shutterstock, Inc.
Hey guys! If you want to get the rest of the course then you can find it on my site. It's just $12 and you get access to all of my courses, check it out if you're interested!: byol.com/webess19c
P
P
Ll
L
L
Someone give this man a Nobel Prize already for such good teaching
I have to you buy the course now, anyhow.
I'd gladly accept. Humbly of course ;)
Can you share me the full course. Thanks
@John Power Is it fun for you to be ugly to people? Making a few grammer mistakes does not mean you need don't know english. And even if it does, i bet he can speak this 2nd language way better than you can. Anyways, the course link is in the description.
@John Power you learn japanese first.
@Arpit Verma## I think i created an individual class for it
I have a question, I am going step by step with this video, and so far it has been a complete help, but I'm a little bit confused with the files you are opening, like we are supposed to have those files as well, do we download them, and if so where?
same question
@@piwagerica7365 he gave free files to download. but even without them, it's a good tutorial. This is what I'm doing but half have the job of a web developer in file management, and he's explaining the thought process when looking into his files
Absolutely brilliant , explains everything nicely on how things work and connect, coding isn’t easy but the way you’re explaining and showing in the videos ? Priceless thanks
This is the first course which I ever finished in my life till date, and guess what I made that website!!!☺ It was a nice experience. Thank you.
I've tried so many courses, but got lost in all of them. But this guy is an amazing teacher, he describes every little thing and more, I finally understand what I'm doing!
Thanks Ine, I'm really glad I could help with your understanding. best of luck :)
exactly the same for me
@Arpit Verma## just write it after first this:
when I see div...
you say TAG
What is your result after 4 monthes?
@@BringYourOwnLaptop simp
It seems like a great tutorial, I'm gonna put in this comment some timestamps to organize myself (and if others wants to use those as well) :
- Getting started (what will be in the video + what to install) : 00:00 to 07:00
- Introduction to html & CSS ( create your first html page, css, what is it...) : 07:00 to 30:00
- Title and description of a website : 30:00 to 36:40
- What code editors to use : 36:40 to 40:00
- Use div tags, css class, css in a separate file... : 40:00 to 1:15:32
- First project (create a cool restaurant website + upload it) : 1:15:33 to ... (work in progress)
Edit : the author added timestamps in the description ^^
Thanks, it was very useful!
P
@@eleazarnunez1287 untuk u5zcd4 di 00
Selamat datang di papan klip Gboard, teks apa pun yang Anda salin akan disimpan di sini.Selamat datang di papan klip Gboard, teks apa pun yang Anda salin akan disimpan di sini.Selamat datang di papan klip Gboard, teks apa pun yang Anda salin akan disimpan di sini.Selamat datang di papan klip Gboard, teks apa pun yang Anda salin akan disimpan di sini.Selamat datang di papan klip Gboard, teks apa pun yang Anda salin akan disimpan di sini.
Ppc-+di Imah
Had to make a full-fledged website in 4 days for a school assignment. I sincerely thank this man for this amazing course🙌.
Uuuu78
a question about setting background-position: center; at the 2:48:09 mark of video...when one squeezes the screen size with mouse, i notice that the text doesnt also center with the background image. Now i know responsive would be looked at later, however, wouldnt this same setting work for text as well? (Im asking this before waiting for the end...sorry bout that just thinking on the run)
27:21 -- On a PC, It's Alt+Tab. (Ctrl+Tab will only move you thru the tabs of browser or any app that has tabs like VS Code has.)
thank you. I wonder what was wrong
I had to fix some problems by myself and I'm really glad I did. I finally feel I'm learning, the "make a reservation" is an inline element thus it cannot be positioned with padding, unless you turn it into inline block or block.
But I got mad and push it using the P and padding-bottom
Nice work!
] B m b,,🧡❤️♥️
I left my college when I have not learnt but today I come across your video and I have learnt it just in hours. Thx alot blessing
I did not watch everything but I really appreciate that you made it in a way that everybody can easily understand it
Fell asleep and woke up 2 hours into the video after having a lucid dream about web design
The video came on (auto play) when I was sleeping and had a dream that I was being taught web design. I woke up in the part about link tags. In the dream I was out having lunch and someone was telling me about link tags. I thought: "I know what link tags are!" When I woke up and saw this video playing, it made sense as to why I was dreaming that. :)
BlueBird yoooo same
Haha, me.
What is your result after a 5 monthes?
What the fuck , exactly the same happened to me , except for the lucid dream part , I dreamt about being late to school lmao
Sat through an hour of this so far much easier than any of my college classes. It’s true that engaging with information you actually care about captures attention much better
Hi, I need help with something on this course. I've just done the section where you add the heading and paragraph text to the main section. I've copied what you did in your code, but for some reason, on my computer and browser (Google), the paragraph font is coming out in italic. Same thing with the Make Reservation link text. However, the h1 heading is not. I have used the font-family: Arial, Helvetica, sans-serif on all these, same as you did, but yours is not coming out as slanty (italics) and mine is. This is really confusing and annoying! Any ideas as to why this is happening?
When I go to install the live server (1:32:00) on my Mac says appveyor branch failing, can you please help me to understand why and how I ca install it correctly? thank you!!
36:58 This is my marker! I am still 13 years old so I can't thank you enough for this tutorial I can understand it easily than my math teacher🙂
😂😂😂
me too. I am also 13 years old.
And it's true that this tutorial is really awesome.
Oh rly? Me too!
@@susmita7494 Yep.Also I recommend checking out freecodecamp to get some essentials and overall a really great free site for web dev.
@@susmita7494 Me too xd
Hey Dan! is this course full and complete or do we have to buy or something, because I am really enjoying it and I love to learn web designing and create interactive websites. I would appreciate your comment. Thanks!
for project 02 i left the height in the footer , and added more padding to the top and it worked just fine !
when adding the padding inside the orange box, instead of wrapping text it pushes the orange box outward and makes it wider than we had defined, what to do?
Hello Dan. Love your teachings.....and getting by it.
The source files for this course is not available, at least for me cause I clicked the link and I can't find it there....
Please, I need the source file or the link to go download it.
Thanks.
On the link choose: "Responsive Web Design Essentials - HTML5 CSS3 Bootstrap"
Lllllllllllllllllllll
@@ranik129 lllllllllllllll
Man this is such a good tutorial the techniques that you use are so good and easy to follow i loved doing the home work and u make coding so much more fun. plus the excitement you get when u make the website or change something and see it on a browser is so good, thx man
Hi! How do you check on your browser? What's the shortcut? I'm new on VS Code and can't find the (probably obvious) answer. Thanks!
When i put the logo(image) in between the header tags, the image ends up covering the rest of the document structure. How do i solve it so it only appears inside the header?
same problem here
I’ve learnt more about coding and it’s techniques than i’ve had in any lectures or tutorials your a legend Dan
This is the first 3+hr video I have ever watched on CZcams. It was worth it. I have watched other programming tutorials but got lost in the process. Your tutorial is unique because you go in depth and clarify the essentials. I also like the assignments. Thanks a lot for making this video, I can say that its good start to coding.
ল্ল
ল্প্প
I literally saw few minutes of his video , absolutely loved it and immediatley decided to subscribe.
So if you wanted to let auto fill take over, you just hit return or space. what would you have to press if you wanted to cancel the auto fill?
hi Dan I can't open the exercise files you've provided, I'am getting errors about encryption.I guess that this is because i'am using windows,loved this course btw and i've also watched your course on illustator and XD,both of them were fantastic. keep up the good work.
With this 30 minute i starts making my own html css waoooooooooo.😊
thank you ! i want to integer a banner "google web designer" in html "DIV" , but i can't !! how please ?
2:53:13 I was wondering: when you add multiple a-tags (you type a*6), they automatically are divided into different line from 19 to 24; but when I tried to do it they all appear on 1 line. How do I automatically subdivide them into different lines without clicking return manually? I tried to use format selection but it didn't work. Thus doesn't anyone have suggestions for my issue, please? Thank you.
This is one of the best walkthrough tutorial video I ever had. I used to do these things before but I didn't know what to do with it so I lost my interest. Once I got back, I start to get interest again. Yet after for a long time, I still didn't forget the HTML and CSS elements.
This teacher deserves more subscribers for his decent walkthrough.
😐😐🤗
🎉😂😮😮😢ㄱㅅ😂ㅛ됴ㅛㅛ😮😂🎉🎉❤
You changed my life.
Thank you!
I love that you are putting yourself in student's shoes.
You are so fun and I adore your speech diction.
Respect from Macedonia!
BA 88 to 8
Y7Y6
@@ssudakar4618 IS A great place 7pm 6
Sms y7
Sms
Hello my logo when i try to insert, it covers the whole screen how can i make it so it fits like yours in the video at 2:17:26
You’re really good at teaching I understood every you had to say. I hope you make more learning videos coding in different languages. Thank you
he is really good, yes, but I only see one website lesson as he talks about more. Do you know where the other website lessons are? There is just one here (Restaurant). Are the other ones in his paid, not free, courses?
You're the best teacher hands down! I've watched hours of videos from other channels,
but none of them have broken it down so well, thank you!
Thank you so much Daniel. Best HTML and CSS Beginner course ever! This video has been a great help for the development of my website!
i realy dont understand ....how could someone not like this video? i mean...this is a freakin' free course of html...god bless ya Dan
2:47:10 Pls tell us why we have to do html, height:100%. You say "it fixes that". What do you mean by "that"? What was the issue?
It removes the bottom bar of grey which is visible when you decrease the width of the webpage.
Took me 4 days, watching around an hour each day, but I got through the whole thing. It was really fun to follow along. Thank you for posting such an in-depth video on the tube!
Hi please help I’m stuck, my
6gh6
@@bayamedhivenkatesh6853
O
@@tshegomoeng5314 is there a closing tag?
Does it look like this 🍀
-
they have "save all" extensions so you dont have to press ctrl + k + s on pc
I dont see an advanced html course on the members webpage, am i missing something or is it meant to jump on dreamwaver courses?
My nav links wrap to the next line when I resize the window instead of just reduce in size.
Can anyone help me with that?
What an awesome course, i am halfway and registerd for the full course. Thank you so much!
Okay
Amazing! I love the way you explained it, thanks a lot Dan.
07кк9цг
Hm
@BringYourOwnLaptop
...
I started building a website following your video and now when I try to save a link to a folder or desktop and then open link it follows a file path..?
Can you help..?
Thanks..!
Hi! Could anyone tell me how I can resize an Image that I want to add to the website?
Bro, I love this tutorial. You are a great teacher! God bless you. Cheers!
I love it! When he describes something, it looks so super easy. Thank you! I was scared about html, but now I am looking forward to try some more about it.
Ini
14:08 Hello, was there some set-up in VS Code on Windows that allows the User to toggle between the editor and chrome? cmd + shift + p, not making it happen in Windows. Googled it, and can't decipher how to set it within VS Code, or what keys to use on Windows. 26:23 Oh, ok. Thanks.
I need help
im on the
but for some reason, the picture overrides with the header, nav, main and footer.
yes im using my own logo
Finally someone who teaches shortcuts!
Can you follow this an use code runner if VS code doesn’t work on your computer?
I couldn't find the free course work on the link above, is there another link that I'm supposed to use.
The BEST
Dear Dan. I completed the full course. It was wonderful. flowing, pleasant to learn. Thank you very much for the investment. Now it's time to practice :-)
wish you had the entire video of it and send it to me if you can help my subscription expired
ngamizeabert@gmail.com
thats my email thanks
Pls me too. azeezproto@gmail.com Thanks man
The content inside my style section don't highlight and they don't work after saving tjem. What seems to be the problem ?
Hey guys does anyone have an idea if Visual Studio Code is better or worse than Adobe Dreamweaver? I'm just curious because I don't know if I should start to learn how to use Adobe DW or VS is enough (I know that DW is not for free but I have it already).
Really Really appreciate your effort and how you structure your course. It helps me learn a lot easier!
Sir.. your teaching way is amazing.. i love your content, sir. You are doing great work.
Let me save it, otherwise. it can't be displayed. 😜👍👍👍😘😘
How can i use duel monitor, one to illustrate and other to see the reference photo or watching something? 😞
Hello, so I've created the website to my own personal liking for my own restaurant. I made a logo on Canva and imported it into the img. file. And it's in the web browser but I can't seem to align it into the center even though I wrote it in VS code. Can you help? AND GREAT VIDEO!
I'm a newbie at codes and this is where i started. I loved it absolutely. I'm definitely going to take up the full course from your website.
Thanks Dan!
Thank you for this! Getting started today!
What is your result after a year?
@@alinamagical Ar you survey?
@@rommeljohnsevilla7535 Not, just interested
Dan must be one of the best teachers I`ve ever had. Loving this course
i have written the first code but my chrome does not have the file opening extension, how should i run the code
First ever course I've watched complete! Somebody make me believe that I've completed this one!
This is usefull bcos i want to learn web designing
nice course so far, i am at 1:30:00 atm. I personally just edited the shortcut, so that ctrl+s is save all and ctrl+alt+s is save. That way I just always save all, and when I intentionally want to save just a single doc I can still do that
Can I ask what website did you use to create the adare restaurant logo?
No surprise there, he won an award. Let's give him another, a yt approved award :DD
@@lalchhanhima4688 ?
@@touchpad24 oo i
@@touchpad24 pi
@@touchpad24 o
@@touchpad24 oo itni
THE tutorial. Thanks for this epic video.
PD: I have just one problem with this. It is not vegan ;)
Hi Dan, this is a great course! I do have a question. I am trying to use the emmet abbreviation to multiple the a tags but they all keep staying in one line as opposed to breaking each one up line by line. I read that it is because it is an inline element, but clearly you pull it off. Any solutions?
Hi Brendan, I had the same issue and was able to solve by doing the following.
1) Go to File > Preferences > Settings
2) Click Workspace > Extension > Emmet
3) Scroll down to the area that says "edit in settings.json". Click this and it will open a code window
4) You'll see two existing { } in that window. Paste exactly the following between those two { }
"emmet.syntaxProfiles": {
"html": {
//if element created is more than 2, it will break to new line for each element
"inline_break": 2,
}
}
5) Click Save or Ctrl+S on a PC
DONE! Should work without restarting VS Code. Hope that worked for you. Let me know if you have issues following that.
@@theadventuresofmikeandjami6693 very helpful
@@theadventuresofmikeandjami6693 hi Mike am stuck
With editing images to website 2:19:12 around that area
Plz help me out there
Dan! What size monitor do you use?
This man is so good at teaching. I think if he made a university and only he teached/taught he would have only straight A students.. if i had any cash i would pay for his courses!!
Respected Sir,
Firstly, let me thank you for sharing your experience and knowledge with us.
I never thought i would be able to learn so much from you.
I wish i could meet you and thank you for your training program.
God bless you!!
Thank you once again.
Bb
B
Bbb bb
Bbbbb
B
How do i make the "YOU SAY TAG" text be at the bottom as the wireframe shown.
Man you deserve to be the best teacher, i understand everything and i'm not speak english fluently. keep it up !!
i love this guy.. he really knows his stuff and explains the concepts to its basics such that even the dummies guy understands and can start coding from scratch
ฝ
llYyllloytllllllllllllllllhl
I love how you add humor to your lessons. And I also love how you know what beginners need.
Hi Dan, how to get full course of web development from ur side tell me the procedure ?
This man has the best and most "raising the spirit" type of voice I have ever heard. No tutor before could ever hype me up while trying to teach me something. Amazing work!
Daniel I want to say first off THANK YOU SO MUCH FOR BEING THE KIND OF INSTRUCTOR YOU ARE!. I wanted to say before running into your video I thought there was no hope for me as a web designer/developer all the instructors on youtube and I mean all I've seen and watched from the top youtube instructors teaching how to build websites, I immediately got lost because they mainly power through the HTML and CSS but I'm truly in LOVE with your instructions on developing websites... PLEASE continue to teach and touch other developers because you definitely simplify it to the point where my grandparents could pick up code and learn how to build things. :D FYI I definitely will be buying your full course and getting your service... there's no point of me watching anyone else out there that does it as well as you do!!. :) curious question though do you except your subscriber's portfolios because I would absolutely love your opinion on mine as I'm an HTML & CSS developer trying to get hired as an email developer or web designer and hearing your opinion would mean the world to me :D
ㅓㅅ 1:33 😮
Tg
I just finished the Responsive Web Design Developer and got the cert from FCC, and this video was very helpful , wishing you all the best .
YycyycxYycyyyF
NJe unbn
Unbelievable
Wewn I opend Google Chrom I didn't see the option above the search to open and select the file ("open file") . what can I do ?
Great course! Dan does it easily and nicely. one issue...how to get the free exercise files? I saw thru the link many files but nothing specific to the course.
"fade to black..." Love that :')
This video is amazing, so sad the rest is payable, but obviously it should be. Learned a lot from this, thanks!
8
⁸888888
Daniel, your videos are amazing. They're lengthy but hey, if anyone is willing to put the effort into learning as much as you've kindly provided, heck, I'm all for it! That's why I'm subscribed :) Thank you for doing this!
Yeah, this one is pretty long! Thanks for being a supporter. - Dan.
How did you add the color blocks
Could you please help me.How can I open the exercise files on windows 10?
Best tutorial ever! I'm Brazilian and I could easily get everything! Thank you!
I just signed up to be a monthly student and I am SO excited, as someone who strongly believes in following my intuition this feels perfect and like the right step. Thank you so much for creating such great content!!!!
how did it go?
Hello. How far are you in your tech development since you began. I am a new student and I have been going through replies and this one caught my eye. Before you started following this channel, did you have any prior codding experience?
Can you tell me the file name of the exercise files? I cannot find the exercise files in the link.
Your exercise files does not contain the files for VS Code.
this is great, love your teaching method.
Sir, your courses are wonderful I learned Photoshop and now I am going to learn web design in your courses. Thank you so much sir!
So we have tp pay for the full cpurse?
So I’m just starting of learning coding today , I’ve gotten it going pretty good so far but on class-project-1b I can’t get the text “you say tag” to move below the yellow box it wants to stay on top or anywhere other than below it... any advice for a beginner?? 1:02:32
If you haven't figured it out already:
WHEN I SAY DIV...
YOU SAY TAG
html follows the order in which you declare the elements.
@@andrewharpin6749 thanks bro I appreciate the reply I was able to figure it out once I got further on into the video, I’m really enjoying learning and things are starting to flow a little more naturally now!
OMG thankyou i was scratching my brain with this! makes so much sense now! i was using
This man is so humble. Using your link is the least we can do for you!
,