I Cloned Discord's Website User Interface Using CSS Grid
HTML-код
- Опубликовано: 12 сен 2024
- In this tutorial you will learn how to use CSS Grid to create a responsive grid system to build Discord's website.
☕ Buy me a coffee
Become a member and access the premium SCSS source code for the responsive website templates for free.
🔗 www.buymeacoff...
🌐 Hostinger
Get affordable domain and web hosting service with Hostinger. Save up to 91%* off your entire order by using the link below and my coupon code.
🔗 hostinger.com/juliocodes
Discount code: JULIOCODES
🔔 Subscribe
🔗 bit.ly/2Q3pCiB
📁 Assets & Resources
GitHub 🔗 github.com/jlo...
📱 Social Media
🔗 / juliocodes
⚠️ Disclaimer
This video description contains affiliate links, which means that if you purchase one of the products or click on certain links, I’ll receive a small commission. This helps support the channel and allows me to continue to make videos like this. Thank you for understanding!
⭐ Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. bit.ly/3shuikj
This man deserves more subscribers... i feel that.. he's contents a really premium.. 1 year with him.. i started my journey with Rosa
Glad you stuck around!
offcourse
Sure he does!! keep it up Juilo!
Thanks Julio for sharing this step by step - A-Z with us.
Glad to help!
julio is the best
Great work bro...you deserve more subs
Website design is wonderful unbelievable like it. You are great👌bro.♥️♥️
You are awesome man. I have been learning a lot from your videos and I very much appreciate it brother.
I appreciate that!
The most best tutorial on youtube :)
keep going
wow! using css root to adjust your media query! how come I didn't think of that lol well I'm taking notes man... thanks for sharing Julio! I learned a lot today. I also like the use of css grid it's rally practical. my only gripe would be using non symmetrical builds with absolute positioning; it starts breaking down your alignment and positioning if your using grid so their needs to be a work around
Bro thank you so much !!!! i did it it took me the whole day doing that (i mean i took my time because i am learning) i am following you bro!!! REALLY THANK YOU SO MUCH. i will try to apply the effects.
AWSM VIDEO TUTORIAL (my guy deserves more subs)
Thanks, Julio. I like your content, it has helped me out a lot with learning HTML and CSS
How I wish I had so much creativity and knowledge on css like you
Been waiting for this!
Enjoy!
Julio is the real deal, sub to this man
Apprecitate that!
Lots of thanks Julio!!! Really appreciate it!
Hi Julio, thanks for this great content I wish u had more subscribers as u truly deserve them. Also, do u have the source code as I run to some errors and I want to compare it with the source code so I can know how to fix them easier? thanks man :)
Hi Julio, Love your content man. Even though it's not for beginners. Can you make a video on how to make a Dashboard. Something similar to analytics or anything for that matter.
Hi Julio you are doing great work do you have the full code of this project as I am facing some issues
Well done bro
Awesome ! Pls do a video on how to create responsive cards slider
1000 likes from me ♥️
Your tutorials are very great
Big thanks ❤️😊
I wish you could make a tutorial for the Discord's menu .
Love the video mate. Can you also do HTML CSS Login and Signup form with navigation bar and footer
Insane video Julio, thank you so much ! Cheers
Do you have a video how to import Fonts ?
I don't have videos dedicated to importing fonts, but there's videos where I've done so. I don't think I go into a lot of detail in terms of importing. But I plan on doing more shorter videos like those where I target specific topics and explain them
@@juliocodes i found another video explaining ! I’m also currently learning on Codecademy pro for Front-end ! But doing your videos is way better because you really code in a way that it’s easy to learn and have a good practice (readable code) ! Thanks you for your content! I had a question about Kite or Flutter, do you think I should use them right away or try to learn a little more before using those ? I’m wondering because I don’t want to short cut the learning and than being Hooked (dependable) on these apps
@@nexgpt In my opinion, it's best to feel comfortable with a certain language before trying out frameworks or libraries that are based on it. This way you know what is happening behinds the scenes as opposed to just knowing 'this works' but not knowing how it works.
@@juliocodes thanks i'll keep grinding
Cheers,
Very awesome tutorial Thank you
Great one bro ❤️
Love from Nepal ❤️
Thanks a ton
Thanks!
This helped me a lot to create a website like it ! Thanks a lot
Can I get the source code pls ?
Thank-you so much for this content man! I followed the whole thing start to finish, because I wanted to get an idea on the right way of placing things the page. A couple of questions:
Is using a mix of flexbox and grid a common design practice?
With css grid, something that Kevin Powell demonstrates is "flattening" the html with getting rid of the use of DIVS.
Is that just a design choice?
Would you say that the way you built this is the standard?
Yes, using a mix of flexbox and grid is totally fine. They both have their place when it comes to layout. In fact, some people still even use a combination of flexbox, grid, and floats.
Also, I wouldn't necessarily call it a standard, but back in the day divs were pretty normal, they still are. That said, divs aren't really meaningful in terms of the document structure, now we have a lot more sematic html tags that are recommended to use over a div. As opposed to using a div with the class of sidebar, you could instead use the aside tag with the same class, it still does the same thing but the aside gives it more meaning. Divs are still fine though since it still valid html
hey, julio, how you did the images of the website in the thumbnail? is it an extension you use for that or what?
Hi, I'm a big fan of your awesome videos. please what's the name of the ide and font family you used in this videos. Thanks.
Love from Bangladesh 🇧🇩
Much love!
Hey, website on my laptop is looking weired (looking same a as yours on smaller screen), my 1024 px media query is also correct.. can you please help
Amazing 👌
Hey there, speedrunning your videos lmao
btw, at 43:32, when you do the CSS for .wave-inverted, you do "transform: matrix()", i tried using only "transform: scaleY(-1)" and it worked just the same. Is there any differences like, in this case specifically? Tks =)
Where we get such type of interactive side images ?
Thanks 🔥💯
Bro...where are you?! :(
Still missing it seems.
ありがとう！
(arigatou!🇯🇵)
Coder Coder and you are my youtube family
Bro one more portfolio website
Please do portfolio review
How to use those svgs ?? I'm using Atom text editor
dear sir, what is your personal website? give the link....
Do u prefer css grid or bootstrap gris sys ?
At the end of the day Bootstrap is just a css framework. It's good if you want to build responsive websites fast, but CSS itself is a better option since you're able to create your own framework if you wished.
i made our profile card(of discord) as clone (ui)
Please build e commerce website ui sir
49:49
36:36
Your video gave me the confidence to get into grid and it made me realise that you created to yourself more work than you had to.
I quite easily managed to recreate this layout, fully responsive, using only minmax syntax without a single media query.
Jen Simmons has got a few interesting videos about that:
ruclips.net/video/0Gr1XSyxZy0/видео.html
ruclips.net/video/lZ2JX_6SGNI/видео.html
I think the fact that only recently I got into frontend coding is playing to my favour, since I have never really experienced all of those dodgy frameworks such as bootstrap, that made developers think in 8-12-16 columns layouts. CSS grid works quite differently to those frameworks and while it could be used in a similar manner, there are more modern and efficient ways to use it.
Yes, minmax can make certain responsive layouts easier without media queries. But given the nature of how it works, in most cases you won’t have a pixel perfect layout with it. I use it a lot, especially when it comes to cards, unless I need a specific size. This particular example, I built this project using the same exact method that discord uses. The extra work aside, it’s a nice touch being able to create your own grid system as well as showcasing how one can position items based on line numbers.
Jen is great. I’ve watched a lot of her videos 😁
50:01
Hlo sir
How are you
Hey there, what's up?
Can anyone give me the link of full CSS file, like I already did everything but I'm having some bugs innit and its very difficult to debug it 🥲🥲