I have been familiar with HTML, CSS and JS basics for a while. A few weeks ago I started learning React and I came to the conclusion that building my own website is a good idea while studying the course and watching other tutorials.
Here is the site: https://reverent-snyder-bcd56a.netlify.com/
It was pretty easy to get a hang of Git/Github and Netlify.
Certainly there are some bugs and mistakes here and there, but I managed to make it a responsive website (mobile-first approach). There are random texts and images. One of my hobbies is trading currencies (Forex) so I decided to start building a signal website. I’m not using jQuery, only React. JSX is pretty easy to learn but it takes time of course.
Now, since the front-end part is almost done, I will start learning about the back-end. I will start with Node.js, Express then Mongo. Then I can officially become a full stack MERN developer. For this website, after taking a few courses and tutorials, I will implement a user dashboard (signup, login, signout, profile settings, user dashboard) and will try using an API too. This sounds a bit overwhelming at first and it’s going to be a lot more difficult than the front-end part, but I really want to showcase a full-blown app. So I will start working on this…
What do you think so far? I look forward to your feedback and criticism.
It’s a good idea to apply what you learn to personal projects, easier to find the motivation that way.
Overall I think it looks pretty good. You have some good use of dynamic layout, like the modal, tabbed layout and price switcher.
The image sizes are all over the place. Some are too small and pixelate, others are way bigger then they need to be.
The section navigation does not land correctly. I’d also add
scroll-behavior: smooth; (add it on the html selector).
cursor: pointer; to all buttons.
The nav overflows on small screen sizes, I’d look into adding a standard mobile nav menu.
Some of the headers are not centered on the stacked layout.
I think you did a good job, it just needs a bit of refinement.
Thanks for the great feedback.
I will implement these points.
- You mean I should add a hamburger menu instead of the overflown scrolling menu? Or completely get rid of the overflow thing?
well good job on your first try.
Yes I mean implement a hamburger menu, or something like it. It doesn’t have to use a hamburger icon.
Ah yeah! I will use the hamburger menu in my next project. But thanks for reminding me.
Here, I deliberately used this scrolling navigation bar to showcase something different. I set the opacity on the left and right hand side to let users know that you can scroll for more menu items. And I made the Sign Up button appear next to the list items when you scroll down.
If you go on the official React website on your phone (portrait mode), you’ll see something similar on the top I think, I got the code from there.
The menu does look a lot better when emulating a phone. Not totally convinced about the UX though, even with the fade it isn’t super clear that you can scroll the nav.
I missed that the cursor was a pointer on buttons and some hover effects over buttons, it’s a small thing but something you expect to see. Also I would get better images if you are going to show it but other than that it’s a great project to show for knowing React, I wish I had more free time to put something like that together.
Alright, good to know that. ^^ Will consider this in the future.
Hey man, thanks for the feedback!
You’re right, I’ll get these done as well. Didn’t bother finding better pictures yet.
You should slowly start a building a similar website, just to showcase what you can do.
The site looks very nice. Please keep posting updates!
It’s mainly the discoverability of the links I worry about. I think the overflow pattern and actual menu usability is pretty good on mobile devices. If the overflow box always cuts off the links and it’s very obvious that there is more content to the left or right, then using an overflow pattern isn’t a bad idea.
The hamburger menu isn’t really considered great UX either. The only reason I mentioned it was that on desktop the overflow didn’t look great. But it’s obviously not meant for desktop navigation.
Awesome, I’ll check these out. Thanks mate.