HTML und CSS Tutorial für Anfänger | Eigene Webseite erstellenMay 20, 2022
today i will show you how you can create this website with
htmland css. The
tutorialhere is especially suitable for beginners, which means it doesn't matter if you're already on your way to becoming a professional web developer or just a little bit. If you want to create a website, you will definitely be able to follow this
tutorialhere. Today we are creating a professional website for a photo studio in berlin mitte. That means, for one thing, you can see a photo up here. You can see the logo with the letters. on the top and you can also see another one below google maps integration so you can also see on a map where the photo studio is located and here on the right hand side you can also see a little text where something about the photo studio is written so here is everything a photo studio needs and of course you can also create any other website in this way, be it for a hair salon, for a pizzeria or for a company. we do everything so that you end up with a completely finished website that you can publish in the same way, for example, to show it to your friends or to publish the first website of your business right away.
You also used
htmland css in this tutorial seriously it is simply the perfect first step to a web developer job which means if you are interested in making a career in it and becoming a web developer then this is the essential first step you should take otherwise I would say due a now straight to the computer and get started now we are starting to code our first website and good thing in advance if you start writing with html you don't really need a program for that you just need any text editor we will use this one for the initial standard text editor windows which you can find if you click here in the bottom left corner of windows the search editor finds and then selects this thing to here if you are a mac user you can simply use notepad which is already pre-installed for this just go to spotlight search we take a moment and press space and then notepad types the From what Otherwise, everything works exactly like Windows and ends with this text, so now we can write a technical text that should appear on our website. select the desktop here and create a new folder here and just name it the website of course you can name it whatever you like and in this folder we will now store all the files we need.
Now of course I would like to save what I just wrote and the first website we create we always call it index point html it's very important now that here with type don't select text files but all files now we want our file have another change no lo
ngerdot xt which is the default case with text files but dot html now i hit save and when we open the folder we just created our desktop we see there is now a file called index point html which i can now open and look at the website right in my web browser and here is the text that we really want to have on our website so fast we made our first website so now it's exactly like this editor that I didn't just show on windows but still has to change one thing here and that had to go to format at the top and then you absolutely have to select do plain text here yes if you can the system op erative it may be that Germany is your text or something like that ic I think you will find the option; otherwise feel free to ask questions so you should select yes otherwise you can't write any html code with it after we have selected everything now you can insert your html code here yes I just inserted something and now you can save everything as an html file just like him saving the windows tutorial as an html file that's desktop only you should definitely do that we'll do that I'll call it an .html index it's important there is selected eight here. firm that you can use all signs on this planet yes you do then nothing wrong ok so here endpoint html is very important and now also press save here it will be again I asked and want to write real html , is yes we don't want to create a text document we want to do html so let's do it like this we push it and now you have your html file here on the desktop with html we can now of course use this text format here when we look the mockup we see for example the app photo is on one line and berlin - in the middle on the second line we can do this very easily by entering the html command pointy brackets into pointy brackets here if now i hit enter and update all the memory and my website now i will move the website to the left and our source code to the right and now i will control that i press to refresh the page you can also press this button at the top to the left, then we will see our text in two different series.
If we just want to say that everything should be a headline, then we can just fa place ch h1 and close everything again at the end. This is what most html commands look like, they always go with a square bracket, even then there is something there and then a square bracket closes it and in the end we know exactly where. the command should finish the same construction except there is also a slash here that means we say our title starts after this command here and ends before this command here if I save everything and refresh our page we see that the text has been they automatically get bigger because a title, of course, is always bigger.
There are two types of html commands, 1 that is opened and closed again somewhere and the other html commands that are just used directly and don't have to be closed, for example a newline with a newline has no beginning or an end it's just there with these commands we can do a lot of things for example hier type text here you will find great app pics and now you could for example insert a new line here and save everything like that. I was updating and now we see the normal text being inserted here so you can build your first really simple website of course just text based and not much else if you feel like adding some more text and trying out the new commands that just know in the next step, now i would like to insert a photo on our website, of course, first we have to know which photo we want to put on our website and we have to download this photo and add it to our folder.
Just go to packs it.com. Here you can download images for free and use them on your website. just search for portrait and press enter if i look down a bit now i find i saw here many images i can also change the alignment for example to horizontal and i can see what catches my eye here now i have decided this photo here i can download it for free by going to the top right free download here I still decide for a medium resolution so that the image is not so big and then I click here on free download.
I will now add this image to my folders and rename it too happily because that will be the title image. The bed is now in the same folder as my index point html file and now I can embed this image on my website here I use another html tag for this I just put square brackets on img means image source this means the source from where we want to load the image and now my file name I called all jpg and now I put the quotes back here and close all this tag here too It's not another closing day like we have here because the headline was an image that just it's inserted at a very specific point and it doesn't represent an area so with this command here we can insert a photo on our website now refresh I look at our page and see this image is inserted here but it looks pretty good already, of course, the image is still too large and the text here has not yet selected a font so what, but for the first few minutes we are now in the client, but you have already achieved a lot if you write so much, coach, ent then of course you can quickly make a mistake, maybe you've already figured out that you did something exactly like me and forgot a quote or a parenthesis somewhere or did a slash that wrong and then made a mistake, all the code just doesn't work exactly for this reason there is software with which you can improve everything k ann than with this text editor and let's not say we download software like this just to work a little faster and most of all to commit less errors, the software that I always recommend to all the people who just started programming is Visual Studio Code which is pretty much the best software that is free to write source code, especially for what we are planning.
I'm just going to download here and I'll be redirected to the visual studio code website and now I can for windows for linux or download the software for mac i use windows in this case so i just press windows after the download is complete i just hit setup and keep clicking next there's not much you can do wrong accept the license agreement here hit continue add we can leave it selected hit next again and now click install at the end and as far as the software is fully installed we still reboot our computer so I don't start visual studio right now and then hit finish and reboot the computer we reboot our computer and open the visual studio code everything looks like this now and in the visual code Studio now we can just open the file that we just created, I just go to the file on the top right and then to the open folder and here we just I open you all the folder that we just created I navigate to the desktop and I go here to the website which is what I called all year and now I'm going to select the folder to the extent that everything is open.
Now I can see all the files that our website contains on the left hand side, so now I can click on index. html and look here is the code we just created and it all looks a little more colorful than you predicted here we can figure out s now you can really blow off steam and you can write a really cool website and the first thing I want to do is write the html code correct because what we just wrote here works but the basic structure of an html page is a little different clipping everything we've written so far pressing control iks mac users press just eat ticks that means everything we've written doesn't it's gone but it can just be reinserted with control v but there's one thing i can do now the visual studio code is particularly cool and i just hit exclamation point then enter and then we see there's already a lot of html here automatically this html code is the standard structure of all websites, as we have just seen, an html page works without this structure, but it does a this n web browser simply has significantly fewer errors and knows exactly what to do.
The most important thing is that we always write our entire html code between the opening html tag and the subsequent html tag. Yeah, that means everything we type eventually falls between what we type on line two and what we type on line 12 in cell one it just says again that our document should no lo
ngerbe a text document but an html document The next thing that's very interesting let me break it down a bit is the head area in the rear area is all the information that's important to our end but we don't see it directly that means something like text or restrooms or headlines all that is just of writing here does not go in this back area but in the body in the back there is something like for example that we want to use international characters, something like that also like European characters, German umlauts etc. that this is possible and then some additional configuration settings that are a little tricky to explain at first, but help make the screen finally look a little better on all devices and it's very important here it is the name of our website for example photo studio berlin mitte in this area now we add everything we want to display on our website, in other words what we just wrote h1 our title and then a text and an image in visual studio now we can open everything the same way we just did we can just grab this and drag it into our web browser and then let it go here and open it up alternatively we can right click here and open everything in our folder then we go here in review and file explorer the folder opens and now we can open the file as usual with a double click I'll do the visual studio code again on the right side and our website on the left side like so and now let's start with all here to code a little more professionally we have to tell all our elements that we have inserted here how they should look and you do everything with css if you create a page of internet with html then it just says what elements should be on the internet page how these elements should look is determined with css in other words now we have toin our code also include another section to say how our css code should look like and the css code you write also in this back area or in an additional file we just do this in this back area and for that we say we want to write our style here by we create this tag here that also works here and for this and between this part of the tags you can now say how our elements should look like and everything always works according to a very specific procedure we want to resize our image for example so that it always Now let's add 100% width to our image next to the source where the image should be loaded from plus a so called class attribute is added everything looks like this and here we now write whatever name we want for our image eg image could have said what our image should look like and all through this name that we have now chosen here we do up here on this style section and everything always works according to the following scheme I write a dot the name of the class we came up with so that it has - image space welded camera to the striped bracket and enter between these welded brackets.
Now I can write different. Enter the properties of our image. I say, for example, choose 100 percent and save everything here. Now I'm saying that our image down here always gets 100 percent autowidth, so if I refresh everything here, we see the image autoset to 100 percent width and scale, making our site a lot better in the next step i would like to add some links to our site as well, a link is always written in html with the so called attribute, everything looks like this, i write a space and now i say with age, death or hyperreference where everything should lead eg , could you now write here https colon google.de and then finally all the chaos code is now super smart?
It adds the element here right after our close and here I can now write what our link should be called eg google that means if I have to refresh now we insert a link here and it says google our link is called google but it looks like which leads to the address we gave in part of this thread, you can see that the html code actually always works according to the same scheme, we have a tag that just appears and then the content comes and then it goes off and so On the other hand, our day still has attr ibut that embed certain properties, for example our image has an attribute that says what css properties it should have and at the same time a second attribute that says which image you really want to embed our link has an attribute , namely the url where it should lead and at the same time is here between the link also a name our h1 does not have any attributes and a br does not have any attributes in general e n the next step now we want to change the color of our title everything works similar to the image to change the color of this text here do we have to assign a cs s class to our h1 again? that means i just write class equal to title here and now i have the option to define this title here and specify what it should look like for example i could write color and a red colon here and now on enter add semicolon behind and this will change our title color ift red we can't just specify colors like red or blue here or take our time suggesting everything but we can also go over here over color and find any colors here that we were missing today and already we can see that the colors will then come into play and be specified a little differently always in the so called rgb rgb structure which means red green blue so a certain ratio of red a ratio of green and a ratio of blue with these three imbalances that you can actually specify any color next to the header we do want to change our font we also have to import our font first and the best way To do it is just import the google font there is a very cool site called google by sven i open here i can find many fonts i can use for my website eg open sense which i always find very very nice. just select this font by pressing it and here not only can i make the window a little bit bigger our font that i would like to select i want to see all the types and versions of this font that exist here and then when i have this done i can now just copy a finished html code on the right to import it all to my site and use it there so that we not only have the font data from our computer, but we can also choose as many google fonts as we want. so i right click here copy go back to visual studio code and paste this link in my head area it's quite long but we don't have to look at it all the time if i scroll down a bit now the css buffet is there too i can tell what it looks like our font if only because we imported and linked it that means a long time not that our text has changed if i go back and refresh everything the text still looks the same as before so we need to copy this css property here and say that all the text on our buggy should now be in this font and i will do it all with css too and now just write the striped foam support here and paste the css code here that i just copied now i save everything it's very important that now we let's address our friend directly so i'll leave it here point out to the friend that there is no mistake and that way everyone automatically gets texts in this area the font we just chose is open source miram i back in our web browser i make the page go back to the left and refresh it and we can see our font has now changed just like the font we can also change the background color of to change our buggy we can just add a second property here and the names of these properties are even very intuitive, in this case the property for the background color is simply called background - kaller here I just say a colon and now I can select a color code or do it yourself Also of this rgb display color codes can also be displayed this way.
This course is often given to you by your designer or if you play around with a color picker like we see here where you can search on a color you can also view it here above, still this other representation with the hashtag and then these six letters or numbers, all worth a hexadecimal value and if you don't insert it now and refresh our page, I see that the background here has been turned slightly gray by a designer i also have for the header here color coded get the s now here too and refreshing our page again it all looks pretty good our image would look even better if it had a white frame and for that i would like put our image in another container white background has a container is one of the most important elements in html because with containers we can always tell exactly how the elements should be placed a container is always written with the html div command and so Of course, we close everything where the container ends, I always move everything right there.
I can read it better and when I've created this here nothing changes at first because a container is invisible by default which means there is now an invisible container around our image that we still need to give some properties that define the properties. of course again with css and for this our container has to be like all the other elements we want to change get a cs s class of course I'll call it image:container we create the image container class on top from our css code and now we say, for example, that the background color of this container is white.
I also want to say that the image is indented a little bit in our container so that we can see the container at all. Right now the container is automatically the same size as the content, i.e. the same size as the image, so we can't see it when I write the wedding colon, say 16px and all update, so you can see our container very clearly, the image was indented in this container here, if I enlarge our page, I can show you another trick very well, which always helps to find errors if the whole thing doesn't seem to you because maybe you wrote something wrong and you can look it up in google chrome right click on the element you want to see or its not working properly and then go to browse, if you do you can see on the right hand side sometimes the whole html structure also opens in the bottom and always the css at the bottom right Properties that we have assigned to the respective element if I now go to our image container for example then I can see very clearly how everything is structured or yeah that means our container is now clearly visible here and we can see the content because it's colored blue it's very clear what this 16 pixel stroke does it just moves all the contents of the container if I move the mouse again 16 1 pixels if I change the thing now I can do here in the web browser directly so we can see what it looks like if I increase it or decrease our padding I think 16 pixels looks pretty good at first until maybe we get to fine tuning, we can start something with which we can give this padding to all of our friend, by the way if i want to move more all the elements in our buggy i can just give our buggy the padding property that is left for example 100px.
I'll test everything now here on Chrome Off this is the next permanent here you can really only test what happens if I assign these CSS properties on the element it all doesn't save if I reload the page we can see it's all gone here I close this view cool again and restore our old layout I think it's cool if we indent our website a bit for this reason I'll just give our buggy the piding property again: 800px and right padding 100px so if I update our website now a distance of 100 pixels to the left and 100 pixels to the right and that especially when I make it bigger now it looks much better with this container you can also do many other things like create a layout a layout can help us align our elements on our website correctly for this we actually only need two different css properties once we display the colon flex, always a we set this property to our container div when we want to use it to create a layout with the second justify content command we say where we want to align the inner elements of the ddiv container on the x axis we can for example justify say content center and top left to align our elements in our container in the middle if we say depth in space of two content points - companies then the space is placed in the middle which means one element is moved to the left and the second element is moved automatically to the right if we want all our elements to be arranged to the left in the container, then we give our container div the two properties show flex and justify the content colon flex start if, on the other hand, we want the elements to be arranged to the right so we say that tv content fleck cent now we want a very classic menucreate for this we need e This command show flex and justify the content space between, so now we want to say that our text is arranged on the left, i.e. the berlin app photos in the middle and on the right various menus on the left the element to on the left we already have our h1 element where it simply says application photos berlin in the middle on the right hand side we want to display four different links that lead to different sections on our website for this we already know which tag we have to use namely press and then where is the link should lead because now of course we have five elements so once we have 1 h1 element and four elements we have to pack all four elements into another div container so we can arrange one element on the left side and one element on the right side the whole looks like this: we have an outer div container and it contains 1 h1 element which is the left orange element and gle Ta I also have another container div on the right hand side, which itself contains four links.
Here we see everything again with arrows so our h1 element which is arranged on the left hand side is the first item in our folder and the orange container is our second item and it is arranged on the right hand side our second item has four links since under the items these are located next to each other let's go back to our attempts to implement everything once we were in our project now we want to bring this google inc here to the right show more links and this funny text here you will find great app photos should go we can easily remove the text just by saying here on the bottom right that the text here you will find great app photos be removed so now we don't want this link to be a link but there are five left for example here we don't want that egg n link is there but its link here,of course it shouldn't be google google google google all the time but some useful links eg there is information then there are still prices then there is still the possibility to book an appointment and maybe you too could still disclose the location here or all because of course it doesn't say google google google google here but of course there has to be an actual link we don't have a link but we don't know where it's supposed to lead so for now I'll just give a pill anja ab used cool hack by the way if i hold alt i can press multiple lines and type here in a row at the same time on multiple lines yeah i got it now add a pill everywhere here if i update everything now it looks like this here on the left and photos from the berlin mitte app now we want one element to be on the left and this complete n elements are here on the right and we have already said that we have to put both in a container of letters and at the same time we have to say that this element is on the left and all these elements are on the right and for this all the links must be placed in an additional container again when we have done all this we will finally have in our container village 2 in elements once 1 h1 element and once contain if it takes element now what is in it or not does not interest us at first because we have a container with two lower elements, we return to the structure that we just saw in the last section and now we can just say let me explain we can give our div container the properties that one element is leftmost and one element is rightmost so let's go back to our code and give this id container a cs class s e i n enne that's just a neighbor neighbor is simply our navigation bar.
I create this cs s class and we know that if we want to create a layout we always have to give display flex first to position our elements on the x-axis at the top. now we can say tv content colon center to arrange everything in the middle let's take a look then it would be like this or we say that in our case it makes much more sense to justify the content space between which means an element is displayed on the far left and an element is displayed on the far right doesn't look that different at first, however we can see the effect if I now zoom in on the page, we see that the links are always displayed on the far right and the text is always displayed on the bottom. far left, we can't do everything just on the x-axis position, but also on the y-axis, everything is done eagerly: the elements here we can just say two points centered around d to put everything in the middle on the y-axis if i refresh now we see the links are placed here in the middle and at the same time this text is also placed in the middle which looks much better now that we get to our links of course they don't look very nice but they're still so blue and so underlined and it all looks a bit professional and it would look so much better if we added our links here to yours if we said what for a color they should have and we can just say that all elements have certain properties css as you can see here I didn't put a period before I wrote a because similar to the friend above we address all the elements with this tag in this case these four elements here now we can specify different properties for example we can set the color here we can again select an f from the suggestions color or we can use an rgb code we already received one from our designer I would use it again here if I refresh the page now we see the color of the links has already changed here I would like this underline to remove it too and I use the css tecdax decoration for that here I can say now for example to have no decoration at all now we see that the script under is gone then for example also write over readin then a line to would be over it underscore is always the default is set or much more just take a look at what is available here.
I say as I said now and therefore I just don't have css properties that take underscore or overscore and these links. I would also like my links to have a bit more distance and that's why I say everyone has a bit of headroom left for example 16 pixels updated rt all especially if I point a bit larger it looks much better and in the last step I would also like to say that our text is displayed a bit thicker and you can do it with the css property and the weight here I can now enter a number 500 600 700 higher it is always bolder or I can just enter bot here to that auto refresh the bold again and look good now our links are obviously printed in bold if you could find that about gas I could also enter 700 here for example it's a little less luminous if it's still too much then maybe 600 and I can experiment a bit with it to the point where I like it.
I would leave it all as 607 I think it looks pretty good in the next step, I want to change my links when I hover over them, so I want to convert a little below line and for that, now I can just say that a CSS property of our links it changes when I hover over it, so the mouse hovers over it. Here I can say for example the text decoration another softer one and now we can see if I go here our links are automatically underlined when I hover over them that's because this css property is applied every time I have it there, for example, you can also change the color or just test the font thickness by entering new properties here add and this semicolon at the end is very important, don't forget here if a css property doesn't work the way you expect it to does in the tutorial, it's usually because of a missing weakened bracket or semicolon yes that means if you have that problem, please double check very carefully, did I type the command correctly?
I've made a colon at the end of the line and put the welded brackets correctly in the above classes which by the way we can also edit individual parts of our text and change their special properties again if I just want to change this Berlin-Mitte here for example , then I can wrap another element around the word berlin-mitte, the so-called spam spam is exactly the same as a container div, but only for text, so it doesn't automatically start a new line or something, just created a wrapper around our text it doesn't see any difference here if i update everything but now i can add a new class here for example and just changing the properties of the word berlin-mitte i can say text highlighting or something like that eg you can think of it whatever you want to call it and then this cs class s here create text:highlight at the top which made me do everything now i can just create a color eg all colon this color here I just chose and when I refresh everything we see the color has changed here you could also do that from zeiss so increase the font size and you can specify 24 pixels for example I do that we can see that the font here is smaller ok let's do 40 pixels for example and we can scale this a bit around each other maybe 48 is pretty good as there is another one just to experiment a bit that the length is almost as wide as the word app photos maybe something 46 yeah let's take a look at 47 and then we're pretty good yeah it looks pretty good all thing app photos berlin please after you've done all this here we're going to look further down of course you there isn't much yet and it would be great, if we now add more elements to our page I would like to be able to add another container in a different color below this image here for example so I just write here for free and here I would like to write on you xto for example individual app images 30 minutes and saves everything so when I update it now I see the text here as of course not very nice I'd like to optimize a bit and for that I give my des container a class again and call it eg text container and smoother than if i now go up here in the style i can also specify more properties for my text container here eg the background calendar of this container and specify this color here, for example do you have to update it now it looks like this now i want to indent the text a bit so say I for example stroke two points eight pixels like in the picture so everything is indented a bit too I I would like to change the color to my standard color and at the same time also change the weight of my font, for example to 600, we update everything and it already looks a bit cooler, but we would also like to remove the distance between the image and this box q ue we just created here for that we just go up to our image yeah we have that up here and you have to add a property there our web browser is very very smart and it says I probably want to have a space between the image and the next element without ever saying it, if I don't want that, I have to be very explicit about it. what I want and want to say that everything is like a block between them, it is always ordered and that's why I only write here display colon blog that will be there Everything here is now organized like a blog without any space between each other and it looks very good.
I would also like our image not to be as tall as it is now, but a bit less tall and that's why I say haid here. , for example, and limit everything to 200 pixels if I now store everything the image is a little smaller, I might even like it a little bigger again at 300 pixels, but we can clearly see here that the image is distorted. Of course, I have to change everything. There is a command. The image is rectified again. This command is called object center, but if I add this command here and save everything, we see that the image here has been automatically rectified because now we've said that. the image should be 300px tall but our image here is much taller something is automatically cut off at the top and bottom now we can use the object position command to say well which part will be cut off if i say the position of the top object for example then the top section is shown and the bottom section is cut off looks much better you can also enter 50 percent 50 percent here for example to have exactly the middle of the image and if now here for exampleIf I input 20 percent, it means our image is now shifted on the y-axis in such a way that 20 percent was pushed down if I input 25 percent, for example, it goes up a bit more if I input 15 percent here .
For example, if you scroll down a bit again, you can find a pretty good section of the image here. Now you can increase everything a bit to 400 pixels. It really looks the way I like it and I think I'm very happy with it. which looks great here with the next step i really came up with something special and i would like my location to show like google maps down here means now there should be a map down here showing the current location of mine and everything works more easy than i thought so i went to google maps just maps.google.de and then you can find a link here look for different locations at the top now i have chosen the german museum in munich for example by the way the location where the first computer that was built is ok here now you can display this section just by pressing divide press divide go to embed into map and here is a so called iframe yes i can just copy this html code and now i can paste this code completely on my site.
I can go in here and say ok, paste this code here and with that I have Google Maps on my website, that means I just upgraded and below here we see Google Maps embedded. I'll do the whole thing a bit more, fans, and I'd like to have a container where not only Google Maps is embedded, but Google Maps is embedded on the left. and on the right side at the same time text is included so the link container should be bigger than the rec hte we need another O2 container below the elements and I just create this container and name it as a google class or just maps; closing the container helps again and here are two rows under the elements one my iframe and one plus eleven other containers the other div container will be a text container again so I'll write plain text here again: container and it should look exactly like this wrapper where it says individual app pictures in 30 minutes so i won't change anything here anymore now it should be a bit of a day it has to be something like a professional app photo to be successful on the first job somehow it was a bit a trick and now that we've done it we still have to style everything at the moment it looks the way we want but let's put these two things next to each other and we know how to do that i put a kla sse for my container here where both google maps and this image are and now having created the container i say the elements should be displayed side by side with display flex and e The free space between them should be shown so justify content base between I days updating everything nowit seems like all i can do is say how big my right container is and how big is my left container for that i just say the text container should always be 30 percent or something like that put the class in the pecs container I already have it down there and now the problem is that I just want to give this container here and not the container here above where there are individual application images in 30 minutes so I assign this text container here a second cs s class and the second cs s class I'll just call the website the rights container and if I do this here create at the top I say the right container also has the property rolf colon 30% I save everything and now I see the right container here is 30 percent of our width and here this google maps thing that we've auto-embedded has the remaining width it all looks great but we can still do it a bit better for example I'd like these two elements new items that we have now added have a space on top so this map container here should still have a little space with the container above and that's why I say margin top here for example 16x let's see what it looks like it looks pretty good yeah i would also add a space between these two elements here and that's why i'll give the right container a space on the left which you do with it left margin also 16px refresh everything and it looks now it looks really cool if i do this page a little bigger, so we have a little problem, that's how it works, but if I make it even bigger here, we'll see that the distance here increases and there's a reason for all this. if we look at our code again i'll make everything a little bit smaller yeah so we can see here very very clearly that our code from google that we copied also has the width parameter call and here we say the width is 600 pixels which should to do is not to define this width here in the html part because you can only specify the pixel width here, but to define everything with a cs s class in general we never say how wide something should be or how tall something should be in the html part but always in the css part i add this iframe here a class just call it map frame we can also get the height right away and also define the css part because this is the same style here and also here the style is the same as border colon 0 we can also pack that into a cs s class so our code is much cleaner again ok so we go back to the top and if this class we just said were maps - marc or for our autocompletion, we would have put maps in twice now, let's not pop them out again and said border colon 0, which just removes a randhir that would otherwise be present in an iframe, then we said our height is actually 450px , I just scaled everything down to 350 now I think they look even better and then we said our width is now only 600 pixels I say instead full width 70 percent because the right section is 30 percent and the left is 70 percent cent, so everything has the width you need and if I use the g Anze now draw more width here.
I see the iframe scales automatically, it always is so the left section is 76 percent wide and the right section is 30% wide, so it looks really cool perfect now that we've done it. if you could already say that the page is ready it is not yet fully adapted for mobile phones you would have to do one or two things differently I would not do that for now although you can also add more sections here below, for example one the page at the top The bottom usually has another container where a link to the print is provided and a link to the data protection statement etc so just some more legal stuff which means what I'm going to do now is just another on the bottom under this image container with the white border here div container to embed and the war is cool too if i just lie to you - co i try like this and here i am writing eg copyright 2021 no idea send a email john terry gmbh yes some random or imaginary company hopefully the company doesn't really exist so i would just add a link to the print here again atef we don't have one footprint for that i'll give it on the lute write footprint here and then maybe another link to data protection by the way i've made a dividing line between them i think it always looks great with links you just do by pressing this button with that too you can do this brackets type press big-alt which is the one to the right of the spacebar ok let's take a look at everything it probably doesn't look perfect yet because this container doesn't have any css properties yet, just the i will distribute in the big here is the content with the properties of this container defines here i go so just put a new css class here and say again we want to have an eight pixel stroke to make everything look better what can still be done do here easily put a little container around here then maybe it will look a little better again and now we can give this container a class to at least compensate this strange distance, which is greater here than in the other.
That means I'll say here again briefly that it's the same thing: text and just add a little bit of margin here again just add a new class here right margin 16px for example I update everything and now we also have a distance balanced here of course you could change everything somehow with the font size and maybe bring it to the middle or something but you can also do that as a general homework of course there's still a lot on the s side to do you could, for example, put the prices on the page you could, for example, add a programmer or something here you can also bring more information to the page there are still many things to do and only one the task is dense because I watched this video try to develop this page further just try to add more sections add some distances i'll give it a try because that's the only way you really learn the odds independently in the end l of the day if you don't just follow what someone says in the tutorial but do things independently try to try and best to try these things until they work and if they don't work find a contact person who can help you . with it is usually so that you very quickly get to this point where you just can't get any further on your own and that's exactly why we offer our far education where our participants not only schedule tutorials but are in contact with our trainers all the time and they can share their screen there all the time they can submit their droppings and always get individual feedback very quickly that's exactly why we're like so fast and nimble it's all interesting so click the link above in the youtube description and otherwise I say have fun with the client try to implement everything see you in the next video take care of your junos.
If you have any copyright issue, please Contact