KreativePro Masterclass
Hello, {first_name}
Intro to HTML & CSS
Learn to Build Websites with Craft Cms
Oops! Something went wrong while submitting the form.
Browse Lessons

Access our premium community including bonus tutorials, project files & weekly resources.


Intro to HTML & CSS

On this Craft Cms lesson we'll run through some basic HTML & CSS to prepare for the Twig Syntax used throughout the course.


Being the best means investing in the best, no matter what level you are at, this course will take you through the entire process you need to be able to implement an idea and turn it into a fully functional business.
Manasés Padilla
Photographer & Entrepreneur
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
Noel Hale
Founder of Slush Monkeys®
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
Mae Green
Product Designer @ Dropbox

All right guys. Welcome to the intro to HTML and CSS. If you're familiar with these languages then you can go ahead and skip this lesson, I'm just going to give a simple overview of how these HTML tags work and how we're going to be using that in our course in craft CMS. Now we don't need to know advanced, all the advanced terms and elements, but it's always good practice to have a basic knowledge of how this works.
So what I mean by that is. An HTML document or a webpage is built as a skeleton and holds information of the website. So something like content will live in that page. And we can see that structure in kind of three ways. Right. So you have the head. You have the body and you have a footer and similar to that mentality work similar to how we want to think about HTML.
Right? So in the head of the document, we want to be able to contain or pull all the styles. So that includes typography colors. So it's going to, it's going to have the styles. So the style sheet is called a cascading style sheets and what it does just prettyfie. Right? So it ads, colors, buttons, and typography and all the extra stuff like spacing and margins.
The second pillar, I think it's content. And that is of course the actual data that we're going to inject through craft or through web flow, all that content it's going to be populated there within the body tech.
And then finally, any interactions like making a pop-up appear, adding  animation or parallax and any, all that stuff will live in a JavaScript document that can be pull separately.
And the reason I put this here is so you understand how the Dom works or in this case, help Chrome kind of loads pages on the browser. It typically first reads from top to bottom and it starts with the styles. Then it moves into the content. And then finally the interaction at the very end.
It's important is because we want the pages to load fast and load very smoothly. Let's take a look at how an HTML document should be laid out. I've created a very simple kind of HTML document here with very simple tags. And if you want to learn more about all that cool stuff, HTML has. You can check out the
So in this example, I've created here, I've based it out of just the main structure based on these HTML boiler plate. If you go in here, you can download the source, what it will do is give you a set of files in this case, the standard template of an HTML, how it should be laid out. Notice how I have here in the head all the style sheets, it has the meta-tags for open graph, it has some of the description that, and things that will all live in the head of the document. This will not be visible to any user it's just for the browser to understand what kind of information this page is about and where the style sheets are being pulled from.
Also, it gives us the structure for where the scripts are, notice how they also have the scripts at the very bottom. What I want to take a look at is the CSS, the normalize, and the main, the purpose of these CSS templates that they give you is to reset some of the things that the browser by default ads, right?
So sometimes the title tags have some extra additional margins, the body has some extra additional margins and padding, boiler plate is perfect because he resets everything so it adapts to your design much better and that way you won't have kind of bugs coming in and out, not knowing why something is happening, but it's probably because the browser is overwriting all those styles.
So yeah, it's always good practice to use the boiler plate. Go ahead and check that out. And let's take a look at what I've created here. Okay so first thing is on the very top, we have links that we want to have aligned to the left and then a little article on the right, the way I've done that is using it the old way.
And here you can see, section is one of the elements from HTML layouts and within section, we have the aside. So anything that goes on the side and an article, the article is going to contain all our content. So the H1 tag the paragraph tag, it's going to have a block quote tag and a link tag. So you can see here, there's actually a link which has attributes too a source. Right? So in this case, it's going to link to Google.
In the style sheet, the way this is done, we're going to see that the aside container has a width of 50%. And the float of left and the article has a width of 50% in a float of right. Typically what you could do is you add section and then asterisk.
So you can add a border with style sheets and notice what I did is just create it at border, but then it automatically broke the layout. It's no longer completely aligned to the top. And the reason why is because the float element of the cascading style sheet is the old way of how things were built a few years ago.
Now with flex, this is a new, different way of using styles, which allows you to add borders across any segment on your element and the box model helps this structure stay within and aligned, even though it has the borders around it. So for example, how does the flex work? Right? So let's take a look at the flex.
If we look at the HTML here, and we open up the flex section, we have a dif glass called card. And within that container, We have a series of other elements, including an image that's contained within a figure element. And then we have an H2 some paragraph and then an order list. So what I did is I just duplicated this class "card" and just copied and pasted. And since we have that insight and primary container called section, we can then reference this section using an ID. So there's two ways to actually reference something in the HTML. You can reference with an ID or by adding a class. What is the difference between each? Basically ID is going to reference a singular element and it will be used only once.
And then versus a class, it's something that can be repurposed and be used multiple times across a larger project. Right? So in this case, I'm just referencing ID flex, and I'm setting that display attribute to flex, and that automatically will turn any element within it into a flex element. So floating it and making an adding well, the margins automatically.
And then the card, all it has is some padding around its container, right? So that it can have some spacing between each card.
Forms have a series of children that we can use to start stablishing kind of information that we want to pull from the users or information that we want to pull from the application.
In this case, we have a group of fields in each field has a different kind of label to it so that you can see what that field is requesting. So in this case, the first name is the label first name, input field text is asking for type of information in the text string, right? So radio where you can select one or the other, and you can learn a lot more about these HTML forms in the website,
Another form type that we have is a drop down menu or a drop down field. It has a label, so choose the card just like we saw previously, it starts off with the select tag and inside of the select tag, we have multiple options. So option, this value is what's gonna be sent over through the form action. So if we look at the form action on the very top, this action typically links to a server document or a PHP that just sends that information and do something with it. Right? We'll see a lot of that in craft.
All right, and then finally we have a message field, which is a little bit different than input because the actual text area field does require to have an opening and closing tag. As opposed to an input field, which doesn't just the input submit, which is basically a button that will submit the form over to that script.
So yeah, these are kind of the very basic tags that I want to, I want you to get exposed to because we will be using a lot of the form fields when we get into more advanced craft.
Alright, cool. I'll see you in the next class.

Coming Soon

Designers ultimate weapon of choice
Digital Media Masterclass by Neftali Loria

Neftali Loria

Author & Instructor
KreativePro Masterclass Bundle

Access our premium community including bonus tutorials, project files & weekly resources.

Welcome to the Tribe! 💜 Something cool is coming your way...