html-css-course-2022's People
Forkers
dikoder mohamedmohidiin amirhoosian indexaker braemma1 oftulkas edisplay patrickessien tii88 ilufoyehabib lbc825 alexghomizadeh jean424 johnson-you syedmairaj parvashrestha ighoshsubho waleedtahirabbasi nashmaina waevplays andreamondragondt velfora runaftermark happy2smile ayodeledigital tumsel-kamer ratliff74 shanemapasie96 imtomiiq scrjunior kabirlabs mob231601 badadev jmjohnmcgovern707 yanagikane dharakshay07 taladeogoa sachpreet71 nizarkadri kamdix aliahlafi gr1mhopp3r ibyishaka lutfiblog lmxy kevindez246 kavyakavi09 arthur-zakaryan kheicho jozzecode keshavkhh31 dellsujit typebyte loben39028 dipendragithub uluudigital khalidazhari haile2003 paulosteven mubashir05-beep andyyclee marciopocebon zouhairja thanhhieucio affanrm mjaxs1023 hagaag theseven71 lipsic gabrieltg123 shreya-spr darksky24 rxlbas lubilo ziliao-jian biomud tracywhodoesnot amansinh-30 tamiatami xwang751124 fvckminaar weida0715 philip098 ahmeddigitalityreality nishit2003 syed1005 skyer3d yusupha23 fengsalumu1 swilsakov kalashrastogi rajaraj1 daryajozani sergiorobledo18 taimoorcodes gregoryherrera jhoncee lucalush nehalrayuu hossamashrafahtml-css-course-2022's Issues
sytle command not woring
10b button div position
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;
}
Issue in exercise 12e
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
images
i am not able to open lesson10 exercise solutions, .png files are not opening
Lesson 17- @query for responsive- not working!
Hey,
I'm not sure as to why my query to make the page responsive not working. The code is exactly as you taught!
Border-width + Hover causes issues with Padding inside a <div> causing it to "move"
.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.
Code of Shadow Is not working
I have written the exact code of yours of shadow button but its not working.
9h
Hi!
Just a question about the element
I learned to contain everything in the
But then in the solution of the exercise 9h, the
Now my question is, is it not possible to center everything if all the elements are contained in the same
Thanks a lot for your time,
Catarina.
found a few css issues in your demo
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
Lesson Css Dev
Exercise 3b
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.
text alignment issue
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.
<style> .new{ color:orange; text-align: center; margin-top: 20px; margin-bottom: 0px; font-family: arial; } .macbook{ color: black; text-align: center; margin-top: 5px; font-weight: bold; font-size: 25px; font-family: arial; } .super{ font-family: arial; font-weight: bold; text-align: center; font-size: 42px; } .price{ font-family: arial; text-align: center; margin-top: 8px; margin-bottom: 15px; } .buy{ color: white; background-color: rgb(0, 133, 227); border: None; text-align: center; padding-top: 7px; padding-bottom: 7px; padding-right: 5px; padding-left: 5px; border-radius: 30px; font-weight: bold; font-family: arial; cursor: pointer; text-align: center; } </style>New
Macbook Pro
Supercharged for pros.
From $1999
Buy
Sidebar, text "YouTube Music" doesn't show in one line, and not in the center.
EXERCISE 3A
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:
<style> .uber-button { background-color: black; color: white; border: none; height: 40px; width: 110px; cursor: pointer; **transition: opacity 0.15s** } .uber-button: hover { opacity: 0.8; } </style> Request nowcode do no work
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
9f instead of 9g
...
3a and 4a do not resemble each other
padding solution for 4a doesn't resemble
original 3a.
17c
Header overlapping with video grid
Exercise 4k absene
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!
Flex-box working the wrong way
12e.css
In div{...} margin: 0 is missed, so wanted result is not obtained.
Lesson 11: Incorporating grid into video previews
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.
<title>youtube clone</title><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 · 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 · 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 · 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 · 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 · 5 years ago
</p>
</div>
</div>
</div>
Question about exercise 10E
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!
Html-Css
Course Nuances -- Lesson 15 and 17
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!
Question 4j: 3D click button--transition on button movement doesn't work
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.
Yu
html
lack of correction code for 16d
can anyone provide me the full correction for 16d and thank you
7e.css & 7e.html
[Request]
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.
Underlined numbers
Webmaster
Wrong px size
In this file you used 250px, but in video you mention 200px width. Any comments why ?
Results
8b.css
The out is not the same as the video
Help investigate my code
lesson 5 styling not showing. Below is the HTML and CSS code as well as links.
<title> Text practice</title><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;
}
10
Sir can we use code for the nested layout in exercise 10?
Exercise 10 Images are not opening please check it
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...
15f
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.
Help me please (8d)
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>
Html
alternative way: lesson4 4b.html
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.
Link for google fonts is not working
I used many font links in google but it's not working
15e parent (relatrve) child (absolute) not working as expected
Never mind, it was due to a server error not updating or refreshing the browser. fixed it and it all works just fine.
Question about 16d
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!
8d,css and 8e.css input
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
can't able referesh the local host page
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
Project 9g - Divs not loading side by side
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?
`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;
}
`
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.