Tutorial Link: https://www.youtube.com/watch?v=G3e-cpL7ofc.
Explains basic concepts of html, like:
- How to create some html elements
<button>
,<p>
(paragraph),<a>
(anchor).
- 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)
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.
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 useinline
but with that i have problems to customize themargins
andpadding
.
In this lesson i will learn about hovers, transitions and shadows, customized with css.
link resource: https://supersimple.dev/exercises/buttons.
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
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.
- 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
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.
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
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:
<title>
- Live Server
- Link CSS files
- Add new fonts
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)
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
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
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
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
We will learn about the <div>
elements that stands for division
but basically it is a simple
box.
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
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
.
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
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
.
- 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.
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.
- 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
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
.
- 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
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.
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
andflexbox
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
andflexbox
.- stick it to the left side of the page.
- feel free to use different images.
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.
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 thebottom-right
of the page. timestamp 5:33:34- give the
<div>
a width of320px
and height of180px
.
- give the
- 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
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;
- 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>
withdisplay: inline-block
. Use this<div>
as theposition: relative
element. timestamp 6:07:41
- Extra: wrap the channel picture in a
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>
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.