Profile cover photo
Profile photo
Sam Galope

Post has attachment
HTML2Canvas works by reading through the DOM of the entire page. It gathers information on all the elements of that page then builds a representation of the page. In other words, it does not actually take a screenshot of the page creates a representation of that page based on the information it gathered from the DOM. Here's how to use it.
Add a comment...

Post has attachment

Post has attachment
Hi! I am Sam Galope! Welcome back to my channel. In this lesson, we will use everything we have learned from lesson 1 to 4 to build our very own color wheel. Along the same lines, we will learn and understand web colors. So brace yourself with some color theory and a little math!

If you are new to this channel and a beginner, please start with lesson 1. You need the proper tools to understand this lesson.

What is color? How do we see color? How do we use colors? For beginners and non-beginners alike, this is a question. There is a philosophical way to answer this and there is the practical way.

Color is how we perceive light. The human eye can see 7,000,000 colors. And it does this by sensing colors. How do humans sense color, you may ask. Simple. The human eye absorbs colors bouncing off different objects.

For example. If we look at an apple, we see red right? But what’s really happening is that we see red because that’s the color not absorbed by the apple. It means that the apple, absorbed blue and green and reflects red. Thus, we see red.

The same thing goes with any other color. If you see a blue car, it means that the colors’ red and green were absorbed by the car and blue is reflected.

Speaking of red, green, and blue. RGB are primary colors. It means that all 7,000,000 colors we see is a combination of red, green, and blue. In 1801 Thomas Young, proposed this theory – the trichromatic color theory. Simply put, everything is composed of RGB.

If you mix Red and Green, you get Yellow. If you mix Green and Blue, you get Cyan. If you mix Blue and Red, you get Magenta. If you mix all colors, you get black.

This is called the secondary color palette or CMYK.

Colors in html and CSS can be expressed in four ways. But will only focus on the most common ways – by name, rgb, and hexadecimal.

Colors by name.
If you want to use colors by name, you have about 140 standard color names at your disposal.

Go to this link if you want to try them all.

In basic use, they can be applied as such:
If you want to change the color of a text, you do this in CSS:
font-color:red | green | blue;

On the other hand, if you use the rgb method or hex method, it is done in this manner:
color:rgb(0,0,0); for black. Zero means no light.
color:rgb(255,255,255); for white. 255 means 100% brightness.
color:rgb(255,0,0); for red.
color:rgb(0,255,0); for green.
color:rgb(0,0,255); for blue.

Values can go from 0-255.

On the other hand, for the hex method, it is done in this manner:
color:#000. Zero means no light.
color:#fff; for white. 255 means 100% brightness.
color:#f00; for red.
color:#0f0; for green.
color:#00f; for blue.

Do note that #000 is a shorthand for #000000. Using the 6 digit hexadecimal values gives you more colors.

Values can go from 0-9 then a,b,c,d,e,f. This is the hexadecimal number system. So that’s 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f. A is 10, F is 15.

You can try to mix and match any of the values. Most web developers prefer the hexadecimal method because it is easier to type.

In this exercise we will build our very own interactive color wheel.

To build this, we will use a lot of div tags and two main CSS declarations – the position and transform.

The position CSS declaration tells the browser how to position html tags in the browser.

For example, if you put in your CSS position:absolute, which we will use for this lesson, you are telling the browser to act like a grid. So, if you have an element, say a div and say that it has a position:absolute, the browser will wait for two more declarations.

As you may have guessed, the left declaration tells the browser how far from the left the element should be placed. In the same manner, the top CSS declaration, tells the browser how far from the top of the browser the element should be placed.

If you find this hard to understand, in Google Chrome or Mozilla Firefox webdeveloper tools, you can use the ruler tool to help you get the top and left values.

Lastly, top and left values can be expressed in pixels or percents.

To cap things off, let’s talk about the Transform declaration. For this lesson, we will only focus on the rotate attribute. The rotate attribute tells the browser to, well... yes... rotate the element. The rotate attribute uses the values in degrees.

OK let’s code!

-- Introduction
-- Greetings
-- Color theory
-- Colors in computer code
-- CSS position absolute
-- CSS transform rotate
-- Exercise
-- Challenge

Post has attachment
Hi! This is Sam Galope and this is lesson 2 of the #webtutorials channel! Welcome back!

In this episode, we will learn BASIC HTML tags, text formatting, html dividers, list tags, the beginner killer image tag, and hyperlinking.

Let me just say that I am super stoked with the amount of positive feedback I received from you guys. I AM SUPER STOKED TO START THIS episode!

Here's what you'll find in this video:

HTML tags, naming conventions, and best practices
--- HTML skeleton 2:26
--- Tag pairs 2:57
--- An explainer on nested tags 4:26
--- HTML attributes explained 5:15

The importance of HTML text formatting 6:06

Code demo
--- Image tag, src relative and absolute paths demo 6:47
-------- A note on case sensitivity 9:08

HTML Headings (h1-h6) tags 9:29

HTML text formatting tags 10:29
--- Marquee tag 10:45
--- Strike tag 11:07
--- Superscript tag 11:20
--- Subscript tag 11:35
--- Bold tag 11:48
--- Italics tag 11:58
--- Underline tag 12:10
--- Nested tags 12:24
--- Code tag 12:52

HTML text break tags 13:39
--- br tag 13:10
--- hr tag 13:12

HTML text divider tags
--- div tag 13:39
--- paragraph tag 13:53
--- span tag 13:58

HTML list tags
--- Unordered list 14:11
--- Ordered list 14:49

The hyperlink tag 15:20

Thanks for joining me today. Until next Wednesday, keep asking, learning, and progressing. I am Sam Galope, signing out!

Post has attachment
Add a comment...

Post has attachment
Look! Pag-asa Island Belongs to China
Look! Pag-asa Island Belongs to China
Add a comment...

Post has attachment
Presenting: China's Artificial Islands
Presenting: China's Artificial Islands
Add a comment...

Post has attachment
Add a comment...

Post has attachment
Add a comment...

Post has attachment
Add a comment...
Wait while more posts are being loaded