‫Welcome to the very first coding challenge
‫of this course,
‫where you will now for the first
‫time practice all the skills
‫that you have already learned in this course on your own.
‫So, the goal of this challenge is
‫to build a developer profile card just like this one.
‫So we have like an avatar image here,
‫then the name of the developer, a short bio,
‫and finally a list of skills.
‫Now to actually build this project, you have two options.
‫First, you can simply create a new Create React app
‫on your own computer and then build the project there
‫just like we have been doing in this section.
‫Or second, you can use the CodeSandbox app
‫that we used for the very first app that we built
‫in the course.
‫So this is basically an online editor,
‫which makes it very easy to quickly try out
‫some new small projects.
‫And so this is what I'm actually going to use
‫to build this challenge.
‫Now, in case you want to do the same,
‫I advise you to create a new account here,
‫And so this is what I'm actually going to use
‫to build this challenge.
‫Now in case you want to do the same,
‫I advise you to create a new account here.
‫And then once you're done,
‫you can simply create a new React app here.
‫So, just click up here to create and then react.
‫And again, maybe by the time you're watching this,
‫CodeSandbox looks completely different,
‫but just find a button somewhere
‫to create a new React app.
‫Or alternatively, as I showed you also before,
‫you can simply do react.new.
‫And this will then also scaffold a new React app.
‫And actually, it does use,
‫under the hood also create react app.
‫It's a bit different here in terms of the file structure,
‫but yeah it also allows us
‫to very quickly build a small React app.
‫Now, before you actually start coding I have a few pieces
‫of advice for you
‫because this probably seems a bit daunting.
‫So, building all of this here from scratch
‫as a complete beginner might be a bit difficult.
‫So, let me give you a few hints.
‫So, here I already have basically the app component.
‫And so, let's together look at the structure here.
‫So in this app, we return a div with the class name
‫of Card.
‫And by the way, you can get all of these styles right here
‫from this file, which is available at this URL,
‫so at this starter for this challenge,
‫which of course I will attach
‫to the lecture on Udemy as always.
‫So make sure to check out that link,
‫and from there, you can then get this CSS.
‫But anyway, going back here,
‫what I want you to do is to create this div,
‫which is the entire cart.
‫So basically the container for all this
‫with this black border.
‫And then in there, we have an avatar component,
‫which will be for the image.
‫And then we have this div for the data.
‫And in the data, we have the intro,
‫which is for this heading here and for this bio.
‫And then we have here a list of skills.
‫So a component called skill list.
‫And in the skill list, you should have one skill component
‫for each web development skill that you have.
‫And in order to customize each of these skills,
‫you will use props,
‫so just as we learned previously.
‫So going back here, for example,
‫I created one skill for each of these six web dev skills
‫that I have.
‫And so into each of them, I passed the skill itself,
‫then the emoji here, and then also the background color.
‫And this background color is probably
‫the most challenging part here.
‫So maybe don't worry too much about that part.
‫What matters to me here is that you pass in the emoji
‫and the skill name itself.
‫And so basically with that,
‫you can already customize
‫the skill component pretty nicely.
‫Now, as for the image, you can actually upload the image.
‫So your avatar image or any other image
‫that you wish right here into code sandbox.
‫So you can just open this public folder and then drag
‫and drop an image right into this.
‫So this will then upload the image right into the sandbox
‫and you can then reference that image just like
‫we have been doing in our app throughout this section.
‫Okay, and I think these instructions should get you going.
‫And in case you need some more,
‫then you can just start watching my solution.
‫That is of course no problem at all.
‫It's really, really no problem if you're not able to do all
‫of this on your own on your first try.
‫So if you need to watch my solution, that's 100% fine.
‫Now make sure also to read here through this styles.css,
‫because this will then give you the hints
‫for which class names you should use.
‫For example, for the avatar image,
‫this is the class that you need, here for the skills list,
‫and so on.
‫So please go ahead, pause the video now,
‫and then do as much as you can.
‫And once you're done with that,
‫I will meet you back here with my solution
‫and probably I should leave this one here up
‫on the screen,
‫so you can see what you actually need to build.
‫So good luck with that and I see you in a minute.
‫Okay, so how did you do?
‫Well let's try to tackle this one together.
‫So I'm creating here a brand new React app,
‫so the one that I actually created before with react.new.
‫And then let's get rid of this file here
‫as we will once again do it all inside index.js.
‫Okay, so let's create the app component right here,
‫and actually, just to make it a bit quicker,
‫I will already copy in the code that I already had before.
‫So this way, we're speeding up the video a little bit.
‫So just like this.
‫And I will also, of course, get these starter styles.
‫Okay.
‫And so now let's just create these additional components.
‫So function avatar,
‫then the intro,
‫and finally also the skill list,
‫and the skill itself.
‫So again, we're going to have one skill component
‫for each of our web development skills.
‫And now let's start with the easiest one.
‫So, the avatar is basically just an image with a source.
‫Let's leave this one empty for now.
‫And let's add the alt tag with my name.
‫Okay.
‫And now let's grab the image and drag and drop it here.
‫So I have it in my downloads folder.
‫So this will quickly upload the file,
‫and then I can just write here in the source, Jonas.jpac.
‫So if I save this now, then let's see if something happens.
‫Well, we have some errors here.
‫So, let's just reload this internal browser.
‫That should just fix it,
‫and there we go.
‫So this is way too large and that's simply
‫because I forgot the appropriate class name here.
‫So, that's just class name Avatar.
‫Yeah, beautiful.
‫So that's already our first part right there.
‫Let's just close down.
‫Yeah, just like that.
‫So next up, we have the intro,
‫which is just some diff here,
‫and then one primary heading.
‫And then here with a paragraph for the bio.
‫And here I will just grab it from here.
‫And, of course, you are hopefully going
‫to write your own one.
‫Give it a save.
‫So that's the next part.
‫And now here comes the hardest part,
‫which is the skill list.
‫So before we tackle the skill list,
‫let's actually build the skill itself.
‫So return.
‫It's a div with the class name of skill.
‫And hopefully, you got this one simply
‫by looking at the CSS file.
‫Let's close it.
‫And for now, let's just write something in here.
‫And also just some emoji.
‫Okay, and then
‫let's here also create a div,
‫and if i'm going a bit too fast for you it's simply
‫because I don't want this video to take forever.
‫Okay, and I will also explain the important parts,
‫of course, after the code is written.
‫But anyway, we see that we already included
‫our very first skill right here.
‫However, if I now copy and paste this,
‫then we have the same problem as we had before
‫with our pizzas, which is that they are all the same.
‫And so now we need to again reach for props in order
‫to customize these skills.
‫So into the skills component,
‫let's pass in a prop called skill,
‫and I will call it React.
‫And then let's also pass in an emoji.
‫So this one, for example.
‫Okay.
‫And now here, just like before,
‫we receive the props object.
‫So as an argument or as a parameter
‫to this skills component function.
‫And so here we can now use exactly that.
‫So, let's maybe actually create one span.
‫So, one element for the skill itself
‫and then one for the emoji.
‫So here all we have to do is to now write props.
‫So props again is that object
‫that react will automatically pass into the component
‫when we define some props on it.
‫And so now we have on props prop.skill and prop. emoji
‫because these are the two props that we passed
‫in right here.
‫So again, think of a prop as a communication channel
‫between this skill list component, which is calling,
‫so which is including this skill component,
‫and the child component, so the component itself.
‫So these two can now basically communicate
‫by passing in some data.
‫But anyway, let's now use this prop, so props.skill.
‫and then let's use another span here
‫for props.emoji,
‫and then let's see what happens.
‫So we have the skill, but here, of course,
‫that cannot work.
‫And there we go.
‫Beautiful.
‫So, let's keep going.
‫So, let's say skill HTML plus CSS
‫and the emoji let's say is the same.
‫So also some strong skills right there.
‫And so now indeed we got
‫two different components here.
‫So, two skill components with different data.
‫And now let's add just another skill.
‫What do we have here?
‫So we have let's say Svelte,
‫then with this baby emoji, because, well,
‫I'm not very good at Svelte.
‫I just tried it out once for a few hours.
‫So, I can say that I'm good with Svelte.
‫All right, here we actually need to add the class name
‫of skill list, I believe.
‫Yeah, this then places them nicely side by side.
‫And let's actually just add one more,
‫just so they wrap onto the next line.
‫Let's say JavaScript here.
‫All right, so we are already almost done here.
‫So the only thing that is missing
‫and which I told you is not really mandatory
‫because it is quite confusing is the background color here.
‫So how do we do the background color?
‫Well, first of all, I will pass in a string with the name
‫of the color.
‫So let's call that prop color.
‫And then for react, the color that I want, well,
‫I'm not really sure, let's just use blue.
‫So I could, of course,
‫also do some hexadecimal value right here.
‫So I will just leave that there for now.
‫So HTML, CSS, let's do orange, red for this one.
‫Then here, yellow.
‫And while Svelte is also kind of orange.
‫So, let's do that.
‫Okay, so we passed in a color.
‫Now it's time to use it here.
‫So, what we want to do is to edit here
‫as a background color.
‫So basically, we want to add an individual style to each
‫of these skill components.
‫And do you remember how we can do that?
‫Well, we can just use the style property,
‫or actually the style prop, as we now know, it is called.
‫So each of these is called a prop, even here.
‫So like even this class name in JSX
‫and also this style is called a prop.
‫So we enter JavaScript mode, and then we create an object
‫with the property of background color
‫and then here all we do is to use
‫that prop that we passed in.
‫So that's props.color.
‫Give it a save, and beautiful.
‫So that worked.
‫So maybe you also got this.
‫And if you did, then really congratulations.
‫This year was the trickiest part,
‫but my main concern here was actually
‫to get you writing these components here
‫on your own and have all of them return some JSX
‫and then of course apply
‫your new knowledge about props.
‫So, having these two components here
‫basically communicate with one another.
‫So this is really, really important that you understood
‫what is happening here.
‫Just make this a little bit prettier here.
‫Let's do actually this one orange
‫and this other one orange-red.
‫And even though these colors are not perfect,
‫they are at least a bit better than they were before.
‫All right, so hopefully you found this challenge useful
‫and hopefully it helped you really
‫to understand this concept of props here even better.
‫And again, if for some reason you weren't able to do all
‫of this on your own, then please really, really don't worry.
‫There's plenty of time to learn all
‫of this stuff throughout the course.
‫And I'm 100% that by the end of it,
‫or even after a few sections already,
‫you will start to get really good at React.
‫But now let's keep going and keep learning
‫about some more fundamental React principles
‫and techniques.