Learn Basic CSS by Building a Blog
Closed this issue · 29 comments
This project will teach students basic CSS concepts by styling a simple blog post similar to this: https://victoria.dev/verbose/on-doing-great-things/
@scissorsneedfoodtoo may I?
@RafaelDavisH, would you mind if we finish the Responsive Web Design Piano first? That one is almost finished. Once that's done you're more than welcome to take this project on!
👀
Please take this one @RafaelDavisH - - you did an awesome job with the Responsive Piano, so I can't wait to see what you come up with here!
🕺🏽 Thanks @scissorsneedfoodtoo
The example above is a responsive blog. For this project, we are not covering responsive web design correct?
@scissorsneedfoodtoo I found the blog project under the Learn Responsive Web Design so it will be responsive. 😅
Yes, no need for this to be responsive since this will be the first CSS project. Just basic styling for the photo and text for the desktop view is totally fine!
@scissorsneedfoodtoo I have a draft completed for the Blog. Please let know what you think. 🤞
@RafaelDavisH, this looks great! Looks just like the example.
Before you start breaking this down, would it be possible to style an actual blog post like in the example above? Originally I was thinking that this project would just be styling one single post, but an About page, a Blog page with several articles, and one actual article might be a better way to go. It would be good to remove the Projects page since that is pretty close to the required Personal Portfolio project for the certificate, and students should work on that themselves. This project will be replacing the Basic CSS section, so things like the box sizing reset can be covered in a later project. Also, while this looks great just like the example above, perhaps it's a bit too close to the original. Is it possible to simplify things a bit more to make this project look a bit different?
@scissorsneedfoodtoo, I agree with you. When I finished I thought it was a bit much for a basic CSS project. I'm ok with the idea of just having the About, the Blog page with several fake articles and the one actual article.
I can definitely simplify this. I'll let you know when I finished the changes.
How this looks so far @scissorsneedfoodtoo? link
@RafaelDavisH, looks good! Definitely headed in the right direction in terms of simplicity. I like the look of the header, though it might be a bit complicated for this project given the fixed position. It could probably be just a regular header at the top, but what do you think?
okay. @scissorsneedfoodtoo I placed the header in a regular position, added the article page, and removed the box-sizing reset as well. updated Blog project
I am okay with the changes, I don't mind. I'm enjoying working on these projects.
@RafaelDavisH, thanks for your patience. Awesome! This is looking great -- very minimal, modern, and stylish.
Maybe one more suggestion I have is to just have one or two articles on the blog.html page. If you would rather have two separate articles, it might be better for them to actually link to different articles with a different picture. Also, could you remove the link to pexels.com below the image in the article?
Other than that, everything LGTM! I would say that this is ready to be broken down into steps. What do you think @QuincyLarson and @beaucarnes?
@RafaelDavisH This looks solid. I like your suggestions, too, @scissorsneedfoodtoo. The simpler this is, the better. We will self-host all the assets on freeCodeCamp so that they can build this locally without an internet connection.
@scissorsneedfoodtoo and @QuincyLarson, Fantastic! I'll make these changes and start on breaking it down.
@scissorsneedfoodtoo how's the responsive piano project going? anything else I need to add?
@RafaelDavisH, awesome! Looking forward to seeing this all broken down 👍 👍
I believe we're good on the responsive piano project, but I'll take another look and will leave a comment in that project issue if I notice anything.
@scissorsneedfoodtoo, I made the changes you suggested. Here is the again link if you want to check them out.
@RafaelDavisH Just chiming in to say this looks fantastic. Thanks again for your hard work on this so far. I am excited about getting thousands of people working through this, building this one line at a time.
@RafaelDavisH, this looks great, thank you for taking the time to make so many revisions. Hope you don't mind, but I have a couple more suggestions -- could you change "email" to "Email"? Also, would it be possible to change the "Medium" link the the author bio to "Developer News" and link to https://www.freecodecamp.org/news/? I'm sure you already saw, but we switched off of Medium and will start referring to freeCodeCamp News as Developer News.
Other than that, I believe this is ready to be broken down into individual steps.
@QuincyLarson, thank you. I am also thrilled about the positive impacted this new curriculum will have on future students, on which I'm excited to know I'm able to contribute my grain of sand.
@scissorsneedfoodtoo, sure I'll make the changes I don't mind. Question: I thought one of the main purposes of the curriculum is to work offline, and we were not adding URL links.
Hi @scissorsneedfoodtoo I see this project is still open. I'm sorry I have being absent for awhile. May I complete this project ?
Hey @RafaelDavisH, good to hear from you.
@RandellDawson and I have made some changes to this and many of the other projects for the first certificate. If you have some time to hop on a quick call I can let you know what's going on.
Sure. Right now?
Sorry I miss read the text. I have tmw, Monday available- morning 9-11am PT. I'm on Freecodecamp Discord maybe through there?
Can we use someone more handsome in the pic? this guy distracts from everything else , no one will be able to concentrate on anything else if we dont change the pic
Is Challenge finish ?
The responsive web design certification is already live and this project was not included.
We are no longer looking for help to build out projects for the Responsive web design curriculum.
If you are interested in contributing to freeCodeCamp, then you should look at the open issues.