HTML & CSS for Learners (MEGA Free Course!)

On the finish of 32 classes (greater than eight hours of studying) the place we cowl all the things from primary HTML components to working with Flexbox and CSS Grid, you’ll check your new abilities by constructing an entire net web page.

1. Welcome to the Course! 

Watch video lesson [0:00] ↗

It is a large course. It begins with HTML; the markup language which defines the construction of net pages. Then we transfer onto CSS which is a “declarative” styling language. It’s what we use to make our web sites look fairly. Within the ultimate classes we’ll use our newly acquired data to construct a easy net web page.

On the finish of the course you’ll additionally obtain some workout routines as “homework”. I extremely suggest you do these as a result of they’ll assist you assimilate all the knowledge I offer you much more successfully. Obtain the information you want beneath:

Obtain Course Recordsdata Obtain Task 

2. Stipulations

Watch video lesson [3:48] ↗

Relying on the type of coding we’re doing, we’d want completely different instruments. On this course we’re studying about HTML and CSS—languages utilized in front-end improvement (the presentation layer guests see). The instruments we’d like are subsequently fairly easy:

Let’s have a look at some choices.

3. How Web sites Are Loaded 

Watch video lesson [13:00] ↗

Have you ever ever requested your self what occurs while you kind an deal with into an online browser and press Enter? You kind within the URL, you hit enter, and the web site is loaded. However what occurs behind the scenes? Most individuals wouldn’t give it a second thought, however I feel it’s essential to grasp this course of as an online developer. All of it boils right down to Consumer > Server Communication. Let’s have a look.

4. What’s HTML? 

Watch video lesson [24:36] ↗

Earlier than we are able to begin writing HTML code, we have to know what HTML is. HTML stands for HyperText Markup Language and it’s the code that defines the construction and content material of an online web page.

It’s really fairly straightforward to work with. We have now entities known as tags which you employ to wrap numerous elements of your content material with. Let’s have a look at some examples.

5. Let’s Create an HTML File 

Watch video lesson [30:42] ↗

You may create an HTML file in just about any textual content editor, however I like to recommend you employ one of many devoted code editors I discussed earlier. I’m going to be utilizing Visible Studio Code, however you need to use no matter you’re most comfy with.

Let’s create our first HTML file and find out about its construction.

6. HTML Components and Tags

Watch video lesson [42:45] ↗

I’ve briefly talked about HTML components in a earlier lesson, and earlier than we transfer on I’d prefer to make clear one thing that would (probably) be complicated: the distinction between an HTML aspect and an HTML tag.

7. Inline vs. Block-Stage Components

Watch video lesson [50:07] ↗

To know how inline is completely different to block, you have to first perceive how content material flows in an HTML doc. This lesson will make the distinction clear.

9. Textual content-Associated Components

Watch video lesson [1:08:00] ↗

If you consider it, a lot of the content material inside a given net web page is textual content, which is why HTML offers us quite a lot of text-related components. Headings, paragraphs, and hyperlinks are just some examples. On this lesson I received’t go over each single considered one of them (we’d be right here eternally) so, as a substitute, I’ll cowl probably the most generally used ones.

10. Separating Content material With Breaks

Watch video lesson [1:30:23] ↗

Who’s prepared for a break? Effectively on this lesson we’ll speak about separators (which we use to separate content material), the technical time period for which is break. There are two such components in HTML:

Let’s have a look at which is which, and what we are able to use them for.

11. Utilizing Lists

Watch video lesson [1:36:24] ↗

HTML has three checklist components:

On this lesson we’ll focus on the primary two as a result of they’re used probably the most.

12. Working With Pictures

Watch video lesson [1:47:15] ↗

There are a number of methods so as to add photos to an online web page, however the best one is utilizing the <img> tag (or as specialists seek advice from it: the picture embed aspect). Let me present you the syntax and the way to use it.

13. Utilizing Types and Buttons

Watch video lesson [2:04:31] ↗

Types are important parts in HTML as a result of they permit for person enter. Take into consideration how you employ a login, or contact type; you enter your info, press a button, then that info will get submitted to be processed in numerous methods.

HTML has a <type> aspect, however that’s simply the tip of the iceberg.. The shape aspect by itself is ineffective. We have to populate that type with different form-related components like inputs, buttons, and textual content. Because of this kinds are arguably probably the most complicated parts in HTML, so let’s see if we are able to clarify them merely!

14. Displaying Tabular Information With Tables

Watch video lesson [2:45:22] ↗

Within the early days of the online, tables have been used extensively—they have been all we needed to make layouts. Cells and rows, nested tables inside different nested tables. It was a large number, as a result of that’s not what HTML tables are for.

Fortunately, these days we’ve significantly better choices for creating layouts, and we’ll focus on these within the CSS chapters of this course. This additionally means we are able to keep on with utilizing HTML tables for what they have been all the time supposed: displaying tabular information. On this lesson I’ll clarify the syntax and the way we use tables.

15. HTML5 Semantic Components

Watch video lesson [2:54:12] ↗

Let me shortly introduce you to “HTML5”. HTML5 refers back to the newest model of HTML which was launched again in 2014. Nevertheless it additionally represents a wider array of applied sciences like enhanced JavaScript APIs, multimedia assist, new video codecs, and much more.

Among the many modifications that got here with HTML5 we discover a few new HTML components, recognized formally as semantic components. Predictably this checklist is kind of massive, and there’s no level in studying all of them now. As an alternative, I like to recommend you concentrate on a handful of probably the most generally used, like these:

• <header>
• <footer>
• <nav>
• <apart>
• <principal>
• <article>
• <part>

On this lesson I’ll clarify what every one does and the way you employ it, however to start with, you’re most likely questioning “what the heck is a semantic aspect?!” Let me go away you with this earlier than you try the video lesson:

16. What’s CSS?

Watch video lesson [3:01:59] ↗

We’re three hours into this MEGA free course, properly accomplished! Let’s now take issues to the subsequent degree and find out about CSS. However what’s CSS?

CSS stands for Cascading Style Sheets and it’s a styling language. It tells the browser the way to current an HTML doc to the person. You may additionally have heard of CSS preprocessors like Sass and LESS, however I’ll clarify all about these on this lesson.

17. Including CSS to an HTML Web page 

Watch video lesson [3:04:39] ↗

There are 3 ways we are able to add CSS to an HTML web page:

Let’s take a look at every, and see which one we must always use for various conditions.

18. Utilizing CSS Selectors

Watch video lesson [3:11:59] ↗

The best way CSS works is fairly easy: you inform the browser which components you wish to model, after which the way you wish to model them. The primary a part of this course of is completed with CSS Selectors, the second half is dealt with by CSS Guidelines comprising properties and values (one thing we’ll speak about within the subsequent lesson).

Let me clarify the anatomy of a CSS selector, and what sorts of selectors you need to use.

19. Working With Shade in CSS

Watch video lesson [3:29:37]] ↗

The primary types you’ll be making use of in CSS will possible be color-related. Shade is in all places—from textual content, button backgrounds, part backgrounds, to frame colours, and all the things between. There are all types of how to use shade in CSS, however on this lesson I’ll present you two properties you’ll be utilizing 90% of the time.

20. Let’s Uncover the CSS Items

Watch video lesson [3:40:49] ↗

As you be taught extra about CSS properties you’ll understand that the majority of them have numeric values hooked up to them. Most of those numeric values even have items, in the identical we we use items of measurement in daily life (shopping for 1L of soda, or 2 kg of potatoes, for instance).

The items we use in CSS pertain to the display surroundings, similar to px, em, rem, % and so forth. Let me offer you a fast information to the items we’d use in CSS, plus the place and the way to use them. 

21. Styling Textual content With CSS

Watch video lesson [3:54:36] ↗

Styling textual content in CSS is one thing you’ll be doing very often, as a result of (as we’ve mentioned already) the vast majority of a given net web page is normally textual content material. CSS offers us some nice instruments to model textual content in just about any manner we wish, and on this lesson I’ll present you among the extra generally used properties for doing so.

22. Setting Dimensions in CSS

Watch video lesson [4:10:08] ↗

Sooner or later in a CSS challenge you’ll have to put in writing some types to make a component larger or smaller. Fortunately that’s tremendous easy to do, and in CSS we are able to even outline minimal and most dimensions.

23. The CSS Field Mannequin

Watch video lesson [4:20:46] ↗

The very first thing you must perceive in regards to the Field Mannequin is that all the things has a field round it. From photos, to paragraphs, headings, and spans. 

These bins aren’t seen (except you intentionally model them to be) however they exist, and so they have an effect on the stream of all components round them. 

The second factor you must perceive is that every field is definitely constructed from a number of different bins:

We’ll go over the field mannequin intimately throughout this lesson, however to summarize:

• The content material field is the world the place content material is displayed. Its measurement may be managed with the width and top properties.
• The padding field is discovered exterior the content material and provides whitespace. We will management the dimensions of this utilizing the padding properties.
• The border field wraps the content material and any padding we add. Its measurement may be managed by way of the border properties.
• The margin field wraps all the things: the content material, the padding, and the borders. It provides whitespace round the entire aspect and its measurement may be managed with margin properties.

24. Working With Borders in CSS

Watch video lesson [4:45:44] ↗

The third field within the field mannequin is the border field, and you may management its measurement and types utilizing border properties. Let’s take a more in-depth look.

25. Utilizing the Show Property in CSS

Watch video lesson [4:55:25] ↗

Earlier than we begin coding we have to perceive the 2 show sorts: interior and outer.

26. Styling Lists in CSS

Watch video lesson [5:05:04] ↗

Lists are quite common in net design. You should utilize them to construction an ingredient checklist in a recipe, a desk of contents, navigation, and so forth—they’re very versatile. However what sort of styling are you able to apply to them? Are you able to do away with, or change the bullets? Are you able to show lists horizontally? Let’s discover out.

27. Positioning Components in CSS

Watch video lesson [5:15:56] ↗

That is most likely one of the crucial burning questions relating to CSS: “how do I exactly place a component?” The reply to this, and plenty of different format questions, lies within the place property. I’ve ready a number of examples within the demo information, so let’s have a look at them and discover several types of positioning.

28. Styling Backgrounds in CSS

Watch video lesson [5:30:22] ↗

HTML components can have two sorts of backgrounds: shade and picture. We’ve already lined shade backgrounds in a earlier lesson, so on this one we’ll concentrate on photos. Pictures on this context can really imply considered one of two issues: a standard picture, or a CSS gradient. So with all that laid out, let’s dive in and take a look!

29. Constructing Layouts With Flexbox and CSS Grid

Watch video lesson [5:52:10] ↗

Flexbox and CSS Grid are two of probably the most highly effective instruments you need to use in CSS to create layouts, so it’s actually essential you learn to use them. With that mentioned, they’ll each be very complicated—I may report a number of programs simply on Flexbox alone. I don’t suppose both of those matters is appropriate for a inexperienced persons course, nonetheless, given their significance, I provides you with a brief introduction to present you a really feel for what they’ll do.

You’ll discover I’m bundling these two complicated issues into the identical lesson. That is so you may see the variations and achieve an understanding of which is best suited to completely different conditions.

30. Working with Media Queries for Creating Responsive Web sites

Watch video lesson [6:19:43] ↗

A responsive web site will change its format and habits primarily based on the medium it’s being displayed on. A responsive web site will subsequently seem completely different on an enormous display, to the way it seems on a cellular display. This was as soon as a novel idea, however is these days accepted as being the logical, regular habits of a web site.

CSS offers us all types of instruments for responsive net design, arguably strongest of which being media queries, which we’ll uncover on this lesson.

31. Let’s Code a Easy Design with HTML and CSS

Watch video lesson [6:32:37] ↗

Now it’s time to implement all of the data we’ve gained on this course, by doing a easy train. We’re going to code a primary net web page utilizing HTML and CSS.

I’ll be working from a Figma design, which you’ll entry as properly, and I’ll basically be exhibiting you my means of coding an online web page. I’ll be going fairly shortly as a result of I received’t be explaining every aspect or model that I’m utilizing, however you all the time have the pause button!

Right here’s what we’re going to work from:

32. Conclusion and Homework

Watch video lesson [7:46:03] ↗

Initially: large congrats for making it to the tip of this huge free course! I hope you discovered it helpful and that you just realized one thing invaluable.

I understand I’ve given you a ton of knowledge in a comparatively brief period of time, so when you discover you haven’t been capable of soak up all the things at this level, don’t fear! I actually don’t anticipate you to. It took me years to be taught all the knowledge I’ve shared right here, so the very best factor to do is simply maintain training, continue to learn, and maintain constructing these abilities!

Homework

That will help you enhance I’ve ready some homework for you, which is mainly a sequence of smaller workout routines.

HTML & CSS Tutorials on Tuts+

To proceed your studying, check out these HTML & CSS sources on Tuts+.