Women in STEM Day 64

I have mixed feelings whilst writing this post. Reason be, I’m happy that I’m back to programming, yet at the same time frustrated at how out of practice I am. Things that only took me a few seconds to do now take me minutes if not hours… Not to mention the stuff I forgot.  But hey, we’re starting over so humble beginnings Athoug. Alright, let’s just get to it!

So I wanted to do a simple project, a tribute page. I decided instead of one why not 10 people. And I want females in STEM [cough] not bias at all [/cough] I found this article that lists 10 greats so I decided to feature them. Started by designing the interface, and here’s a bunch of pictures that shows the process

now with colors and a stack of cards

so as you can see I wanted to have a horizontal layout of cards and you can scroll along the x-axis. True, I’m a bit rusty with my CSS styling, however, I want to challenge myself and I’ve always wanted to learn React so why not start now.  But before I convert it to a React app/file whatever we call it, I’ll first build it with plain HTML and CSS, and then move on from there. So here we go

Alright, awesome we got the UI all ready, now it’s time to convert this to React. Note to self though, damn I need to practice my positioning. Pretty sure there is a better way than what I did, but with time I’ll get better again. Okay so on to React.

Now I don’t know much but what I gathered from the 15 minute video I watched that we have components which are basically something along the line of constructor functions that return HTML or what’s called in react an HTML like structure known as JSX. and the way to change the data within that component [in this case the cards] I have to pass props. An object like data structure that holds my data [the image path, title, description…etc]. Then I have to render that component to the page [DOM] okay cool.

To do that I, of course, need to import the React library and React DOM as well [I used a CDN]. Then later I remembered, hold on doesn’t that use ES6 crap I need a preprocessor/transpiler for this and Babel comes to the rescue. so I added that as well. I was actually a bit proud of myself. writing my first component! and I get now all the hype about there front-end frameworks definitely beats the constant HTML UI. So let’s test if it rendered correctly and

ummm what the hell happened? Lets fire that trusty developer console and see

Oh! So it’s just syntax error cool I just need to fix the JSX tags and let’s test it out shall we

Oh my yay! okay now adding all the cards and the proper data

ummm again with the positioning. [damn those trusty skills] okay now I go through the process of trying to figure out the way to position them properly. reading articles, tutorials, and MDN.

okay at least it doesn’t go off page now let’s try flex and I don’t know, see where it goes… At this point positioning truly got to me, so I decided to skip that and work on the UI a bit   [first off button effect]

Now image and card shadow effect

Now that I feel a bit more accomplished with these UI changes, it’s time to get back to positioning. Started messing more with flex and a bunch of dives and finally! it worked!

Now last but not least, make it responsive.

 

Oh man, I won’t lie, it was challenging getting back to it, but I guess you need to persevere. Here’s the final result if you’d like to check it out for yourself.

Of course, I used a couple of helpful material to which I will list here:

I guess that’s all for today. Hope you all are having a wonderful day and happy coding 🙂

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *