Skip to main content

Learning HTML, CSS and JavaScript

Kevin McDaniel
Updated

While SharePoint provides visual tools to create pages, you have little control over how things look and behave. By learning HTML and CSS you can fine-tune your content and create custom layouts unavailable through the default SharePoint controls. While this information is available for you, please be aware that Tyler does not provide custom HTML/CSS/JS. However, we are here to support your web team as you tackle your own. So, please feel free to write in wish any questions and we will do our best to point you in the right direction.

Text Editors

While SharePoint provides the ability to edit HTML directly, it is very basic and can be difficult to use to develop entire pages. It is recommended that you use a text editor such as Notepad on your computer to modify your HTML, CSS and JavaScript. Many text editors have built in functions to assist with this, such as code complete, error checking, and styling to make your code easier to read.

The HTML of this page using notepad

An example of the same HTML in Visual Studio Code.

Some commonly used IDEs are

HTML

HTML stands for Hyper Text Markup Language and is the most basic building block of the web. You can consider it the skeleton of the web page. It uses elements to define content. An element is differentiated from regular text by tags, which consist of the element name surrounded by < and > such as <title>, <p>, or <div> Take the starting text from this page as an example:

Learning HTML, CSS and Javascript

While SharePoint provides visual tools to create pages, you have little control over how things look and behave. By learning HTML and CSS you can fine-tune your content and create custom layouts unavailable through the default SharePoint controls.

Our first line is the leading header for the document, or <h1>and the second block of text is a paragraph, or <p>

<h1>Learning HTML, CSS and Javascript</h1>
<p>While SharePoint provides visual tools to create pages, you have little control over how 
things look and behave. By learning HTML and CSS you can fine-tune your content and create 
custom layouts unavailable through the default SharePoint controls.</p>

This is not only important for the browser to apply default styling and organization to the page, but it helps assistive technology such as screen readers to be better able to interpret the content on the page and helps search engines to better index your content, resulting in higher SEO rankings.

Tutorials:

Videos:

CSS

CSS stands for Cascading Style Sheets and is used to control colors, fonts, spacing, and layout, helping to create visually appealing and user-friendly designs to be used across the entire site. By keeping style separate from content, CSS makes websites easier to update and adapt to different screen sizes.

 

General Tutorials

Looking for all around tutorials and resources to understand CSS? This is the section for you. These  resources will provide a more course-oriented learning environment and will take you through all of the basics you will need to know to take your pages to the next level.

Tutorials:

Videos:

Box Model

Every HTML element exists in an invisible box that determines its size and spacing. The CSS Box Model defines how content, padding, borders, and margins interact to control an element’s layout. Mastering this concept is essential for designing well-structured, visually appealing web pages.

 

Tutorials:

Videos:

CSS Selectors

CSS Selectors allow you to target specific elements on a page, but it goes beyond simple element and class selections. Advanced selectors let you style even or odd elements, apply styles dynamically, and even insert content before or after an element. Understanding selectors is key to writing efficient, flexible CSS.

Tutorials:

Videos:

Specificity and Inheritance

Ever applied a CSS rule that didn’t seem to work? The reason might be CSS specificity. Each selector carries a different "weight," and some styles can override others based on how they are written. Learning how specificity and inheritance work ensures you have full control over your styles.

 

Tutorials:

Videos:

CSS Units

While pixels are a common unit in CSS, they’re just one of many ways to define size and spacing. CSS provides relative and absolute units like em, rem, percentages, and viewport-based measurements.

Tutorials:

Videos:

Layout

CSS gives you powerful tools to structure content on a page, from simple document flow to complex grid and flexbox-based layouts. Mastering CSS layout techniques is crucial for creating well-structured designs.

Tutorials:

Videos:

Games:

Positioning

CSS positioning determines where elements appear on the page and how they interact with surrounding content. From static and relative positioning to absolute and fixed layouts, learning how CSS positioning works helps you control element placement with precision.

Tutorials:

Videos:

Responsive Design

Modern web design requires flexibility. CSS enables websites to adjust dynamically based on screen sizes, resolutions, and even container widths. Responsive design techniques ensure that your site remains user-friendly across desktops, tablets, and smartphones.

Tutorials:

Videos:

Animation and Transition

CSS isn’t just for static layouts—it also lets you bring elements to life. With transformations, you can scale, rotate, and skew elements, while animations allow you to create smooth, engaging transitions that enhance the user experience.

Tutorials:

Video:

JavaScript

JavaScript a the programming language used for the web. It allows you to create complex and interactive features. Any time a web page does something other than just display static information, JavaScript is most likely involved. Since JavaScript can be more complex than HTML or CSS, we recommend starting with a full course to build a solid foundation. Below are some recommended options.

Tutorials:

Videos:

Related articles

Comments

0 comments

Please sign in to leave a comment.