Here is the CodePen Page.
Looks like you just copy/pasted the example. That isn’t necessarily a “bad thing,” especially if you didn’t just copy/paste but searched through the Bootstrap documentation to find the same elements. But, I would have loved to see your own interpretation of it. 
It works and looks especially nice on mobile since your photo is portrait.
1 Like
@cbirk Thanks for your feedback! The thing is that I am a backend developer and totally new to front-end, and I know that my design absolutely sucks. My sense of colors, dimensions, spacing, typography, etc. is very wrong, so I just copied that example rather than reinventing the wheel.
What can I do to become a better front-end developer? To get a better sense of design?
Aw man that’s okay. It’s always good to know what you need to improve and avoid, like you said, reinventing the wheel.
I think it might help to think about ~design~ as simply optimizing something for human eyes. Just like you want your code to be concise and efficient, good design conveys a message in the most efficient way. And that doesn’t necessarily translate into minimalism-forever, it just depends on the person/brand/whatever and the image they want to project. I hope that makes sense. For example: if your website colors are clashing, your visitor’s brain has to do extra work to figure out what your website is all about because those colors are to the eyes what a wailing siren is to the ears.
I don’t know how you personally learn best, i.e. videos or reading or hands-on, etc. But honestly I would go make a Pinterest account (bear with me haha) and start pinning images (or screen-grabs) of websites or other graphic design that you like. Not just the “oh that’s neat” ones but the ones that make you stop and look. You’ll probably start to notice some patterns thanks to the grid layout which lets you look at lots of images at once. Then I would say to go to whatever medium you like to learn from and search for “basic design principles” or similar, take those in, then go back to your pins and try to see how those principles are applied to your images.
Also start to look objectively at the websites you visit, like literally step back from the screen and look at the presentation. Where does your gaze go first? How does it make you feel? Is it overwhelming or calming? Does it make you feel a sense of urgency? And then think about how that fits in with the brand or company the website represents. A flash-sale site should make you feel urgency, a bank should feel professional and trustworthy, a restaurant: hungry (and upscale? casual?), etc.
Tutorials on color theory abound. I would do the same thing with Pinterest only this time search for “color palettes” and start looking at the colors that people are fitting together. You will probably notice certain colors evoke certain feelings again.
That was a bit of a ramble but I hope that helps in some way. I’d be happy to answer any specific questions you run into, if I can. And as always you can take design advice with a grain of salt because everyone’s personal bias will leak into it. Focusing on the basic principles and the “how humans interpret things” aspect will be more important than debates over trends or whatever.
1 Like
Thanks a lot for such thorough answer! What I usually do when I like the design/look of a website is I bookmark it to a folder called “showcase” in my browser which I’ve specifically created for this purpose . Pinning on Pinterest is also a great idea as you’ll be able to share the designs and discuss with others too.
I usually learn best by reading books and also watching youtube a bit as a complementary. Do you know any good books recommended for studying and improving such design skills?
You’re welcome!
I haven’t personally read this but I’ve seen it recommended: https://www.amazon.com/Non-Designers-Design-Book-3rd/dp/0321534042