Just continuing with my HTML & CSS course today https://www.youtube.com/watch?v=G3e-cpL7ofc
Let’s go!
My Code
Besides the code, today we looked at the ‘inspect’ feature of Google Chrome. Turn’s out it’s more powerful than I knew. I love the ‘select element in the page to inspect it’ feature. I already see myself inspecting all kinds of websites going forward 😂
Also we looked at padding, borders, and margin. I knew the basics before, but the most interesting insight I had this time is that if I want to align objects with different or no borders, I need to adjust the padding. In the code below for example SUBSCRIBE has no border and 10px padding. So that means the JOIN button, which has a 1px border, then only needs 9px padding to be aligned. 💡 - Kind of logical, I just never thought about it.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Subscribe Button</title> <style> .subscribe-button { background-color: rgb(200, 0, 0); color: white; border: none; border-radius: 2px; cursor: pointer; margin-right: 8px; padding: 10px 16px; transition: opacity 0.15s; } .subscribe-button:hover { opacity: 0.8; } .subscribe-button:active { opacity: 0.6; } .join-button { background-color: white; border: rgb(41, 118, 211); border-style: solid; border-width: 1px; color: rgb(41, 118, 211); border-radius: 2px; cursor: pointer; margin-right: 8px; padding: 9px 16px; transition: background-color 0.15s, color 0.15s; } .join-button:hover { background-color: rgb(41, 118, 211); color: white; } .join-button:active { opacity: 0.7; } .tweet-button { background-color: rgb(6, 155, 224); color: white; border: none; border-radius: 18px; font-weight: bold; font-size: 15px; cursor: pointer; padding: 10px 16px; transition: box-shadow 0.15s; } .tweet-button:hover { box-shadow: 5px 5px 10px rgba(0, 0, 0, .15); } </style> </head> <body> <button class="subscribe-button">SUBSCRIBE TODAY</button> <button class="join-button">JOIN ME NOW</button> <button class="tweet-button">Tweet This</button> </body> </html> Alright that’s it again for today :)
Top comments (0)