CSS Tutorials

In this lab, you will learn the fundamentals of the CSS Box Model, including content, padding, border, and margin, and how to control element sizing with box-sizing.

In this lab, you will learn the fundamentals of CSS text styling, including how to set text color, font size, font weight, alignment, and line height.

In this lab, you will learn the basics of CSS, including how to create an external stylesheet and link it to an HTML document to change the font of the page.

In this lab, you will learn the fundamentals of CSS Flexbox to create responsive and flexible web layouts.

In this lab, you will learn how to style HTML lists using various CSS properties to create a horizontal navigation bar.

In this lab, you will learn the fundamentals of JavaScript DOM manipulation, including selecting elements, changing content, setting attributes, and creating/appending new elements.

In this lab, you will learn the fundamentals of CSS selectors, including element, class, ID, grouping, and descendant selectors to style HTML elements.

In this lab, you will learn how to style HTML tables using various CSS properties to improve their readability and visual appeal.

In this lab, you will learn the basics of Tailwind CSS, a utility-first CSS framework, by styling a simple HTML element. You'll add the CDN, and apply classes for background color, text color, padding, and layout.

In this lab, you will learn how to style web page elements by applying various CSS color and background properties, including setting colors, adding images, and controlling their position and repetition.

In the bustling city of Petville, Jordan, a web developer, is tasked with redesigning the 'Pet's House' website.

This project guides you through the process of deploying a pre-trained MobileNetV2 model using TensorFlow.js within a Flask web application. MobileNetV2 is a lightweight deep neural network used primarily for image classification. TensorFlow.js enables running machine learning models directly in the browser, allowing for interactive web applications. Flask, a Python web framework, will serve as the backend to host our application. By the end of this project, you will have a running web application that classifies images on the fly using the MobileNetV2 model.

In the bustling digital landscape of 'Pet's House,' a website dedicated to providing premium pet care services, our protagonist, Jordan, a talented web developer, is tasked with enhancing the website's layout and design.

In this project, we will create a simple web-based Markdown editor that offers live HTML preview as you type. Using libraries like Ace Editor, marked, and highlight.js, you'll develop an intuitive editor that not only allows writing in Markdown but also saves data across browser sessions and highlights code snippets in the preview.

In this project, you will learn how to create a flexible card layout using CSS Flexbox. The flexible card layout is a common design pattern used in web pages and applications, where content is displayed in a responsive and adaptable grid-like structure.

In this project, you will learn how to use Flexbox CSS properties to arrange a layout of fresh vegetables in a specific design. By the end of this project, you will be able to create a visually appealing layout using Flexbox, which is a powerful tool for creating responsive and dynamic web designs.

In this lab, you will step into the shoes of a web developer tasked with creating a stylish website for a pet service using fundamental CSS techniques and selectors.

In this project, you will learn how to create a visually appealing fruit platter using CSS Flexbox. The goal is to position the fruits of the same color in the middle of their corresponding color boards, creating a harmonious and aesthetically pleasing display.