Code Mecca

In HTML, the title usually will be contained in tag.

or for subheadings

Content is the paragraph



Graphic by:

In HTML, heading(h1 to h6) tags are used for titles or section headings.

The body tag contains the content.



Graphic by:

You use an array when you need to store many variables of multi data types



Graphic by:

An example of an object could be a person while the properties are first name, last name, height, age...etc.



Graphic by:

Variable is used when you want to store a value.

Different kinds of value will require different variable types.



Graphic by:

In CSS and HTML, there’s a relationship between elements called the parent/child relationship.

In this example, element A is the element of element B and C, which means element B & C are the child of element A.



Graphic by:

Logical operators are used when comparing two conditions.



Graphic by:

Comparison operators are used to create conditions and compare two variables.

Another operator, “===”, means the data type between two vars need to be the same.



Graphic by:

There are infinite loops and time loops. The while loop here is an infinite loop because num never reaches 3.



Graphic by:

When you need to repeat something, you use a loop and wrap it around your code.



Graphic by:

The effect shows what the transition code shown above will do.

Check previous graphic for default property value



Graphic by:

Transition in CSS is often used for changing property values smoothly.



Graphic by:

These are some websites that you can use to practice CSS flexbox concepts



Graphic by:

Don’t ever start from 0 when there are already tools for you that can instantly help you save loads of time.

CSS framework provides stylesheets for front-end developers to quickly create a user interface



Graphic by:

Don’t ever start from 0 when there are already tools for you that can instantly help you save loads of time.

Icon libraries provide front-end developers icons, for them to choose and personalize their website with.



Graphic by:

Different style properties have different functions.

By changing the property values and its styles, you can customize your website.



Graphic by:

The code with higher priority will be executed while lower specificity codes will be overridden.



Graphic by:

Relative positioning will position the element based on the parent element’s position.

If you forgot what a parent element is, refer to our graphic on parent or child element.



Graphic by:

Absolute positioning will position elements based on the box model itself.



Graphic by:

will set certain CSS rules to fit specific screen sizes.

Ex. A button on a mobile phone takes up the entire width of the screen, but not on a desktop.



Graphic by:

This graphic shows the elements that will be selected by the general sibling selector



Graphic by:

Different selectors will have different effects, you can choose which selector you want depending on the situation.



Graphic by:

You can set an image or plain colors as a background on your website to make it more decorative.



Graphic by:

This graphic shows which elements the adjacent sibling selector will select.

Check out the previous graphic for explanation



Graphic by:

The adjacent sibling selector is made up of two elements separated by a “+” symbol.



Graphic by:

CSS box model wraps around all HTML elements.

You can adjust the box model part sizes accordingly.



Graphic by:

This graphic shows which elements will the descendant selector highlight.

Check our previous graphic for explanation.



Graphic by:

A descendant selector is made up of two elements separated by a space. Check our next graphic for reference.



Graphic by:

Check out our previous graphic for explanation on child selector



Graphic by:

Check out our next graphic which shows what a child selector will select



Graphic by: