Byte-Sized-Chunks: Cascading Style Sheets (CSS) with HTML
4.4 (18 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.
2,439 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Byte-Sized-Chunks: Cascading Style Sheets (CSS) with HTML to your Wishlist.

Add to Wishlist

Byte-Sized-Chunks: Cascading Style Sheets (CSS) with HTML

Use CSS to make a spectacular difference to the appearance of your webpages!
4.4 (18 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.
2,439 students enrolled
Created by Loony Corn
Last updated 3/2016
English
Current price: $12 Original price: $20 Discount: 40% off
3 days left at this price!
30-Day Money-Back Guarantee
Includes:
  • 4 hours on-demand video
  • 55 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion

Training 5 or more people?

Get your team access to Udemy's top 2,000 courses anytime, anywhere.

Try Udemy for Business
What Will I Learn?
  • Understand HTML - its structure, and the commonly used tags
  • Utilise CSS, including inheritance, selectors, the box model - the very topics that make CSS hard to use
View Curriculum
Requirements
  • Any modern browser and a simple text editor are all that will be needed.
Description

Note: This course is a subset of our much longer course 'Learn By Example: HTML, CSS and Javascript' so please don't sign up for both:-)

  • Relatively few folks formally learn HTML or CSS, because its quite easy to get stuff done in these technologies in a "quick-and-dirty way".
  • That "quick-and-dirty" way of learning and doing leads to problems over time, because CSS is actually quite complex, so it is easy to do things the wrong way
  • This course will help, because it has 20 examples. Each is self-contained, has its source code attached, and gets across a simple, specific use-case. Each example is simple, but not simplistic.

What's Included:

  • Basic HTML: Folks stopped counting HTML as a language worth formally learning sometime in the 90s, but this is only partially justified. It always helps to have strong basics.
  • CSS: Cascading Stylesheets are incredibly powerful, and incredibly hard to use - until you know how they really work. Once you understand inheritance and selection in CSS, it will all make a lot more sense.


Using discussion forums

Please use the discussion forums on this course to engage with other students and to help each other out. Unfortunately, much as we would like to, it is not possible for us at Loonycorn to respond to individual questions from students:-(

We're super small and self-funded with only 2 people developing technical video content. Our mission is to make high-quality courses available at super low prices.

The only way to keep our prices this low is to *NOT offer additional technical support over email or in-person*. The truth is, direct support is hugely expensive and just does not scale.

We understand that this is not ideal and that a lot of students might benefit from this additional support. Hiring resources for additional support would make our offering much more expensive, thus defeating our original purpose.

It is a hard trade-off.

Thank you for your patience and understanding!


Who is the target audience?
  • Nope! Please don't enroll for this class if you have already enrolled for our 13-hour course 'Foundations of HTML, CSS and Javascript' course
  • Yep! Folks who are absolutely new to web programming, and wish to learn HTML and CSS from scratch
  • Yep! Folks that struggle with getting the appearance of their webpages just right, despite knowing HTML
Compare to Other CSS Courses
Curriculum For This Course
28 Lectures
03:48:55
+
CSS and HTML
12 Lectures 01:25:25

HTML specifies the structure of a web page and CSS how the page looks i.e. the presentation.
Preview 09:15

Plunge right in, set up a simple page and get introduced to a whole bunch of HTML tags.
Preview 12:33

What's an HTML page without style? Get to know the HTML <style> tag and how it can be used to specify style properties to make your pages look good.
Introduction to CSS
06:43

The internet is all about links. Who links to you and who do you link to? In this lecture we'll learn how we link to others using the <a> tag and its href attribute.
The A Tag
08:18

Paths in HTML can reference resources on our server as well as resources anywhere on the web. Relative paths are relative to the location of the HTML file and absolute paths can access resources on any server.
Paths
05:39

HTML provides a whole bunch of quote tags. Learn about the <q> and the <blockquote> tags and why we would use them over specifying quotes ("") in text.
Quotes
06:33

Bulleted lists and numbered lists. HTML has special <ul> and <ol> tags to specify these. Each list item in an <li> tag should go with either an un-ordered list (<ul>) or an ordered list (<ol>).

Lists - Ordered and Unordered
07:52

The <em>, <time>, <strong> and <code> tags.
Other Miscellaneous HTML Tags
02:32

Understand the different parts of a domain name and what they represent. Revisit the <a> tag and learn some more about how we can open up a new web page in a new window, tab etc.
URL and Domain Names
11:01

The <img> tag allows you to embed inline images in your page. You can also resize images using the height and width attribute of the <img> tag.
The img Tag
10:38

HTML is a living standard now. No more version numbers and everything will be backward compatible from here on in. This is a pretty big deal!
The HTML Standard
03:17
+
CSS
16 Lectures 02:23:30
Get re-introduced to CSS and see how CSS files are set up separately from the HTML and linked to the HTML page. It's good practice to separate the CSS and HTML files so both can be worked on separately.
Cascading Stylesheets reintroduced
08:23

CSS styles inherit from the parent element, or do they? CSS inheritance is tricky and it's important to know how a certain style is applied on an element. This lecture should have the answers.
Inheritance in CSS
07:28

How do you apply styles to specific HTML elements? You select them. How do you select them? By specifying the tag, a CSS class or their unique identifier.
CSS Selectors
09:59

Understanding sans-serif fonts, fallback options on a webpage, using fonts from free services such as Google etc.
Fonts
10:08

How to change text color, background colors and specify colors using their hex code.
Colors
03:38

Understand margins, padding and borders and where exactly they apply. They form the CSS box model which has tripped up many an aspiring web developer.
The Box Model
11:54

The <div> is a block element which is used to logically group HTML elements. The logical components can then be styled together.
The <div> Element
07:55

Figure out why the "cascade" exists in Cascading Stylesheets.
What is the exact style applied?
08:21

The <span> allows logical grouping of inline elements and is a perfect partner to <div>.
Preview 02:55

CSS allows you to apply styles to not just HTML elements but also specific states of an element. The :hover, :focus, :link are all examples of states of a particular element.
HTML States and Pseudo-classes
02:59

Normal Rendering Flow Of The Browser
15:00

The CSS float and clear properties.
The CSS float and clear properties
09:42

Understand the CSS position attribute and how it works.
Preview 12:23

Fluid layouts allow the elements of a page to move as the page resizes, but you might not want them to! Then you'd choose the fixed layout.
Fluid And Fixed Layouts
08:58

The display property can make block elements behave like inline elements, make elements disappear and whole bunch of other stuff.

The CSS display property
08:02

Chrome Developer Tools
15:45
About the Instructor
Loony Corn
4.3 Average rating
5,508 Reviews
42,821 Students
75 Courses
An ex-Google, Stanford and Flipkart team

Loonycorn is us, Janani Ravi and Vitthal Srinivasan. Between us, we have studied at Stanford, been admitted to IIM Ahmedabad and have spent years  working in tech, in the Bay Area, New York, Singapore and Bangalore.

Janani: 7 years at Google (New York, Singapore); Studied at Stanford; also worked at Flipkart and Microsoft

Vitthal: Also Google (Singapore) and studied at Stanford; Flipkart, Credit Suisse and INSEAD too

We think we might have hit upon a neat way of teaching complicated tech courses in a funny, practical, engaging way, which is why we are so excited to be here on Udemy!

We hope you will try our offerings, and think you'll like them :-)