How to be good at frontend?

[renderer]

I think I'm pretty good with backend to land a junior dev job, but I guess it's not that impressive since all I do is just glue APIs together and write CRUD logic. Lately I've been thinking about making a good product/SaaS as a side project or even make a startup with some friends since we got inspired from HBO's silicon valley.

But a great frontend/landing page is often what makes people get interested in a startup. For example the website for todoist is pretty much just a todo app, but it looks really modern and has these great illustrations. Even without the illustrations, it looks really professional. My frontend skills is poor, and the websites I code look like those from 2009. Even the company's website I work for looks pretty bad, no animation, and it just looks like the starter bootstrap template with some images. I guess the best example is to go to a hospital's website, most of them look like they're from a wordpress template 10 years ago.

Meanwhile startup websites like these look great.

• Please, Log in or Register to view URLs content!
• Please, Log in or Register to view URLs content!
• Please, Log in or Register to view URLs content!
• Please, Log in or Register to view URLs content!

They also have great illustrations, on that note, where do you find those things or do you bros know what's an easy way to make illustrations? They also have great colour design.How do you know which colour combinations work best? I feel like I have a lot to learn for frontend.

And then you have websites like these

Please, Log in or Register to view URLs content!

that just makes me feel stupid

 

[kalilinux]

Hello bro! If you already a good backend developer try to find a job in backend REST API development. REST API are very in-demand. If you already have a job as backend developer explore more frameworks so that other developers doesn't replace you. Always learn new frameworks that are in-demand. You said your frontend development is not good than start with simple html css website follow some courses. I will recommend Jonas Courses the websites that you mention they are not so difficult to build. Once you complete jonas courses you can easily build these kind of websites or better. After that explore frontend frameworks like react,vue,angular and then connect your frontend app to your backend rest api and call yourself a full stack developer.

You mention bruno-simon website they are frontend developers if you just want to learn frontend development then you will explore all technologies like three.js,anime.js,webgl and a lot more.

 

[rishu2022]

I think I'm pretty good with backend to land a junior dev job, but I guess it's not that impressive since all I do is just glue APIs together and write CRUD logic. Lately I've been thinking about making a good product/SaaS as a side project or even make a startup with some friends since we got inspired from HBO's silicon valley.

But a great frontend/landing page is often what makes people get interested in a startup. For example the website for todoist is pretty much just a todo app, but it looks really modern and has these great illustrations. Even without the illustrations, it looks really professional. My frontend skills is poor, and the websites I code look like those from 2009. Even the company's website I work for looks pretty bad, no animation, and it just looks like the starter bootstrap template with some images. I guess the best example is to go to a hospital's website, most of them look like they're from a wordpress template 10 years ago.

They also have great illustrations, on that note, where do you find those things or do you bros know what's an easy way to make illustrations? They also have great colour design.How do you know which colour combinations work best? I feel like I have a lot to learn for frontend.

And then you have websites like these that just makes me feel stupid

My 2 cents: Saw the links you shared. These websites are good from design point of view. But people can build such websites using Figma, Wordpress, PHP, Laravel, as well. My research says that the tools don't matter if you are proficient with the basic essentials of web design (HTML, CSS, JS) and know one tech-stack extraordinarily well. Buddy, you can check out some Skillshare and Awwwards courses for UI design, some courses on UX, some on colour science, some on design. Presentation does matter to the human eye as it is directly visible. The tools to achieve that could be anything, say you can choose -- HTML, CSS and JS. As these three have a great documentation and an active community backing them up.

CSS and JavaScript become fairly complicated once you try doing extraordinary stuff using them. So knowing them in and out should be the core focus. As for frameworks, React is the one that I've seen people put to good use. Plenty of beautiful websites have been made using React. I think this one is built using React: egghead.io The 3 aforementioned technologies (React, CSS, JS) should be enough to put up a website that looks cool. Screenlane:

Please, Log in or Register to view URLs content!

Codepen:

Please, Log in or Register to view URLs content!

might give you creative ideas. Also see:

Please, Log in or Register to view URLs content!

Plus, there might be a number of resources which even I am not aware of. Heck, you could look even look into the PHP side of things. Laracasts.com website uses a PHP stack, I think, and it is a very smooth, responsive website.

A guided path (sort of):

Please, Log in or Register to view URLs content!

A guided video course:

Please, Log in or Register to view URLs content!

All that said, to create beautiful websites that puts a smile on peoples' faces, design is as much important as the tech used while creating them. There's a reason why Apple is Apple and very few companies come close to Apple (at least, the Apple of Jobs era) in that aspect -- d.e.s.i.g.n. Have a look at how laptops used to look in general before MacBook Air came into existence, or how PCs used to look before iMacs, or how Android looked before iOS 7. I think a great designer will just need HTML, CSS and JS for creating beautiful websites. That's it. Three.js, D3.js, Anime.js, Greensock.js, Velocity.js, Type.js should be a later consideration.

 

[encephalitis]

Learn CSS that's all xD
Few parts:
* parallax effect
* dark mode effect
* smooth scroll effect
* position:sticky
* flexbox
* rbga()

With above these topics you can make top notch beautiful sites

 

[rishu2022]

Here's a showcase of Greensock websites:

Please, Log in or Register to view URLs content!

Another showing D3.js capabilities.

Please, Log in or Register to view URLs content!

Lavarel:

Please, Log in or Register to view URLs content!

Inspirations:

Please, Log in or Register to view URLs content!

Anime.js :

The sky is the limit.

 

[dikk]

I think I'm pretty good with backend to land a junior dev job, but I guess it's not that impressive since all I do is just glue APIs together and write CRUD logic. Lately I've been thinking about making a good product/SaaS as a side project or even make a startup with some friends since we got inspired from HBO's silicon valley.

But a great frontend/landing page is often what makes people get interested in a startup. For example the website for todoist is pretty much just a todo app, but it looks really modern and has these great illustrations. Even without the illustrations, it looks really professional. My frontend skills is poor, and the websites I code look like those from 2009. Even the company's website I work for looks pretty bad, no animation, and it just looks like the starter bootstrap template with some images. I guess the best example is to go to a hospital's website, most of them look like they're from a wordpress template 10 years ago.

Meanwhile startup websites like these look great.

• Please, Log in or Register to view URLs content!
• Please, Log in or Register to view URLs content!
• Please, Log in or Register to view URLs content!
• Please, Log in or Register to view URLs content!

They also have great illustrations, on that note, where do you find those things or do you bros know what's an easy way to make illustrations? They also have great colour design.How do you know which colour combinations work best? I feel like I have a lot to learn for frontend.

And then you have websites like these

Please, Log in or Register to view URLs content!

that just makes me feel stupid

Sites such as bruno simon's have not just happened in a few hours. He probably have worked on it for a long time (depends on skills: days - weeks). And also must have many years of experience before just to boot. If you want to improve your skills, try to copy sites you like. Use the source basically, also learn about color theory, design guidelines, fonts, UX as the bare minimum. Awwards and designcode tutorials are good. There's also a "Designing User Interfaces" book on this site also that you should take a closer look at.

 

[anor4kk]

best way to learn frontend in my opinion is by cloning uis of popular sites by inspecting and after building one two screen you will start to see patterns...and then go with a in depth tutorial to make sense of what's happening ..this is the way I learnt very first..during my first freelancing gig..I did not even built a single screen before that..just binge watched the angela yu's course...

 

[sunnydebjit]

Front End is heavily based on Design & Design Thinking which is another field. If you want to master it you do need to grasp all the concepts and practice design daily. You cant do everything here. Rather focus on one part of frontend and master it, then move onto another.

 

[CoderBoi]

I feel the same as I am also a backend developer..but I feel comfortable now with design but not a pro...you can explore CSS and build small projects like navbar, buttons on codepen.io..
Also add animations and learn about responsive design with CSS.
Also Look for advance html5 techniques like srcset.. and designing all html elements like checkbox and other stuff.
For better CSS..you can follow Kevin Powell on youtube.

 

[encephalitis]

idk why people are stressing about this , bruno simon's website is really good and marvelous , it's totally useless in terms of a good product , what's even the point of those animation , browsing internet is switching highly towards mobile , idk why that's not something good productive but i would really look into making a website have DARK MODE that's something cool and productive

 

[renderer]

idk why people are stressing about this , bruno simon's website is really good and marvelous , it's totally useless in terms of a good product , what's even the point of those animation , browsing internet is switching highly towards mobile , idk why that's not something good productive but i would really look into making a website have DARK MODE that's something cool and productive

True but it's not really the point of his website, but rather it's about the skill to make one. That same skill to build such website can be applied to building interactive visualisers, simulations that require graphics especially those in science work, products with experimental interfaces, or just plain web 3D. Check out apps like Palantir's Gotham, specifically the military version of it. Its a more interactive, accurate, and advanced (has AI features + realtime updates and multiple levels of visualisation) version of Google Maps built for the US military.

He also displayed the skill to build such experiences with great performance on low spec phones. The design controls are also great, the way the camera moves and repositions, lighting and shadows move accordingly like when you smash the bricks, the controls of the car stay intuitive even as you turn the front of the car to the other direction like as if it has some compass, and the sounds as well. There's many other little things that he coded, such as 3D objects blur as they get far and become clear when you move closer, attention to detail as well as the design thought put into it that made it great and shows his ability to write complex software. He has shown the ability to decompose a large problem into well-designed functions.

 

[rishu2022]

idk why people are stressing about this , bruno simon's website is really good and marvelous , it's totally useless in terms of a good product , what's even the point of those animation , browsing internet is switching highly towards mobile , idk why that's not something good productive but i would really look into making a website have DARK MODE that's something cool and productive

I'll say some creations are more of an artistic venture like this one (this movie is like a painting brought to life, doesn't serve much purpose though):

@renderer
Here are some good articles:

Please, Log in or Register to view URLs content!

Please, Log in or Register to view URLs content!

Please, Log in or Register to view URLs content!

Please, Log in or Register to view URLs content!