• The Entrepreneur Forum | Startups | Entrepreneurship | Starting a Business | Motivation | Success
  1. Join 40,000+ entrepreneurs
    who are kicking butt and
    winning their dream life.

    Unscripted™ Entrepreneurship:
    A Business That Pays More Than Money, It Pays Time.

    "Fastlane" is an entrepreneur discussion forum based on The Unscripted Entrepreneurial Framework (TUNEF) outlined in the two best-selling books by MJ DeMarco (The Millionaire Fastlane and UNSCRIPTED™). From multimillionaires to digital nomads, the forum features real entrepreneurs creating real businesses.

    Download (Unscripted) Download (Millionaire Fastlane)  Register
    Registering for the forum removes this block!

A Comprehensive Guide To Learning Web Development

Discussion in 'Education, Learning, Books' started by SoftStone, Aug 12, 2018.

  1. SoftStone
    Offline

    SoftStone Contributor Read Millionaire Fastlane

    Messages:
    60
    Likes Received:
    97
    Joined:
    Jan 15, 2018
    Gender:
    Male
    Location:
    Germany
    Rep Bank:
    $671
    So, you've come up with an idea for a product that involves the web?
    Or you want to learn web development for any other reason?

    I'll have you covered!

    I am no expert by any means but have been learning it on my own for a couple of years now, and hopefully will be able to give you some insights into learning it for yourself.

    I am sure @MJ DeMarco would agree that programming is a great fastlane skill (after all, that's what he has taught himself, too).

    Anyway, I assume that you have decided to learn it and know the WHY.

    I'll now give you a brief overview of web development. Based on the explanations, you should be able to figure out what you need to learn.

    The Building Blocks Of The Web

    HTML
    - The language used to tell the browser what you see, whether that is buttons, images, or text. A website only with HTML, however, looks crappy.

    CSS - The language used for making things look good. Oftentimes, CSS tutorials change the colour of some text or re-align it to the side. In the past, I thought: there must be another language involved in creating the complete look of a web page.

    This is where we need to distinguish between design and development: a developer with no knowledge about design will rarely create something that looks good, despite his knowledge of CSS (except when using design systems, which I'll talk about later in the thread).

    JavaScript - Whenever the page changes dynamically, which means without reloading it, Javascript is involved.

    The three technologies make up the front-end, everything the user can see.
    Any user can view the page source and look at all of your HTML, CSS and JavaScript code.

    At this point, you are a front-end developer - somebody who can build the front-end of a website/web app.

    Is this enough to get you started?

    Think about what you want to do: will these three technologies be enough to kick things off? Will you be fine without database storage? For example, a text formatting website could be built entirely in HTML, CSS and JS, if it does not involve storing any information in a database. On the other hand, most SaaS applications involve more technologies...

    The Backend

    Python, Go, Java, C#, Ruby, PHP, you name it, are languages that live on the server-side.

    What is a server?


    A server is a computer which "serves" other computers. You send a request to it, a backend language does some magic, and it sends you back what you requested.

    As opposed to the front-end, people should have no idea which language your backend is built in. They don't see it.

    Pretty much all modern languages have libraries in place for talking to a database as well. Sometimes, you need to write SQL which is the language for interacting with databases entire yourself. Other times, a framework will abstract it away for you (more about frameworks and what they are later).

    Hope this gave you some first insights into the topic. At this point, you might still be confused, and that's okay.

    In the following posts, we'll be talking about the actual roadmap of learning, which languages/frameworks to pick (pros and cons) to get an MVP/prototype built as soon as possible, security, and more.

    If you have any questions, drop them.

    See you
     
    Mr.C, Ninjakid, BVosqe and 11 others like this.
  2. MacTech602
    Offline

    MacTech602 New Contributor Read Millionaire Fastlane I've Read UNSCRIPTED FASTLANE INSIDER

    Messages:
    7
    Likes Received:
    6
    Joined:
    May 31, 2015
    Gender:
    Male
    Rep Bank:
    $47
    Great intro to web development. Looking forward to more.


    Sent from my iPhone using Tapatalk
     
    SoftStone likes this.
  3. Arun Siva
    Offline

    Arun Siva aspiring 大君 of the bourgeoisie Read Millionaire Fastlane I've Read UNSCRIPTED FASTLANE INSIDER Speedway Pass

    Messages:
    1,059
    Likes Received:
    1,635
    Joined:
    Aug 31, 2016
    Location:
    NORD-TRONDELAG
    Rep Bank:
    $11,069
    Thank you for sharing your perspective on web development, however there is a legendary user on here named @Fox and he has already covered all of this (along with his cohorts and mentees);
     
    ZF Lee likes this.
  4. SoftStone
    Offline

    SoftStone Contributor Read Millionaire Fastlane

    Messages:
    60
    Likes Received:
    97
    Joined:
    Jan 15, 2018
    Gender:
    Male
    Location:
    Germany
    Rep Bank:
    $671
    Sure, I know about Fox. Great guy, but he covers mostly web design as far as I can tell, which I am not that good at (yet). The future posts will dive deeper into the backend side of things required for creating more backend heavy applications.
     
    Last edited: Aug 13, 2018
    Mr.C, Roz, jpanarra and 4 others like this.
  5. lowtek
    Online

    lowtek Platinum Contributor Read Millionaire Fastlane FASTLANE INSIDER Speedway Pass Summit Attendee

    Messages:
    889
    Likes Received:
    2,900
    Joined:
    Oct 3, 2015
    Gender:
    Male
    Location:
    Phoenix, AZ
    Rep Bank:
    $17,760
    Value in this. Not many people here focus on backend / logic. That's where the real magic happens.
     
    Mr.C, Raoul Duke, jpanarra and 5 others like this.
  6. jon.M
    Online

    jon.M Silver Contributor Read Millionaire Fastlane I've Read UNSCRIPTED FASTLANE INSIDER Speedway Pass

    Messages:
    226
    Likes Received:
    820
    Joined:
    Jul 4, 2016
    Gender:
    Male
    Location:
    Europe
    Rep Bank:
    $1,380
    Awesome thread. Will definitely follow.

    One question: This weekend, I started learning Python from scratch. Never spent much time on coding except front end stuff. Find back-end surprisingly enjoyable (and Python's way simpler to write than JavaScript so far).

    Ideally, I want to accelerate my learning as quickly as possible. I have quite a lot of time available for it.

    How would you go about learning it as quickly as possible? Currently doing a few beginner courses on Coursera led by Charles Severance. Find them to be slower paced than some I checked out on Udemy. However, they also seem to be more pedagogical and better at teaching the foundations. Which is obvious since the college professor has way more experience at teaching the stuff.

    Alongside with those courses I'm playing around with scrapers and other tiny projects to get some hands-on experience.

    Any suggestions on the optimal, most time-efficient way to become proficient at a language, in your opinion? (This might be one of those stupid beginner questions everyone roll their eyes at, but I'll throw it out there anyways)
     
    Arun Siva and SoftStone like this.
  7. SoftStone
    Offline

    SoftStone Contributor Read Millionaire Fastlane

    Messages:
    60
    Likes Received:
    97
    Joined:
    Jan 15, 2018
    Gender:
    Male
    Location:
    Germany
    Rep Bank:
    $671
    Good question. Planned to answer it down the line, but hey, let‘s do it now:

    youtube, blogs, stackoverflow, google are all great resources. Personally, the first courses I have taken were all on youtube. The approach I have taken is to first identify what I want to learn. Pick one thing. Let‘s say it‘s, like in your case, python:

    The most important thing IMO when learning your first programming language is not to get caught up in the fact that you‘re learning a specific language, but focusing on learning how to program. I‘ll explain what I mean:

    every programming language has certain constructs, like variables, if-else statements, loops, you name it. A good course will introduce them one by one with an example or two. Then, start playing around with that feature. Make sure you understand how its used, but more importantly WHY it‘s used.

    You do so best, I think, by just typing out some code and seeing what happens. Change the value of a variable and see how the output changes. You will learn in the process of observation.

    The more fundamentals you learn, the more you can start working on simple scripts: in the beginning, it might be a program that asks for your favourite color and gives you a basic response. After that, it might be a program that, based on your age input, tells you whether you can drive or not (notice: as opposed to the previous example, this little program now involves if-statements).

    Then, build your way up. After you have the basics down, you can jump into more language-specific features and actually start working on some programs of your own. With python specifically, the code you write when starting out vs. when you‘re a bit more advanced will look VERY different, as python has so many great features that save you from writing a lot of code. That‘s okay. You‘re engaging in process. Be proud when you first get something working.

    In the case of python, the basics might be (I‘ll forget something, this is just out of the top of my head...):

    - data types
    - variables
    - conditionals (if-elif-else)
    - functions
    - loops (for, while)
    - exception handling (try/except)
    - the various data structures (lists, dictionaries, ...)
    - the knowledge that python is a dynamically typed language

    I think you get the idea.

    The more advanced concepts might include:

    - list comprehensions
    - various built-in functions that make writing code a lot easier
    - object oriented programming (that‘s important with all object oriented languages. If you don‘t know what that means, don‘t worry, yet)
    - decorators

    and so on and so on. Really, the most important things to learn are the fundamentals. They will apply to almost all programming languages.

    When you have the basics down, start building some programs/projects. Always aim to challenge yourself as much as possible but not to overwhelm yourself, either. You become more and more proficient in the process.

    In your case, it might be building a more complicated web scraper. Or actually jumping into a backend framework for web development if you are comfortable with the basics of python. Whatever.

    Anway, you probably will need to look up most things on google, youtube, stackoverflow to finish it. That‘s where the real learning comes from. Just dive in at this point.

    Once you get beyond the basics, I‘ve found that some specific books really shortcut the learning curve and help immensely. But again, that shouldn‘t be your focus for now (unless you‘re at this stage). Look at the next step and you‘ll make it!

    Also, I’ll be talking about other related stuff (like clean code and development methodologies) later in the thread. Boy, I have so much more to share ;)

    Note: if you‘re already pretty decent with javascript, I‘d recommend giving this video a shot:
    View: https://youtu.be/N4mEzFDjqtA
    It gives you a good overview of the major topics and the python syntax.

    Also, specifically for python, I‘d recommend always questioning your approach to a solution and trying to figure out a better way of solving it after the overall program is working. As I‘ve already said above, there are many neat constructs in the language.

    If you want a teaser of what I mean: look up how to switch two variable values in Java vs. how to do it in Python ;)

    I might share some links to other great youtube resources later in the thread as well.

    Does that help?
     
    Last edited: Aug 13, 2018
  8. Danny Sullivan
    Offline

    Danny Sullivan Bronze Contributor Read Millionaire Fastlane I've Read UNSCRIPTED FASTLANE INSIDER Speedway Pass

    Messages:
    145
    Likes Received:
    231
    Joined:
    Jul 2, 2018
    Gender:
    Male
    Location:
    Germany
    Rep Bank:
    $1,003
    [​IMG]

    Oh yes, i'm in. Great stuff!
     
  9. Arun Siva
    Offline

    Arun Siva aspiring 大君 of the bourgeoisie Read Millionaire Fastlane I've Read UNSCRIPTED FASTLANE INSIDER Speedway Pass

    Messages:
    1,059
    Likes Received:
    1,635
    Joined:
    Aug 31, 2016
    Location:
    NORD-TRONDELAG
    Rep Bank:
    $11,069
    + 1 looking forward to it.
     
  10. SoftStone
    Offline

    SoftStone Contributor Read Millionaire Fastlane

    Messages:
    60
    Likes Received:
    97
    Joined:
    Jan 15, 2018
    Gender:
    Male
    Location:
    Germany
    Rep Bank:
    $671
    Some guidelines before getting started

    1. Don't get discouraged if you feel overwhelmed. I'll be mentioning many concepts and ideas that are probably very new to you. Tackle them one by one, over a long time frame and you'll be just fine!
    2. Google is your best friend
    3. The programming community is generally great. Don't be afraid to ask questions.

    I'll be starting at the very beginning, just so everybody can follow along. For anybody who is more familiar already, don't worry, I'll have plenty for you later in the thread.

    So, where do I start? HTML and CSS!


    They go hand in hand.

    HTML is pretty easy to learn. CSS isn't that hard either... at first. Luckily, you only need to learn the basics for now. One extra note on CSS: don't get frustrated when you try to center an element and it simply won't work ;)

    Learning the basics of the two shouldn't take you that long. Of course, everybody learns at a different pace, but it should be doable in a couple of days.

    Setup

    Download and install a text editor

    While you could use notepad without a problem, the lack of syntax highlighting will make it painful to use. You can choose from many editors, here are three I'd recommend:


    Don't get caught up on choosing your editor. All of them get the job done.

    Starting To Learn

    Head over to youtube and type in 'html tutorial'. Then, just pick one and go with it. As simple as that. Or take a course on the topics. That's fine, too.

    Now, follow along, type out the code yourself (very important), and do your best to play around with the code and trying to get a better understanding. After finishing it, there is almost no way you could have remembered everything. That's completely normal.

    Now Start applying the skills you've learnt!

    Google something like "basic html and css website", head over to google images, pick the one that looks the easiest to you and try to build it out based off the image you see. It doesn't need to match it 1:1, just get the elements in roughly the same position. Or just think of a basic layout yourself. You'll likely encounter many frustrations, but that's normal. If you feel too overwhelmed, step down one notch, figure out the knowledge gap that hindered you from the next step (e.g., you didn't know how to horizontally align navbar elements), research it, apply it to the project and repeat.

    Great, I know some basic HTML and CSS now!

    Good job! The next post will focus on JavaScript: what it is and why it's used and how to actually learn to program (although I've pretty much answered that in my response above), because HTML and CSS are not programming languages, but markup languages, as they don't have any logical constructs built into them.

    Take care
     
    Last edited: Aug 13, 2018
  11. Danny Sullivan
    Offline

    Danny Sullivan Bronze Contributor Read Millionaire Fastlane I've Read UNSCRIPTED FASTLANE INSIDER Speedway Pass

    Messages:
    145
    Likes Received:
    231
    Joined:
    Jul 2, 2018
    Gender:
    Male
    Location:
    Germany
    Rep Bank:
    $1,003
  12. SoftStone
    Offline

    SoftStone Contributor Read Millionaire Fastlane

    Messages:
    60
    Likes Received:
    97
    Joined:
    Jan 15, 2018
    Gender:
    Male
    Location:
    Germany
    Rep Bank:
    $671
  13. Argue
    Offline

    Argue Gold Contributor Read Millionaire Fastlane I've Read UNSCRIPTED Speedway Pass

    Messages:
    646
    Likes Received:
    2,175
    Joined:
    Oct 1, 2016
    Gender:
    Male
    Location:
    NYC
    Rep Bank:
    $15,161
    SoftStone and Danny Sullivan like this.
  14. SoftStone
    Offline

    SoftStone Contributor Read Millionaire Fastlane

    Messages:
    60
    Likes Received:
    97
    Joined:
    Jan 15, 2018
    Gender:
    Male
    Location:
    Germany
    Rep Bank:
    $671
    The Dreaded JavaScript

    Do you have a project in mind you'd like to build? If yes, think about it: will it involve components that need to change dynamically (i.e., without refreshing the page)? Then you'll need JavaScript (it's NOT the same as Java. They just have similar names).

    Anyway, I had posted an answer up above on what I think is a good way of learning to program, so I won't repeat myself.

    With JS specifically, getting started is super easy: just create an HTML file, open it in your browser, and open a console (if you're using Chrome, right click, go to inspect and switch to the console tab). In the console, you can start exploring concepts such as variables and for-loops very easily. If you're at the point where you want to actually embed JS into your application, you'll need to use a script tag in your HTML, but I'll leave that to you to explore.

    Besides the typical constructs like variables, loops, etc., that are present in almost any language, javascript has the DOM, which stands for document object model. It allows you to interact with HTML elements on your website, access their CSS and do all kinds of things with it. That's how you're able to change something on the screen without having to reload the page!

    You don't need to become a pro at JS before moving on, just get moderately comfortable with the basics. The rest comes with time.

    In the next post, we'll jump into the backend and talk about some framework and language choices.

    Stay tuned
     
    Argue, Danny Sullivan and lowtek like this.
  15. Ninjakid
    Offline

    Ninjakid Platinum Contributor Speedway Pass

    Messages:
    1,500
    Likes Received:
    2,907
    Joined:
    Jun 23, 2014
    Location:
    Whatever my IP tells you
    Rep Bank:
    $9,221
    Fox covered how to learn web design to start a business, OP's post gives a detailed description into web development, and it's various areas. For people who want to dive deeply into web development itself, this post is an awesome guide.
     
    lowtek likes this.
  16. SoftStone
    Offline

    SoftStone Contributor Read Millionaire Fastlane

    Messages:
    60
    Likes Received:
    97
    Joined:
    Jan 15, 2018
    Gender:
    Male
    Location:
    Germany
    Rep Bank:
    $671
    Getting Into The Backend

    The backend is where the magic happens that nobody sees. Almost everybody will judge your application by the frontend and not give a crap about what you've done to make it work. Think about how much is going on behind the scenes of a theater, from costumes to scripts to choosing the right actors, yet, how little the viewers really see.

    Picking A Language For The Backend

    disregarding specific project needs that might appear, here are some good default choices for languages on the backend. I left out Java and C# on purpose, as they're more enterprisey and not as well suited (IMO) for bootstrappers and solo programmers. But if that's what you know, they are still awesome and very capable languages, so by all means go ahead and use them. Also, I will only mention 1-2 frameworks per language. There are a TON of other great ones out there, but presenting them all would be overwhelming.

    What is a framework?
    Think of it as a skeleton application that is already written and has made several design and architectural choices. It expects code to be at certain places at a certain point of execution in order to work.

    A common pattern that many frameworks follow is the MVC pattern (don't get caught up on the names of the concepts as they may slightly vary, but the seperation of concerns they introduce into the architecture).

    M stands for model and defines the data and businesses logic layer of your application. V stands for view, what the user sees. C stands for controller, the component that communicates between the two.

    It's harder to grasp theoretically, but you'll know what I mean as soon as you start using one.

    Often, you'll also hear about libraries. A good rule of thumb to differentiate the two is that a framework calls your code while you call a library's code.

    Anyway, let's look at some frameworks. We'll discuss the reasons to use one in the next post. For now, here is a little overview of three common languages:

    PHP
    basically, the native backend language of the web. Easy to deploy and a veteran. However, just as it's easy to get started, it's equally easy to mess up. More on that when we get to security.

    From my very limited experience with PHP, I'd say the pros are:
    - easy to get started with
    - easy to deploy
    - well documented across the web

    while the cons are:
    - not the prettiest syntax (again, this is subjective)

    With PHP, the two popular frameworks are Laravel and Symfony. I have only a bit of experience with the first one, but it definitely seems to be a very elegant framework.

    Python
    a language used in so many areas of programming. This one is my pick, as that's what I know best and really like.

    Pros:
    - easy syntax
    - very awesome features that can really cut down the lines of code you need to write
    - great community and documentation

    Cons:
    - harder to deploy

    Note that I didn't mention speed as a con, although python is slower than other languages. But if it's enough to power pinterest and discord, it's probably enough for your application.

    With python, the de-facto framework of choice is django. A very stable veteran that takes care of a lot of things for you. Flask is also widely used, but I have no experience with it.

    JavaScript
    with Node.JS, which is a runtime (NOT a framework), somebody basically had the idea to allow javascript on a server rather than only in a web browser.

    Pros:
    - you can use JS if you already know it

    Can't say much about that TBH, as I haven't used it. Many people seem to like it, though. As far as frameworks go, the javascript world has WAY too many, but one of the most popular ones for the backend seems to be Express.

    Anyway, make sure to do some further research on your own if you have no idea what to pick. Me suggesting anything would just be dogmatic.

    See you in the next post!
     
    Raoul Duke and lowtek like this.
  17. lowtek
    Online

    lowtek Platinum Contributor Read Millionaire Fastlane FASTLANE INSIDER Speedway Pass Summit Attendee

    Messages:
    889
    Likes Received:
    2,900
    Joined:
    Oct 3, 2015
    Gender:
    Male
    Location:
    Phoenix, AZ
    Rep Bank:
    $17,760
    Great information in here. Couple things I would add:

    With respect to speed and bottlenecks, web calls take dozens to hundreds of milliseconds, which is an eternity to most python code that runs in milliseconds. When and if execution speed becomes comparable to the web calls, you can directly integrate with C to get close to the metal and speed up the bottlenecks.
     
    SoftStone and jon.M like this.
  18. SoftStone
    Offline

    SoftStone Contributor Read Millionaire Fastlane

    Messages:
    60
    Likes Received:
    97
    Joined:
    Jan 15, 2018
    Gender:
    Male
    Location:
    Germany
    Rep Bank:
    $671
    So, Why Should You Use a Framework?

    If you're a beginner, chances are, you don't know what you're doing. Frameworks take care of a lot of stuff for you. This is where my advice for the frontend and backend vary: I wouldn't recommend a javascript framework getting started. Most times, you'll be fine with plain javascript or perhaps some jQuery on top of that. If you're at a point where the javascript becomes unmanageable or you know what you're doing, jump into a framework. But don't think you need to pick up every hot framework that some joe on Reddit suggests.

    Now, this is not to say that frameworks are bad by themselves. If you're already comfortable with one and it fits the use case, by all means use it. I just like avoiding too much load for beginners.

    Haha, let me go plain on the backend then!

    If you know what you're doing, you know when to do it. But for beginners, I think a better path is to jump into a framework, get productive, learn how the framework works (dissolving the magic over time, a step I'm also working on) and enjoy what it gives you. There is SO much that can go wrong on the backend.

    With that said, if all you need to do is build a simple site that's not too complicated, you can consider going blank. Many examples of people who have done this successfully. So yes, I am a proponent of keeping things simple when possible.

    But when it comes to security on a larger scale than something very simple...

    A Quick Lesson in Security

    Most people think that passwords are stored in plain text on the backend. Hence, if you're a beginner, that's what you would probably do if you don't know any better.

    The truth is, that passwords should be stored in a hashed format. That means they run through a mathematical function (something like SHA-512) that transforms the password into a bunch of gibberish characters. The trick is that, if you run the password through the same hash algorithm multiple times, you get the same result. That is how you can check if the user has entered in their correct password.

    A good hashing function has several characteristics:

    - minimal collisions
    - produces a very different output if the input is changed by only a tiny bit

    and more. That's why you should NEVER run your own hashing algorithm in production.

    Anyway, most frameworks help you with that. Still, it's a very good idea to learn more about security and what your framework of choice does behind the scenes.

    Edit: I had added some more security attacks to be aware of but there seems to be some sort of problem when I updated the post. Anyway, I may make another post about that.
     
    Last edited: Sep 1, 2018

Share This Page