Forem: Semhar Hidad

Three Pillars of Web Development

Semhar Hidad — Tue, 08 Aug 2023 17:54:25 +0000

When diving into web development, it can be a bit overwhelming looking over everything that goes into building a competent interactive website.

Git & GitHub, libraries and frameworks, APIs & Postman, and UI & UX, all cover a lot of information. It can be intimidating staring down all of these new and unfamiliar technologies all at once.

While the field of web development includes many concepts and technologies you should be familiar with, the three main pillars you should begin with are HTML, CSS, and JavaScript. Start strong with these fundamentals and everything else will become much easier to understand.

This article will discuss the main components of each of these pillars as well as additional resources to help you on your web development journey.

HTML

HTML stands for hypertext markup language. This markup language is the basic foundation and structure of a webpage. Without HTML, CSS has nothing to style, and JavaScript has nothing to interact with.

Hypertext illustrates how the web is interconnected through hypertext links. Your ability to click this hyperlink and connect to a different webpage is a large part of what makes the web so successful.

Markup illustrates the syntax that we use for HTML in order for the browser to understand how to correctly display the content of the HTML file to the user.

When building a website, HTML is the starting point. Your webpage is essentially an HTML file. If you are building a multipage website, then you will need multiple HTML files, with each file representing its own webpage.

It is common practice among developers to name the main page “index.html”, and to include all the HTML files together in one directory.

Your HTML files display the content of your webpage, such as the text, headings, images, buttons, etc. You can add these pieces of content by including elements in your file. An HTML element includes a start tag, the content you want to display, and an end tag.

Note that not all HTML elements require an end tag. For example, the image tag does not require an end tag.

<img src="assets/images/labradors.jpg" alt="Picture of Labradors">

Important HTML Tags you should be familiar with:

There are several HTML tags available for use, but don’t think that you need to memorize all of them. Just become familiar with the major ones and you’ll pick up any others that you need along the way.

CSS

CSS stands for Cascading Style Sheet. It is a popular styling language that gives each website flavor and you guessed it, style!

Before CSS came along, most websites on the internet looked the same. This is because developers were severely limited by what they could design using just HTML.

Today, with a plethora of design options in CSS we can change the color, font, sizing, and more of our websites.

The cascading part of the name illustrates the method or algorithm CSS uses to determine which styles it will apply. There are three ways of styling HTML elements using CSS, inline, internal, and external. Each of these methods has a priority level of importance.

Inline

As the name suggests, this method involves applying CSS directly in the same line as the HTML element. CSS is applied as an attribute to the element using the keyword style.

<h1 style="color:red">This is my heading</h1>

-You apply the CSS style inside the opening tag of the element.

This method is simple and easy to add, but it’s not recommended for styling the entire website but instead for targeting a single element.

Internal

This method involves placing all of the CSS styling rules inside the header section of the HTML file.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Site</title>
    <style>
        h1 {
            color: red;
        }
    </style>
</head>

Using this method, you can target multiple elements and apply different styling rules to each. Internal is great when you only need to style a single html file, however, it’s not recommended for targeting multi-page websites. This is because the CSS styling located in the head section of the file only applies to the single html file, and not the entire website.

External

This method involves creating an external style sheet, placing CSS styling inside the sheet, and then linking all html files to this sheet. By convention, most developers name this sheet “styles.css”. You can name the file whatever you like as long as the extension ends in CSS.

To link your HTML files to the style sheet, use the link element with the rel and href attribute. This command tells the file where to pull CSS styling rules from.

<link rel="stylesheet" href="style.css">

-rel represents the relationship and href represents the location of the style sheet.

This method is recommended in general, but especially when you are working with a multi-page website. Otherwise, you will need to style each page individually and this could lead to unnecessary complexity and inconsistency in your website.

After you have learned the basics of CSS, I would recommend looking at CSS frameworks such as Bootstrap.

Bootstrap comes in handy when designing websites because it contains pre-made CSS styles that you can use in your website. It helps save you time when you’re on a tight deadline. However, it doesn’t offer as much customization as if you were to design the website yourself using just vanilla CSS.

It’s important that you understand the syntax and requirements of CSS before utilizing any frameworks. Having a strong foundational knowledge of CSS will enable you to have more control and flexibility when building websites.

JavaScript

Finally, we arrive at JavaScript, also known as the scripting language that powers the web. HTML and CSS allow us to build beautiful websites filled with content. However, these websites are static, meaning the user can’t interact with the content on the page.

This is where JavaScript comes into play. This language gives us functionality and action. JavaScript allows for events to occur when you click a button or submit a form.

JavaScript is such a big part of web development that every major web browser uses this scripting language.

JavaScript follows a standard set of rules known as ECMAScript. This standard determines how JavaScript should work in the browser and what updates will be applied annually to the language.

Primitive Data Types

There are several data types you should be familiar with when working with JavaScript. They are strings, numbers, Boolean, null, undefined, and objects.

• Strings are simply a string of text characters, enclosed in quotation marks.
• Numbers are integers, decimals, positive, negative, and NaN values.
• Boolean are true/false statements.
• Null is an intentional empty value.
• Undefined is a variable, array, or object that has not been defined.
• Object is a container of key/value pairs.

Variables

Variables are a container for storing data. It’s a method of storing information on a computer that you can later recall or refer to in your code.

Think of a mason jar that is currently filled with blueberries. The blueberries inside are the data, and the mason jar itself is the variable that is storing the data.
There are two ways of declaring a variable in JavaScript, let & const.

Use the const method when you have a piece of data that will never change, such as your name. The variable cannot be reassigned.

const myName = "Sara";

Use the let method when you have a piece of data that could possibly change in the future such as the pricing or the weather.

 let price = 1.99;

Guidelines when naming Variables

Variable names cannot begin with a number. They can contain a number in the name, but they just can’t start with a number.

Variables are case-sensitive, so pay special attention when creating variables and deciding what letters will be lowercase or uppercase.

Most developers follow the Camel Casing method, where the first word is lowercase and each additional word afterward is capitalized.

 let foodStickerPrice = 3.99;

Logic

A big difference between JavaScript and HTML & CSS is that JavaScript requires the use of logic when building a website. In conditional statements, loops, functions, Boolean values, and comparison operators, you have to implement a certain amount of logic when coding.

In order to create an interactive website, you have to think about what you want your website to do for the user, and what should cause these actions, or events to occur.

This involves planning for everything that your user could possibly do and ensuring that you have a plan of action set up to handle user input.

This is part of what makes JavaScript so much harder to learn and implement in your website. However, with practice comes mastery. Keep trying new things and just see what happens.

It is far better if you experience the horror of infinite loops and callback hell now, rather than later when you’re working on production code.

As the old saying goes,

“Fall down a hundred times and pick up a hundred lessons.”

Further Resources

There are plenty of resources available online for learning web development. Don’t feel like you have to rely on just one source to answer all of your questions.

Most developers have several resources they turn to when dealing with an issue or a difficult concept they don’t understand. Start now and build up a collection of resources that you can turn to when faced with these issues.

Below is a list of common sites that many developers use and contribute to daily.

• W3 Schools
• MDN
• Stack Overflow
• Dev Community
• Udemy
• Google

Introduction to CSS

Semhar Hidad — Thu, 13 Jul 2023 13:36:46 +0000

What is CSS?

CSS is an essential part of the three main pillars of front-end web development. HTML is the structure and foundation of the website, the elements that contain the content. CSS is the style and design of the website, color, font, sizing, and layout. Finally, JavaScript is the website’s functionality, buttons, forms, and data processing.

A common analogy that’s used to explain how the three work together is how a house is built. HTML is the foundation, brick, and mortar, CSS is the paint and interior design, and JavaScript is the electricity and plumbing working when you flip on a light switch or turn on the kitchen sink.

All three tools work together in creating solid, beautiful functional websites, but it’s helpful to focus on one language at a time, especially when just beginning.

This guide will focus on CSS, which stands for Cascading Style Sheet and was created in the early 90s. Before CSS, websites relied entirely on poor and limited HTML design. While HTML is vital and provides the content of the site, such as text and images, CSS provides the styling of the content.

This is why it’s known as a styling language. The first part of the name “cascade” stands for the algorithm that CSS uses when choosing which styling rules to apply and in what order.

How to add CSS to a website

As mentioned earlier, CSS is applied to the content in HTML which is contained in an element. An element consists of tags, attributes, and content.

<h1>This is my heading</h1>

Element = Opening tag, content, and closing tag.

There are three ways to apply CSS styling to an HTML element: Inline, Internal, and External.

H2 Inline

As the name suggests, this method involves applying CSS directly in the same line as the HTML element. CSS is applied as an attribute to the element using the keyword style.

<h1 style="color:red">This is my heading</h1>

-You apply the CSS style inside the opening tag of the element.

This method is simple and easy to add, but it’s not recommended for styling the entire website but instead for targeting a single element.

Internal

This method involves placing all of the CSS styling rules inside the header section of the HTML file.

<head>
    <style>
        h1 {
            color: red;
        }
    </style>
</head>

External

To link your HTML files to the style sheet, use the link element with the rel and href attribute. This command tells the file where to pull CSS styling rules from.

<link rel="stylesheet" href="style.css">

-rel represents the relationship and href represents the location of the style sheet.

H2 Syntax of CSS

The format of CSS styling includes a CSS selector, curly brackets, a property/value relationship separated by a colon, and a semi-colon to end the line of instruction.

The CSS selector is what we apply the CSS styling to. It can be an element, class, or ID.

h3 {
    background-color: blanchedalmond;
    font-size: 24px;
    border-radius: 10%;
}

To use an element as a selector simply type the name of the element

.container {
    display: grid;
    gap: 20px;
    row-gap: 40px;
    grid-template-columns: 1fr 1fr 1fr 1fr; 
    grid-template-rows: 1fr 1fr;
}

To use a class as a selector be sure to include a period before typing out the name of the class. Note: The class must be typed exactly as it appears in the HTML file.

#intro {
    height: 200px;
    width: 200px;
}

To use an ID as a selector be sure to include a pound sign before typing out the name of the ID. Note: An ID can not begin with a number.

Curly Brackets

When using the internal or external method the CSS styling must be contained within a set of curly brackets.
{…}

Property/Value

CSS styling rules are stated using a property/value relationship. The pair are separated using a colon.

color:red;

Color is the property of the element you would like to style and red is the value you would like the element to be.

Semi-colon

The semi-colon at the end of the line of instruction is popular in many programming languages. This instructs the computer that there are no more changes to be made and to move on to the next line.

CSS Styling Options

Now that we are familiar with how to add CSS to our website and the proper syntax rules of CSS, let’s focus on what we can style with CSS.

Colors

CSS allows you to set the color of everything, from the color of the text to the color of the background. There are three ways to annotate colors in CSS syntax. These include Named colors, Hexadecimal, and RGB.

Named Colors are the easiest method because they allow you to style CSS by simply stating the name of the color. However, there are currently 147 named colors available that most browsers recognize.

color:blanchedalmond;

Hexadecimal Colors are represented in hexadecimal notation, beginning with a pound sign. There are over 16 million color options to choose from.

color: #874f87;

RGB stands for red, green, and blue. Each color is represented with a number from 0 to 255 that represents the intensity of each hue. The higher the number the more intense the color.

color:rgb(73, 124, 23);

H## Font

The type of font you choose for your website affects the whole mood of your website so it’s vital that you have plenty of options to choose from. CSS gives you lots of flexibility when it comes to styling your font.

p {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 12pt;
font-weight: 700;
font-style: italic;
text-align: center;
}

CSS offers several different property values that you can set, including font family, size, weight, and style.

Visit fonts.google.com and choose from thousands of different font styles. Select the font style and copy the link into your HTML file.

This tells your website what font style you have chosen and where to find the font you have selected.

Conclusion

CSS is a fantastic styling language that offers you the flexibility and design that your website needs. Now that we have covered the basics of CSS, be sure to stay tuned for future articles where I cover Sizing, Display, Float, Flexbox, Grid, Bootstrap, and more CSS related topics.