/HTML_CSS_YOUTUBE

Primary LanguageHTML

Tutorial Link: https://www.youtube.com/watch?v=G3e-cpL7ofc.

Lesson 1

Explains basic concepts of html, like:

  • How to create some html elements <button>, <p> (paragraph), <a> (anchor).

Exercises

  • A. Create a button with the text "Click" inside.
  • B. Create 2 buttons, 1 with my name and 1 with my favorite food.
  • C. Create a paragraph with the text "Hello, World!" inside.
  • D. Create a paragraph below the previous paragraph and write something you did today.
  • E. Create a link to google.com. (timestamp 17:37)
  • F. Make the previous exercise (E) open in a new tab. (timestamp 17:37)
  • G. Try to copy the design using HTML (the link goes to amazon.com) (timestamp 17:37)

Lesson 2

In this lesson i learn how to use the <style> html element to customize the html appearance, also we learn a bunch of css properties to add style to the html.

link resource: https://supersimple.dev/exercises/buttons.

Exercises

Replicate all the styles of the images with css.

  • A. Uber. (timestamp 44:24)
  • B. Amazon. (timestamp 44:24)
  • C. Github. (timestamp 44:24)
  • D. Bootstrap. (timestamp 44:24)
  • E. LinkedIn. (timestamp 44:24)
  • F. Continuing from exercise 1G. recreate this desing using CSS. (timestamp 44:30)

Doing the exercises i learn to make a paragraph take only the space in width that it requires for the text no extra space with the instruction display: inline-block i also use inline but with that i have problems to customize the margins and padding.

Lesson 3

In this lesson i will learn about hovers, transitions and shadows, customized with css.

link resource: https://supersimple.dev/exercises/buttons.

Exercises

Replicate all the styles with the new concepts learned and make your solution look like the videos of example.

  • A. Uber (opacity). timestamp 1:02:51
  • B. Amazon (background color). timestamp 1:02:51
  • C. Github (shadow). timestamp 1:02:51
  • D. Bootstrap (background color, text color). timestamp 1:02:51
  • E. LinkedIn (background color, border width). timestamp 1:02:51
  • F. Continuing from exercise 2F recreate the design. timestamp 1:03:01

Lesson 4

In this lesson i learn about the dev tools inside the web browser, also we practice a little bit of how to use transitions and box-shadows.

Exercises

  • A-E Modify exercises 3A-3E to use padding instead of height/width. timestamp 1:17:15
  • F Update the Tweet button to use padding instead of height/width. timestamp 1:17:15
  • G Use the Chrome DevTools to get the exact color for the Subscribe button and update it in the code. timestamp 1:17:15
  • H Pagination. timestamp 1:17:22
  • I Stretch. timestamp 1:17:22
  • J 3D Click. timestamp 1:17:22
  • K Margin and padding together. timestamp 1:17:22

Lesson 5

In this lesson we will learn how to give style to text elements, also we learn how to center the text how to make a text wider, also we learn how to add html text elements like span to make specific styling inside a line of text.

link resources: https://supersimple.dev/exercises/text.

Exercises

Recreate the following text styles: (font sizes and colors don't have to be perfect, just close enough)

  • A. font = Tahoma timestamp 1:52:08
  • B. font = Arial timestamp 1:52:08
  • C. font = Verdana timestamp 1:52:08
  • D. font = Arial timestamp 1:52:08
  • E. All use font-family Arial. timestamp 1:52:10
  • F. All use font-family Arial. (hint: you'll need lots of 's for 5f. and fg) timestamp 1:52:10
  • G. All use font-family Arial. (hint: you'll need lots of 's for 5f. and fg) timestamp 1:52:10

Lesson 6

In this lesson we will learn how to use the correct html structure because util now we had been using the html elements <p>, <style> on its own, at the next is the example of the correct structure.

<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>

So the feature that we get are:

  1. <title>
  2. Live Server
  3. Link CSS files
  4. Add new fonts

Exercises

Modify some of the previous exercises and:

  • A. Add the HTML structure (<!DOCTYPE html>, <html>, <head>, <body>)
  • B. Add an appropiate <title> for each exercise.
  • C. Move the CSS into a separate file (using the <link> element)
  • D. In a new HTML file, create this design: timestamp 2:10:59
    • Use the HTML structure
    • Add a <title>
    • Use a separate CSS file
    • Use the Google Font called "Montserrat" (regular + bold)

Lesson 7

In this lesson we learn about the images and input elements, the first one is and element to add images to the website, that element has its own css properties, that are object-position and object-fit with its own values, also, the imput element has a property of type that can be text, checkbox.

resources: https://supersimple.dev/exercises/youtube

Exercises

For these exercises, find any .jpg .png or .webp image on the internet to practice with:

  • A. Load the image, set width to 200px and add rounded corners. timestamp 2:25:34
  • B. Make the image a square, center the image within the square. timestamp 2:25:34
  • C. Make the image a circle (using border-radius) timestamp 2:25:34
  • D. With rounded corners. timestamp 2:25:35
  • E. With a shadow, and no border. timestamp 2:25:35
  • F. LinkedIn signup. timestamp 2:25:35
  • G. Twitter text box. (hint: use vertical-align: middle on each element to achive the design below) timestamp 2:25:35

Lesson 8

In this lesson we learn about the css properties display: block, display: inline-block, that the convert elements that take the entire line or only the space required.

resources: https://supersimple.dev/exercises/youtube

Exercises

Recreate the following designs:

  • A. Create 2 text boxes and put them on separate lines (using display:block) timestamp 2:34:44
  • B. Create a paragraph and 2 buttons and place them on the same line (using width, display: inline-block and vertical-align: middle) timestamp 2:34:44
  • C. Download Google's logo and create the google.com search form: timestamp 2:34:44
    • We created the text box in exercise 7e.
    • Fo now, position the logo with margin (we'll learn better ways to do this later)
  • D. Sing up form 2:34:50
  • E. Uber request-a-ride form 2:34:50

Lesson 9

We will learn about the <div> elements that stands for division but basically it is a simple box.

Exercises

First, we'll show that a <div> is just a box:

  • A. Create a <div> and turn it into a red square. timestamp 2:46:41
  • B. Create a <div> and turn it into a green circle. timestamp 2:46:41
  • C. Recreate this design by wrapping the elements in a <div> and adding a border. timestamp 2:46:41
  • D. Recreate this design using a <div> with 2 paragraphs inside. timestamp 2:46:41
  • E. Take the design created in exercise 7g. Wrap it in a <div> and give it a shadow. timestamp 2:46:46
  • F. Recreate this design. timestamp 2:46:46
  • G. For exercise 9F. set display: inline-block on the <div>, and duplicate the design a few times (you can use different images than me) timestamp 2:46:46

Lesson 10

In this lesson we will learn about an important concept that is call Nested Layouts Technique that allows to use div elements for the desing of the whole componponents make basic divisions between horizontal and vertical.

Exercises

Using and image editing software, break down the following designs into a series of vertical and horizontal layouts.

  • A. Draw the layout for this design. timestamp 3:16:45
  • B. Draw the layout. timestamp 3:16:48
  • C. Draw the layout. timestamp 3:16:48
  • D. Draw the layout. timestamp 3:16:54
  • E. Build the design in exercise 10D with code. timestamp 3:16:54

Lesson 11

In this lesson we will learn about CSS Grid that is the better way for creation of horizontal layouts, we used display: grid, grid-template-columns also learn how to use the fr size for columns, also we use column-gap and row-gap.

Exercises

  • A. Create a grid with 2 columns with widths of 200px and 75px. timestamp 3:43:47
  • B. Create a grid with 3 columns. Widths = 50px | remaining space | 75px.
  • C. Create a grid with 4 equal columns that take up the entire page. Space between columns = 20px, space between rows = 10px.
  • D. Continuing from exercise 10e. create this design usging CSS Grid. timestamp 3:43:51
    • Create a grid with 3 columns and put the elements into the Grid.
    • Replace any uses of display: inline-block
    • To align elements vertically in a grid, use align-items: center.

Lesson 12

In this lesson we will learn about Flex Box another css property that allow to handle design like how is done with Grid but in a way more flexible, one of the huges differences is that grid has a rigit layout and flexbox has a flexible layout that moves with elements, also we learn how to justify content and align items inside a flex box, also we learn how to fix a width for and element.

Exercises

  • A. Create a flexbox with 2 items. Widths = 200px | 75px. timestamp 4:15:06
  • B. A flexbox with 3 items. Widths = 50px | remaining space | 75px. timestamp 4:15:06
  • C. A flexbox with 4 items, spread evenly across the page. timestamp 4:15:06
  • D. Create the flexbox below with height = 50px and a gray border. timestamp 4:15:06
  • E. Create this design. timestamp 4:15:14
  • F. Create this design. timestamp 4:15:14
  • G. Create this design. timestamp 4:15:14

Lesson 13

In this lesson we finished the building of the header using nested Flex Box that is feature of flex box that allows to make the desing more easily also we learn other property of it that is flex-shrink to avoid the flex to reduce its size when it is combinen with justify-content=space-between.

Exercises

  • A. Create a flexbox with 2 elements (width 100px and 200px). Then make the first element a flexbox to create this design. timestamp 4:44:23
  • B. Similar to exercise 13a. use nested flexbox (flexbox inside flexbox) to create the design below: timestamp 4:44:23
  • C. Use nested layouts technique to break down this design into horizontal an vertical layouts. timestamp 4:44:26
  • D. Code the design. Use flexbox for horizontal layouts and regular <div>s (display: block) for vertical layout. timestamp 4:44:26
  • E. Make a few copies of exercise. timestamp 4:44:26
  • F. Break down this design into horizontal and vertical layouts. timestamp 4:44:32
  • G. Code this design using nested flexbox (flexbox inside flexbos) timestamp 4:44:32

Lesson 14

CSS Position in this lesson we will learn about how to use the css position to give style for the navbar to keep its position on top the left side bard to keep its position all the time, and als we can use this feature for put notification indicator up to the other elements and create tooltips when we hover and element, this can be called another dimentions with css.

Exercises

For these exercises, set the <body> height to 3000px so you can scroll.

  • A. Create an element that sticks to the page scrolling (20px from the bottom and 20px from the right). timestamp 5:07:02
  • B. Create a sidebar on the right side of the page, width = 100px. timestamp 5:07:02
  • C. Create an element that covers the entire page (0px on all sides) and has background-color black. timestamp 5:07:02
  • D. We'll create a modal. timestamp 5:07:04
    • start from exercise 14b.
    • create an element that covers the entire page, with background-color: rgba(0, 0, 0, 0.8); (this is called an overlay)
    • make the overlay a flexbox and center its content horizontally and vertically.
    • add a <div> in the overlay and create the modal.
  • E. Use a combination of position:fixed and flexbox to create this header from facebook and stick it to the top of the page (fell free to use a different image/name).
  • F. Create the double-sidebar from Discord using a combination of position: fixed and flexbox.
    • stick it to the left side of the page.
    • feel free to use different images.

Lesson 15

CSS Position Absolute in this lesson we learn how to use the position absolute of css to make an html element fixed to a position no page, that is important to note that position=fixed sets the position in the browser window (the visible part in the window) and the position=absolute sets the place into the page that can be moved up and down with scroll and also is important to remember that the basic postion position=static is always at the end page, when the positon value is diferent of static the rules of z-index take in action.

Exercises

For these exercises, set the <body> height to 3000px so you can scroll.

  • A. Create a "Close Button" like this design and place it at the top-right corner of the page using position:absolute. timestamp 5:33:34
  • B. Using position: fixed, stick a <div> near the bottom-right of the page. timestamp 5:33:34
    • give the <div> a width of 320px and height of 180px.
  • C. Take the "Close Button" created in exercise 15a. and put it inside the <div> created in exercise 15b. timestamp 5:33:39
    • Using position: absolute inside position: fixed move the "Close Button" to the top-left corner.
    • Use negative px for top and left and abjust the sizing if needed.
  • D. Imagine exercise 15c. is a video ad in the bottom-right corner. Add a timestamp in the corner like this design. timestamp 5:33:39
  • E. Find an image of clothing online and create the design below: 5:33:44
    • you'll need position: absolute inside position: relative
    • set the position: relative container to display: inline-block
  • F. Create the design below

Lesson 16

In this lesson we learn how to create a tooltip using previous concepts like:

  position: absolute;
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.15s;
  pointer-events: none;

Exercises

  • A. Add the remaining tooltips in the header. timestamp 6:07:33
  • B. Make the video title a link to the actual YouTube video (you can click the video titles in the final design to get the URL) timestamp 6:07:33
  • C. Turn the video thumbnails and channel pictures into links (wrap the in an element) timestamp 6:07:33
  • D. Using everything we learned in this course, create tooltips for the channel pictures like the design below (you'll need to use position, flexbox, hovers, transitions, and shadows)
    • Extra: wrap the channel picture in a <div> with display: inline-block. Use this <div> as the position: relative element. timestamp 6:07:41

Lesson 17: Extra CSS Features

In this lesson we learn how to use media queries to create a responsive web design, aslo we learn the shorthands for setting properties of margin or other similar, also we learn that inheritance is only available in text elements so if i set a font-size this property is inheritange by all the inner text elements, but if i tried the same with other element like a div with a border-style: solid that is not inheritange by the inner elements, we also learn about semantic elements that are like div in its behavior but the difference is how the browser interprets that elements putting a specific enphasis some of this elements are header, nav, main, section.

border: 2px solid red;
margin: 2px 1px 2px 1px;
media (max-width: 1000px) and (min-width: 500px) {
  .body {
    font-size: 20px;
  }
}
cursor-events: none;
<nav></nav>
<header></header>
<main></main>
<section></section>

Exercises

Resolve the exercises and try the extra challenge exercise of cloning other websites that start from the D exercise.

  • A. On wider screens, our text is too small. Use @media queries to increase font-size and line-height when the page is > 1000px wide. timestamp 6:30:04
    • For video titles, set font-size = 16px, line-height = 24px.
    • For other text, set font-size = 14px.
  • B. (Optional) For more practice, add the last 6 videos from the final desing into our grid so we have 12 videos in total. timestamp 6:30:07
  • C. Using responsive design, create this expanded sidebar design when the pages is >= 1200px wide. timestamp 6:30:07
    • Wrap all the CSS code in sidebar.css in @media (max-width: 1200px) { ... }
    • Re-style the sidebar for the wider screen and put that code inside @media (min-width: 1200.1px) { ... }
  • D. Clone Twitter. timestamp 6:30:07
  • E. Clone Facebook. timestamp 6:30:07
  • F. Clone Instagram. timestamp 6:30:07
  • G. Clone YouTube video page (the page with the video and comments) timestamp 6:30:07

These are very challenging, but you can do it! You don't have to match the websites perfectly, just close enough!

Try it yourself first, then check the solutions, where I'll walk you through step-by-step how I whould recreate these websites.