Whether you’re a budding developer, a curious learner, or an educator seeking to impart valuable skills, grasping the basics of how websites are built is a fundamental step. This brings us to the core of web development: HTML, CSS, and JavaScript. These three languages are the pillars that support every website you visit, each playing a unique and crucial role in bringing web pages to life. Let’s dive into what each of these languages does and why they are so important.

What are They?

HTML, CSS, & JavaScript are the three basic languages that make up a website.

To describe the function of each language, imagine a webpage as a house:

• HTML is the structure of the house. It determines what content is on the webpage, and where they belong. In our analogy, HTML would decide things like how many bedrooms are in the house and how many tables and chairs go in the dining room.
• CSS is how the house looks. It declares the contents’ size, shape, position, and more. If a webpage is a house, CSS would determine things like the size of the living room, what color the chairs are, and whether the dining room floor is carpet or hardwood.
• JavaScript is how a house reacts to its owners’ actions. JavaScript handles the interactive elements of a webpage like buttons and forms and uses a set of rules to determine what happens next. JavaScript uses logic to tell the webpage how to respond to user interaction, similar to how a house determines which lights to turn on/off when a flip is switched.

Why HTML, CSS, & JavaScript?

But why did we choose HTML, CSS, and JavaScript for teaching code? The idea of learning just one programming language may seem hard enough, much less three all at once.

It seems daunting at first, but our decision to focus on web development solves many issues that other computer science curricula struggle with.

Accessible to Everyone

Many other languages require special compilers and environments before they can be run on a computer, whereas HTML, CSS, and JavaScript only require a web browser. This ease of execution makes BSD Online easily accessible to anybody with an internet connection, whether they are on a school computer or a personal device.

A Visual Approach

Languages like Java & C++ don’t possess simple means to create graphics. Since webpages are inherently visual, HTML and CSS are a quick and easy way to create eye-catching projects. For many students, the ability to visualize code is essential to understanding the concepts being taught.

Seamless Classroom Integration

As web development languages, HTML, CSS, & JS make Computer Science easy to integrate with other subjects; with just a few weeks of coding experience, students would be equipped to create web-based projects for any class, from Spanish to AP Biology. As a technological artifact, code has the potential to go beyond the confines of a computer science class; web languages offer a clear path towards the kind of ubiquity BSD Online seeks to achieve.

In conclusion, HTML, CSS, and JavaScript form the trifecta of web development languages that not only pave the way for creating dynamic and visually appealing websites but also ensure that learning these skills is accessible and integrated into broader educational goals. By focusing on these languages, BSD Online not only demystifies the process of web development but also opens up a world of possibilities for students and learners across disciplines. As we move forward in an increasingly digital world, the knowledge of HTML, CSS, and JavaScript becomes not just valuable but essential for anyone looking to understand or contribute to the vast expanse of the internet.

CSS might seem daunting at first, but it’s a powerful tool for styling your website once you understand it. Let’s explore the basics.

Selectors in CSS act as detectives, allowing you to pinpoint specific elements on your page. You can target elements by their type (e.g., <h1>, <p>), class (.classname), ID (#idname), or their relationship to other elements.

With your target selected, you can then apply styles using properties and values. Properties describe the appearance or behavior of an element, such as color, font-size, and margin. Values specify the property details, like “red” for the color property.

This overview introduces key CSS concepts: selectors, properties, and values. Now, you’re ready to start styling!

Below is a glossary of CSS concepts, selectors, properties, and values.

Vocabulary

These are the terms most used when discussing CSS.

Cascading Style Sheets (CSS) | read more
Cascading Style Sheets are the file type that our styles are written into. In the early web, before it became its own language, styles were simply added as attributes of individual elements. This method was clunky, ugly, and most importantly, not scalable. The purpose of CSS is to apply styles to our page en mass with as much efficiency as possible. To do this, we use selectors (below) that target whole groups of objects and apply consistent styles across our page.  The “Cascading” part of the name refers to the fact that styles can be written and overwritten. For instance, if I set the width of an <img> tag to 300px, but further down in the page set the width of images to 100px, the most recent mention takes precedent. However, there are many rules and interactions determining what styles take charge.
Selector | read more
h1 {} #gallery {} .icon:hover {} html::after {}		CSS works symbiotically with HTML. It exists to style and augment HTML elements, but can’t do anything without them.  The way we target specific elements are with selectors. A selector can have the name of a tag, class, ID, or combinations of those so you can find exactly the element you want to style. All selectors are followed by a pair of curly brackets, which is where your styles go.
Property | read more
h1 {   color: lime;   background: royalblue;   font-size: 300%;   margin: 10px 30px;   padding: 20px; }		Selectors choose which elements to style, and the properties are what you change. There are hundreds of CSS properties that can be changed. You’ll never memorize them all, but this glossary will cover the most common and helpful of them.
Value | read more
button {   color: purple;   background: black;   padding: 20px 15px;   animation: blink 5s linear 100ms infinite both;   position: fixed;   top: 0;   left: 100px; }		With every property comes a value. By default every element comes with a value attached to each property, usually “initial”, “default”, “none”, or “0”. It depends on your browser’s default settings. By writing your own values you are over-ruling the default values that come with every property.
Comment | read more
button {   color: purple;   background: black;   padding: 20px 15px;   /* Add animation for button to fade in and out */   animation: blink 5s linear 100ms infinite both;   /* position: fixed;   top: 0;   left: 100px; */ }		Just like with HTML, comments are passages of text that are ignored when the coe is read. They are just there for developers to see. Comments are helpful for leaving yourself (or others) notes, marking sections of your page, or temporarily “crossing out” code that you don’t want, but you don’t want to delete either. The only difference of comments between languages is how it is written.
The Box Modal | read more
div {   background: black;   width: 100px;   height: 50px;   padding: 20px 15px;   border: 5px solid red;   margin: 10px;   /* this div’s box is 160px wide and 120px tall */ }		The box modal is the idea that all elements on a page take up some amount of room in a rectangle. The “box” is the total amount of space between four measurements. These are the element’s set height/width, plus the height/width of its padding, border, and margin combined. The border makes up the edge of the perceived box, the padding is the space inside, and the margin is the space outside.
Color Mode | read more
div {   color: rgb(255, 255, 255); /* white */   color: rgb(0, 0, 0); /* black */   color: rgb(255, 0, 0); /* red */   color: rgba(0, 255, 255, 0.5); /* transparent purple */ }		RGB values tells the computer how much Red, Green, Blue to mix together. Each can be mixed to make a different shade of color with a maximum of 255 of each color.rgba adds “alpha” or transparency to your color.
div {   color: #ffffff; /* white */   color: #000000; /* black */   color: #ff0000; /* red */   color: #f0f; /* shortened purple */ }		Similar to RGB value, HEX values uses letters and numbers. First two, second two, and last two are respectively red, green and blue. They mix to create a color you desire.
div {   color: hsl(0, 0, 100%); /* white */   color: hsl(0, 0, 0%); /* black */   color: hsl(0, 100%, 50%); /* red */   color: hsl(320, 100%, 50%); /* purple */ }		HSL stands for Hue, Saturation, and Lightness. This is a common color mode if you use color pickers online, since it gives you one slider for hue (color), and a range of brightness (+/- white/black) and saturation (+/- gray).
div {   color: white; /* white */   color: black; /* black */   color: red; /* red */   color: rebeccapurple ; /* Rebecca purple */ }		You can also just write the names of the colors you want! CSS is pretty smart, and understands dozens of color-words. It is still important to understand how other color modes work, but if you don’t need a precise hex code this is a good option too.
Units of Measurement | read more
div {     width: 100px; }		There are many ways to measure in CSS, some are distance, some are time, some are rotational.Pixels are the smallest whole unit of digital screens.
div {    height: 5em; }		An em is the size of the font you’ve set (by default 16px), and is a generally scalable and nicely sized unit.
div {    margin-left: 50%; }		A % measures the percent of the container an element is in. At the biggest level this is the width/height of the page, but can change depending on how big the box is.
div {    transform: rotateZ(200deg); }		deg measures degrees of rotation. 0-360.
div {    transition: 0.5s; }		s measures seconds. ms is a measure of milliseconds (1/1000th of a second, and the generic scripting time unit)

Selectors

More specific information on how to target different parts of your HTML.

All | read more
* {     margin: 0; }		The * symbol selects all elements at once.
Elements | read more
p {}		Add styles to all HTML elements with the given name.Element names can be written the same as they are in HTML.
div {}
button {}
Classes | read more
.pageItem {}		Selecting objects in html that have a class name by using a period.
IDs | read more
#bestPage {}		Selecting an element with an ID by using a hashtag before the ID name.
Groups | read more
h1, h2, p {       text-align: center;       color: red; }		You can use more than one selector to add styles to more than one element at a time, for instance if you wanted to align the text of all h1, h2, and p tags at once and change their color.
Children | read more
#header .nav {   background: crimson; } #header .nav img {   width: 30px; }		You can be more specific with your selectors by targeting only elements inside of other elements (children of that element). For example only setting the width of imgs that are inside the header ID.This is very different than separating the selectors with commas: using just a space means it will target the element within the previous selector, not both the #header and img.
Pseudo | read more
button:hover {   background: red; }		You can add selectors that only apply when the element has other conditions applied to it. For instance this code would change the background color of all buttons that you are hovering over with your mouse.
div:active {   background: blue;   width: 25%; }
Complex | read more
#gallery .imageBox:not(p):hover h3, a:hover {   color: green; }		You can string together any number of the techniques covered above into very specific selectors that will get you the results you want. This selector targets the <h3> tag within the imageBox class within the gallery ID, only when you are hovering over it and not the <p> tag also inside that .imageBox. It also targets all <a> tags when you are hovering on them.
Specificity | read more
* {   color: blue; } h1 {   color: red; } .greenText {   color: green; } #purpleText {   color: purple; } #purpleText:hover {   color: lavender; } * {   color: blue !important; }		Generally, CSS uses a system of cascading from one style to the next: the most recent instance of a property will be the one used. That is, IF they have the same selector. If two snippets try to set the same property on the same element and they have different selectors, CSS settles the dispute by looking at which selector is more specific. The All selector (*) is the most vague selector possible, so it gets overridden by everything. After that, generic tag names, then classes, then IDs, then pseudo-selectors and various compound selectors take over.  There is a lot of nuance that can go into specificity, however, there is a way to override that order and force your style through, which is the !important attribute after your value. In this example all text will be blue no matter what, because we told the all selector to override everything. However, if you have more than one use of !important on a conflicting property then cascading/specificity takes over again. Note: needing !important is usually due to poorly planned code. Don’t use it if you can avoid it.

Properties & Values

The types of styles that are being changed, and the values they are being set to.

Color | read more
h1 {     color: blue; }		Changing the color of text
Background | read more
body {     background-color: blue; }		Changing the background color of the selector, there is three ways to name your color:Hex-Code aka: #1F2A4BWord aka: blue, turquoise, crimson, .etcRGB aka: rgb(255,150,110)
body {     background-image: url(link/to/image.jpg);     background-size: cover;     background-repeat: no-repeat; }		Your background can also be an image. You can use a live link to an image hosted somewhere on the internet, or the relative path to an image you have stored in your project files.
Height & Width | read more
div {     height: 200px;     width: 200px; }		Giving a height in pixels to the selector
		Giving a width in pixels to the selector
Font | read more
p {     font-size: 30px; }		Change the size of text.
@import url(‘https://fonts.googleapis.com/css?family=Roboto’); p {     font-family: ‘Roboto’, sans-serif; }		Changing the font of text. To add special fonts from the web you must either download or link to their files using an @import line.  The second font listed is what’s called a fallback, (a universal web-font as a second option for if your first choice doesn’t load)
Border | read more
div {     border-width: 5px;     border-style: solid;     border-color: blue;     border: 10px dashed red;     border-radius: 10px; }		Border Width: The border thickness.
		Border Style: The type of border, aka: solid, dashed, groove, double, dotted, ridge, inset, outset, none, hidden.
		Border Color: The color of the border.
		Border Shorthand: You can combine these three properties into one line as long as they are list as width, style, color.
		Border Radius: Rounds the edges of your box on a curve.
Margin | read more
div {     margin: 10px;     margin: 10px 20px;     margin: 10px 15px 20px 25px;     margin: 0 auto; }		Spacing outside of the element. You can generalize one value that will be used for all four sides of the container, or specify two values (y & x in both directions), OR specify all four sides (top, right, bottom, left).You can also set a margin to auto, which will evenly space the element on the page, making it centered.
Padding | read more
div {     padding: 10px 15px 20px 25px ; }		The spacing inside of an element. You target the different sides the same way, but you cannot set an auto padding the same as margin.  The difference between padding and margins is like this table right here: it has padding on the inside to keep the words from touching the border, and the table has margins outside of it to keep it from touching the edge of the page.
Text Align | read more
h1{     text-align: center; }		Organizing the text left, center or right.
Position | read more
img{     position: absolute;     top: 100px;     Left: 200px; }		Where an element sits in the flow of the page. By default all elements are relative, meaning they appear in the order they are added to the page. However, you can make an element fixed to the top of the screen (think website headers that don’t scroll away), or absolute to one section (they scroll, but are stuck to whatever location on the page you say. If you give an element position fixed or absolute, you must also specify where it will go relative to the sides of the page (top, left, bottom, or right), since it is outside of the normal formatting.
Animation | read more
div {     height: 200px;     width: 200px;     background-color: blue;     animation: myAnimation 4s linear 0s infinite; }		To use an animation, you apply several values to the element you want animated. In order, they are: @keyframes nameAnimation length in secondsTiming, linear or eased in-outDelay in secondsHow many times it plays before stopping.
@keyframes myAnimation { 0%{     margin-left:0px; } 32%{     margin-left:500px } 100%{     margin-left:0px; } }		Keyframes are the individual steps for an animation. On each frame, you can apply whatever style changes you like to the affected element. You can create however many keyframes you want your animation to have, and how far apart to separate them (it doesn’t have to be even). The only rule is that it begins at 0%, and ends at 100%.
			Flex Box | read more
			div {     display: flex;     flex-flow: row nowrap;     justify-content: space-around;     align-items: center; } div h2 {     flex-grow: 1; }		The display option flex is a more advanced, but a very powerful tool. Flex is a property given to containers that can arrange the contents in any orientation. It works like text align, except it works on any elements, in any direction, in either axis. To use it, declare the display as flex, then say which flow you want (row: horizontal, column: vertical) and whether if not you want content to wrap if it would overflow. Justify content will arrange things forwards or backwards on the chosen flow (space-around means that everything is spaced evenly from front to back) and align-items aligns the content in the opposite axis. In this example, my items would be arranged left-to-right, with even spacing between, and are vertically centered, making a nice row of content.

Debugging is the process of identifying the error or bug in a program. This is a vital tool to use that can save time in finding and correcting a bug or error in the program to make it run in the way it is desired.

To debug errors on BSD Online we can make use of the button that displays the errors in the code. Here’s a guide on where to find this tool and how to use it.

Step 1: 

Click on the icon that looks like a bug to display code errors.

Step 2: 

When an error is found a red X mark is found next to the line where the error occurs. When you hover over the red X mark you will see what error has been made.

“Display Code Errors” button can be toggled on and off as when you want to utilize its function.

So every time you want to ensure or check that your code is error-free, please feel free to make use of the “Display Code Errors” tool.

the transition from a traditional website to a mobile application is not just an upgrade; it’s a necessity. With the majority of internet users accessing content through mobile devices, having a mobile app can significantly boost your project’s reach and user engagement. However, the journey from a website to a mobile app might seem daunting for many.

Fear not! We will take you through a step-by-step journey on how to convert your website project into a mobile application for both iOS and Android platforms, using the innovative platform GoNative.io. Whether you’re a seasoned developer or a newcomer to the tech world, this blog aims to equip you with all the necessary information to make your mobile app transition as smooth as possible.These are the steps you can follow:

1. Open your browser and logon to GoNative.io.
2. Enter the URL of your web app and click on “Build”.
3. Fill in the details of your app and click ”Build my app!” After this, you will need to wait for GoNative’s email.
4. Check your email. In the email that you will receive from GoNative, click the Private management URL.
   Clicking on the above-mentioned link will direct to the following website:From there, you will do two things if you want to run your app using an iOS and Android devices.

For Android:

Click on Download APK.

You have to download and transfer this file (APK) to the Android device where you want to install your app. You will need to allow the installation of this app before you can proceed. Once done, open the app from your app drawer.

For iOS:

To use your app in an iOS device, you would need to have an Apple Developer Account. You will also need to download Xcode before you can deploy your app. Xcode only runs on macOS devices.

1. Sign up or Login to your Apple Developer Account.
2. Download Xcode. Click the following link to download Xcode: Download Xcode
3. Download iOS Source Code.
4. Open the code using Xcode.
5. Make final changes.
6. Choose a device and deploy your app.

To know more about iOS App testing and deployment, visit Apple Developer Site 1.