Web Development Intro

Table of contents

• Web Development Introduction
• HTML Introduction
• CSS Introduction
• Javascript Introduction
• Code for the web
• Conclusion

Learning to become a developer or a programmer is so much more than just writing and reading code. You have to solve problems and think like a computer scientist to break down complex problems. Knowing how to code is just a skill, the important part of that skill is knowing how to problem solve. Do not worry if you are not an expert at this part; anyone can get better at problem-solving; it takes some practice and repetition. So stick around as we will be going through all the steps on what it takes to become a Web Developer throughout these articles.

Web Development Introduction

If we are getting into web development or programming in general, we made the right choice to start with the WEB! In today's world, the internet is a world of its own, and why not join the progressing journey of the World Wide Web. At this point, we can make a living from our very own homes simply by connecting to the web. It is only a matter of time that many jobs become a hybrid environment where we can work from home and office—so understanding how the internet works will help us out in the long run as a developer or programmer overall.

If we feel ready to start our web dev journey, then make sure to stick around because this will be a step-by-step process on web development. We will explain how the web works, then move onto our first coding language known as HTML to write our first web page, from learning how to write sentences, lists, forms, links, and more. Then move on to learn how we style our pages with another language known as CSS, adding colors to them to show more passion to our web pages. Once we get the basic understanding of how to write code and add color, we will move on to the functionality part of allowing things to happen onto the web page itself to add more life. At this state, more logical decisions are made to make something happen on the web, from submitting a form to creating a user profile or adding an item to a to-do list app.

Before the web was what it is now, it used to be an area with databases that we would typically need to pay for to access some. Nearly 40 years into the web and it has evolved rapidly. So as a developer, it is essential to stay on top of the new technologies daily. Before all of these new terminology's Single Web App, Responsive Web Apps, Server Side Apps, and more., there were no mobile phones that accessed the internet or TVs with chrome cast. It was simply computers accessing the internet with a standard-sized monitor, keyboard, and mouse. Usually, we would have connected to the internet through a phone line. So it is impressive to see how far we have come along with the internet.

HTML Introduction

HyperText Markup Language - is a standard markup language to create web page structures. It is easy to learn, and we believe it is the right choice if it is your first time writing any code. Think about when you read a newspaper, the front page usually has a huge headline with the publisher and other small topics in there own sections. The only difference is HTML allows us to had audio, video, and more. So reading the news online can be more interesting than reading it on paper.

We will learn how to get our HTML code onto the web page and display whatever we want. We will learn how to write paragraphs, headers, forms, inputs, and a bit more. Many languages share similar terminologies. There is not much logical decision-making when it comes to learning HTML—allowing us to focus more on how to program instead of master just one language, as some would say.

In life, we must first learn to crawl, then stand, then walk, then run, and only then, fly. We cannot crawl into flying - RVM

Here is a quick glimpse of what HTML code looks like. Don't worry if it does not make any sense right now. You will later on.

<h1> Welcome To HTML </h1>
<p> We are able to write sententences </p>
<p> between these tags that we declare </p>

<h4> We will learn more in the HTML guide </h4>

CSS Introduction

Cascade Style Sheet - the language to style up our web pages. From adding different fonts, background color, making our links a specific color, and much more. It is a way to describe how we want our HTML to look onto the web page. If you like to design or create art, this might be one of the languages in your interest.

Learning more about how to control things such as background color, text size, text font, can be very helpful for

Here is a quick glimpse of what CSS code looks like. Don't worry if it does not make any sense right now. You will later on.

h1 { color: red; }

p { font-size: 24px; color: blue;}

h4 { background-color: green;}

Mistakes are always forgivable, if one has the courage to admit them - Bruce Lee

Javascript Introduction

JavaScript - the programming language of modern web development! You can use Javascript to build Web Pages or Servers as well. There is a lot of flexibility when it comes to Javascript. It helps us solve complex problems like making decisions, event listeners when ever a click happens, or when a mouse enters the screen, and much more. A useful example when javascript is being used is during a create user profile form which I'm sure we have all seen when creating our first email.

Here is a quick glimpse of what Javascript Code looks like working with HTML. Don't worry if it does not make any sense right now. You will later on.

<button type="button"

  onclick="
    // this is the javascript code
    document.getElementById('demo').innerHTML = Date()
">

    Click me to display Date and Time.
</button>

If you can't explain it simply, you don't understand it well enough - Albert Einstein

Here is an example of HTML, CSS, and Javscript working together to create this signup form.

Code for the web

So how can we get our HTML code to work and show something onto the browser? There are so many ways to get code onto the web to do the same thing in modern web browsing. We would use a Integrated development environment or IDE to write code and communicate with the computer to create software. We can download some locally onto our machine, or we can use online code editors too! However, you would need to have one onto your local machine to create real-world projects in the real world. Online editors are fantastic for testing out new features or trying some methods before putting them into your project. So there are pros and cons for each of their own. However, it is recommended to use your OWN IDE for this project to get comfortable using the tools and even use them at your real job.

We will be using VS CODE as our IDE for this project. If you would like to download VS Code then check out this link. Just make sure to download for the correct machine you are using.

Conclusion

I hope by the end of this article, you managed to learn how to create and understand what is going on in every line of code. It is crucial to understand how your code fully works; not only does it help you become a better developer, but it can also help you use the tools you are working with more efficiently.

These articles are mainly intended for personal use on becoming a better programmer, writer and growing my programming skills. Feel free to drop any feedback or corrections that you believe should be made to help me and others. Thank you for your time for sticking this far!

• Twitter
• Github
• LinkedIn