Current Events > My CSS skills are finally improving.

(+) Yeah! (+)

I'm recreating GameFAQs in React. I still have quite a ways to go but here's my progress after a few hours.

https://gamefaqs.gamespot.com/a/user_image/1/9/8/AATc28AAEKpm.png

How are you going to recreate the shitposters?

ShineboxPhil posted...

How are you going to recreate the shitposters?

I've been thinking about this for weeks. I have everything prepared.

I find that I can easily recreate most sites in CSS. Just native CSS, no framework or anything.
But my struggle is artistic. I can't design anything myself that doesn't look shit

Kloe_Rinz posted...

I find that I can easily recreate most sites in CSS. Just native CSS, no framework or anything.
But my struggle is artistic. I can't design anything myself that doesn't look shit

I'm trying to get better at it. One of my friends wants me to make her a website but there's still more I need to learn before I can start.

[LFAQs-redacted-quote]

Mostly flexbox. Grid scares me.

[LFAQs-redacted-quote]

I like it a lot but I'm still getting used to doing things "the React way".

Now do it only using Bootstrap and no CSS.

Dakimakura posted...

Now do it only using Bootstrap and no CSS.

I don't like Bootstrap. It looks too fat every time I try using it. But I am wanting to look into SASS soon if there's a difference.

https://gamefaqs.gamespot.com/a/user_image/0/1/4/AATc28AAEK2W.png

@ImAMarvel

Is it worth learning webdev on the side just as a hobby or some shit

Yeah fam. If you get real good you can make some good money making websites for people. If you need help getting started let me know.

ShineboxPhil posted...

How are you going to recreate the shitposters?

He already did. The pic clearly shows "SomeLikeItHoth" as the logged in account.

Why in God's name would you ever, ever, want to recreate this place?

SomeLikeItHoth posted...

Yeah fam. If you get real good you can make some good money making websites for people. If you need help getting started let me know.

How would one get started?

Creating websites is a lot more than just spinning up some HTML and CSS. The backend architecture and how it all comes together is where the real challenge begins.

Well you're already off to an abysmal start considering you think FFIX is better than FFVIII.

SomeLikeItHoth posted...

Mostly flexbox. Grid scares me.

If you understand flexbox, grid is actually simpler.

all these cool CSS tricks, yet L-shaped table cells are still hacky as fuck.

[LFAQs-redacted-quote]

That's fair. You can dip into flex to cheat some layout tricks, but grid requires going all-in.

itachi15243 posted...

Why in God's name would you ever, ever, want to recreate this place?

Because this place is home.

@AloneIBreak

How would one get started?

Start here
https://www.theodinproject.com/
Spend 2-3 hours a night, every night working through this and you'll be good to go before the summer ends.

opopopza posted...

The backend architecture and how it all comes together is where the real challenge begins.

That's why I'm working on this project -- for more experience. I'll be putting it on Firebase which is something I haven't done before.

[LFAQs-redacted-quote]

I made a calculator with Grid once. It went okay because it was just a few divs but I haven't done much more than that. I'd like to learn more but I need a good CSS project. I already know the basics so now I'm focusing more on building projects.

@ImAMarvel

Sure, you can point me in a direction.

Do what I'm doing and go through The Odin Project.

https://www.theodinproject.com/

I've been steadily going through this since August and I've learned more than any other tutorial I've ever done. It's mostly project based so It's not like those "watch this video and become a pro" BS you see a lot.

This guy is also really good.

https://www.youtube.com/@TraversyMedia/playlists

Watch any of his HTML/CSS/JavaScript/MongoDB/MERN/Node.js videos.

This guy also has good videos but supposedly his more recent videos aren't as good.

https://www.youtube.com/@WebDevSimplified

This guy has some good tutorials but they're not free (but you can get them for like $10)

https://www.udemy.com/user/jonasschmedtmann/

Some other websites you can look into for advice / help with code.

https://stackoverflow.com/
https://weekendwebdev.substack.com/
https://web.dev/
https://dev.to/

There are a lot of different things you can do but I recommend going through The Odin Project and supplement it with YouTube videos when you need a break or when you don't fully understand something.

SomeLikeItHoth posted...

Because this place is home.

This is where we belong famalam

I made a very basic looking Board List.

1. I removed the word Hot before each board category because I always found it odd.
2. I only included the boards that I have favorited and ignoring everything else.
3. I removed the topic, post count and time of last post from each category. I did make it work but only with a lot of padding which made the page look ugly when it was smaller. My project isn't responsive yet but I don't want to deal with that headache in the future.
4. I aligned Your Favorite Boards and Board Information. It didn't make sense to align Board Information with GameFAQs Message Board like it is now.

https://gamefaqs.gamespot.com/a/user_image/7/5/6/AATc28AAELRk.png

I've been thinking a lot about my project tonight and I'm wondering if I should just go all out with it and create boards for a bunch of games and users can click through them and make topics. Right now I'm just making a new js file for every page but I know there's a way in React (maybe @mattymad knows the technical term) where you can dynamically create routes so I'll be looking into that because I feel like it will just make everything so much easier. The same goes for topics themselves since I can't manually create files for every topic.

https://gamefaqs.gamespot.com/a/user_image/7/0/0/AATc28AAELgU.png

Mostly done with the CSS. I have the home page, board list, a topic and a post. That's good enough to start my project off so I can start implementing features. I have a lot of duplicate code that I need to sort through first though so my project has less repeated code.

https://gamefaqs.gamespot.com/a/user_image/4/7/0/AATc28AAELsW.png

[LFAQs-redacted-quote]

I'm going to have to do more research into this. It sounds easy enough to figure out but I've never done it before.

[LFAQs-redacted-quote]

You're so smart with this kind of stuff. How did you learn so much? I've been working with React for 6 weeks and I feel like I barely know anything.

I have to wake up early tomorrow so I only worked on my project a little bit today but I organized a lot of my code. Now my folders ../Look/Like/This which will have to do for now. The next feature is going to be creating new topics which I've started but going to take a bit more research to complete.

[LFAQs-redacted-quote]

That is so awesome. I hope to get there some day. I'm going to finish this project and then start another one after for my friend. She's starting her own business and told me she wants a website. I'm not sure what to do after that but I'm hoping to start applying for jobs soon.

[LFAQs-redacted-quote]

How are you learning? Any cool projects you're working on? I started learning React on January 1st. I like how CSS works in React. Rather than having a single styles.css folder I have a CSS folder for every component. It's made things so much more organized for me.

SomeLikeItHoth posted...

Rather than having a single styles.css folder I have a CSS folder for every component.

Unless that's aggregated into LESS or SASS or glued all together or something, seems like you'd end up with piles of css loads, possibly conflicting.

Even then, I hate SASS. If it has to be compiled back into CSS, just skip a step and do CSS.

Got a semi decent New Topic setup going on. I added both of my current topics (the Poorly and Calwings ones) into an array and now I'm just mapping them on the screen. I also set up a form and I'm taking the values (and adding default ones) and adding them to the array using state. Next I need to get my date set up properly so I can sort the array by date instead of just mapping the array.

I'm also saving the message in the array but that data is not needed yet.

https://gamefaqs.gamespot.com/a/user_image/0/5/5/AATc28AAEMFH.png

Questionmarktarius posted...

Unless that's aggregated into LESS or SASS or glued all together or something, seems like you'd end up with piles of css loads, possibly conflicting.

I know that can happen but I've been naming everything based on the component name followed by a few other words. Example: forum__msg-btn It's been working out for me so far but if you have a better way of sorting CSS files I'd like to hear it. Even though it is working out better for me having all these CSS files can get in the way.

[LFAQs-redacted-quote]

Or, you code four lines of standards-compliant CSS, and leave IE6 twisting in the wind.

Bootstrap still has a lot of really nice features that make it powerful.

In general, I now prefer CSS combinator libraries like Tachyons.

SomeLikeItHoth posted...

I've been thinking about this for weeks. I have everything prepared.

Use ChatGPT.

Click New Topic > type in message > click Post Message

Only the topic displays but the message is still stored in the array.

Still having issues sorting out the whole time thing but trying to solve it.

https://gamefaqs.gamespot.com/a/user_image/8/7/4/AATc28AAEMR6.png

https://gamefaqs.gamespot.com/a/user_image/8/7/5/AATc28AAEMR7.png

https://gamefaqs.gamespot.com/a/user_image/8/7/6/AATc28AAEMR8.png

[LFAQs-redacted-quote]

I'm not that far into this program yet but I believe SASS is coming up within the next 3-4 lessons.

ReturnOfTheMix posted...

Use ChatGPT.

But then I won't learn anything.

[LFAQs-redacted-quote]


Uh, what?

Rob_Cesternino posted...

Uh, what?

HTML getting junked up by class="p-lg-2", all over the damn place, is becoming increasingly rejected for being non-semantic.

Maybe HMTL6 will bring proper CSS namespacing, but I doubt it.

ShineboxPhil posted...

How are you going to recreate the shitposters?

chat gpt.

Good job so far

I am learning about HTML and CSS, getting ready for my A Level ICT. I need to learn more about Javascript.

That is a good idea replicating GameFAQs, that shows how far you are coming with your CSS skills.

I use w3schools to learn and watch youtube videos to learn.

[LFAQs-redacted-quote]

well... the layout is 10-15 years out of date, so at least it'll be easy

I completely redid my Board page and got rid of all the filler. Now I have a Board and a BoardDetail page which took over for my Current Events page that I was mostly using. That means instead of creating multiple pages for each board (Current Events, World of Warcraft, Movies: At the Theater, etc.) and copying + pasting the same code, I instead have a single page called BoardDetail which uses the same HTML and CSS code but stores all the information in one place.

Outside of a few minor details, there isn't much difference in terms of looks between any of the boards. There are a few though, the name of each board being the main one. Using useParams I added the ability for each board to have their own unique id. On my main Board page all the a links that redirect to a board have the id in their href. So my Current Events a link looks like this:

<a href="board/current-events"> Current Events </a>

I also have a separate component that stores each id in an array and gives each board a proper name.

https://gamefaqs.gamespot.com/a/user_image/7/2/3/AATc28AAEMfL.png

https://gamefaqs.gamespot.com/a/user_image/7/2/4/AATc28AAEMfM.png

I can still make topics but they disappear as soon as I go to the next page so my next goal will be to learn how to store a topic to each specific board and keep them from disappearing.

2Pacavelli posted...

Good job so far

Thanks! I appreciate it.

supermichael11 posted...

I use w3schools to learn and watch youtube videos to learn.

What YouTube channels are you learning from? I like Web Dev Simplified (his older vids) and The Net Ninja has some good React videos. My favorite is Corey Schafer or Traversy Media.

Interestingly, I'd expect modern versions of Bootstrap to use grids and flex as well.

Until there's something as easy as Bootstrap that looks as good as Bootstrap, I'll keep using it. Muh hand-spun CSS is good if you're more a dedicated front-end dev.

I spent the past three hours going through firebase docs and videos. I'm getting my data to store properly inside the database but I can't get my data to display properly back on the screen after it's saved.

I've decided not to bother with Firebase and instead use localStorage. I've never actually used localStorage before so it was nice learning a bit about it and implementing it for my project. It's slightly annoying having to manually change setItem to clear every time I need to clear my topics but now I can freely change boards without all my topics disappearing.

I also added a new key in my topic array called board which stores the id of each topic I create. Because of useParams all boards come with their own id which is the same as their file path. I've included a filter method when I'm displaying the topics so now only topics that match the id of the board and their board id will display. So now my topics are board specific instead of showing up on every board no matter what!

https://gamefaqs.gamespot.com/a/user_image/2/9/5/AATc28AAEM3v.png

https://gamefaqs.gamespot.com/a/user_image/2/9/6/AATc28AAEM3w.png

And here's a more normal looking board.

https://gamefaqs.gamespot.com/a/user_image/2/9/7/AATc28AAEM3x.png

Next I'll need to work on being able to view messages but that's going to take more research into learning how to have file paths within file paths.