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:
I always love a KP video. Nice and informative guy and a very good teacher. So excited for this video.
I am so glad Kevin made it here <3 He is such a great teacher!!!
Fully Agreed
💜
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.
This is perfect. Currently working in my ccs design style for a big solo project and I’ve been needing more direction.
💜
How is it going?! 😄
@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
@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 🤓
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 🙂
We have an iOS course coming up soon (though we have some older ones on the channel already). This course is somewhat related to web: https://youtu.be/M576WGiDBdQ
Hi, just a question about “numbered-title” around 1:00:50 :
Why using `XX` instead of `CSS counter`, is there any advantage ?
Thanks !
Tell her i referred you to her ☝️
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.
@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.
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!!!
You guys are creating career opportunities for soo many, you deserve more subs
Thanks for providing this wonderful class. I will keep watching till I finish the whole lesson.
I knew this would come on FCC when I first watched it on scrimba. Thanks Quincy for making this a reality. Amazing superb course
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
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 !
Thank you so much for this, just what I was looking for 🔥
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!
This is amazing, I hope I can create my own design
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.
“what a time to be alive ” that quote is also used by two minute paper
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
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.
thanks! worked like a charm 🙂
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?
Thank you so much for this, just what I was looking for 🔥