search

freeCodeCamp / CurriculumExpansion

Creative Commons Attribution Share Alike 4.0 International
313 stars 105 forks source link

Learn Intermediate CSS by Building a Picasso Painting #132

Closed QuincyLarson closed 2 years ago

codingk8 commented 5 years ago

OK to contribute to this one.

QuincyLarson commented 5 years ago

@codingk8 Awesome! We would welcome your contribution! The first step is to build the project itself. Then you can work backward to break it down into steps, like this: https://github.com/freeCodeCamp/CurriculumExpansion/pull/135/files#diff-99314d694942b489d28d8a6f0c3bc5a3

codingk8 commented 5 years ago

@QuincyLarson OK. I'm gonna start with this one (will indicate in the other issue that someone can come in the meantime while I'm busy here). Does "Angry bull in the sunset" sounds good? I've started a list of things we would want to validate with this project. Will share it asap. Feel free to share ideas if you have some. Do you have any idea how many steps we'd like to have in this project?

codingk8 commented 5 years ago

@QuincyLarson Another question: how do I start? With CodePen?

codingk8 commented 5 years ago

Working on it on a CodePen. Should be finished during the coming week. Will share link and details when done.

QuincyLarson commented 5 years ago

@codingk8 Yes - CodePen is a great place to start. Thanks for keeping us posted on this. Happy coding!

codingk8 commented 5 years ago

75% and working on it

codingk8 commented 5 years ago

@QuincyLarson Here's the first draft Needs some fine tuning but I would like a feed-back before I move on. Is it what was expected? What could be improved to reach the goal?

scissorsneedfoodtoo commented 5 years ago

@codingk8, thank you for your patience. I like the idea of a minotaur painting! Had no idea that they were featured in a lot of Picasso's work. What do you think, @QuincyLarson?

Since your project will cover a lot of the concepts taught in the basic CSS section (but not things like fonts or CSS variables), it's good that you already started breaking your project down into steps. Here are a few suggestions:

codingk8 commented 5 years ago

Great! Thanks for the feedback @scissorsneedfoodtoo Very helpful! I'll do as you suggest and add these features. Yes, quite a few bulls and minotaurs in Picasso's work. They're a typical Spanish/Mediterranean symbolic figure. May take a few days though because I have a 4 days full-time training next week. Will (at) you with a new draft asap.

scissorsneedfoodtoo commented 5 years ago

@codingk8, sounds great. Looking forward to seeing the new draft!

QuincyLarson commented 5 years ago

@codingk8 Thanks for your patience. I love your minotaur CSS illustration.

I didn't communicate this well originally, so please allow me to clarify my thoughts on this. I think rather than making a painting using Picasso motifs like minotaurs, we could quite literally have them remake a Picasso painting using CSS.

This is a well-known painting that features a lot of shapes. You could simplify some of the elements, but I think it should look enough like this painting that people say "oh yeah - I've seen that painting before."

Of his paintings I think the "Three Musicians" is the best fit.

codingk8 commented 5 years ago

@QuincyLarson OK. That's a different story then. Didn't get you had a specific painting in mind. I'll look at this closely and see what I can do 🎨

QuincyLarson commented 5 years ago

@codingk8 Thanks again for your flexibility on this. I am excited to see what you come up with. It can be dramatically simplified to just a few dozen shapes.

scissorsneedfoodtoo commented 5 years ago

@codingk8, just wanted to check in and see how things are going with your project. Were you able to make any progress on a new prototype?

codingk8 commented 5 years ago

@scissorsneedfoodtoo Yes I did. I followed Quincy's suggestions, identified 15 steps and started working around them. It's under way but slowly because I'm having a few busy weeks. I plan to finish it next week when I'm back to my normal working rhythm. The busy weeks were unexpected. Hope it's no problem. I'm sorry if it is.

scissorsneedfoodtoo commented 5 years ago

@codingk8, awesome! Glad to hear it's underway. Thank you again for all of your hard work and for being so flexible with this project.

Next week is totally fine, no need to apologize. Just keep us posted and let us know whenever your prototype is ready :+1: :+1:

codingk8 commented 5 years ago

@scissorsneedfoodtoo @QuincyLarson Working on it + urgent question! Are we all OK that this project is NOT supposed to be responsive?! Because with the triangles here and there, knowing that the borders width has to be in pixel, it makes things a bit difficult. Please let me know your thoughts about that. Many thanks 🌸

scissorsneedfoodtoo commented 5 years ago

@codingk8, I think it's fine for this project not to be responsive since there is already a responsive piano project. Still, it would probably be best if the Picasso painting isn't too large so it's still possible to work on it even on smaller screens. What do you think, @QuincyLarson?

Also, do you have about 20 to 30 minutes to talk sometime next week? I'd just like to learn more about you and answer any other questions you might have about this project. If so, please send a message to me at kris@freecodecamp.org so we can set something up!

codingk8 commented 5 years ago

OK. Here's the first draft Could probably been fine-tuned but I find it quite complex already. I let you tell me what you think is OK and what you think should be changed. It's not responsive, there's a mix of px and %. It looks rather cool on my 12', I hope it still does on a bigger screen. @scissorsneedfoodtoo Emailing you right now

QuincyLarson commented 5 years ago

@codingk8 Wow - this looks really cool! A side-by-side comparison for everyone's reference:

Learn_CSS_by_Building_a_Picasso_Painting_·_Issue__132_·_freeCodeCamp_CurriculumExpansion_and_Picasso_CSS_-_Three_musicians

As @scissorsneedfoodtoo mentioned, this doesn't need to be responsive.

You've done an amazing job of simplifying things, as well. I like how you removed the feet, for example.

My only feedback would be the guitar should have a neck - even if it's just a solid black rectangle sticking out.

I am really excited to see how you go about building this up one step at a time.

scissorsneedfoodtoo commented 5 years ago

@codingk8, this is looking great! Really simplifies things nicely while still capturing the spirit of the original painting.

I agree with adding in a rectangle for the guitar neck, but other than that, this looks ready to be broken down into steps.

scissorsneedfoodtoo commented 5 years ago

@codingk8, I just noticed a couple of things while taking a closer look at your prototype. First, I notice that you use a lot of IDs for your styling. Would it be possible to change those to classes? Styling IDs is fine, especially if they're for unique elements like you have here. Though it's my understanding that it's better to style with classes whenever possible because ID selectors have a high level of specificity that can introduce problems later. Not an issue for a smaller project like this, but it may be good to teach best practices early if we can.

Also, there's a later lesson on CSS variables, so would it be possible to remove those and instead set the RGB value for the colors within each style block? This might also be a good opportunity to teach other ways to specify colors, like hex values or color names like SaddleBrown that you use as fallbacks.

The last thing I noticed is that you use some Flexbox for things like the triangles and musical notes. Since there's also a later lesson teaching Flexbox, would it be possible to style those with plain old CSS?

Anyway, that's all I was able to notice. Again, great job with this!

codingk8 commented 5 years ago

@QuincyLarson @scissorsneedfoodtoo Thanks for the positive feedback! Glad you like the result! I'm going to do the changes we talked about and see how it all can be improved. I get back to you with a next version of the draft probably middle of next week.

codingk8 commented 5 years ago

This is a new draft with:

scissorsneedfoodtoo commented 5 years ago

@codingk8, this looks amazing! Can't tell the difference between this and your last prototype. Glad that replacing Flexbox wasn't too difficult in the end.

The only suggestion I have now is to consider putting the characters into a container just in case students have a really wide monitor. Then you can set a max-width on the container to keep the characters together. Here's a fork where I implemented a simple characters container: https://codepen.io/scissorsneedfoodtoo/pen/gJvPYW

@beaucarnes, can you take a look at this, too?

codingk8 commented 5 years ago

This could be the final version @scissorsneedfoodtoo I added the div container for the 3 characters and also added it as a new steps (7 steps now). I also removed the body tag in the HTML as you did but we may have to put it back for the tests? (so I keep that in mind). Let me know and if we're good I'll move to the next step and begin to create all the files as on the example you suggested.

beaucarnes commented 5 years ago

This overall project looks really good!

I think the instructions need to be MUCH more specific. From my understanding from Quincy, there should be very close to one correct answer for everything. When a user completes a step and goes to the next step, we will show our version of the correct code, not the actual code that the user typed in. Maybe we could create a different type of project that is more open-ended but as far as I know, this is the current plan.

For example, here is the current step 3:

/* Step 3 - Create a div that will contain all the characters. It should be centered horizontally */

.characters {
  max-width: 1750px;
  height: 100vh;
  margin: auto;
  position: relative;
}

There is no way someone could come up with that exact code based on those instructions. Most of the steps should be broken up further. Here is an example of how this part could be done. 

/* Step 3.1 - Create a CSS rule to style elements with the `characters` class. Set the `max-width` to "1750px" and the `height` to "100vh" */

.characters {
  max-width: 1750px;
  height: 100vh;
}
/* Step 3.2 - You can center an element horizontally with `margin: auto`.  Center `.characters`.*/

.characters {
  max-width: 1750px;
  height: 100vh;
  margin: auto;
}
/* Step 3.2 - Finally, add `position: relative` to position according to the normal flow of the document. */

.characters {
  max-width: 1750px;
  height: 100vh;
  margin: auto;
  position: relative;
}
scissorsneedfoodtoo commented 5 years ago

This prototype looks great! I'd say this is ready to go.

As for the <body> tag, I just removed it on CodePen because it's included automatically. You're right, it'll definitely be needed in the actual project as you break it down into short lessons.

A good example would be Beau's CSS Animations Ferris Wheel project and his examples above. Could you start breaking your Picasso Painting project down into small steps like that? Please let me know if you have any questions along the way, or if there's anything I can help with. Also, if you can show us a draft of your first 10 lessons or so we can offer some early feedback.

Looking forward to seeing your lessons soon!

codingk8 commented 5 years ago

@beaucarnes Thanks for the feedback! Yes, I figured there's be some breaking down into smaller steps to do. But I guess we needed a final version before moving forward to that. We're ready now. @scissorsneedfoodtoo Will have a close look at the example. So next step is to start with one HTML file and break down only the CSS in all the small steps, am I right? Nothing to do on the HTML part? And is it OK if the next first 10 lessons draft is a PR as we discussed (fork, create a branch, push the files...)?

scissorsneedfoodtoo commented 5 years ago

@codingk8, yes, you can start with one HTML file like in the CSS Animations Project and break down just the CSS. No need to worry about the HTML -- a single index.html is totally fine!

Yes, you can create a branch, maybe feat/picasso-painting-first-draft, and push it to your fork of the CurriculumExpansion repo. Then if you could post the link to your CSS files with the first 10 or so lessons, we can take a quick look and give you some feedback.

codingk8 commented 5 years ago

Working on it

QuincyLarson commented 5 years ago

@codingk8 I hope your summer is off to a fantastic start. I am really excited about your project. If I can be of any help or give you any clarity on these test messages, please let me know. Thanks again for your hard work on this Picasso project. Picasso would be proud and probably have something funny to say about it. 😸

codingk8 commented 5 years ago

@QuincyLarson Ah ah... For sure! This guy had a great sense of humor 😃 @scissorsneedfoodtoo Sorry things are moving slow. All my time is still absorbed by one big real-life priority but you're 2nd on the list. Doing my best to send you the tests asap.

scissorsneedfoodtoo commented 5 years ago

@codingk8, sounds great, thank you for keeping us in the loop. Please just let us know when you submit your test descriptions and I'll go over them right away.

codingk8 commented 5 years ago

@scissorsneedfoodtoo I'm back in code land & moving on with the project. Will PR a first something asap 🌸

scissorsneedfoodtoo commented 5 years ago

@codingk8, awesome, thanks for the update. Looking forward to seeing your PR :confetti_ball:

codingk8 commented 5 years ago

Hi @scissorsneedfoodtoo A few questions: am I right to put all instructions/explanations in the HTML files? Is it OK for this project to have steps both on the HTML and on the CSS parts? Or do we "give" the total HTML to the students and only ask them to add the CSS? 😃

scissorsneedfoodtoo commented 5 years ago

@codingk8, those are great questions. It's totally fine for your project to have both HTML and CSS files since the new interface will support multiple files. Since your project will be the third on the list, we should have learners code all of the HTML and CSS to reinforce what they've already learned.

Your project will fall after the Beginner CSS Blog project, and that would be a good jumping off point for this project. Right now the blog project only has the test descriptions for the HTML, though. Maybe one thing you could do a bit differently is to build up the painting bit by bit, jumping between the HTML and CSS, rather than doing all the HTML at once, then adding all the styling. However, it's totally up to you! It's always best to try and replicate how you actually built the project the first time.

codingk8 commented 5 years ago

Hello @scissorsneedfoodtoo Just sent the first PR with breakdown for steps 1 to 3. Please let me know what you think so that I can adjust right now and for the coming steps 😃

scissorsneedfoodtoo commented 5 years ago

@codingk8, just saw your PR. I'll take a look now and leave some review comments.

codingk8 commented 5 years ago

@scissorsneedfoodtoo Just read your comments. Will answer in the PR 😉

codingk8 commented 5 years ago

@scissorsneedfoodtoo OK, I'm back. Papers are signed for the new home. Picasso is my priority now until it's finished. Updating my fork and pulling down things today. Will re-read yours comments and submit a new PR asap 👩‍💻

codingk8 commented 5 years ago

@scissorsneedfoodtoo One question for you: in the previous PR comments you said it would be better to include the Font awesome locally. Am I supposed to do it right now in the project and PR that file with the rest? If yes, do you want it in the css file or in a dedicated fontawesome file?

scissorsneedfoodtoo commented 5 years ago

@codingk8, thanks for your patience. For the Font Awesome file, it's fine to include it as a dedicated file in your upcoming PR. It would be similar to how @HKuz included d3 in the Map of Earth project here: https://github.com/HKuz/fCC_D3_CurrExp. You could have a CSS directory with the CSS file learners will work on throughout the project, and a separate Font Awesome file in the same directory.