HTML and CSS for beginners – Webflow web design tutorial

HTML and CSS for beginners – Webflow web design tutorial


When you visit a webpage, when you’re looking
at the actual content? What you see on the screen is your browser
making decisions based on what’s in your code. And what happens to all this code? Well, the browser uses it to render the webpage. It uses this information to display what everyone
ends up seeing when they load up the page. And sometimes the best way to get a feel for
this type of interaction is to start from a website you already know. Most browsers will let you go in and inspect
the code for yourself. And when you change that code? When you go in and make a change? The content in your browser changes as well. It’s enormously fun to test that relationship
between the code and the rendered content, but of course, when you refresh, all your
hard work goes away, because you’re only making the change locally. You’re only changing it in your browser. A MacBook Pro, a Surface Studio, an iPhone,
an Atari 2600, an iPad…..What do four of these have in common? They use this type of code to render web content. And so does every modern computing device. And with this type of code, there are two
primary components that we’re going to start with: HTML & CSS. HTML is generally used for content: it tells
the browser what’s on the page. Headings, paragraphs, links, images — you
name it. And back in the day, we used to style all
this content by hand — all sorts of simple things, like if we wanted to change our font
family, or color, or size — we used to style it inline — inside the HTML. And if we wanted other elements to look like
that—if we wanted something else to have those same properties, we’d have to copy that
code again. And again. And again. And you want to make a change or add something
else? Well now you have to go through each inline
style by hand…not very efficient. Enter CSS: the greatest invention in the history
of the world, except for any invention that might be better. Like the wheel. CSS takes all that styling information — colors
and borders and size, positioning, typography, so much more — it moves all that info into
a separate style sheet. That way, any of those elements in our HTML? They can call that information — elements
can reference those styles…any time. Make a change to that style? It affects any element that’s using that
style. So you have your HTML: everything dealing
with content…and, you have CSS, which we can use to style that content. And the relationship between HTML & CSS is
that simple. And back in the early days of the web, we
only had to know the most basic tags and attributes, because that’s all the web was back then. Time went by, and the internet really started
growing up. Devices changed, and the way we interacted
with the web became more personal. And as all that happened, it became necessary
to retool. As the possibilities increased for what we
could build as designers and developers, so did the complexity of everything we had to
manage behind the scenes. Now what does this have to do with Webflow? And why all this talk about…HTML & CSS? And why are we covering them? Well, because HTML & CSS serve as the primary
foundation. This is the starting point from which we can
build anything. What we’re covering is a way to move a lot
faster and more efficiently. By visually creating and manipulating this
content, we can directly interact with our HTML and CSS and everything else. And even if we’re proficient in all these
areas, we’re not having to spend so much of our time. Instead of sketching and outputting prototypes,
and going through step, after step, after step in the development process, we’re outputting
production-ready code. So you can take even the craziest ideas and
make them a reality.

19 Comments

  1. Hey, thank you for this video! There aren't a lot of videos explaining that. But I have a question: What is the best Browser for MacOS in your Opinion?

  2. I am into Webflow for some days now and I am also a professional video and motion designer.

    Maaaaaaaaan…. This tutorials are absolutely awesome and a great job!!!! Love the voice over and all the nice gags and funny things that come with it, keeping at the same time a really professional storytelling line to get to know the simplexity of the webflow tools.

    Great job guys! This is awesome. Thank you so much for putting so much love and effort into this project.

    Customer aquired!

  3. Hi, I came across Webflow a few weeks ago, I've been trying to get answers to some questions. I am confused and need help.

    I'm a novice, learning Html and CSS at present, I wish to learn Web Design but I am stuck and confused about the actual process, the whole workflow steps, plz excuse me for my ignorance but I would appreciate your sincere reply and advice.

    I am trying to work out how Webflow actually fits into the Web design workflow?

    I am learning responsive web design at present and about to take a hands-on in-class short intensive also. The backend is what scares me.

    I heard that Webflow takes care of the Backend, is this true? If so then how exactly? By saving the headache of coding with PHP and other server-side languages? Is it as secure as a Web Dev doing the backend programming?

    Does paying for a Pro plan Account mean we are able to make an unlimited amount of projects with white labelling (Webflow logo taken off- which I think the forums explain how after the upgrade) and be able to export the source code from unlimited projects when they reach the end stage, then we can customize further after taking the source code? Is this correct?

    Is it true that you also give the option to host the project on Webflow then ONLY we pay hosting for each project? Does this fully secure the backend of the site, completely? No backend coding needed? Is it that simple? And apart from that we need to buy a domain name only? Is that it? Excuse me for my ignorance, just confused as I thought I would either have to learn to become Full-stack or either learn enough for Front-End ONLY then out-source for the backend which maybe risky.

    Is it true that with Webflow then there is no need for Adobe Photoshop and Adobe Illustrator? Or are they useful in some other part of the Web Design process? If Webflow does give similar features to Photoshop or Illustrator then how plz?

    If this is all true, then does it mean that a person can learn Html, CSS, Javascript, and go through the Workflow tutorials, then start to design their websites in Workflow, then customise them with their skills in Html, CSS and Javascript, then upon completion host them on Webflow also?

    And all backend issues will be taken care of as part of the hosting plan?

    And also be able to modify, update from time to time?

    So we just need to make sure we enrol the client who the website was designed for onto a monthly fee to pay for the hosting? Can we charge more than the cost of the monthly hosting to cover modifications and so forth? Or do we have to only charge the hosting fee and that too ONLY directly through Webflow?

    How can we add other features if they are not in Webflow? Do we have to export the project to another hosting company then only we can add the features?

    As you can see from my questions, I wish to become a Freelance Web Designer, but I'm hesitant due to some worries arising from confusion. I would appreciate your reply and advice, please.

    Thank you.

Leave a Reply

Your email address will not be published.


*