

The hidden cost of frustrating, demotivating web development MOOCs!
For years, Iβve tried studying web development through various online courses. And every time I ended up frustrated and demotivated for months before trying again! So I know the struggle and the ubiquitous meme.
Then, I started building full responsive clones for great web-pages like:
Youtube, TNW, Behance, Newsweek, and more in less than 4 weeks!
So what happened? out of the necessity of having a coding partner, I researched the state of CSS in 2019. Itβs then that I realized that MOOCs as great as they are, can be gatekeepers!
So in this article, I will discuss that and answer the following questions:
The world needs more software developers.
Even with programmers supply doubling every 5 years, demand is growing even faster!
βSoftware is eating the worldββββMarc Andreessen Co-founder of Netscape
Every industry is integrating Software development at every step. From hiring management to supply chain to advertisement and sales, Software is essential. Not mentioning design, optimization, and manufacturing of their products. Itβs a necessity to stay competitive.
You may argue that there are rather too many programmers instead, and only good ones are scarce. so how would more non-CS graduates help solve that problem?
Well, I am well aware of the difference between a coder and a software developer, and I strive to be the later.
I am not arguing that we donβt need improvement in quality. but quantity has quality on its own and you canβt get more of the later without starting with more of the former!
But donβt take my word for it, take it from those βLeaders and trendsettersβ!
And I hope that more financial independence can help us face dangerous stagnation.
What does any of that have to do with CSS for example? Itβs not even a programming language! OK, it can encode Rule 110 but come on, itβs a style-sheet.
Indeed Front-end development is more about βUX Engineeringβ as some suggest to name it. And it is possible to have a career where you stay in that lane and never become a programmer.
Nonetheless, Front-end development is the most approachable for anyone with no CS background. Itβs also the most accessible market.
HTML & CSS will always be the first thing anyone tries once the idea of career shift come through their minds. That also explains why JavaScript is the first language most people learn!
And it is actually a good first step, it is visual rather than logical or mathematical. You will often hear people joke about how bad at math they are, but they take pride in their taste and style.
So itβs rather disappointing when they feel discouraged and repelled by a style-sheet. And it is very easy to mistake Confusing with Complex.
In most cases all around the world career shift is hard and risky. getting a job or starting making money through freelance can be crucial. Deterring someone at this early stage can mean the end of their Tech pursuit.
Remember: Reddit is only an Alt-Tab away! -Quincy Larson
While preparing to write this article, I watched a talk by Quincy Larson. In it, he talked about the fight for readers attention while writing a technical article. But it also applies for self-learn platforms as well.
Readers are looking for an excuse to close your article! -Quincy Larson
Yes, self-teaching coders, should have more grit and discipline. But still, career shift is scary, and their defense systems are looking for reasons to give up. So it baffles me how FreeCodeCamp curriculum looks likeΒ :
Days and days of learning small snippets of very basic HTML and CSS! And for some reason, you still didnβt learn about any recent development like Flexbox or CSS-grid! Not mentioning that you have nothing to show for it, to ease your self-doubt.
Here you can notice several tendencies:
- Mistaking old as fundamental, and new as advance!
I canβt see an upside in delaying learning Flexbox and CSS-Grid and -as far as I can remember- even Box-sizing!
Why force students to struggle through outdated tools? Praying day in and day out that everything will make sense somehow!
I would say the same about dismissing pre-compilers as a tool for advanced users. In fact, it has a very shallow learning curve and can only make the student feel smarter and more in control. Sass Flow Control is also a very welcome boost to studentβs confidence.
- Under-appreciating the importance of early achievements!
The longer a student spends going through infinite baby-steps, the worse. Building real-world projects boost their confidence, enhances learning, and cements concepts.
There are only so many abstract concepts you can force your brain to memorize before it repels. Jumping into coding and researching on a need to know basis, is more efficient in the long run.
Those projects have to be real websites. Students need to build something they can take pride in, and show off.
Enough with the rant, off to a more practical note, here is a simple guide to what worked for me:
This guide aims to be an alternative approach for learning Responsive web design. One that takes the studentβs urgent need for a sense of progression into account.
- Learn on a need to know basis.
- Maintain theΒ Flow
Your momentum is a priority, be vigilant to the time you spend on a task, and omit anything that slows you down.
- AlwaysΒ Cheat!
Win if you can lose if you must but always cheat! -Jesse Ventura
Good engineers are lazy. Cut corners to achieve much more than you could on your own, as long as itβs outside the scope of what you are trying to learn.
- PixelΒ Perfect
Yes, you can cheat and cut corners and still be a perfectionist.
The goal is to make an exact replica, indistinguishable from the original.
Your job is to make a vertical slice of a full website, so responsiveness is not optional.
I recommend VScode as your text editor and any Chromium browser for best developer tools.
Then you will need to install a few extensions for VScode to make your life easier:
You can also install the Web Development Essentials Extension Pack. But I would rather install extensions as the need arise, but take a look nonetheless.
Once you choose a webpage to clone, then this general process should be a good start:
- Set up your project directory.
Set-up Git, and organize your Folder Structure:
project-directory
β index.html
βββ assets
βββ images
β icon.png
βββ stylesheets
main.css
main.scss
- Start your index.html.
Start writing βdocβ and VScode should suggest the following:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
As you can seeΒ Emmet abbreviationsΒ are super useful and you should learn more about it.
Now link your stylesheet, add your title and icon:
...
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="assets/stylesheets/main.css">
<title> Webpage Title </title>
<link rel="icon" href="assets/images/icon.png">
</head>
...
Start using Live server and Sass Live compiler to examine changes going forward.
- Inspect and analyze
Toggle Device ToolbarΒ in the original page to inspect its layout in the mobile version. Mobile-first approach means fewer positioning needed at first, and incremental changes later.
You might need to show media queries as well.
Analyze the structure of the page. Schematic diagram would help as well.
- Build the Layout with HTML5 semantic.
Start laying out the general structure usingΒ HTML5 elements.
- Start populating elements.
For this stage,Β CSS FlexboxΒ should be all you need. It will be most handy for justifying and aligning each elementβs content.
- Expand and position.
Start expanding the width of your page, and set up a newΒ media queryΒ for each breaking point. You will also need to have more control over your layout so start usingΒ CSS-Grid. Also, check outΒ this article.
@media only screen and (min-width: 576px) {
...
}
- Start populating content.
Copy Images, paragraphs and other content from the original HTML.
Use VScodeβsΒ RegExpΒ in theΒ find and replaceΒ to improve the semantics and apply your own classes to the copied HTML.
This might seem complicated but it is a powerful tool to avoid entering tens of content.
You can experiment with it and see the example belowΒ here.
Old
<div class="old-classes" data-event-categ...>
<Some content>
</Some content>
<Some content>
</Some content>
</div>
RegExp
Find : <div class=".+".+>\n((.+\n)+)<\/div>
Replace : <article class="new-classes">\n$1</article>
New
<article class="new-classes">
<Some content>
</Some content>
<Some content>
</Some content>
</article>
- Kill the snakes
Congratulations, you opened Pandoraβs box. many problems will be evident at once.
Donβt panic, this is the plan all along, to discover what you need to learn, now start searching for answers. one problem at a time.
You already noticed thatΒ CSS TricksΒ will be your best friend.
Rinse and repeat until you have a perfect page!
Front-end development is and will stay for a long time every newbieβs first contact with IT. and itβs currently a gatekeeper rather than an enabler. I canβt guarantee that the guide I offered will work for everyone. but it is worth trying If you tried once and failed. Jump into it, no hello world anymore, find a page that looks great and clone it.
Let me know what do you think!
Create your free account to unlock your custom reading experience.