One issue that I see regularly on Quora is that there are many people who want to learn web development, but they don’t know where to begin. I can empathize. There is so much information out there that it can feel overwhelming. When you are getting started with web programming, it can be very difficult to sift through the multiple posts and opinions that exist about which technologies newcomers should concentrate on.
Step One: Learn HTML
HTML is a mark-up language, and it allows you to build the structure for your website. Let’s say you’re typing up an “About Me” page that you intend to publish on your new website. In order to ensure that the browser understands your content, you add HTML mark-up to differentiate web page elements such as paragraphs, images, headers, footers, etc. from one another. Most HTML tags have a beginning tag and an end tag.
For example, let’s say you have a chunk of text that you want to display as a paragraph. You would type an opening and closing paragraph tag and, the words that form the paragraph go in between those tags. Take a look at the tags that surround, “This is my paragraph of text that I wish to display on my webpage” in the example below:
This example has two page elements: a header (designated by the h1 tags) and a paragraph (designated by the p tags), but there are many more HTML elements to learn. For a comprehensive course, I recommend checking out Brad Schiff’s Web Design for Beginners: Real World Coding in HTML & CSS. In Brad’s course, you will learn about the relevant HTML elements and how to mark up your words, images, etc. correctly for the web. By the time you finish the HTML section, you will know how to mark up text and images properly as well as create headers (such as in the example above), forms and tables for your webpages.
Step Two: Learn CSS
The next layer that is added to a website is the style layer, also known as the presentation layer. To do so, web developers use CSS, which stand for Cascading Style Sheets. Like HTML, CSS is a markup language, which means text is “marked up” with elements so that the browser knows how the HTML layer should look. CSS handles everything appearance related, such as text color, which fonts to display, overall layout, the styling of your navigation bar, the sizes of your images, and much more.
Continuing with our example, let’s say we want to make the color of our paragraph blue and we want our header and paragraph to appear center aligned and only take up 75% of the browser width. This image is a screen shot from my text editor and demonstrates the CSS markup required to accomplish these style directives. Note how the header and paragraph elements are combined for styles that apply to both elements.
Since HTML and CSS are often taught together, you can continue with Brad’s course Web Design for Beginners: Real World Coding in HTML & CSS in order to learn CSS. The course starts with the essentials and progresses through topics like CSS animation and Sass, a CSS preprocessor that allows you to write CSS more quickly.
Step 3: Decide if You Want to Be a Web Designer or a Web Developer
Enjoy the Ride
Gaining tech skills is a challenging endeavor. There will be times when something will not go according to plan, and you’ll feel like giving up. I encourage you, however, to keep going. Reach out to your course instructors if you’re having trouble. You are also free to contact me here at firstname.lastname@example.org, and I will do my best to help you out!