HTML tutorial with Dreamweaver CC 2018 Part one

hello guys in this video I'm gonna show you how you can work with HTML and CSS we are going to create this website one particular thing of this website is totally responsive if you display this website in different devices the website gonna adapt to the size of that device you see here on the bottom part those pictures okay you have different layouts for example for phones okay if you see the menu is different okay and I'm gonna here all the steps of how you can create this website alright let's start [Music] first here I'm going to admit illustrator and you can see the different views that I create okay here is the phone view a smartphone here for devices like an iPad okay and this is for desktop okay but when I start this project first I start with this layout and the idea it was to create okay different layout and to see how much space I need for every single element okay for example here I decided to put these four pictures here on the top okay and then the picture like this for example if you decide to put let's say three of this picture okay you have to keep in mind if you if you do this responsive instead to put three like this okay and probably it's much better if you put one too and then the last one here on the lowest part ok buddies you have to decide again when you put three or four picture is much better to put in different ways all right okay to design this okay I use a few Adobe stock images okay if I select this image I can go here to my library and this is all the image that I create and the only thing that I pulled from internet we it was the harley-davidson Louisville okay and one particular thing that I did on a harley-davidson logo I copy with my eye dropper okay I select this color because this is the color that I would like to work with and I save on my library panel and also I put this color okay which is comes from the Harley okay for this defense I use that color to apply to the menu and other part of the website okay alright but to create this project first okay I have to create a folder on my desktop okay and I'm gonna show you the folder that I have this is the harley-davidson folder if I open this folder here I have the CSS I have the design or can be images and the index okay I create just one page to keep this pretty simple okay I'm gonna show you what I did in bring Weber if I open Dreamweaver this is the whole page in Dreamweaver okay I'm here you can see the code the HTML code which is not big okay it's not a big page is pretty simple code and then this is the CSS I didn't apply a lot of thing okay I try to keep something pretty simple okay and I'm gonna hear you all the step of how you can do this okay alright let's start with a process okay first you have to create a folder index table okay I'm gonna create a new folder and I'm gonna call hardly David son - okay all right and they all think that I'm gonna copy from this folder is going to be my images folder I have here okay I'm gonna copy these I'm gonna close I'm gonna open this one and I'm gonna pace and I can work with the same images okay alright then what I have to do I'm gonna go to Dreamweaver okay I'm gonna close these what I have okay then I'm gonna open a cell reference I'm here in Dreamweaver let's go to the side and select new site okay I'm here I'm gonna call this one Hardy - okay and I'm gonna point to that folder but it's in my decks of this one have a harley-davidson - I'm sorry choose ok and select safe all right everything okay and here I have the images folder alright I have all the elements and now what you have to do let's create a new document okay here on the new document dialog tt have new document select a HTML and none okay I'm not going to create a framework as a bootstrap okay um just select here create alright this is the page I'm gonna be by here double check you have it split you have live okay and you have the files panel here on the right okay all right this is the a code okay I have the Declaration of the document inside HTML here I have all my HTML the wrapper right I have the head and here the body we are we're gonna type code and also we're gonna use different panels to insert pictures okay to insert and thieves and also we're going to use the CSS designer panel okay what is the first step first I like to war with Adobe Illustrator okay on this document okay and this document is on the description you can download this document here in this part i by the element okay like this oh by the way it's very important you have to start the design in HTML okay I'm thinking on the phone view okay that is the standard because the phone everything is you can see you have one two three four five you don't have to start trying to align all the element trying to lay out you put just all the element one another one it's not here because here I have four pictures but it's easier to start with the phone and then you start designing variation if you stretch the website okay do not try to start from the desktop and then trying to change the website how can I look very well on the phone that is not idea it's much better if you start first with the phone view okay and here I divide okay deformed first I have a page wrapper this is the wrapper of everything I have to create a page wrapper and then I divide on different element for example the header with this class the main content and the footer and on the top header okay I have the banner the navigation bar and here in the main content I have one section two articles okay on the footer I got just a 3 MP okay as a Texas okay I'm here ID by all these elements okay that you can see what is the name of every single element okay let's go to the code I'm gonna go to Dreamweaver okay I'm here I'm gonna show the the reference that I have okay I'm gonna go again to the other index okay and here I have the design okay I'm gonna show you all this part okay here I have them the head inside the head I have a few things that you don't have to be worried about this because automatically you're gonna insert this call while you are working with drink we were okay let's take a look to the body okay on the body the first part that I have here is the page wrapper okay the page wrapper is start here and finish all the way down here on this Dave okay if I close the page wrapper you can see is the only element inside the body is the first one okay in that case what do we have to do okay we have to insert deep as a picture but before we do that is very safe if you save first am document let's go to the file save and of course the first document you have to call index all right I'm gonna save okay Annie's here on the right oh by the way if you can start the sign air from the phone view I recommend you to go today bu okay thank you when you split select split vertically you can see it's much better to see the code here on the right and design on the left like the phone okay and I'm gonna go here I'm gonna do the same here I'm gonna split show vertically okay and it's easier to see the code on this way okay all right and first step I have to insert my page wrapper which is this one in that case you can go here to the body I'm gonna put my mouse there I'm gonna hit enter okay right here I'm gonna insert div okay there are two ways to do the David you can type manually or you can go to the insert panel if you prefer to work with it same with the insert panel go ahead okay the only thing that you have to do here you select click okay insert a div and here I can put the class page - Robert okay answer like okay double check at intersection point is reka that is the option by default click there and you have this interpret wrapper and then you have to get rid of that that text okay that is one way to do I prefer to write the code manually okay because now in remove we have code hint and that is very easy to insert a code but the thing is you will learn how to code and then you can resolve many different problems if you start coding manually I'm gonna show you how you can do in both ways during this class but I prefer to do this typing code okay I'm gonna move my mouse here I'm gonna put em right the body finish again double-check is on the right of these angle brackets and then hit return and now you can type the word div okay and then hit the tab key okay and automatically you have a deep there okay but inside the div okay I'm gonna put my mouse there on that position you have to put inside the tag okay between the V and the angle bracket okay type and space and automatically you can insert a class okay click there and then Dreamweaver is asking you what is the name of that class okay here I'm gonna put page wrapper okay do you have to repeat this process many time okay and at the end you will understand okay it's going to be very easy to type code okay and that is more interesting if you know how to type code okay all right then you have to put the mouse inside this div inside this tag between the open and the close tab Oh tag okay and put the mouse there and then hit enter okay and you gonna put the mouse between this one is going to be the beginning of the page wrapper and this is the end all right then I'm gonna do another enter okay and I'm gonna put here my cursor okay pitch wrapper start here and finished here if I show you the original document okay this is how the page wrapper start there and finish there okay what I have to do inside I need the header if you see the header start here and think here but can see here is not a div okay I try to do not insert many days I prefer to use HTML element okay for example here on the insert panel I have header navigation - I article section and footer these are HTML element that you can insert and you can add a class those elements easy to insert one day another day another wheel and this one also is very good for search engine optimization the famous SEO ok for Google is it's good to know what is the there is no beginning more a navigation bar and so on okay in that case I'm gonna insert the header all right I'm gonna show again you can do this with the panel I can click here click OK and the class for this header ok I can type this one top header ok and select ok you see ultimately you have that I recommend you to delete ultimately as soon you do that delete the content and hit return ok and then I'm gonna move this ok I like to indent here ok to start with the header here and then another enter on this area I'm you see this in them properly ok this element is the wrapper of the element that is inside ok but is the way but you know I prefer to do this manually ok instead to do this automatically with the insert panel okay I'm gonna do it again we say it's the top header okay the only thing that you have to do here is Heather ok then you can press tab and automatically you have the header start and finish all right and then you can press return ok and you have the header there you don't press return also you can go back space ok and then select class and then type a class here top Heather okay and then go to the right with a keyboard and use the arrows on your keyboard and then type return okay but I'm gonna indent these much better I'm gonna put there alright that is the idea okay what do we have inside the header okay we see I have another beef that is my top banner okay okay which Vinny here and then I have the nav which is the navigation bar first I'm gonna insert the top banner okay I'm gonna go here inside the header he returned I'm gonna put here Dave tab inside I'm gonna put that class I wanna call top banner okay I'm in here you have to do is I return okay I'm gonna do two returns okay because I'm gonna put more content here inside all right I have my top banner which is this one and inside I have a logo okay and and inside the logo the logo the deep local idea I create which is this one okay because is a wrapper for this image and this text okay I prefer to create I can put just the image and the text but I prefer to create a wrapper because it's easier to control both elements okay and I put an ID because it's just one element I'm gonna use just one time on my banner I'm not planning to repeat this that that's why I prefer to use an ID in that case I'm gonna put here Dave tab okay and here I'm gonna put the ID all right okay you hit enter and you can put here logo all right which is the same thing that I have here okay that is my ID logo and inside I'm gonna insert the image all right okay but I'm gonna insert the image right now okay I'm gonna put the mouse there until you can see like here insert image if you click there ultimately you can connect to the hardly Division two folder double click okay and here I have a logo that is that big and I have another one that is bigger okay if you see this one is bigger but in this case I'm gonna use the log of one okay select open and now the logo is there you can you can't see the other element okay because you don't have other limits there all right that is the way that you can insert automatically with a but ultimately you will have the width and the height but I don't need that in that case I prefer instead to do that I did command Z I prefer to M insert an image I'm gonna try it just the war I am G okay tab and automatically you have the IMG the source alright and here I'm going to type I because I know isn't the images folder on a clip there okay and here I have the local one can see that's it I is less cold okay just one thing that is very important for SEO is the alt okay I'm here you can put harley-davidson logo or anything that you want alright I have that element okay then here I'm gonna insert these tags I'm gonna take advantage to copy this text or you can copy from the illustrator file I mean I can go here to illustrator I can go to these tags all right do not copy from illustrator as an element you have to select the type tool highlight and then you can copy that text okay I'm gonna copy from here all right then I'm gonna go here underneath the logo because this is the deep for logo okay let me put this I'm gonna create more order this one is inside the logo I'm gonna put it tap here okay another one here and here inside okay I have to put my age one okay and why each one is very good to put there because it's the most principal element on my website okay and that is very good for SEO because it's a h1 and in addition is inside the top header okay which is very good okay for SEO can see you have the top banner the top killer is there okay what else we have here I have the the closed a I have the logo okay and then underneath the label I have the navigation bar okay all right you see this is the nav bar okay let's go there here I have inside the top header we have to go okay you have the top banner alright and the navigation bar is inside the top header you can put outside but I decided to put inside in that case I have to put the mouse here the cursor okay wherever part the top banner finish and then put the cursor there and hit return okay and you are on the same level okay here you can type nav and then tab okay again you have the nav bar and I'm gonna hit enter and I'm gonna put that class to the navigate bar space bar then select class okay in here I'm gonna put nav - bar just to remember that okay what else I would like to put here let me show you the M the original document inside I have a ul Li and a why I have this because now is the standard okay to work with a ul Li and a for navigation bar okay you see I have all the UL li a there okay and it's much better to do that okay because it's good for search engine is good for apply CSS okay it's a very good standard to work okay in in HTML coding and CSS okay in that case what you can do the code is the following okay you can insert this with a ul with the LI okay on the link but I prefer to tie the code and it's pretty easy if you type ul then angle bracket okay then L I okay and then I'm gonna put here I will like those by five because I need five time there okay and then I'm gonna tie the angle bracket and then a and now if you hit tab automatically you have the UL you have the li and you have all the anchors okay that is pretty cool alright if you see on the website looks just a few things then we're gonna add this style okay I hear there reference all right I need all those links okay I'm here inside I need the text for the link okay for this sample this one is home okay then I'm gonna here this one is about okay then I'm gonna take a look - my design is home about gallery media and contact okay I'm going to put here gathering then I'm gonna put here media okay and can't all right and what about the link of course my homepage is the index as soon I tie the eye you can see index that HTML okay and you can see is there I don't have the link for the other one probably I'm gonna put this one about okay in that HTML okay you don't have em the black page yet but probably I'm gonna name it like this gallery that HTML also okay here is media that it's in ml okay also if you don't have the link yet okay in addition you can tie the pound okay but I know I'm gonna call this one contact that HTML all right look at that I have all the elements I have the logo the the title of my website and all the navigation bar okay let's take a look what we have okay here if you see I have the navigation bar okay and I'm the medium a medium bar finish the header okay you can see the header start here and finish there okay and if I go back to my document okay I have the header here alright if I click on the word header and the header finish there okay if I could here okay when you can see I have to type a return okay and I would like to put the main content but I'm gonna put the main content right on the same line of the header because it's that important okay I can type main okay tab all right I'm here inside I'm gonna do an enter first okay something I don't like how doing we were invent this okay I'm here inside I'm gonna put all my main content but for the main content if you see okay on this I have main class main okay but what is this space and these clear fix okay I'm gonna explain you soon okay I'm gonna type just the main because this is a very good way to design it's a hack okay I'm gonna hear why you have to work with that okay but just for now I'm gonna put here main okay space I'm gonna put that class it's not taking class alright and Maine perfect I have my main content and here inside I'm gonna put more content let's go to the side okay I'm gonna take a look here you see I have a section okay and the section start here and finish there what is this section is they feature images and also again I have these clear fix but the same thing that I have here and also here I have a dystopic then I'm gonna talk about that okay alright let's continue talking section I start here finish there okay this is the featured images alright look at my illustrator file I have this section okay that is the featured images I have to create all this element I have the featured images and inside I have a div a container alright I have the container for every single feature and then a picture at h2 title and a pair of okay let's create all the stuff okay here let's start with a featured image okay and here I have the main content and inside I'm gonna insert a section okay if you see a section is an element okay it's a HTML element that you can insert as a part of your the order of your design I'm gonna go again to illustrator if you see here I have a section with a class feature images okay in that case just type section tab okay I'm here I'm gonna put the class space okay select class here okay I'm gonna call this one feature - images okay and between the open and the close tags okay I'm gonna do one enter I'm gonna invent much better this and here inside the featured images what I have to insert is they Dave okay this container which is this one is a container of two element why I decide to create a wrapper for two picture why because you can do this also okay but what if this takes is bigger than this one and this one even be here okay at the end the order gonna look a little weird okay and you have to add a lot of code in order to figure that out that if I prefer to resolve that with two containing one continue for these two guys and one container for these two guys and soon as soon you stretch the the browser what can happen this container will go like this okay and then you can see all those elements okay like what's happening here you can see I have a wrapper container for these two guys okay I'm that wrapper container is that the div container feature okay let's create that I'm gonna show you how the code looks like okay you see now we are inside the div okay container feed is this one we're inside the section with a class feature images okay which is the container for all the feature images and now is the wrapper of to okay div class container feature okay let's go here and then inside I'm gonna type a tab okay I'm just Dave tab okay I'm here I'm gonna space class again and I'm gonna type container feature alright let's continue here inside the div class container feature okay inside I'm gonna hit enter okay another enter and here inside I had to put more information you see inside the container feature now I have to insert the feature which is one of the element is one wrapper for this picture the title and the text okay which is this one it's just one element with the rubber of this element and that element ok this is the beef feature okay all right let's go to the code and here I'm gonna put Dave okay tab again okay inside space you see we're gonna repeat this very often the end is going to be very natural for you guys to write this code okay okay feature and then inside I'm gonna hit return twice and inside again hit tab to indent right inside I have to insert an image okay if I show you the code that I have here okay it's another div that is a picture again this is the picture which is the first one is a picture one okay let me talk about this you can create this circle okay with a stroke here you can create this even for a job or English Raider and you can export that as a PNG okay but instead to do that I decide to create this drink we're okay actually this is a rectangle until it's a perfect square with rounded corners with a stroke and the image is the background okay if you're gonna change the image okay you can see I have four different images in that case I have to create one particular ID for every single image okay the code is simple to work with this kind of code okay you create an ID pick one right I did pick two I think the three and the ID pick four okay it's easier to work on this way that's why I create that is inside the feature okay deep I did pick one and I create a class okay for this div but I call feature I am gene why I did that and I do the same for this one this one for for images I did this because you can control the four images you can add the rounded corners again the stroke and see the size and everything to just one class and then you will repeat for the four images and then you can add just the picture okay I'm gonna show you that on my CSS alright okay let's go to let's insert this okay the first step here i'm gonna type Dave okay have okay here inside to the eye because this one is idea first okay I'm gonna call this one pick one all right I nearly jumped put the mouse after the quote type space and I'm gonna add a class all right and I'm gonna call this one feature I am J that is they all him that you have to do okay and if you see here inside that feature imagine okay there nothing I finished the deep there because it's nothing that you have to do did you are not I'm not trying to put text okay I'm a guy I have h2 in a paragraph okay let's do that put the mouse at the end okay hit enter type h2 tab and i'm gonna type here for example this is the title okay put at the end and then hit tab and i need a pair of of course you can do p tab and then you can type a dummy text here inside but instead to do that type p angle bracket and the world Lipson okay and automatically you will insert dummy text now he had okay and automatically you have that text a look at this we have to do this four times I mean I need to insert here inside the future okay I have this one and I have to repeat four times but look at what I plan to do first I'm gonna select on my dumb bar if you see this one is a feature okay which is here let me show you my illustrator I have one is the feature which is this element let me select the element to show you that is the feature okay and I have to duplicate these twice inside the container feature okay in that case you can go here today dumb bar I'm gonna close this right click and select duplicate okay and now you see I have two feature and then the container feature okay which is the wrapper of to feature right click and select duplicate again okay and now if you see I have all the code that I need for all these feature images okay we is pretty cool okay you can type cold pretty quick okay all right let's take a look what we have here inside the main content I have the section which is the feature images what I have next to the feature images I'm going to scroll down the featured images start here and finish there okay you can see this section feature images what I have next okay I'm gonna show you here the feature images makes that I have a article okay if you see the article is inside I have the topic one image h3 and Paris okay alright it's pretty simple okay I'm gonna insert an article with the class topic 1 okay alright let's go here I'm gonna put my mouse here at the end okay I'm gonna select here we are inside the main content okay at the same level of the featured images I'll put my mouse there okay I'm here i'm gonna type article okay you see article is one of the elements that you have as an HTML element you see is there okay and then I'm gonna hit tab okay inside the article I'm gonna if you see here okay let me show you the article the class topic 1 okay let's go back all right I'm gonna hit a space I'm gonna put that class I'm gonna call topic - one okay I think here inside and hit return I'm gonna tap much better and here inside I'm gonna insert more element one is a image okay this ID topic one image all right one is a h3 and then up enough okay let's go back here inside and hit tab to indent okay I'm gonna Dave okay tab here class okay topic 1 IMG okay and then after this I'm gonna type h3 tab okay this is the title okay okay this is I'm gonna go back just to show you the okay deep ID topic class alright it the h3 and then the P alright let's go back and put here return then P angle bracket Lipson okay and then tab and then you have the paragraph if you see I have to do the same let me show the final code here I have to do the same for the I have here for the article article topic one image with that and then they I have the article topic 2 okay with just very small change in that case what I like to do is this I'm gonna select the article to topic one I'm gonna close this I'm gonna right click and I'm gonna duplicate okay and then for the article topic one I'm gonna change here alright and just select the word one and type two also here select the word one and type two can see it's pretty simple to duplicate the content like that alright okay oh by the way then the topic - on the topic one I put this one as a ID okay I'm gonna change that okay the topic 1 IMG let me show you again here if you see the topic 1 IMG okay it's a ID the topic 1 and the topic 2 I mean gee it's an ID in that case I'm gonna change that okay instead the word class you can type just ID is that simple and here instead of the world class yes ID okay and you can do that check all right everything okay for my our second article the only thing that I don't like when you duplicate sometimes it's a little okay the indent it's not a good you have to start doing this okay I'm to double check everything indent that very well okay I'm gonna put this one also one two three okay I have to eliminate a few things here alright hit enter one okay that is much better alright I have all the main content here okay this is a page wrapper let me go to the main content and start here okay I'm finished there okay and then right underneath the main content return tab okay alright and if you see they are you know counting the main finish there and then you have the footer okay they folder with a class footer is something pretty simple okay here just insert the word footer okay oops footer tab okay then inside I'm gonna start the class footer and then he'd here return okay I'm gonna move this one like this and then inside I'm gonna put it here I believe I have a h3 you see I have a t3 right and a paragraph okay I'm gonna put here h3 tab okay this is the footer area okay tap and then do the same that we did with ap angle bracket to Lipson and tab okay alright with that we finish all the content of the website I know something is a little annoying okay because it looks too much code okay but if you follow all this instruction then you prepare different website view as soon you create more than two or three website Ben is going to be very natural for guys too cold by hand okay and also you can eat use the insert panel but I prefer to go back in because it's easier for you guys to learn how to code alright on the next video I'm gonna show you how you can add design with CSS all right I hope you liked this video see you on the next one [Music]

Channel: Eugenio

Views: 136,421

Keywords: build a website from scratch, building a website, eugenio solis de ovando, pace university, web design, dreamweaver, dreamweaver tutorial, dreamweaver cc tutorial, html5, html tutorial, html coding, basic html website, center, Adobe Creative Cloud, CERTIFICATE IN ADOBE WEB DESIGN, how to write html, html for beginners, Center for Professional Studies, how to star with html, html dreamweaver tutorial, HTML5 tags, how to build a website, website, create a website, basic html

Id: 075tazJzo4Y

Length: 38min 43sec (2323 seconds)

Published: Wed Jun 27 2018