I've been learning to code HTML and CSS. I'm at the point where I can create a webpage with most common basic tags and create a layout using CSS Flex and CSS Grid. I also learned how to do a column layout with floats. Now I know those "web developers" we hired (they edited a premade template and called it a "full-custom site") were scammers. I don't find it to be rocket science to do it from scratch.
In my learning effort, I came across two following terms, and I am wondering which is a more sensible approach.
1) Graceful degradation: Design for the best case scenario and work back to fix less capable browsers. With this approach, I do things like using <noscript> to provide something for users who turn JavaScript off, and so on.
2) Progressive enhancement: Start with a bare minimum viable page that works for everyone and then improve the experience for people using more capable browsers. With this approach, I begin with the assumption that nobody is going to use JavaScript and then add it more like icing on a cake.
Which method do you recommend, and why? As for me, I feel like the "Progressive" one might help to keep things simple and focused, but the "Graceful" one might be less restrictive and give me more freedom.
Honestly since you're comfortable asking the question of how to balance these, you'll be fine :) Arguably they are simply two sides of the same coin. GD is framed around the experience someone gets in the old browser; while PE is framed around the newer browsers.
As a philosophy PE works really well as you focus on that simple, universal experience and only add things where you actually need to. GD takes a bit more discipline in testing and it's easier to miss something, but it is very effective all the same.
It can help to look at your site's usage statistics, to see what most people are using - ie. do most people have the good new browsers, or do you have a lot of people on old gear? Do you have a high proportion of mobile vs desktop? It can be a good way to inform your decision and know where to focus your time/attention.
I consider progressive enhancement to be the only practical road TO graceful degradation, since the latter is supposed to be about what happens when things are missing. If you start with a clean clear baseline and slowly layer your fancy bits on top, the result should gracefully degrade for everybody.
Trying to gracefully degrade without building via progressive enhancement is like trying to turn a five year old's crayon drawing of a skyscraper into an architectural blueprint.
That's why I consider the proper approach to web design being "Content First" -- and that means taking your content or a reasonable facsimile of future content, and organizing it in a flat text editor to have a logical digestable structure as if HTML doesn't even EXIST. Then you mark it up semantically; your choice of semantic and behavioral tags (basically everything except DIV and SPAN, which have no business being used at this stage) being based on professional writing norms (paragraphs, heading depths, etc) and NOT what you want things to look like.
This gives you your screen reader/braille reader/search engine/non-visual/legacy compatibility layer, aka using HTML for what HTML is for.
THEN you create your layoutS (yes, plural) with CSS adding DIV and SPAN where and only as necessary, attempting to keep your classes saying what things are or why they are getting a style, and not what that style is!
This is why I consider classes like col-s-4, text-center, w3-red, box-shadow, etc, etc, to be -- here come those words again -- ignorant and incompetent nonsense created by people who have no business writing a single line of HTML or CSS. If you can't explain why it is getting a style, it probably shouldn't.
Then and only once you have a working page do you enhance it with JavaScript -- since good scripting should be exactly that, an enhancement. If you can't write a fully working page without client-side scripting first you are likely utterly unqualified to use client-side scripting.
That's progressive enhancement... JS fails, CSS fails, presentational images fail, content images fail, even if HTML itself fails to be able to be conveyed, the page will gracefully degrade.
Trying to implement that without progressive enhancement is a train wreck of just making yourself work harder, not smarter.
Which describes a lot of 'modern' front end development. "Frameworks", Artists under the delusion that they are "web designers" when all they know how to do is slop out PSD's, SEO "experts" scamming clients playing goofy games of whack-a-mole with the search engines, pre-processors that only provide benefits if your code is utter garbage... They all make people work harder, not smarter; and that's why most every one of the claims of them being "easier", "simpler", "speeding up development", or "helping with collaboration" is a bald-faced lie that people parrot because again, they just don't know any better, and certainly aren't willing to admit how badly these scams have bamboozled them.
For more on my views on progressive enhancement try my six page tutorial on the topic:
cutcodedown.com/article/progressive_enhancement
My minimalist semantic markup article is somewhat related:
cutcodedown.com/article/minimalist_semantic_markup
As is my rant on why HTML/CSS frameworks are an utter and complete /FAIL/
Language Warning
cutcodedown.com/article/HTML_CSS_and_JS_frameworks