Create a Design System with CSS – Web Development Course

Ecommerce Empire Academy

Learn how to create your own design system while building a Space Travel Website with CSS guru Kevin Powell. You can also follow the interactive Scrimba version of this course by clicking here:

πŸ’» Code on GitHub:

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.

The design for the course has been created by FrontendMentor. You can get the design files from their page:

⭐️ 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:
πŸ”— Follow Kevin Powell on Twitter:
πŸ”— Follow FrontendMentor on Twitter:
πŸ”— Follow Scrimba on Twitter:

YouTube links:
⭐️ Kevin Powell:
⭐️ Scrimba:

πŸŽ‰ Thanks to our Champion and Sponsor supporters:
πŸ‘Ύ Raymond Odero
πŸ‘Ύ AgustΓ­n Kussrow
πŸ‘Ύ aldo ferretti
πŸ‘Ύ Otis Morgan
πŸ‘Ύ DeezMaster

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

32 thoughts on “Create a Design System with CSS – Web Development Course”

  1. Naveen Venkatesh

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

  2. 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 projects.

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

    1. @emelside its going alright, i definitely have a much stronger grasp on css, currently doing all my work in plain css, before trying something like sass

    2. @Gahlfe123 that’s nice to hear, I’m on the same process, trying to get really decent on plain CSS until moving on to something else πŸ€“

  4. Your channel covered almost every technology except ios development and web 3. Can you guys please prepare some tutorials in these domains. That would be a great help. thanks πŸ™‚

  5. Hi, just a question about “numbered-title” around 1:00:50 :
    Why using `XX` instead of `CSS counter`, is there any advantage ?
    Thanks !

    1. Dale Ryan Aldover

      This is the first time I heard about CSS counters so I googled it, seems like it’s one of those nifty css functions nowadays. Kevin might have opted with ‘X‘ because it is much easier to work with in terms of adding styles to those counters and it works on previous browser versions. Something to keep in mind if you use the CSS counter, make sure you have a fallback when a user might be using a different browser than your development environment or they might have a browser that doesn’t support CSS counter. That is why it is better to use the older way or css tricks that are proven and stable.

    2. ​@Dale Ryan Aldover Well, I understand your arguments, but I can not really agree with them…
      As CSS counter has 99.57% (97.03% if styling) supports coverage (based on CanIUse, even IE8 supports it) and in W3C Recommendation since CSS2.1 (released in 2011?), compatibility is not an issue at all.
      About styling, it does not change anything, you just apply it to the ::before pseudo-element:
      .numbered-title::before {
      counter-increment: nt;
      content: counter(nt);
      /* rest of style */
      }
      But thanks anyway, maybe as you said, “it was easier to work with” for a course, reducing chances to confuse students.
      BTW, obviously you must try your code on multiple platforms/browsers, it’s not web-dev otherwise, just prototyping at best.

  6. Mauricio Henao Rua

    thankful for your marvelous course this code will serve to me to create my own templates and improving my fronted code , thanks so much again!!!

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

  8. Servesh Chaturvedi

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

  9. Wow Thanks for this lovely tutorial. Really appreciate it . Have a question why are we not reseting padding to 0 in body and other elements. we are resetting the margin only to 0. Please let me know why are we doing this

  10. I’m beginner and i understand all and using that. This mean I’m not beginner? Great manual, clearly and simple. I love it, thanks !

  11. 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!

  12. 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.

  13. GΓΆkhan Γ–zdemir

    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

  14. 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.

  15. I am having some trouble with the @media size ranges. Kevin says they are 25em, 35em and 45em for phone, tablet and laptop respectively, so I did them accordingly but the screen sizes are reacting weird to me. Also when I look ip up the @media width ranges are totally different comparing to the course… Does anyone have similar issues?

Comments are closed.