Create a Design System with CSS - Web Development Course

Показать описание

In this course you will first learn how to build your own design system and then learn how to implement the entire website with the design system using CSS, HTML, and JavaScript.

At the end, you will have a neat project to add your portfolio in addition to have sharpened your CSS and design skills.

⭐️ Course Contents ⭐️
⌨️ (0:00:00) The design system
⌨️ (2:04:12) The homepage
⌨️ (3:02:25) Navigation
⌨️ (4:17:48) The destination page
⌨️ (5:29:33) The tabs

Twitter links:

YouTube links:

🎉 Thanks to our Champion and Sponsor supporters:
👾 Raymond Odero
👾 Agustín Kussrow
👾 aldo ferretti
👾 Otis Morgan
👾 DeezMaster

--

freeCodeCamp.org

Рекомендации по теме

Комментарии

I wont get tired of saying that THIS is the part of humanity I like the most. 6 hours of pure giving to others, of TEACHING how to CREATE.

cloey_b

An actual craftsmen of rare gifts is teaching you his ways and secrets, and on demand. What a time to be a live. Thank you Kevin, FCC, and Scrimba for putting this together.

theena

This is truly the best information I have found on how to build quality web designs (and I've look through a loooot of information). Genuinely thank you Free Code Camp and Kevin for sharing this top quality videos just for free for all of us to learn. :')

danielahermosillo

I knew this would come on FCC when I first watched it on scrimba. Thanks Quincy for making this a reality. Amazing superb course

serveshchaturvedi

This course use Grid to build the layout... I tried to replace it with Flex to rebuild the new one! That's an amazing course, it's my first time creating the Design System and building the project.

goldenmonkey

I always love a KP video. Nice and informative guy and a very good teacher. So excited for this video.

naveenvenkateshk

This is perfect. Currently working in my ccs design style for a big solo project and I've been needing more direction.

Gahlfe

I am so glad Kevin made it here <3 He is such a great teacher!!!

pranjalroy

Kevin Powell is pure joy to watch and learn with 😍🔥

nemeziz_prime

I'm trying to be back to Front End dev. This was a quite comprehensive summary of tools what I have been missin for the last few years. Thanks FCC

googantube

this is the first course on youtube that cover so much things on all frontend really amazing the teacher Kevin love it and thanks so much for this excited video course!

hansbernadin

For anyone who may run into an issue with the _"destination"_ images in the coding part (i.e. Moon/Mars/Europa/Titan);
A CSS rule added much earlier (in the CSS-reset segment) is interfering with visibility for _hidden_ elements.

In your CSS look for:
_
img, picture {
....
display: block;
}
_
Change this rule to:
_
img:not([hidden]), picture:not([hidden]) {
....
display: block;
}
_
This happens because the _"display"_ CSS property *_overrides_* the inherent HTML _hidden_ attribute. So if the root element has any _"display"_ value set in its CSS stylesheets, it ignores the _"hidden"_ HTML attribute completely, and your images will always be visible.

Drakan

Thanks for providing this wonderful class. I will keep watching till I finish the whole lesson.

hwanshin

29:13 One note on alpha values, which can be used in hex colors as well: you can add another pair of hex values (0-F, where 00 means fully transparent, and FF means fully opaque).
As an example: - fully opaque black, - fully transparent black, - semi-transparent black (7F, or 50% of FF = 127 or 50% of 255).

djcaly