Fundamentals of HTML, CSS, and frameworks - Dreamweaver Tutorial

- [Instructor] Now, I'd like to dive into the backbone of the web, which is HTML, CSS, and Frameworks. First off, HTML means hypertext markup language and really, it's the language used to describe webpages. It consists of plain text, so you can read it, but it also has a markup tags in these angle brackets. So, this describes to the browser what the content is that's within those markup tags. Now, some common HTML tags, you can see here. H1 through H6, you have the title at the top, the paragraph text, links as well, and then, you know, inserts for like, images and video. Things like that. This is not only for your browser, but also for search engines, so search engines know the title of the page and the content of the page. We could also take a look at HTML5 tags. Again, these were more complex in the past, but now it's very easy to read. We have nav HTML5 tag, section, footer, video, audio. So, even the HTML is becoming easier to read. Now, an HTML document is actually structured into three parts. Okay, so we have the top, which is the version type, okay? So, it's usually doctype html. That means, basically, HTML5 and then, you have the functional non-visual content. So, this is the description of the page, the title, JavaScript, things like that. References to other pages might be in there. But this is the non-visual content and then below that is the body. That's the visual content. Usually, you can read the paragraph content here. You might see references to images as well. Now, I would like to dive into cascading style sheets, otherwise known as CSS. Very exciting. First off, what is CSS? Well, it's a style sheet language used to describe the design of an HTML document. So, with CSS, you can control the visual aspects of the content, which is personally why I like it. And those styles will cascade down, so properties can get overwritten. But the great thing is is it does kind of separate the design from the actual content itself, okay? So, you'll notice right in here, a CSS style will consist of a selector and the properties. So, wherever the selector is being used, like paragraph, those properties will also then be applied, okay? So, you have the selector, which is P, and then the properties within those brackets. Now, the CSS advantages are the separation of that content from the design and what's cool about this is this can be internal to the HTML page or external from it as well. So, internally means, you know, everything's on that HTML page. External is exciting because, again, it separates it from the actual content and this gets to be really powerful when multiple pages can use that one style sheet, making all pages more consistent, easier to update, and smaller in file size. So, it just makes your life easier. Also what makes your life easier is Dreamweaver, 'cause it makes creating and modifying the CSS easy. You have the CSS Designer panel and then, you're going to have a lot of in-code hints sort of as you're typing out some of these CSS selectors and styles, it will give you those code hints. Very powerful. Now, I want to dive into sort of the next level, which is frameworks. Now, specifically front-end frameworks, they're just sort of a package made up of a structure of files and folders that kind of standardize the codes. So, HTML, CSS, JavaScript documents, et cetera. It's a framework of all these files that can be used as a basis for a site, okay? So Bootstrap is a framework that you might have heard of. Now, the aim of frameworks is to provide a common structure so that developers don't have to redo everything from scratch and can reuse that code provided. So, what an external CSS is to an HTML page is kind of what like, a framework is to an entire site. It just makes it easier to develop and usually, development happens a lot faster. Bootstrap, as I mentioned, is probably one of the more popular HTML and CSS and JavaScript frameworks for developing responsive, mobile-first projects on the web. So, it's pretty popular. It's built into Dreamweaver, which makes it even easier for us and for faster development. Not only that, there are starter templates in Dreamweaver that use Bootstrap for creating mobile-first and responsive websites. You also have some really fun drag-and-drop Bootstrap components that are available, like Carousel, Thumbnails, Video, all sorts of things that are really easy to use. So, with HTML, CSS, and frameworks, it makes it easy to create compelling content in Dreamweaver quickly.