Learn CSS Flexbox by Building a Photo Gallery

[briancbarrow]

@QuincyLarson I'd be interested in helping with this one.

[pikonha]

I'm interested in help with this issue too.

[QuincyLarson]

@briancbarrow Thanks for your patience. It's good to see you again, Brian!

We would welcome your help with this.

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

[briancbarrow]

@QuincyLarson ok cool. I'll try to get started with it this next week.

[QuincyLarson]

@briancbarrow OK - thank you for keeping us posted on your progress on it.

[briancbarrow]

@QuincyLarson I haven't had a lot of time to work on this sorry. I have a basic layout with css but I don't know how much I'll be able to work on it in the next couple of weeks. Do you want me to create a pull request with what I have and let someone else take it from here? Maybe @picolloo would like to help a little?

Here is what I have so far: https://github.com/briancbarrow/CurriculumExpansion/tree/fix/update-learn-flexbox

[scissorsneedfoodtoo]

@briancbarrow, no problem! No need to create a pull request. @picolloo is hard at work on the WebSocket project, so I'll put the help wanted label back on for now. If someone else comes along they can use the code you posted as a jumping off point. Feel free to pick this project back up if it's still unclaimed later.

[akintoluvic]

I will like to help with this project @QuincyLarson, I would like to contribute to this freeCodeCamp. You have been of great help in my learning process

[QuincyLarson]

@akintoluvic Thanks for your kind words!

We would welcome your help with this. Please read this: https://github.com/freeCodeCamp/CurriculumExpansion/blob/master/CONTRIBUTING.md

Then go ahead and start building the example project. Keep it as simple as possible, and post your updates here (I recommend linking to the project on CodePen so we can see your code and the example app at the same time).

If you have any questions, @scissorsneedfoodtoo and I are here to help.

How soon do you think you can have a rough draft project ready for feedback?

[akintoluvic]

@QuincyLarson thanks for the chance to contribute. I should have a rough draft in a week.

[scissorsneedfoodtoo]

@akintoluvic, sounds good! Just keep us posted. Looking forward to seeing your prototype :+1: :+1:

[akintoluvic]

Already working on the prototype, I should have it on codepen by tomorrow. I'm building it with just html and pure css

[akintoluvic]

@QuincyLarson @scissorsneedfoodtoo this is the link to the prototype on codepen https://codepen.io/akintoluvic/pen/zXbYrq

[scissorsneedfoodtoo]

@akintoluvic, looks great! I think students will really learn a lot from your project. I noticed that the photos are a bit stretched, though, so I played around with your code here: https://codepen.io/scissorsneedfoodtoo/pen/rbRZQd

Seems like there are a few options to fix this. You could use object-fit: cover; in .gallery img to zoom in on the larger/longer photos, explicitly set the height for the images, or use align-items: center; in .gallery. Any of those are fine, though since it's a Flexbox project, teaching properties like align-items and justify-content seems like a good way to go. Just thinking out loud, but maybe you could start by having students build a simple gallery with just one image, set up Flexbox, and play with those properties to show them how to align something vertically and horizontally. Anyway, that's just an idea I had while tinkering with your code.

I'd say that you're ready to start breaking this down into steps like the RPG game and Cat Photo App. Just start from the beginning and have students build up the HTML and CSS line by line. Take a look at the Contributor's Guide for more information. Also, we want these projects to work offline, so feel free to download about 9 of those pictures from Unsplash and include them in your project's directory.

I'm always available to chat here on GitHub or hop on a call, so let me know if there's anything I can do to help!

[akintoluvic]

Thanks @scissorsneedfoodtoo , I will surely note your observations.

[scissorsneedfoodtoo]

Hi @akintoluvic, how's everything going with this project? Were you able to start breaking this down into steps?

[akintoluvic]

@scissorsneedfoodtoo I was held back a little by work, will get started on it immediately

[akintoluvic]

I like the what you did with the Cat Photo App, it is quite simple to understand

[scissorsneedfoodtoo]

@akintoluvic, no problem! Work definitely comes first. And the Cat Photo App was actually done by @beaucarnes -- it's just showing me as a contributor because I changed the directory name after it was already merged. He has a knack for writing these short instructions/test descriptions. Please use that or the CSS Animations Ferris Wheel as a guide when you're ready to start breaking your own project down!

Also, do you have about 20 or 30 minutes to hop on a call? I'd love to meet you and talk more about your project. If so, please send me a message at kris@freecodecamp.org and we can set something up.

[scissorsneedfoodtoo]

@abhisekp, thank you for sending over your outline the other week. Were you able to start breaking this project down into steps?

[akintoluvic]

@scissorsneedfoodtoo yes and I already removed the irrelevant ones on the outline.

[scissorsneedfoodtoo]

@akintoluvic, awesome! Please just open up a PR with your broken down steps when you can.

[QuincyLarson]

@akintoluvic This looks great so far. I encourage you to keep it simple like you have so far, but to also see if you can add some different column layouts as well.

[akintoluvic]

Thanks @QuincyLarson @scissorsneedfoodtoo I'll open a PR next week, I'm a little busy till Wednesday

[scissorsneedfoodtoo]

@akintoluvic, sounds good. Looking forward to seeing your project broken down into steps :+1: :+1:

[scissorsneedfoodtoo]

@akintoluvic, were you able to start breaking this down into steps? Hope to see your PR soon.

[akintoluvic]

@scissorsneedfoodtoo I have started already, would send in my first PR before weekend.

[scissorsneedfoodtoo]

@akintoluvic, that's great. Looking forward to going through your project.

[scissorsneedfoodtoo]

Hey @akintoluvic, were you able to start breaking this project down?

[akintoluvic]

I am stuck, I will send a PR now, so I can get suggestion on how best to move @scissorsneedfoodtoo

[akintoluvic]

Got issues when I tried to push

[scissorsneedfoodtoo]

Hi @akintoluvic, great to hear that you have a PR ready.

What program are you using? Also, which repo are you pushing to? If you're trying to push directly to freeCodeCamp/CurriculumExpansion, then you might get an error like that about permissions. Are you pushing to akintoluvic/CurriculumExpansion?

[akintoluvic]

No, I was pushing to freeCodeCamp/CurriculumExpansion @scissorsneedfoodtoo

[scissorsneedfoodtoo]

I see. That probably explains the error. Could you push your branch to akintoluvic/CurriculumExpansion? Then you can open a PR here for review. Please let me know if there's anything I can do to help.

[scissorsneedfoodtoo]

@akintoluvic, I left some review comments over in #202. Were you able to continue breaking this project down into small steps?

[Ast2435]

Hi @scissorsneedfoodtoo , is there anything left to do? I could start breaking it down into steps, is there some guidelines or examples i can see first to see if i'm capable enough?

[scissorsneedfoodtoo]

@Ast2435, yes, there is still quite a bit to do on this project.

The latest prototype is here, so please feel free to take a look and to add your own spin on it: https://codepen.io/akintoluvic/pen/zXbYrq. Many Flexbox concepts like flex direction, aligning items with justify content and align items, and other things like Flexbox sizing. Also, the current prototype is not very responsive. That would be another thing we should improve before breaking it down into steps. My comment here has some other ideas for how we can teach these things and more: https://github.com/freeCodeCamp/CurriculumExpansion/issues/125#issuecomment-487434937

Would you be able to update the prototype? Then we can start working on breaking it down into steps.

[Ast2435]

@scissorsneedfoodtoo Ok, for now i would like to at least update the prototype to include more Flexbox concepts, i should be able to finish it before Tuesday. If somethings happens, i'll keep you posted.

[scissorsneedfoodtoo]

@Ast2435, awesome, sounds great. I understand that you won't be able to get all the Flexbox concepts that we want to teach in the final prototype, so what I'm thinking is that we can refactor the project as we go along, teaching several concepts then going back and changing the code wherever it makes sense. But that's just a thought I had about this project -- there's still lots of time to discuss possible ways to teach everything we want to.

Looking forward to seeing your updated prototype :+1: :+1:

[jhnsml]

@scissorsneedfoodtoo Hello,

I am interested in helping you guys finishing this one. I learnt flexbox not long ago from FCC(like 2 or 3 months) now it's come full circle I guess.

https://codepen.io/Xqzit/pen/dyyZKKv

Please check the above pen and let me know if there is something I need to change. I have broken the same gallery code into the following chapter-like list:

css-01: justify-content css-02: align-items css-03: flex-direction css-04: Space-around, space-between, space-evenly css-05: flex order css-06: flex-wrap & align-content css-07: flex-flow css-08: flex-grow css-09: flex-shrink css-10: flex-basis css-11: flex

I have forked the curriculum Expansion to my name. Should I just upload it to my forked directory and share the link?

Question: Do you want me to change the height of the img's or is that okay? It is responsive but I'm not sure if it is to your liking. Any suggestions will help.

[scissorsneedfoodtoo]

Hi @jhnsml, glad that you've gotten something from the current Flexbox curriculum and that you want to contribute to the new project based one.

Took a quick look at your prototype and it seems to be headed in the right direction. I'm not sure if it's finished based on the code I can see, though -- I don't see justify-content, align-items, or any of the other properties that you mentioned. Could you post a link to your completed prototype for us to review? Then we can start working on how to break your prototype into small steps.

About the images, could you make them bigger? Maybe around 300x300 or 400x400? Also, it would be good to see some different column layouts depending on the width of the device as Quincy mentioned above.

[jhnsml]

@scissorsneedfoodtoo

Hey,

Sorry I deleted the prev pen by mistake. Please check the new one - https://codepen.io/Xqzit/pen/XWWEmgJ

Changes made:

• Image size to 300px
• Justify-content: added to the body
• Align-items: added to the body

The other files that I was talking about are in the following repo: https://github.com/jhnsml/CurriculumExpansion/tree/master/css-flexbox-photo-gallery

Note: index01-02.html is for css-01 & css-02 index03-05.html is for all the files from css-03 to css-05 index__06-11.html is for all the files from css-03 to css-05 final-index.html is the full version and the corresponding final-css

css-01: justify-content css-02: align-items css-03: flex-direction css-04: Space-around, space-between, space-evenly css-05: flex order css-06: flex-wrap & align-content css-07: flex-flow css-08: flex-grow css-09: flex-shrink css-10: flex-basis css-11: flex

[scissorsneedfoodtoo]

@jhnsml, thank you for continuing to work on this.

Took a look at your pen and noticed some collapsing here and there. I believe it was because the body's height was set to 100vh and the gallery's height and width were both set to 80%. Also I moved everything Flexbox related from body to gallery since we don't need to use Flexbox for anything in the header. Anyway, I made a couple of changes and tried to simplify a bit: https://codepen.io/scissorsneedfoodtoo/pen/pooLVJo

There's still some things that can be improved like larger image sizes for different screen sizes. Let me know what you think.

Also, send me an email at kris@freecodecamp.org if you have some time to hop on a call and talk more about this project.

[jhnsml]

@scissorsneedfoodtoo

thank you for continuing to work on this.

My pleasure. Sorry for the late reply, I'm just a little busy trying to land my first job as a developer.

Also I moved everything Flexbox related from body to gallery since we don't need to use Flexbox for anything in the header.

That's good. I did check the pen it is looking good and very clean.

There's still some things that can be improved like larger image sizes for different screen sizes. Let me know what you think.

I'm up for it. Do you have any sizes for specific breakpoints or any suggestions? For eg do you want the size of the image for mob res to be larger as all the images are in column-like structure?

Also, send me an email at kris@freecodecamp.org if you have some time to hop on a call and talk more about this project.

I have sent you an email from my personal email.

[scissorsneedfoodtoo]

Hi @jhnsml, thanks for your patience.

For the breakpoints, we could use the ones from freecodecamp.org/news as a general guide. It's a mobile first single column layout that changes when the width is 768px or wider.

We could do something similar here where it's a single column with larger pictures until the screen is 767px wide to account for smartphones and smaller tablets. From 768px to 999px it could use slightly smaller pictures to accommodate for the way Flexbox wraps elements into rows and columns. From 1000px and up the image sizes could change again as there should be more images in each row at this width.

This can all be simple since Flexbox should take care of most of the heavy lifting. I don't have any particular image size in mind -- feel free to play with it and go with whatever you think looks best :+1: :+1:

[jaydinsweo]

Hi @scissorsneedfoodtoo is this issue still active?

If yes, I would like to help. Following on, besides adjusting breakpoints for the images, is there anything else that you would like to implement?

[scissorsneedfoodtoo]

Hey @jaynguyens, thank you for your interest in this project. Yes, it's still active.

Besides adding/adjusting the breakpoints for images, we'd also like to make sure this is mobile first and responsive. Also, it would be good to cover some of the other properties and values in our current Flexbox challenges, as long as they make sense in this project.

Would you be able to help us update the last prototype here?: https://codepen.io/scissorsneedfoodtoo/pen/pooLVJo

[A-GHOSH-dev]

I am interested in contributing here. This will be my first contribution so I need a little guidance please. Just give me an overview of what has to be done.

Is this issue still active?

[scissorsneedfoodtoo]

Hi @A-GHOSH-dev, thanks for your interest in contributing to the project based curriculum.

This is still in active development, though we're handing a lot of the curriculum development internally at the moment. You can track our progress on this Google sheet: https://docs.google.com/spreadsheets/d/1KXEJvgnAziiePMp2Ovf_ssDqCFFWYuycXWBNp91k3qM/

It'll take us some time to open this project up to contributors.

In the meantime, please feel free to check out the main repo here: https://github.com/freeCodeCamp/freeCodeCamp

There are still a lot of open issues with the "Help Wanted" label that are open for contribution.