Learn about the fundamentals of important technologies like HTML, CSS, and front-end frameworks like Bootstrap.
- [Narrator] I'd like to start off with the backbone of the web, which is HTML, CSS, and Frameworks, which includes other technologies. But starting off with HTML. What is HTML? Well, it's just a language for describing webpages, and it really consists of plain text, so we're going to be able to read it, and then that text is actually surrounded by markup tags. So we can see the text, my webpage, and then the tags just say that it's the title, and actually, we'll put it in the title of the browser.
Now, some common HTML tags, title, h1, actually through h6, paragraph, href which is a link, and then image source. These are all very important. In fact, even when it comes to the section headings, know that a lot of this content is actually read by search engines. So it tells search engines what is important, as well. So it's going to know that h1 is the heading, and will deal with that accordingly. Now, some common HTML5 tags are header, nav, section, footer, video, audio.
This stuff is really cool, and what this helps is kind of structure the page because in previous versions of HTML you use the div tag a lot and it was just nondescript. But now we can use things like section, and like aside, and like nav, and it's just more descriptive, not only for us when we're developing a site, but again also for search engines. Now an HTML document is structured into three parts. There's going to be the version type at the top. Now when it says just HTML, it means HTML5.
And with this CSS you can control all visual aspects of the content. In fact, it really consists of a couple different parts. So on an HTML page, we might have this paragraph tag. Okay, so there's my paragraph content, and then I can have CSS associated with it, and this CSS has a selector which is the P, paragraph tag, and then the various properties like color, font family, font size. So, what happens any time I use that paragraph tag, it will make it red, give it that font family, and that font size as well.
Now the advantages of CSS is that it enables the separation of the content from the design. Just makes it really easy, especially as you get into mobile you can apply different CSS on a mobile device versus a desktop, and it can be internal or external from an HTML page. Sure you can have CSS that's internal, sort of on that same page which is great, but external really is typically the way you want to go, because that CSS can be modified and applied to multiple pages.
When they're applied to multiple pages, it makes all those pages just more consistent, easier to update, and actually smaller in file size, because they're all referencing that one CSS file. Now, Dreamweaver makes creating and modifying CSS easy using the CSS Designer panel which is on the right, and then even within the HTML page there's code hints and you're able to edit that CSS directly in there. But I like looking at the CSS Designer panel because it will actually tell you what's possible with that text or that paragraph tag in this case specifically.
So again, straight from file new, you have your starter templates that you can pick from and then start modifying. Now, if you are going to be developing a site say from scratch there's also drag and drop Bootstrap components, which is what we're going to be doing is kind of picking and choosing what we want to use, the Carousel for instance, Responsive video, things like that. And that way we don't have to worry about modifying all of this Bootstrap content. It's really we're taking what we need, and then building our site from there.
It's really powerful. So, with HTML, CSS, and Frameworks like Bootstrap, you can really create a compelling, fully functional site pretty easily, all thanks to Dreamweaver.
- Understanding the Internet and websites
- Adding HTML content to a webpage
- Styling content with CSS
- Creating navigation
- Adding more pages to a website
- Creating a flexible layout
- Linking to other pages and websites
- Creating a contact form
- Creating a responsive site for mobile devices
- Uploading and testing the website