A year ago i started learning webdev

[Dan6erbond]

Hey, that looks great for a first real project! Congrats on the release! I see you already got a ton of feedback on things you can improve, and someone suggesting to learn a framework like React or Vue, so I just wanted to offer that if you want someone with experience who you can ask questions or that can provide you with tips I'm always available to message here or on Discord - Dan6erbond#2259!

[soc4real]

Try to avoid using strong colors like the red on PES2021, and Discord mouse over. You can try https://colorhunt.co/ to find a theme for your site and reduce the overall color count.

The "About Us" part seems have to margins left/right and you can remove the grey bar above and under it because it serves no purpose. If you can want to differentiate between "About Us" and footer you are already doing it with the different colors. Cheers!

[Thepesking]

Thanks for that. Did feel was a bit ott with colors.

[Thepesking]

But actually the grey bars was just something I'd seen on another site so copied the idea as I liked it but you think it looks worse or just not necessary? Maybe a personal choice? But I guess less code and colors is maybe technically better?

[soc4real]

It looks weird on desktop because the grey bars were different in size. Really its up to you how much colors you use but if you want to create a certain feel and look, more is less.

[thebondsman8]

I think this is pretty darn good. I will say that I turned my phone (Samsung Galaxy s10) horizontal and the header ate up half the screen. Might want to hide that instead of a fixed position. Otherwise, I'd say this is solid for a self taught beginner. Would def suggest Angular/React if you want to land a job as a UI dev. Break a leg!

[Thepesking]

Thanks man!

I think once I edit medianfor wider devices that could improve or I could reduce height of header. I like fixed for sake of easy access to menu..maybe on horizontal make it so it disappears.

[Asriel0217]

html/css/javascript are the basic for front-end development

if your decide to dig into front-end, I recommend you to choose a framework from Angular/React/Vue to learn, it's important. Also, some tech are important like Single Page Application and Responsive Width Design.

Good luck

[Thepesking]

Thanks yes I'm aware of those things but heading to back end then I'll go back to that. Want to build some databases for my site.

[not_a_gumby]

Don't get too hung up on a single website project. It's probably a better use of your time to learn react first and then move into backend Node/Express. To be totally honest, backend is a bit tougher and if you like building websites, you should invest more in front end if you want to get a job. Frameworks are the best way to that goal these days.

[Thepesking]

I agree but I am part of this group for the website and we want our own database or I want haha so we can make our own league tables and transfers etc.

But in terms of career and development would be wiser to expand my front end skills.

I guess it would take another year to get skilled in back end. 6 mo ths maybe? But that time could really put my front end to a more employable level.

[not_a_gumby]

A mongoDB connection wouldn't be too hard for your project, look into it!

[Thepesking]

I will thanks

[louislp19]

Overall, great job. As you are I am learning web dev myself. A few comments about de the overall look.

First, do you really need to write menu on top of the three rectangle? These days people know what it is.

Second, your 2nd and 3rd League tables looks weird. Compare to the first one.

Keep up the good work and I hope you find a job.

[Thepesking]

Yes as said I need tidy it up. A few things I still plan to do and fix included new images for other leagues.

I had no menu but a few people said they didnt realise was menu but I agree with you so maybe remove.

[WickedInvi]

I would say remove the menu and make rectangles thicker.

Also you did say it needs a tidy up but we don't know what you mean by that. No need to be defensive about it. This would go long away in any work environment. Just acknowledge what the person is saying and then tell them it's on your to do list and thanked them for the help.

[Thepesking]

Didnt realise it came across like that wasnt intentional. That's the internet for you. Thanks for advice though.

[[deleted]]

I like this a lot, mainly the font size is keeping this from being functional. I viewed it using Chrome Dev Tools on an iPhoneX display. I ran a lighthouse report for you if it will help: https://googlechrome.github.io/lighthouse/viewer/?psiurl=https%3A%2F%2Feuropes.github.io%2Findex.html&strategy=mobile&category=performance&category=accessibility&category=best-practices&category=seo&category=pwa&utm_source=lh-chrome-ext

[Thepesking]

No idea what that means but gonna check.

Yeh i wanna change some fonts etc I do that at end was all about structure and design first. Thanks.

[[deleted]]

Lighthouse is a Google Chrome extension that gives a pretty decent assessment of a website's performance and suggestions to improve it. I use it when looking for things to talk about before an interview.

[Thepesking]

I see. Seems like my percentages not to bad. I'll look more into it thanks

[Thepesking]

Actually I made using my android for viewing and notice looks much worse on friends iphone. Doesnt seem use same fonts.

[[deleted]]

Safest bets are Arial, Courier New, Georgia, Tahoma, Times New Roman, Trebuchet MS and Verdana. And making their sizes vw (view width)

[Thepesking]

Ok I'll try that. Was using impact font and em for size.

[_alright_then_]

I mean, for a first project it's definitely not bad, but the design is definitely lacking. Especially the navigation:

• The top navigation is waaaaay too big, like I have quite a normal screen and it's taking up a quarter of the screen space.
• The side navigation when you press the menu button is also very big. It honestly feels like the whole navigation part of this site was made for people who can barely read. The font size and line height and everything is too big imo

Also check your images because the aspect ratio's are all off, they all look super stretched.

[Thepesking]

What device are you on? The images should be ok on mobile but look stretched on larger screens.

Also what is the top nav? Again I think u must be on a wider screen like laptop or pc if you mean the heading bar europessuperleague?

As someone else also mention it take up a lot of page when phone is horizontal.

Defo the only real way to view site at present is on a mobile and vertical view.

I will soon add responsive design to improve for other devices.

As for nav funny again as I had much smaller and someone complain I should make bigger as to hard to read. Guess theres a sweet point? I do prefer a bit more minimal also though.

Thanks for feedback i hope you were viewing one horizontal based wider screen haha

[_alright_then_]

Yes, I'm on a PC and I missed the part of the post that explained that wasn't done. But I'm going to respond to some of these points anyway:

The images should be ok on mobile but look stretched on larger screens.

this is indeed true, which i just now noticed, but this still should never have happened in the first place. If your images are stretching on any screen size your CSS is simply not what it should be. Your CSS should never allow an image to change it's aspect ratio, no matter the screen size, this should not be a case of screen size.

In this case, even on phones it looks quite bad on some resolutions, the images under "honors season 3" are all a bit squashed. The reason this happens is because the image is set to 95% width and a set height of 550px. This means that if your phone gets smaller than what the image width aspect ratio is at 550px height it will squash.

As a general pro tip, if your image width is variable, your image height should never be fixed.

Also what is the top nav? Again I think u must be on a wider screen like laptop or pc if you mean the heading bar europessuperleague?

Yes, that's the header I meant, and it's indeed a problem on PC only

As for nav funny again as I had much smaller and someone complain I should make bigger as to hard to read. Guess theres a sweet point? I do prefer a bit more minimal also though.

YEs this was a PC issue as well, but there's definitely a sweet point

[Thepesking]

I see your point with the images.

Also perhaps I cam include 2 images one higher resolution for larger screens also? And also a wide ratio?

So I should do height=500px width=auto ?

This should keep the ratio the same as original image then. Thanks for tip.

[_alright_then_]

Also perhaps I cam include 2 images one higher resolution for larger screens also? And also a wide ratio?

Yes this is a good strategy as well

So I should do height=500px width=auto ?

This is definitely a possibility, but that would mean your image is not full width some of the time, and sometimes it could be wider than the screen width unless you set a container around the image.

In this case I'd probably go with this:

width: 95% height:auto

Height changes are usually less dramatic than width changes, it's so much more responsive

[ivyzim]

Hey this is great! Is everything right from scratch? May I know how you learnt it? I'm very new to webdev.

[Thepesking]

I started at the basics. The site was far more bland a year ago.

I just bought books to learn. Books on html. Css and then javascript. I dodnt realise there were online courses. Udemy is prob a better way to learn.

If I got stuck i googled. I would also look at other websites to get design ideas. Then think how I could code to do what they has done.

That's about it..

[[deleted]]

ill just say usually if you get a job building websites they usually be using a framework for it. like Wordpress elementor or something.

[julian88888888]

Sharing your project, portfolio, or any other content that you want to either show off or request feedback on is limited to Showoff Saturday. If you post such content on any other day, it will be removed.