Summary
Summary HTML & CSS Full Course - Beginner to Pro
- Course
- Institution
an descriptive and summarized version of the complete course of html and css languages to boost your developing skills.
[Show more]
Seller
Follow
rs2243545
Content preview
HTML & CSS Full Course - Beginner to ProIn this course we 're going to learn how to build websites from a
beginner to a professional level. You do n't need any previous coding
or technical experience this course is designed to be your first step to
becoming a software engineer. After each section I 'm going to give
you a bunch of exercises that you can do on your own to practice the
skills that we learned. Let 's go to our computer and we 're going to
create a new folder. So this folder is going to contain all the code for
this course. I 'm going to call this html dash css dash course. So we
have to make sure that this file ends with dot html. This tells a
computer that file contains html code rather than just text. So as you
can see, html is pretty straightforward. Each of these things that we're
displaying on the web page is called an html element. The computer
reads our html code from top to bottom and then follows those
instructions and creates a button and a paragraph of text. If we
reverse the order of these lines, for example , if I put the paragraph up
here and I save it and refresh the page then the paragraph will appear
on top. This is something called syntax. Syntax are the rules for how a
coding language like html should be written.
The next element that we 're going to learn is a link to another website
for example if we go to google and we search for something on
google , it will give us a bunch of links and when we click these links it
will take us to another site. So we 'll go back to our website here and
in our code we ''re going to type less than , a , a. greater than. So this
a here represents an anchor element. An anchor is basically a link. So
inside this anchor is the text of our link so let 's put the text as link to
youtube. An attribute basically modifies how an element behaves. In
this example we 're using the href attribute and it determines where
this link element will take us when we click it. Right now it 's going to
youtube. com but if we change this it will take. us to a different
website with html. Now let 's go back here and explain what this
syntax means. If we save this file and we reload you 'll notice that all
of these spaces just appear as one space on the website. This is
because according to the syntax extra spaces are essentially ignored
so beginners usually have trouble with this because for example if
they want to add space between this button and this link they would
start adding spaces in front of the link thinking that it will move it
away from the button.
In this lesson we 're going to learn css or cascading style sheets based
on the name it 's used to style our web page so it's used to change the
appearance of our html elements. We 're actually going to create a
project that we can do in this lesson so we're going to open this
project by going to super simple dot dev slash exercises slash buttons.
The purpose of this element is that inside this element we can write
css code which modifies the appearance of other elements for
example. Inside these brackets we're basically going to give
, instructions to the computer on how to modify the appearance for
example we can set the background dash color colon red and
semicolon so make sure that you write this out exactly as i have it
here. Css is pretty straightforward we 're essentially just giving the
computer instructions so the general technique for changing styles one
by one is to just change the styles. this time we 'll set the border
property so notice that our button has a border while the subscribe
button here doesn't have a border. The more that you write css and
work with pixels the more you get a sense for how big these
measurements turn out to be.
Rgb works as a combination of red green and blue to create any color
that we want. Rgb is a more precise way of measuring color than just
using a word like red or white. The minimum value is zero and the
maximum value is 255. The next thing we 're going to change is you
might not be able to see it but if we zoom in here this button has
rounded corners. The next step we 're going to do is to copy this join
button so let 's create a new button on our page with html and this is
going to be the join button. In our css this word button means that all
of these styles are targeted to all buttons on the page so how do we
get these styles to only target the subscribe button so we're going to
learn a new attribute called the class attribute. The class attribute
basically lets us label html elements for example let's label this button
the subscribe button. To target a class in css we can start with a dot
and then type out the class name so we 're going to type out subscribe
dash button. The join button has a different class to the join button.
The benefits of buying summaries with Stuvia:
Guaranteed quality through customer reviews
Stuvia customers have reviewed more than 700,000 summaries. This how you know that you are buying the best documents.
Quick and easy check-out
You can quickly pay through credit card or Stuvia-credit for the summaries. There is no membership needed.
Focus on what matters
Your fellow students write the study notes themselves, which is why the documents are always reliable and up-to-date. This ensures you quickly get to the core!
Frequently asked questions
What do I get when I buy this document?
You get a PDF, available immediately after your purchase. The purchased document is accessible anytime, anywhere and indefinitely through your profile.
Satisfaction guarantee: how does it work?
Our satisfaction guarantee ensures that you always find a study document that suits you well. You fill out a form, and our customer service team takes care of the rest.
Who am I buying these notes from?
Stuvia is a marketplace, so you are not buying this document from us, but from seller rs2243545. Stuvia facilitates payment to the seller.
Will I be stuck with a subscription?
No, you only buy these notes for $6.39. You're not tied to anything after your purchase.
Can Stuvia be trusted?
4.6 stars on Google & Trustpilot (+1000 reviews)
76800 documents were sold in the last 30 days
Founded in 2010, the go-to place to buy study notes for 14 years now