Best Resources to Learn CSS

Cascading Style Sheets (CSS) is the basic of website development and design. Are you a UI designer? Take note of the importance of having the basic understandings of CSS. Below listed the top five best courses and tutorials to learn CSS.

Tutorials and Courses

  • CSS Learning Path (from Beginner to Advanced) – This CSS tutorial helps you learn everything from cascading and inheritance in CSS, layouts with CSS, CSS3 components features, and SASS & LESS, among others. The learning path will bring you from the fundamentals of CSS to a live coding session.
  • CSS: Refactoring Style Sheets – Led by web designer and web developer Morten Rand-Hendriksen, this CSS course aims to talk about how to make stylesheets leader while keeping the stylesheets power. He will cover tools such as Gulp, Purgecss, Code, Visual Studio, Prettier, stylelint and nmp.
  • Learn to Code HTML & CSS – This CSS online course is an interactive guide for beginners with one goal. It strives to teach you how to create and style websites with CSS and HTML. It will outline the basics and covers all the vital elements of front-end designs as well as development.
  • The Complete Flexbox Tutorial – This tutorial from Udemy aims to teach you how to utilize the new CSS3 Flexbox model to make responsive web layouts efficiently. Topics from how to write quality and reusable CSS codes to wonderful responsive galleries with Flexbox are tackled in this lesson.
  • Build Websites from Scratch with HTML & CSS – Another course from Udemy, this one is composed of over seventy-seven lectures and eight hours of content, presenting you with a basic, yet inclusive understanding of both CSS and HTML. The course specializes in having you start creating code so you could learn through doing, and make your own functional CSS and HTML webpage at the end.

Tools

  • Bourbon – Bourbon is a lightweight Sass tool set. It is pure Sass.
  • RSCSS – Styling CSS without losing your sanity.
  • ITCSS – A sane, scalable, managed CSS architecture for large UI projects.
  • idiomatic CSS – The following document outlines a reasonable style guide for CSS development.
  • CSS Guidelines – High-level advice and guidelines for writing sane, manageable, scalable CSS.
  • Sass Guidelines – An opinionated styleguide for writing sane, maintainable and scalable Sass.

CSS Frameworks

  • awsm.css – awsm.css is a CSS library for beautify semantic HTML markup without classes, attributes, etc. Use tags only.
  • Bonsai – Bonsai CSS is a super lightweight, fully responsive, utlity complete framework. All you need to build beautifully crafted web interfaces with ease.
  • Bootstrap – Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
  • Bulma – Bulma is a free, open source CSS framework based on Flexbox and used by more than 200,000 developers.
  • Butter Cake – Butter Cake is a free, open source modular responsive front-end CSS framework based on Flexbox.
  • Chota – A micro (~3kb) CSS framework.
  • Cirrus – A fully responsive and comprehensive CSS framework with beautiful controls and simplistic structure.
  • Foundation – A CSS framework for any device, medium, and accessibility.
  • Gralig – A modest, grayish CSS library.
  • Halfmoon – Halfmoon is a responsive front-end framework, designed for quickly building beautiful dashboards and product pages. 
  • Hasser CSS – A lite and flexible CSS framework (Inspired by Skeleton CSS).
  • Materialize – A modern responsive front-end framework based on Material Design.
  • Pure.css – A set of small, responsive CSS modules that you can use in every web project. Pure is ridiculously tiny. The entire set of modules clocks in at 3.7KB* minified and gzipped.
  • Semantic UI – Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.
  • Shorthand Framework – Shorthand is a CSS framework and does not include any javascript. You can customize the framework by using .scss only.
  • Spectre.css – Lightweight (~10KB gzipped) starting point for your projects.
  • Strawberry – Strawberry is a new flexbox based CSS micro-framework. A set of common flexbox’s utilities focused on making your life easier and faster with nested flexboxes.
  • Tachyons – Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible.
  • Tailwindcss – A utility-first CSS framework for rapid UI development.

Our Tutorials

  • Circular Images with CSS
    Making a circular image is quite simple in CSS thanks to border-radiusproperty. Square Image We use this property if an image is square. img { border-radius: 50%; } or img...
  • Add double quotes to a paragraph with CSS
    The quotes property in CSS allows you to set the type of quotation marks for quotations or any HTML elements. It defines which types of quotes are used when quotes are...

Modern CSS Layouts

Super center

With place-items: center, content inside the wrapper will be placed at the middle center.

.wrapper{
	display: grid;
	place-items: center;
	height: 300px;
	width: 300px;
	margin: 100px auto;
	border: 1px solid red;
}

Responsive with flex

<div class="wrapper">
		<div class="box-stretched"></div>			
		<div class="box-stretched"></div>			
		<div class="box-stretched"></div>			
		<div class="box-stretched"></div>			
		<div class="box-no-stretched"></div>			
		<div class="box-no-stretched"></div>			
		<div class="box-no-stretched"></div>			
		<div class="box-no-stretched"></div>			
	</div>
.wrapper{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;	
}
.wrapper .box-stretched {
	background: red;
	width: 100px;
	height: 100px;
	margin: 5px;
	flex: 1 1 100px;	
}

.wrapper .box-no-stretched {
	background: green;
	width: 100px;
	height: 100px;
	margin: 5px;	
	flex: 0 1 100px;
}

Sidebar with grid-template-columns

<div class="wrapper">
		<div class="sidebar">Sidebar<br>Min: 200px, Max: 30%</div>			
		<div class="content">Main content</div>					
	</div>
.wrapper{
	display: grid;
	grid-template-columns: minmax(200px, 30%) 1fr;
	height: 300px;
}

.wrapper .sidebar{
	background-color: red;
}
.wrapper .content{
	background-color: green;
}

Grid area

The grid-template-areas CSS property specifies named grid areas, establishing the cells in the grid and assigning them names.

<div class="wrapper">
	<header class="box">Header</header>			
	<nav class="box">Navigation</nav>			
	<div class="sidebar box">Sidebar</div>			
	<main class="box">Main content</main>									
	<footer class="box">Footer</footer>						
</div>
.sidebar {
	grid-area: sidebar;
}
nav{
	grid-area: nav;
}
main {
	grid-area: content;
}

header {
	grid-area: header;
}
footer {
	grid-area: footer;		
}
.wrapper {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: 30%  70%;
	grid-template-areas:
           "header  header" "nav nav" "sidebar content" "sidebar footer";    
}

.box {
	background: #EEE;	
	border-radius: 5px;
	padding: 20px;
	font-size: 150%;

}

Leave a Comment

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close