UKBouldering.com

Web design wisdom & best practices (Read 2743 times)

MischaHY

Offline
  • ***
  • obsessive maniac
  • Posts: 496
  • Karma: +64/-1
Web design wisdom & best practices
July 05, 2022, 08:18:07 am
I've started learning HTMl/CSS/JS etc with an eye to getting work in that area in the future. I'm trying to give myself a good kickstart into it and was curious to know what wisdom could be offered up about working/continuous learning in this area. I'm sure there's a good few UKB'ers out there who have gone down this path at some point! So far I've been using freecodecamp which is really intuitive. I learnt German exclusively from Duolingo and conversations a few years ago so this sort of self-driven learning method seems to work well for me.

Things I've learnt so far: 

1) Being good at googling the right question is more important than being able to remember everything.  :google:

2) Lots has changed since I did this in college in 2012.

3) Visual systems are like toprope aid climbing and should be avoided.

4) An almost ridiculous amount of education is available for free!? Curious to hear about good free/cheap resources.

Really keen to hear any advice that may be considered relevant for the budding web dev  :great:

matt463

Offline
  • *
  • regular
  • Posts: 50
  • Karma: +0/-0
#1 Re: Web design wisdom & best practices
July 05, 2022, 08:22:49 am
sign up for stackoverflow.com. 99% of the time any problem I ever have has already been asked and answered by someone else. In the other 1%, as long as you provide a minimal reproducible example, people respond very fast.

MischaHY

Offline
  • ***
  • obsessive maniac
  • Posts: 496
  • Karma: +64/-1
#2 Re: Web design wisdom & best practices
July 05, 2022, 08:26:27 am
sign up for stackoverflow.com. 99% of the time any problem I ever have has already been asked and answered by someone else. In the other 1%, as long as you provide a minimal reproducible example, people respond very fast.

Yes, good beta as I've been meaning to do this anyway. Bottomless wisdom on that place.

matt463

Offline
  • *
  • regular
  • Posts: 50
  • Karma: +0/-0
#3 Re: Web design wisdom & best practices
July 05, 2022, 08:31:36 am
You probably do this already but I'd also recommend a good IDE. I use microsoft's VS Code. Works really well and has lots of add ons. I don't do any web development really but I'm sure VS code has some good add-ons for debugging web sites. Github is also a good integration to have with this. Ideal for version controlling your code and not ending up with a million different files in random places on your desktop.

remus

Offline
  • *****
  • forum hero
  • Posts: 2857
  • Karma: +146/-1
#4 Re: Web design wisdom & best practices
July 05, 2022, 08:40:16 am
Things I've learnt so far: 

1) Being good at googling the right question is more important than being able to remember everything.  :google:

Nail this and you're 90% of the way there  :lol:

Quote
2) Lots has changed since I did this in college in 2012.

Web development, especially front end (javascript), has a ridiculous pace of change at the moment. There's seemingly new tools and frameworks being released daily! Everyone agrees it's completely mental though so don't feel like you need to learn all the shiny new stuff. Once you've picked up the html/css/js basics I'd pick a popular framework (react would be a solid choice) and learn that in depth, then pick and choose other tools/libraries as you need them.

The other thing to bear in mind is that there's a lifetime of stuff you can pursue when it comes to programming, web design etc. so try not to get overwhelmed by terminology etc. As before, just pick and choose the bits which you find interesting and (relatively) approachable and build your skills out slowly.


Quote
3) Visual systems are like toprope aid climbing and should be avoided.

Word. Visual tools will typically get you something that looks ok, but as soon as you want to start adding any vaguely complex functionality you'll hit a brick wall.

Quote
4) An almost ridiculous amount of education is available for free!? Curious to hear about good free/cheap resources.

Yes, there's loads available online. If you find a platform that works for you then milk it.

My number one piece of advice would be to try and build a real project once you're familiar with the basics. I guarantee it'll be hard work the first time but you'll pick up so much practical experience, and that's what separates out the good from the bad. It'll also give you some appreciation for the 'full stack' so you understand a little about the stuff that actually delivers web pages to people.

With the project, ideally pick something that's interesting and/or useful to you so you're motivated to work on it. Also try and think of something where there's room to build out more functionality once you've got something basic up and running so you've got room to experiment. I wouldn't worry about building something totally new to the world, just copy something that already exists: you're looking for something to sharpen your skills, not some killer business idea that no one's thought of before.

colin8ll

Offline
  • *
  • regular
  • Posts: 50
  • Karma: +3/-0
#5 Re: Web design wisdom & best practices
July 05, 2022, 11:24:09 am
I also started by leaning html, CSS and JavaScript. Over time I've realised that it's important to spend time upfront planning and designing for different screen sizes (mobile, tablet, desktop, xlarge), and using wireframing tools to mock up the pages before asking friends/colleages to try out the pages, then tweaking the designs. This can really help you nail a great design before you start coding. Figma is a popular design tool that is definitely worth learning. Free accounts are available.

To implement pages for different screen sizes you will want to understand the viewport, and how to write CSS that taps into this. Having said that, lots of people use CSS Frameworks these days which abstract away control of the viewport. Bootstrap, tailwind and Bulma are popular choices. They also mean that you don't write much CSS anymore and instead your workflow involves adding the correct class names to your components. It's definitely worth learning one of these at some point, as they can do a lot of heavy lifting.

A trend over the last few years has been to separate content from presentation. Content can be written in markdown and then gets 'built' into a web page. This is the concept behind static site generators like Jekyll, Hugo and Gatsby. They can be great for sites with lots of text-based content like blogs or support documentation.

If you're making a site/web app where there will be lots of changes on the interface (i.e. more like a dynamic app than a static presentation of information), it can be worth using a framework/library like React or Vue which handles updating the interface as data changes. These have quite a steep learning curve and can be overkill in a lot of situations but are really useful for complex sites.

It's worth understanding how to tap into 3rd party services instead of coding your own. For example, Firebase can handle user logins for you, formspree can handle any forms. Using these 3rd party services can reduce security anxieties, simplify and speed up the development process, and they are often free unless you gets lots of traffic.

As someone above said, using version control can be really helpful. As soon as you start with this, it's worth understanding that secrets (e.g. passwords/usernames) can be placed in a .env file, and the .env file added to a .gitignore file so that sensitive data won't be uploaded to a potentially public online repository (don't ask me how I know this!).

Whilst the number of tools available can make web dev seem impenitrable, the basics remain consistent: make a site/app that is intuitive to use, looks good on a range of screen sizes, is fast to load and respond, and easy to maintain.

As suggested above, the best way to learn is by working on some some projects.

36chambers

Offline
  • *****
  • forum hero
  • Posts: 1678
  • Karma: +154/-4
#6 Re: Web design wisdom & best practices
July 05, 2022, 11:26:07 am
I found https://roadmap.sh/ a useful resource when I was learning the ropes (although for backend rather than frontend). It might seem a bit daunting at first, but for a lot of things it's usually enough just to be aware of them, especially if you're not going to actually use them any time soon.

As well as the backend roadmap they've also got a React one, should you decide to go down that path. Which I'd probably recommend as it's the most popular web framework according to this year's stack overflow survey and I'm pretty certain it was the last few years too.

+1 to what matt463 said about VS Code and also Github. Using git is probably overkill for tinkering, but having a main branch where everything works and using separate branches for adding new features is a god save when everything suddenly breaks and you just want to go back to a happy place.

Also +1 for building projects as soon as you've got an idea of the basics. It might be a case of slogging through the most bearable youtube tutorials you can find to get going, but then you'll have something to reference back to or expand upon.

Duncan Disorderly

Offline
  • *****
  • Administrator
  • forum abuser
  • Posts: 728
  • Karma: +40/-0
  • Stealth Punter
#7 Re: Web design wisdom & best practices
July 05, 2022, 12:18:48 pm
Lots of good gen here... I'd add that it pays to look into which areas that you're interested in working in and then get to know the tools used there...

I initially learnt HTML/CSS/JS/PHP/MySQL but also Photoshop & illustrator and CPanel & Plesk which meant that I had the skills to do the front-end stuff a client wanted, could tinker around with the back-end/databases and admin the server...

Many agencies work with particular CMS's too, most of my work these days is geared around Wordpress/Woocommerce so getting to know them could prove useful if you're looking to do agency work and if you wanna go down the development route then good certified Magento (Adobe Commerce) developers are like rocking-horse shit!

MischaHY

Offline
  • ***
  • obsessive maniac
  • Posts: 496
  • Karma: +64/-1
#8 Re: Web design wisdom & best practices
July 06, 2022, 09:53:56 am
Nice one folks, really interesting. Sounds like some specialisation is well worthwhile after the initial learning curve. I suppose it'll come down to seeing how well I get on with specific languages and then expanding in that direction. Cheers for the feedback!

Nails

Offline
  • **
  • addict
  • Posts: 134
  • Karma: +12/-0
#9 Re: Web design wisdom & best practices
July 07, 2022, 04:26:31 pm
I'd suggest that fairly early on you decide whether your main focus will be front-end or back-end. Generally you need a bit of graphic design talent for front-end work. You can spend a huge amount of time learning different languages and development environments so it's worth thinking what your general direction might be. I moved from Windows based development to web stuff about 25 years ago and decided to invest in learning PHP/MySQL. This worked out well as they're really stable, well supported languages. Also a lot of other frameworks are built on top of them. For front-end I wouldn't worry too much about details of HTML and CSS. Most people use some framework or templates that you can tweak to your own uses. I would use jQuery rather than any raw js and get your head around using this to manipulate the HTML DOM.

I've used a number of PHP based development frameworks/CMSs. Wordpress, Drupal, Joomla and Expression Engine. Whilst they can be excellent and deliver an awful lot of functionality very quickly there tends to be a trade off that they straightjacket you into working a certain way and limit flexibility. Drupal for example is brilliant for sites aimed at shared authoring, but you struggle to adapt it to other uses. Hope this helps.
« Last Edit: July 07, 2022, 04:54:01 pm by Nails »

MischaHY

Offline
  • ***
  • obsessive maniac
  • Posts: 496
  • Karma: +64/-1
I'd suggest that fairly early on you decide whether your main focus will be front-end or back-end. Generally you need a bit of graphic design talent for front-end work. You can spend a huge amount of time learning different languages and development environments so it's worth thinking what your general direction might be. I moved from Windows based development to web stuff about 25 years ago and decided to invest in learning PHP/MySQL. This worked out well as they're really stable, well supported languages. Also a lot of other frameworks are built on top of them. For front-end I wouldn't worry too much about details of HTML and CSS. Most people use some framework or templates that you can tweak to your own uses. I would use jQuery rather than any raw js and get your head around using this to manipulate the HTML DOM.

I've used a number of PHP based development frameworks/CMSs. Wordpress, Drupal, Joomla and Expression Engine. Whilst they can be excellent and deliver an awful lot of functionality very quickly there tends to be a trade off that they straightjacket you into working a certain way and limit flexibility. Drupal for example is brilliant for sites aimed at shared authoring, but you struggle to adapt it to other uses. Hope this helps.

Thanks, that's really interesting. I've leaned towards front end when thinking about this mainly because I've been a little more into the creative side of things in the past - but I'm curious to at least have some knowledge of both. The main thing for me is that I want to turn this around into something I can work with in a relatively short-term time frame so I'm going to concentrate initially on what I think will offer the chance to do that and than hopefully expand from there. I can see development and app based work being an interesting further route but I'm very concious that it's all building from a base so I'm treating it like a grade pyramid in that respect  ;D

Fun though isn't it!

csl

Offline
  • ****
  • junky
  • Posts: 786
  • Karma: +93/-2
The main thing for me is that I want to turn this around into something I can work with in a relatively short-term time frame so I'm going to concentrate initially on what I think will offer the chance to do that and than hopefully expand from there.

Thinking about languages etc is obviously useful, but also worth shaping that by thinking about what you want this work to look like...

Do you mean that you want to build small websites as a freelancer/one man band - so you can be flexible with how much time you spend working? Or do you mean that you want to get a full-time job in a software company (perhaps remote) - or something else entirely?

Depending on that, you'd probably want to take a different route into learning and getting work.

MischaHY

Offline
  • ***
  • obsessive maniac
  • Posts: 496
  • Karma: +64/-1
The main thing for me is that I want to turn this around into something I can work with in a relatively short-term time frame so I'm going to concentrate initially on what I think will offer the chance to do that and than hopefully expand from there.

Thinking about languages etc is obviously useful, but also worth shaping that by thinking about what you want this work to look like...

Do you mean that you want to build small websites as a freelancer/one man band - so you can be flexible with how much time you spend working? Or do you mean that you want to get a full-time job in a software company (perhaps remote) - or something else entirely?

Depending on that, you'd probably want to take a different route into learning and getting work.

ATM freelance is my interest for the flexibility and improved time management. Based on this I've been planning to first get skilled up, then develop a portfolio by setting myself some 'work' projects i.e. redesigning the website of a small company etc. Once that's in place I'd aim to get some initial small paid projects and build out from there. We'll see how it goes though - very early days at the moment so it's mostly theoretical!

WilliCrater

Offline
  • *
  • newbie
  • Posts: 24
  • Karma: +2/-0
First created a website circa '95.  Been in (primarily) web-based development since then, albeit at the more technical server-side. 

Three suggestions I'd give are:

1. w3c schools are very good (free) courses.

2. Don't design your website around Adobe flash for no good reason.

3. Thank your lucky stars for google.  Before that software development was mostly poring huge racks of manuals to try and work out why the fuck stuff didn't work

 

SimplePortal 2.3.7 © 2008-2024, SimplePortal