Learning CSS

Take your first steps into the world of modern web design using CSS
4.1 (4 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
60 students enrolled
$19
$75
75% off
Take This Course
  • Lectures 40
  • Length 4 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 1/2016 English

Course Description

As a modern day web designer, it is very critical for you to prepare for the CSS3 world we live in. A major challenge that designers face in their day-to-day life is making their designs stand out from the rest and ensuring they work on all devices and platforms. The birth of CSS3 brings with it many updates that make designing in HTML easier and more appealing. CSS adds excitement to HTML elements, and allows designers to add color; manipulate layouts, size, and position; enhance the visuals of element objects; and much more.

Learning CSS gives you the introduction you need to start creating web pages that are visual marvels with CSS. Dealing with the absolute fundamentals of CSS, this video course gives you everything you need to know to enhance and embellish HTML web pages.

Before we plunge into the world of CSS, we are going to start off by playing around with CSS scripts, learning about styles, rules, and inspecting HTML elements. We'll then investigate HTML selection using classes, IDs, and elements. Then, we will make our website visually stimulating using colors. We will be introduced to CSS selectors, implementing colors, and manipulating the size and position of objects and layouts on the page and in relation to each other.

We'll get better and better by making the elements of our website interact with each other and tweaking the layout so our web page works on all digital devices, thereby enhancing its appeal. Finally, we'll get to grips with techniques for text and content manipulation to enhance the look and feel of our site.

Learning CSS will give you a flying start at creating stunning websites, arming you with all the know-how you'll need to incorporate CSS into your workflow

About The Author

Ben Fhala discovered his passion for data visualization while he was working at Parsons in New York, in their data visualization department, PIIM. He is the owner of the online video training school and an Adobe ACP. He enjoys spending most of his time learning and teaching, and has a love for visual programming and visualization in general. Ben has had the honor of developing applications for members of the US Congress, Prime Ministers, and Presidents around the world.

He has built many interactive experiences for companies such as Target, AT&T, Crayola, Marriott, Neutrogena, and Nokia. He has technically directed many award-winning projects and has been part of teams that have won three Agency of the Year awards.

Among Ben's publications are HTML5 Graphing and Data Visualization Cookbook, and five video courses: jQuery UI Development; Learning Object-Oriented JavaScript; Mastering JavaScript; JavaScript Design Patterns; Web Visualization with HTML5, CSS3, and JavaScript, all for Packt Publishing.

What are the requirements?

  • This course is meant for web design beginners who know the basics of HTML, and want to step into the future by learning how to use CSS.

What am I going to get from this course?

  • Learn how to work with CSS rules effectively to build efficient and modern websites
  • Manipulate specific elements on an HTML page with the power of CSS Selectors
  • Explore the basics of color theory to take advantage of all the capabilities that come with adding color to your site
  • Leverage the power of absolute, relative, static, and fixed positioning techniques to enhance the look and feel of your websites
  • Control the element size, position, as well as their interactions with other elements to create content that is adaptable and dynamic
  • Empower yourself to work with a variety of fonts to give your website that extra edge
  • Enhance user experience using dynamic content manipulation to create layouts that work on all digital devices

What is the target audience?

  • This video course follows a pragmatic approach that builds on the viewer knowledge section after section to efficiently design sleek web pages using CSS.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Defining Our First CSS Rules
03:36

This video will provide an overview of the course.

02:47

Before we get a head start on the concepts, it is important to know what we are about to cover.

04:48

Let's start our journey into the world of CSS with our first live example in HTML using CSS. We will add our first CSS rule that will give a background to our HTML page.

03:38

In this video we will continue and discuss how to add style to HTML documents.

03:14

In this video, we will turn our code into a rule in order to use it later in our document. We will experience creating our first CSS rule.

04:06

In the last few videos, we created a rule that was used in our HTML document but couldn’t be used on our website. In this video, we will discuss how to tackle this situation.

04:17

We will wrap up this section as we take a look at how to peak at other sites’ code. One of the most common things HTML/CSS developers do is peak at wonderful samples they like online and learn from them. At the end of this video, you will know how to tweak CSS rules of your own or even peak and grab ideas from other sites.

Section 2: Playing with CSS Selectors
04:59

In the last few videos, we focused on positioning our code and learning how we can reuse it in the document. In this video, we will take a deeper look into the process of defining CSS rules.

03:36

Until now, each CSS rule we created was directly connected to an element or group of elements on stage. CSS classes enable you to define groups of elements of your own. CSS classes are not restricted to an element type and as such enable you to define one class for many different types of elements. Let’s work on classes and know them better.

04:45

Let’s turn our attention to talking directly with unique items.

03:25

In videos so far, we were introduced to global flat and simple rules. Let’s stride further and discuss how to travel through a document.

02:26

Many times you will find yourself creating the same rules for more than one item. You might ask yourself, is there a way to combine the rules for more than one item? The answer is yes, and we will see how to get it done in this video.

05:22

As your CSS grows, so does the effort of the HTML browsers to render your code. We will spend some time talking about how you can build your code more effectively to make it easier for the browser to process your pages.

Section 3: Bumping It Up With Colors
12:51

Color is probably the thing you think most of when creating pages in CSS. In this section as a whole, we will spend a lot of time adding color to our HTML page.

03:55

In this video, you will learn about properties that contain multiple directions at the same time.

07:20

Let's turn our attention to colors and how they work in CSS.

12:31

Let’s dive even deeper into the colors and how they work in CSS.

Section 4: Controlling Elements
06:41

We are now ready to take a look at controlling the opacity of elements.

05:41

Over the last few videos, we played with colors of elements and focused on their content. In this video, we will move out of our shapes and discuss how to control their outlines.

04:01

Many developers get confused when it comes to the difference between outline and borders in CSS. They do look alike and do almost the same thing. In the last video, we discussed how to work with outlines; so, why there are separate rules for outlines and borders? Let’s find out.

04:19

In the last video, we discovered how to manipulate the way borders look. However, how about manipulating them? This video will lead you to the answer.

Section 5: Manipulating Sizes
08:29

The first task in this section is to define the width and height of elements. We will discuss explicit and relative sizes and even how to control the range of sizes that an element can be of as the HTML page scales.

06:50

Elements relate to other things on screen and to themselves as well. Let’s talk about margins of elements and how they relate to each other.

07:05

CSS enables us to scale elements in many ways. Some ways are relative to the system we are in, while others are not. In this video, we will consider the differences between them and know how to pick the right measurement system for our needs

03:34

A few videos ago, we discovered how to control the relation between elements with padding. Now, we will explore this subject further. In this video, we will consider how to define the space between the boundaries of a box and its content.

Section 6: Element Layout Interaction
03:31

Now that our items talk with items that that surround them, let’s take a look at how to define the elements’ layout. We will discuss using clear and float commands in this video.

08:25

Over the last few sections, our focus was directly associated with items as we assumed that each item has prebuilt characteristics. Let’s talk about the different layout options we have.

05:02

Horizontal scrolls can get really annoying, and we really don’t want to keep needing them in our sites. Let’s tackle this problem.

06:03

Over the last few sections, our focus was directly associated with items, while we had no control over how they relate and react to other elements on the HTML page. We covered all the core rules of laying things out relatively in CSS, and we are ready to move on to a now topic: absolute positioning.

Section 7: Texting the CSS Way
10:43

Up until now, the copy that was added to our HTML object was treated as it is; however, in reality, we want to give it a style and make it our own. The following section describes ways we can manipulate text in CSS. We will start our exploration with bidirectional text. By the end of this video, you will know how to spot a copy that isn't well rendered, even if it’s not in your native language and how to fix it.

06:58

The first thing we need to do when working with text is define its language format layout and overall direction and alignment. Let’s take a look at this in action.

08:24

In the last video, we stepped into the world of text as we defined the overall flow of our text. In this video, we will go a step closer into the character level and be introduced to the basics of working with fonts in CSS.

07:50

To work with fonts, we need to understand the font families they belong to for best results. We’ll take a look at just this in this video.

05:29

In the last video, our focus was on the characters and how they look. In this video, we will move our attention one step higher as we explore decorating text.

07:17

Throughout this section, we will explore the ways text can be manipulated in HTML by leveraging CSS rules. In this last video of the section, we will go a step higher and deal with paragraph elements.

03:10

The orphans and windows properties help control the way HTML pages are printed out. While windows define the minimum number of lines a paragraph must have at the top of the printed page, an orphan defines the minimum number of lines at the bottom of the page. By the end of the video, you will see them come to life.

Section 8: Content Manipulation
06:02

Sometimes we want to hide things for a minute or forever; CSS hands us this capability. Let’s take a look at this in action.

05:34

Sometimes, you will have a batch of copies you want to put into HTML pages. It would be a horrible waste of time to copy and paste this content over and over. However, CSS enables us to dynamically define repetitive content as a part of the CSS rules.

07:51

In the last video, we discovered how to add content dynamically in HTML using CSS. In this video, we will continue exploring this subject as we expand on to it by adding a counter.

08:57

In the last video, we discovered how to add content dynamically in HTML using CSS. In this video, we will continue exploring this subject as we expand on to it by adding a counter.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Packt Publishing, Tech Knowledge in Motion

Over the past ten years Packt Publishing has developed an extensive catalogue of over 2000 books, e-books and video courses aimed at keeping IT professionals ahead of the technology curve. From new takes on established technologies through to the latest guides on emerging platforms, topics and trends – Packt's focus has always been on giving our customers the working knowledge they need to get the job done. Our Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.

Ready to start learning?
Take This Course