supersimpledev / html-css-course-2022 Goto Github PK

https://github.com/SuperSimpleDev/html-css-course-2022/blob/main/1-exercise-solutions/lesson-07/7a.html

In this file you used 250px, but in video you mention 200px width. Any comments why ?

Hi!
Just a question about the element

Please Check in the Exercise 10 the images are not opening and not able to download also please check it fast need to learn more...

Would it be possible for you to commit additional code examples that I could review? I am eager to expand my coding knowledge and believe that examining practical implementations would be incredibly valuable in achieving this goal. Your assistance in providing more code snippets would be greatly appreciated, as it would allow me to delve deeper into programming concepts and develop a better understanding of how these ideas are applied in practice. Thank you in advance for your help and guidance as I work to enhance my skills in the realm of coding.

Hi,
In your 15f.html, when I place DOCTYPE html on the top, the overlay block doesn't fit in the "product-container" div.
please check it, thank you for your work and this is the best course I've come across.
p/s: you can change background-color to rgba(0, 0, 0, 0.15); in .bottom-overlay to see.

Sir can we use code for the nested layout in exercise 10?

Hey,

I'm not sure as to why my query to make the page responsive not working. The code is exactly as you taught!

Even when I copy and paste the example html and css code, the divs all appear stacked on top of one another instead of side by side, any ideas why?

Mooncat

10 mutual friends

Add Friend

Andy Frasco

18 mutual friends

Add Friend

Derek Vincet Smith

4 mutual friends

Add Friend

`p {
font-family: Arial;
margin-top: 0;
margin-bottom: 0;
}

.profile-preview {
width: 200px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
display: inline-block;
margin-right: 15px;
}

.profile-picture {
width: 200px;
height: 200px;
object-fit: cover;
margin-bottom: 12px;
}

.name {
font-size: 18px;
font-weight: bold;
margin-left: 8px;
margin-bottom: 4px;
}

.mutual-friends {
font-weight: 500;
color: rgb(100, 100, 100);
margin-left: 8px;
margin-bottom: 12px;
}

.add-friend-button {
background-color: rgb(24, 119, 242);
color: white;
font-size: 16px;
margin-left: 8px;
margin-bottom: 10px;
padding: 10px 20px;
border: none;
border-radius: 4px;
}
`

In the case of having seperate padding for top, bottom, left, right

padding-top: 7px;
padding-bottom: 7px;
padding-right: 16px;
padding-left: 16px;

we can straight away code padding: 7px 16px;
which takes care of the padding horizontal and vertical part.

when i add another flex-box it stay next to each other (must be top to bottom) . And i try to add margin left it doesn't work it disappear the second one and doesn't work space-between.

Copy and pasting the solution code for 17c general and sidebar doesn't look like anything how the Challenge Video shows.

I used many font links in google but it's not working

First of all love love love this course, so thorough and well made, thank you. That being said, on lesson 11 when I set the video-info grid class and delete all the inline-block elements it drops all of the video info below the channel picture, every time I try it. Ive, watched and rewatched the video, checked the code on github for both lesson 10 and 11, followed along exactly line by line, made sure everything is right, retried it multiple times, everything seems in place however I cannot resolve it. Any idea whats going on here?? Anyone? I feel like I'm going crazy, I dont know what I'm doing wrong. Please help!

I am at video timestamp 3:31 3 hours 31 mins.

Here is my code, it may seem incomplete because in following the video I just deleted the lines as instructed, but its not completed to the point of the provided example code as displayed in the lesson 11 code youtube.html section.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">

<style>

  p{
    font-family: Roboto, Arial;
    margin-top: 0;
    margin-bottom: 0;
  }
  .thumbnail {
    width: 300px;
    display: block
  }

  .search-bar {
    display: block;
  }

  .video-title {
    margin-top: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 12px;
  }
  
  .video-preview {
    width: 300px;
    margin-right: 15px;
    vertical-align: top;
    display: inline-block;
  }
  
  .video-info-grid {
    display: grid;
    grid-template-columns: 50px, 1fr;
  }
  
  .channel-picture {
    background-color: gray;
  }
  .video-info {
    background-color: gray;
    
  }
  .profile-picture {
    width: 40px;
    border-radius: 50px;
  }
  .thumbnail-row {
    margin-bottom: 12px;
  }

  .video-author,
  .video-stats {
    font-size: 12px;
    color: rgb(96, 96, 96);
  }

  .video-author {
    margin-bottom: 4px;
  }
</style>

<div class="video-preview">
  <div class="thumbnail-row">
    <img class="thumbnail" src="thumbnails/thumbnail-1.webp">
  </div>
  <div class="video-info-grid">
    <div class="channel-picture">
      <img class="profile-picture" src="channel-pictures/channel-1.jpeg">
    </div>
    <div class="video-info">
      <p class="video-title"> 
        Talking Tech and AI with Google CEO Sundar Pichai!
      </p>
      <p class="video-author">
        Marques Brownlee
      </p>
      <p class="video-stats">
        3.4M views  &middot; 6 months ago
      </p>
    </div>
  </div>
</div>

<div class="video-preview">
  <div class="thumbnail-row">
    <img class="thumbnail" src="thumbnails/thumbnail-2.webp">
  </div>
  <div class="video-info-grid">
    <div class="channel-picture">
      <img class="profile-picture" src="channel-pictures/channel-2.jpeg" />
    </div>
    <div class="video-info">
      <p class="video-title"> 
        Try Not To Laugh Challenge #9
      </p>
      <p class="video-author">
        Markiplier
      </p>
      <p class="video-stats">
        19M views  &middot; 4 years ago
      </p>
    </div>
  </div>
</div>

<div class="video-preview">
  <div class="thumbnail-row">
    <img class="thumbnail" src="thumbnails/thumbnail-3.webp">
  </div>
  <div class="video-info-grid">
    <div class="channel-picture">
      <img class="profile-picture" src="channel-pictures/channel-3.jpeg">
    </div>
    <div class="video-info">
      <p class="video-title">
        Crazy Tik Toks Taken Moments Before DISASTER
      </p>
      <p class="video-author">
        SSSniperWolf
      </p>
      <p class="video-stats">
        12M views  &middot; 1 year ago
      </p>
    </div>
  </div>
</div>

<div class="video-preview">
  <div class="thumbnail-row">
    <img class="thumbnail" src="thumbnails/thumbnail-4.webp">
  </div>
  <div class="video-info-grid">
    <div class="channel-picture">
      <img class="profile-picture" src="channel-pictures/channel-4.jpeg">
    </div>
    <div class="video-info">
      <p class="video-title"> 
        The Simplest Math Problem No One Can Solve - Collatz Conjecture
      </p>
      <p class="video-author">
        Veritasium
      </p>
      <p class="video-stats">
        12M views  &middot; 4 months ago
      </p>
    </div>
  </div>
</div>

<div class="video-preview">
  <div class="thumbnail-row">
    <img class="thumbnail" src="thumbnails/thumbnail-5.webp">
  </div>
  <div class="video-info-grid">
    <div class="channel-picture">
      <img class="profile-picture" src="channel-pictures/channel-5.jpeg">
    </div>
    <div class="video-info">
      <p class="video-title"> 
        Kadane's Algorithm to Maximum Sum Subarray Problem
      </p>
      <p class="video-author">
        CS Dojo
      </p>
      <p class="video-stats">
        519k views  &middot; 5 years ago
      </p>
    </div>
  </div>
</div>

...

padding solution for 4a doesn't resemble
original 3a.

In the solution of the exercise 4k there is a repeated solution for exercise 4i. If you can update it and upload a solution for exercise 4k, would be great! Thank you!

My code for this question:

<style>
  .stretch-button{
    background-color: green;
    color: white;
    padding-left: 10px;
    padding-top: 7px;
    padding-right: 10px;
    padding-bottom: 7px;
    font-size: 25;
    font-weight: bold;
    cursor: pointer;
    border-style: none;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
    transition: box-shadow 1s, margin-top 1s, margin-left 1s;
  }

  .stretch-button:active{
    box-shadow: 0 0 0 rgba(0,0,0,0.2);
    margin-top: 5px;
    margin-left: 5px;
  }

</style>

<button class="stretch-button">
  Shadow
</button>

I set transition time to 1 second on purpose. It seems that only the shadow is working, but the button movement is instant. I wonder if there is a way to make the button move slowly as the shadow shrinks.

For the exercise 3a,
I do not understand why we need the transition: opacity 0.15s in this exercise (uber button) . I tried the code without the transition and it's still working, it still changing the opacity when hovering. Thank you so much if you can feedback,

solution is:

even though after running the live server extension the data not changed live, instead i need to run the program ever time to notice the changes

So, in exercise 10D the drawing looks like 4 vertical divs and 2 horizontal divs (in the third vertical one).
When I finished exercise 10E, that's the picture I was following to build the html code. After finishing I saw that in the solution, the only divs that are used are 1 for the 'whole' block with vertically everything in it, and 1 for the horizontal blocks. I'll attach a picture of what my code looked like and under it the code from the solution.
I did succeed in making it look like it was supposed to, but I totally did too much and I can't figure out why it was not needed to add all the divs?
Especially after making the divs for the youtube page, where we also used 2 divs for the 2 vertical parts.

I hope I explained it well, if not please let me know so I can clarify :-) Thanks in advance!

Hey, could someone explain to me why we had to use display: inline-block in the .profile-picture-container in lesson 16d? This lesson is about creating and showing a tooltip for the channel picture. When I removed the line, there wasn't a noticeable difference to me. Here's the code from the solution:

HTML
...

  <div class="video-preview">
    ...
    <div class="video-info-grid">
      <div class="channel-picture">
        <div class="profile-picture-container">
          <a href="https://youtube.com/c/mkbhd" target="_blank">
            <img class="profile-picture" src="channel-pictures/channel-1.jpeg">
          </a>
          <div class="channel-tooltip">
            <img class="channel-tooltip-picture" src="channel-pictures/channel-1.jpeg">
            <div>
              <div class="channel-tooltip-name">
                Marques Brownlee
              </div>
              <div class="channel-tooltip-stats">
                15M subscribers
              </div>
            </div>
          </div>
        </div>
      </div>
      ...
    </div>
  </div>

...

CSS:

.profile-picture-container {
position: relative;
display: inline-block;
}

.channel-tooltip {
background-color: white;
width: 200px;
padding: 12px 12px;
box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.3);
border-radius: 6px;
position: absolute;
top: 55px;
z-index: 300;

opacity: 0;
pointer-events: none;

display: flex;
align-items: center;
transition: opacity 0.15s;
}

.profile-picture-container:hover .channel-tooltip {
opacity: 1;
}

.channel-tooltip-picture {
width: 50px;
height: 50px;
border-radius: 50px;
margin-right: 8px;
}

.channel-tooltip-name {
font-family: Roboto, Arial;
font-weight: bold;
font-size: 16px;
margin-bottom: 4px;
}

.channel-tooltip-stats {
font-family: Roboto, Arial;
color: rgb(96, 96, 96);
font-size: 14px;
}

Thanks in advance!

The out is not the same as the video

Thank you so much for the teachings. Please help me with the code for exercise 3b. When I add border-radius, it affects the white area too.

can anyone provide me the full correction for 16d and thank you

followed your course step by step.

.apply-button {
background-color: rgb(12, 91, 196);
color: white;
border: none;
cursor: pointer;
font-weight: bold;
font-size: 16px;
border-radius: 25px;
padding: 16px 60px;
margin: 10px 2px;
transition: background-color 0.15s;
}

.apply-button:hover {
background-color: rgb(12, 70, 196);
}

.save-button {
background-color: white;
color: rgb(12, 91, 196);
border: 1px solid rgb(12, 91, 196);
cursor: pointer;
font-weight: bold;
font-size: 16px;
border-radius: 25px;
padding: 16px 40px;
margin: 16px 10px;
}

.save-button:hover {
background-color: rgba(12, 92, 196, 0.37);
border: 2px solid;
}

I can't seem to make the border not move when I hover over it unless I use width & height.

the styles in the 12e.css file won't load, I literally copied the same HTML and CSS files and renamed them accordingly and it still does not work at all

Never mind, it was due to a server error not updating or refreshing the browser. fixed it and it all works just fine.

Hi, first I want to say thank you for your tutorial. It makes me excited to learn html and css. At 4:06:38 where we give the header a height, the change is visible to you but to me, it's not. the height of my header is colliding with my the whole of my video. How do I fix this please? Thank you!

first off, i love your video/course.

i cant get 9a/9b/9c to work at all, even if i copy and paste your css examples. i just cant make a div appear as a red square or a green circle.

Also, 9h, the css portion of the .search-button is incomplete

9.h i cant get the .google-button and the .search-button to display as an inline-block element. they stay stacked on top of each other, even if i copy and paste your example.

thanks for everything.

oh, and a small issue with an earlier challenge 8d. where it says "first name" in both input boxes. not a big issue at all

when i am doing exercise in 8d and 8e in CSS why input is there in CSS and is it a kind of CSS specificity like a p element can you explain in video pls so i may more understand about CSS

Someone please help where is the margin-top and margin-left?

How did he style without class=""?

This is the only exercise that I have been confused, can anyone help please thanks.

while practicing exercise 5e the alignment of Buy button in the center is not getting fixed. is their any other method for button alignments in the center.

New

Macbook Pro

Supercharged for pros.

From $1999

Buy

In div{...} margin: 0 is missed, so wanted result is not obtained.

Hey, here are two lessons that may cause some confusion for people, so I wanted to provide some help.

Lesson 15e and 15f --- the exercises were about creating an item display that you would normally see in an ecommerce store. Now I believe the main focus of the lesson was creating the overlay and the 20% OFF fixed tag, but if someone was interested in adding the grey background in the back, you need an image with a transparent background. This was something that I figured out after getting my own image from the web and trying to change the background color to no avail. This link: (https://www.pngwing.com/en/free-png-vfvxk/download) is to the direct item I used from this site that has a transparent background.

Lesson 17c --- this exercise was about using media queries to make a responsive website. Perhaps I'm wrong about this but the solutions have a typo. In the general and sidebar css files, The media query for the larger screen is '1200.1px'. I don't know why but doing this forced the styles under that case even if the screen wasn't that wide at all. What worked for me was '12001px'.

To keep this short, I won't post my code unless someone requests it. Have a good day!

I did everything correctly in 8d.html and 8d.css but every element was offset. I even tried copy+paste, and they still were offset. So I tried to make a new file and copy+paste everything the EXACTLY same and they weren't offset. I clicked inspect and the width of the "sign up" button should be 300px, but the file that was the same with GitHub seems to have a width of 266,4 pixels. I tried 266,4 pixels in my code and it worked. But the file that was the same as GitHub writes that the pixel of the button is 300px. Does anyone know why it changes the width automatically on that file and it doesn't on mine? Here is my code:
`

<title>Lesson 08 Exercises</title>
<style>

  .name-input, .email-input {
    display: block;
    margin-bottom: 5px;
  }

  .customer-support-message {
    width: 200px;
    display: inline-block;
    vertical-align: middle;
  }

  /* Unnecessary
  .survey-accept-button, .survey-deny-button {
    vertical-align: middle;
  }
  */

  .google-logo {
    width: 200px;
    margin-left: 150px;
    margin-bottom: 10px;
    display: block;
  }

  .exercise-e {
    width: 500px;
    border-color: rgb(200, 200, 200);
    border: none;
    border-radius: 250px;
    font-size: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 15px;
    padding-right: 15px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  }

  .first-name, .last-name, .email {
    border-width: 1px;
    border-style: solid;
    border-color: rgb(200, 200, 200);
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 16px;
    border-radius: 8px;
    margin-bottom: 12px;
  }

  .first-name {
    width: 148px;
  }

  .last-name {
    width: 148px;
  }

  .email {
    display: block;
    width: 300px;
  }

  .sign-up-button {
    background-color: rgb(47, 127, 231);
    color: white;
    border: none;
    width: 300px;
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
  }

</style>

<p>Exercise A</p>
<input class="name-input" placeholder="Name">
<input class="email-input" placeholder="Email">

<p>Exercise B</p>
<p class="customer-support-message">
  Thanks for chatting with our customer support. Would you like to take our quick survey?
</p>
<button class="survey-accept-button">Yes</button>
<button class="survey-deny-button">No</button>

<p>Exercise C</p>
<img src="08-Images/google-logo.png" class="google-logo">
<input placeholder="
Search Google or type a URL
" class="exercise-e" type="text">

<p>Exercise D</p>
<input class="first-name" type="text" placeholder="First name">
<input class="last-name" type="text" placeholder="Last name">
<input class="email" type="text" placeholder="Email">
<button class="sign-up-button">Sign Up</button>

The underline is starting from the beginning of the number but goes beyond it.
I've put, at the end, the code as in the solution but it didn't help...

lesson 5 styling not showing. Below is the HTML and CSS code as well as links.

<link rel="stylesheet" href="Styles/text.css">

Talking Tech and AI with Google CEO Sundar Pichai!

3.4M views · 6 months ago

Marques Brownlee ✓

Talking tech and AI on the heels of Google I/O. Also a daily driver phone reveal from Google's CEO. Shoutout to Sundar!

Shop early for the best selection of holiday favourites. Shop now >

Shop early for thebest selection of holiday favourites. Shop now >

p{
font-family: roboto;
margin-top: 0px;
margin-bottom: 0px;

}
.video-title{
font-family: Arial;
font-size: 18px;
font-weight: bold;
font-style: normal;
width: 280px;
line-height: 24px;
margin-bottom: 0px;
}
.video-stat{
font-family:Arial;
font-size: 14px;
font-style: normal;
width: 280px;
line-height: 26px;
margin-top: 0px;
margin-bottom: 20px;

}
.video-author{
font-family: Arial;
font-size: 14px;
color: rgb(96,96,96);
margin-top: 0px;
margin-bottom: 20px;
}

.video-description{
font-family: Arial;
font-size: 14px;
color: rgb(96,96,96);
width: 280px;
line-height: 22px;
margin-top: 0;
margin-bottom: 100px;

}
.Apple-text{
margin-bottom: 50px;
font-size: 14px;
background-color: #e34140;
color: white;
text-align: center;
padding-top: 18px;
padding-bottom:18px ;
}
.span-example{
color: rgb(5, 5, 5);
margin-left: 12px;

}
.span-example:hover{
text-decoration: underline;
cursor:pointer;

}

.shop-link{
cursor: pointer;

}
.shop-link:hover{
text-decoration: underline;

}

sir there is a werid kind of problem in my code sometimes i write code same as i ur video but it did no work not only ur i try someother youtuber sir i can find the problem just tell me i have review many times

Hello!

I could reproduce the homework until coming to the div button part.
At first, I've set a margin right for the text div. It made my buttons not being aligned on the right side because of the different size of text in each box.

I've set padding and removed the margin but it only made the buttons get closer to the text.

After searching for solutions I could find the following one: float: right;
It made the button div go to the right side respecting the padding. But now it isn't centered (I've tried using vertical align and align-items without much success...):

Here is the main css:

.text{
font-family: arial;
display: inline-block;

}
div{
vertical-align: middle;
display: inline-block;

}
.together{
display: block;
height: 60px;
width: 320px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 15px;
border: none;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
margin-right: 10px;

}
p{
margin-top: 0px;
margin-bottom: 3px;
font-size: 14px;
}
.name{
font-weight: bold;
}

.follow{
color: white;
background-color: rgb(24, 119, 242);
border:none;
width: 70px;
height: 28px;
border-radius: 5px;
}
.who,
.what{
color: rgb(96, 96, 96);
}

.follow:hover{
cursor: pointer;
}

.button{
float: right;
align-items: center;
}

i am not able to open lesson10 exercise solutions, .png files are not opening

I have written the exact code of yours of shadow button but its not working.