Get Started with Web Development: How to Build a Web Dev Career from Day 1

Last time we got into the mindset of development, this time we will learn how to become a developer using the tactics that helped me create full-stack web apps.

To successfully become a web developer, there are three domains that play a crucial role:

1. Structure of your website/app
2. Style and design
3. Functionality

You may have guessed it already, but these three critical components also map to the 3 main web languages. HTML (structure), CSS (style) and JavaScript (functionality).

You may also be wondering, "why didn't you just start the article like everyone else does, saying that I have to learn HTML, CSS, and JavaScript?"

And you would be very observant to wonder that!

The Purpose of Web Programming Languages

Unfortunately, I feel that the true purpose of these three languages gets lost in the pursuit of mastering them. What I mean by that is, many young developers get so bogged down in trying to be syntactically correct, that they forget the true purpose that each of these languages serve. For example,

HTML controls the structure of the page. It is important that it follows an expected flow and structure, and understanding not just the syntax of HTML, but the underlying expected structure of a website is crucial to building a good website.

CSS controls the styling of HTML elements and the page. It is where your colors, size of elements, typography, placement and flow, and animations live. It is the one place where styling syntax should live, and though this is the language of style, it becomes worthless if we don't understand the principles of good design and know how to style our pages in a way that is both attractive and accessible.

JavaScript is the language that controls the web. I mean that in the literal sense. This is the language that serves as the backbone for most of our favorite apps and sites. It allows you to control what is on a web page dynamically. Every time you log in to a website and see your own unique data, that is usually JavaScript at work. JavaScript gives your websites and apps functionality, which allows users to do things like

• Update their profile
• Like or comment on things
• Download a file
• (An endless list of other utilities)

How to Learn Web Development

So yes, I will say you should learn HTML, CSS, and JavaScript so you have a strong foundation for developing on the web. However, it's more important in my mind for you to remember the purpose of these languages than to have perfect syntactical understanding of them.

Learn Proper Web Structure

Learning HTML is best done by learning the different types of elements, and combining that with hands-on page building. Some learning platforms have integrated hands-on activities for this. (And a lot of the HTML courses for said platforms are free!).

Let's demystify this a little bit before we go on. Here is your HTML learning cheat sheet:

• HTML stands for HyperText Markup Language. Like other markup languages, it is designed for creating viewable pages on a computer.
• At the time of this article, HTML 5 is the standard and should be used in all your projects. Disregard this if HTML 6+ comes out! You can view the documentation for HTML 5 on the MDN web docs: HTML: HyperText Markup Language | MDN
• If you explore the docs, you will learn about tags. These help you define what an HTML "element" is. All your content will be wrapped in these tags, like sandwiches. For example: <p>This is a paragraph</p> notice how there is a "p" tag at the beginning and at the end? This wraps the content "This is a paragraph" into a paragraph element (that's what the p stands for!)
• The opening tag (starts each element) can have different attributes added to it. Two important ones are id="" and class="". The id attribute marks a unique id to that element – you should only have one unique id per page, so no duplicate ids appear. Class marks similar elements as the same class, and unlike id you should mark multiple similar elements that you want to style the same with the same class. For example, class="button".

Learn Attractive Web Styling

When it comes to CSS, I would recommend that you do a ton of observation to learn how to properly use it. This can be done by observing codepens of attractive web designs, or using the developer tools on your browser to check the styles applied to any element you see on the web.

If you are interested in checking codepen for some CSS inspiration, I like to search for "Simple CSS" or "Pure CSS" And see what comes up: CodePen

Here is a quick cheat sheet you can use while learning CSS:

• CSS stands for Cascading Style Sheets. What that means is, the styles are applied in a cascading order. Whatever is written on the bottom of the CSS file can overwrite what is written above it. Things written in a CSS sheet linked after another sheet can overwrite what is written in that sheet higher in the list. Because of this, it is important to use good selectors that only target exactly what you want them to. If you use the .card selector twice for example, and both of them change font-size, the latter of the two will take over and display.
• The "Selectors" I mentioned are how CSS figures out what parts of your HTML to add styles to. Let's do an example. Here is a selector for the card class:

.card {
  /* styles go here */
}

The main selectors you should learn to use are the element selector (p, div, span, ol, li, etc.), id selector (#welcomeText, #socialLinkContainer, #your-id-here), and the class selector (.card, .action-button). Notice that id and class have a symbol that tells you what kind of selector it is. You can expand from these into more complex selectors and pseudo selectors as you gain some experience.

• You can use developer tools to sneak a peek at how elements across the web are styled. For example, try right-clicking on any part of your favorite website. There should be an option similar to "Inspect". This will open the page in developer tools, and show the HTML code and CSS styles applied for that element. It can take some practice learning how to navigate the developer tools, so give it a shot and see what you can learn.
• It is important to learn how you can follow the principles of good design (Proximity, Repetition, Contrast, Alignment) while creating CSS. The best way to learn this, I would say, is by reading this book: The Non-Designer's Design Book - Kindle edition by Williams, Robin. Arts & Photography Kindle eBooks @ Amazon.com.

Learn Functional Web Programming

I encourage most people to get some experience and understanding of HTML and CSS before moving on to this next part… mainly because, learning JavaScript can be so expansive on its own, that it will become the most time consuming of the three pursuits. Don't fall into the trap of expecting that you can just jump into the latest, hottest framework and that it will all make sense. Most of the modern frameworks, such as React or Next.js (which is also React), contain complex systems (App router, AuthN, AuthZ, OAuth, state management, etc. Insert random tech jargon here). And these complex systems are bound to be full of things you have learned yet. I always recommend getting some basic experience with what we call "Vanilla JavaScript" or just plain old JavaScript, so you can understand the concepts of functional programming before jumping into a more complex framework.

Here is your cheat sheet to start learning JavaScript:

• Start by doing simple things. Build JavaScript that sends messages in the command line, then learn how to access the DOM (Document Object Model) or in other words, how to access the HTML website you created.
• Syntax is easy, but you can get caught by simple things such as forgetting a semi-colon at the end of a statement. JavaScript is built of statements, and blocks. Blocks can contain multiple statements, or there could be statements that live outside of that block. Blocks are anything within curly brackets {}.
• Some good starter actions include: Learn how to write statements in a main function, learn how to create your own functions, call a set of functions to do something like calculate math, create a function that gets the current year and displays it, create a function that finds an element on the page and changes its style, color, or text.
• JavaScript as a language is pretty easy to learn, but the principles of functional programming are a much larger pursuit. Give yourself time to learn and grow. Look for JavaScript courses that have hands on activities, such as the ones listed above. Don't just read about the principles of programming, build it into your muscle memory.

Great! But… What Do I Do Now?

You might be feeling a little fuzzy-headed after reading all of that. If this is your first step toward becoming a web developer, I highly recommend you start out strong by looking for beginner courses with hands on activities, tutorials that guide you through the very beginning of set up all the way to completing your first website. Utilize documentation and even AI tools to help you understand concepts or problems that you run into. And above all, give yourself the grace to try it and keep growing.