Invisible Barriers That Prevent You From Learning Web Development and How to Break Through Them

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:
, , , , and more in less than 4 weeks!

So what happened? out of the necessity of having a , I researched the state of CSS in 2019. It’s then that I realized that MOOCs as great as they are, can be gatekeepers!

1. WHY are discouraging MOOCs dangerous?
2. HOW are MOOCs discouraging?
3. WHAT can you do about it?

Why

The world needs more software developers.

“Software is eating the world” — Marc Andreessen Co-founder of Netscape

Front-end is the gate!

Indeed Front-end development is more about “UX Engineering” as to name it. And it is possible to have a career where you stay in that lane and never become a programmer.

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.

How

Remember: Reddit is only an Alt-Tab away! -Quincy Larson

Readers are looking for an excuse to close your article! -Quincy Larson

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!

- Under-appreciating the importance of early achievements!

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.

What

Goal

Method

- Learn on a need to know basis.

• Project-based learning helps you to know what you don’t know, and why you need to know it.
• As counter-intuitive as it sounds: Resist the temptation to learn more tricks. Master the few you got until you have to learn new ones to get the job done.

- 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.
• Skim read 
  when you need to learn a new tool or review a resource. Learn to spot the keywords and reach for conclusions. Take note of the resource and review it later if you need an in-depth study.
• Write faster. 
  Learning to write faster with the least mistakes is invaluable, take time to improve that. it allows you to try things faster, and push through your chocking points.
• Customize and automate 
  As you go, notice all the repetitive tasks and see if there is a way to save time on it. search for cheatsheets, hotkeys, custom settings, or automation opportunities.

- Always Cheat!

Win if you can lose if you must but always cheat! -Jesse Ventura

• Clone pretty websites!
  I chose to clone because I know it already looks great on its own.
• Use great art to populate your clones.
  In my , I used Kurzgesagt’s videos because of their amazing visuals.
• Don’t write Content.
  For content-heavy webpage, copy all content elements to your HTML file. You can then use RegExp to improve the semantics and apply your own classes.
• Go the extra steps with ready code snippets.
  It was not possible to replicate every behavior of without JS. I wasn’t trying to learn JS at that point so I excused my self to copy code from Stackoverflow and change it for my needs.

- 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.

Getting started

• will help you format your HTML, CSS, Sass and JS files.
• will help you write better CSS.
• will enable you to examine your changes whenever you save it.
• will recompile your Sass files to CSS whenever you save as sass file.

Start Building

- Set up your project directory.
, 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  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
 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 .

- Start populating elements.
For this stage,  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  for each breaking point. You will also need to have more control over your layout so start using . Also, check out .

@media only screen and (min-width: 576px) {
 ...
}

- Start populating content.
Copy Images, paragraphs and other content from the original HTML.
Use VScode’s  in the  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 .

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  will be your best friend.

Conclusion