Тёмный

Build Blog Article Cards from Scratch | Complete Figma to HTML CSS Tutorial 

Angela Design
Подписаться 47 тыс.
Просмотров 9 тыс.
50% 1

Опубликовано:

 

10 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 41   
@geryardmon7523
@geryardmon7523 4 года назад
Watching a video does not make you a coder, nor watching a tutorial, as if you were listening to an audio book, will get you anywhere. What I love the most from @Angela Delise is her style, she gives from her heart, does not hide critical concepts, and guides you step by step with a clear voice explaining what is going on, and what to expect. This makes you understand how things work in css. A million thank you! (I know words are cheap, but I really do thank you for the pleasure you bring me every time. )
@angeladesign737
@angeladesign737 4 года назад
Thank you for such a kind comment Gery!
@narendrasudrik7763
@narendrasudrik7763 2 года назад
Excellent voice modulation! Crisp and logical flow!! Helped a lot to understand with ease. Thanks for all your efforts Angela.
@sammarie8098
@sammarie8098 3 года назад
Thanks so much for this video, it helped me a lot! Like many other comments said you deserve way more views! Your videos are so awesome and I'm so glad I clicked on this video because it's well explained instead of someone just randomly typing or copying and pasting code! Thanks so much for your time in making this! Have a fantastic day! :)
@angeladesign737
@angeladesign737 3 года назад
Thank you so much Sam! I'm happy it helped!
@sammarie8098
@sammarie8098 3 года назад
@@angeladesign737 Omg thanks for responding to me! I finished making them and they worked! I'm in high school and in girls who code but they don't teach us how to do cool things like this! Thanks so much, imma check out your other videos rn!
@nasimajosefi
@nasimajosefi Год назад
Best explanation, thank you :) please make more videos!
@nishantjadhav416
@nishantjadhav416 3 года назад
I also do frontend but today I got to learn how to do it systematically, beautiful tutorial
@angeladesign737
@angeladesign737 3 года назад
Awesome! Thank you!
@asce313
@asce313 2 года назад
Hey @Angela Delise ! what if we were to add extra text in the card description of some cards? some will look bigger and the other will look smaller, how can we fix this for all the cards to stay the same size?
@MilanB
@MilanB 4 года назад
Subscribed. I like your content, especially related to figma🤗 Do you consider creating more prototyping tutorials in figma?
@angeladesign737
@angeladesign737 4 года назад
Thank you! Yes, let me know what kinds of tutorials you are interested in!
@MilanB
@MilanB 4 года назад
@@angeladesign737 Tutorials on microinteractions?
@baso8941
@baso8941 3 года назад
in this syntax transition:250ms all ease-in-out what is the use of the word all?
@madebytl
@madebytl 3 года назад
Wow that's beautiful 😍
@angeladesign737
@angeladesign737 3 года назад
Thank you! 😊
@madebytl
@madebytl 3 года назад
@@angeladesign737 Could you make video about Media query plz?
@LoveandKindness_Z
@LoveandKindness_Z 3 года назад
Thanks for a very helpful tutorial, Angela. I have a question; if I want to make the tag stay at the bottom right of the div, what can I do? I see that the default once you set the position to be Absolute is the top left. So if I want it to be at the bottom right, is there a way to achieve that without adding the top bottom left right properties?
@MRPASIYA99
@MRPASIYA99 3 года назад
How z-index work?
@cgianimationtv1828
@cgianimationtv1828 2 года назад
Please 🙏 code different types of blog layouts and article page design
@akaris8042
@akaris8042 3 года назад
Awesomeness
@angeladesign737
@angeladesign737 3 года назад
Thank you!
@drishtisaraf8357
@drishtisaraf8357 Год назад
Do you know how to make chrome extension?
@yuanyuan8692
@yuanyuan8692 3 года назад
Very nice content
@angeladesign737
@angeladesign737 3 года назад
Thank you!
@michaelwiginton8587
@michaelwiginton8587 4 года назад
Nice, I wish I could have seen this videos a few weeks ago. I was working on a similar item as your category tag and I spent way too much time getting it correct.
@angeladesign737
@angeladesign737 4 года назад
Thanks! What difficulties were you facing? Getting the position correct?
@michaelwiginton8587
@michaelwiginton8587 4 года назад
@@angeladesign737 I wanted a category tag like you have for "POPULAR" but I was having trouble getting it set to the left side. Finally got it.
@geryardmon7523
@geryardmon7523 4 года назад
@@michaelwiginton8587 what was your solution to that. Please inform me, if yours is better :) .category-tag { ... top: 1rem; right: 0; or left:68%; border-radius: 2rem 0 0 2rem ; } .popular { background: var(--clr-popular); padding-left: 2rem; }
@michaelwiginton8587
@michaelwiginton8587 4 года назад
@@geryardmon7523 I have tags on the left side and a little added styling. category-tag { font-size: 1.2rem; font-weight: bold; color: white; padding: 0.5rem 1.3rem 0.5rem 1rem; background-color: turquoise; text-transform: uppercase; position: absolute; align-self: start; z-index: 1; top: 1.2rem; left: 0; border-radius: 0 2rem 2rem 0; }
@geryardmon7523
@geryardmon7523 4 года назад
@@michaelwiginton8587 Thank you :)
@christopherolsson9072
@christopherolsson9072 3 года назад
Great video! Just one question. Is it possible to make the cards responsive to? Śo that they will get more narrow before they jump down ? That seems Hard to för with images?
@christopherolsson9072
@christopherolsson9072 3 года назад
I am sorry! I just noticed that you made a video about that!
@angeladesign737
@angeladesign737 3 года назад
Hi Christopher! Yes I have a few videos that go over that concept including this one: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-c7gMtiJxvgY.html
@justcurious2439
@justcurious2439 4 года назад
Would it be possible to make a horizontal carousel of these cards using only html & css?
@angeladesign737
@angeladesign737 4 года назад
I'm sure there is a way to create a carousel with only html and css. I'll have to look into it and maybe make a video on it :D
@ricardosouza6317
@ricardosouza6317 4 года назад
Can I use your code in my website? Its content free? Great Job.
@angeladesign737
@angeladesign737 4 года назад
I would appreciate it if you gave me credit :)
@rohankumarshah5679
@rohankumarshah5679 3 года назад
yes you can use that code with proper citations for angela delise
@jizan8344
@jizan8344 4 года назад
first comment 😁
@angeladesign737
@angeladesign737 4 года назад
🎉
Далее
Hamburger Menu to Close Icon | CSS Animation
14:36
Просмотров 21 тыс.
Responsive Profile Card | Figma to HTML & CSS
15:44
Просмотров 16 тыс.
iPhone 16 для НИЩЕБРОДОВ!
00:51
Просмотров 610 тыс.
Responsive CSS Grid Tutorial
17:14
Просмотров 829 тыс.
How to Properly Layout A Website (For Beginners)
14:50
Просмотров 590 тыс.
CSS Grid Crash Course | Beginners Tutorial
17:56
Просмотров 43 тыс.
The Easiest Way to Build Websites
10:56
Просмотров 463 тыс.
5 simple tips to making responsive layouts the easy way
15:54
These CSS PRO Tips & Tricks Will Blow Your Mind!
8:48
Просмотров 288 тыс.
Figma to HTML & CSS | Pseudo Elements & Flexbox
18:47
Pseudo Elements with Font Awesome Icons
8:05
Просмотров 6 тыс.
Learn CSS BOX MODEL - With Real World Examples
17:45
Просмотров 118 тыс.