SASS/CSS Learning Resource Question(s)

Styling (CSS)
1

Hello,
I’m contemplating taking a long break away from Wordpress and am looking to get into Bootstrap 4.xx websites for a while. I am a complete newbie to CSS/SASS/LESS, etc., as I stopped actively following it to any great depth maybe 10 years ago. What resources are available that will help me to understand CSS as it is today, and then SASS, I suppose, as it is my understanding that LESS has been deprecated from Bootstrap and all of the cool kids are now using SASS. I generally use a Mac but I have a decent Windows 10 Laptop available here if needed to peruse learning resources.

Thank you for any help that you can throw in my direction.
Michael

2

I know virtually nothing about SASS/LESS, but I know CSS fairly well. You don’t need to know SASS to use Bootstrap, you just have to become familiar with all the classes. You DO need to know CSS, however, if you want to do anything custom with Bootstrap. Bootstrap’s own website is helpful in this regard… https://getbootstrap.com/

I basically taught myself CSS using W3 schools https://www.w3schools.com/css/ and Stack Overflow https://stackoverflow.com/ for questions/problems I couldn’t figure out. For some of the more complicated stuff, like Flexbox and CSS Grid, I used YouTube Videos and just did a lot of Google searching.

3

@Printninja - Thank you kindly for the rundown on how you went about things to absorb CSS. I’ll check out the linked references that you called out. I am familiar with them but have not spent time at any of them to actually learn the topic, but to rather become a cut & paste type of user, which is something that I want to grow away from.

I appreciate you taking the time to put my mind on a path that I can follow to get some of this under my belt.

:thinking:

4

If you are interested in paid courses that teach everything without wasting your time trying to learn through hunting for information or tutorials Udemy.com has some really good courses.

https://www.udemy.com/css-the-complete-guide-incl-flexbox-grid-sass

The above link is to the best CSS course I have taken. Teaches everything you are talking about minus bootstrap itself.

For Javascript I recommend these two courses, by same people as above.

https://www.udemy.com/javascript-bootcamp-2016

https://www.udemy.com/es6-bootcamp-next-generation-javascript/

If you google Udemy Coupons you can find coupon codes that take each of the above down to between $10 and $12 dollars each. They also have them on their Youtube channel Academind.

For Youtube channels on these subjects I recommend the following:
{ Each link is different even if snapshot shows same image )



I recommend paid courses to save yourself a lot of time learning but I also use Youtube and w3schools, search engines etc… too.

The course lengths are video play time that does NOT include your own experimentation, coding and debugging time so allow an additional 6 hours or so on top of the stated course length. If you do not want to pay for courses Udemy has a ton of free courses on the subjects as well but the ones I linked above are the best I have gone through and saves you tons of time and filtering outdated information.

5

@Terry44 - That there is quite a comprehensive list that you have taken the time and care to fashion for myself and others here on the forum. I do appreciate it a lot and in response I have done as you suggested and googled for a coupon for the courses and have signed up for are:

CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Accelerated JavaScript Training

Accelerated ES6 JavaScript Training

NodeJS - The Complete Guide (incl. MVC, REST APIs, GraphQL)

React - The Complete Guide (incl Hooks, React Router, Redux)

MongoDB - The Complete Developer’s Guide

I’ll need to glean over your links to see what can be found that pertains to php. If you have any Udemy course recommendations for that language, I’d like to hear what you have to say. I’m retired and have a bit of time to go through this material and the Udemy courses look to be something that I can sit down with and start from scratch and get myself a good bearing on all of this with. Thanks again!

Michael

6

I’ve never used udemy, but I know a lot of people like it.

I’m not a “full stack” anything when it comes to website design. I know Bootstrap, HTML and CSS pretty well, and I’ve played with Javascript and Jquery a bit. I’ve only used PHP a few times to create some password protected pages on sites.

I’ve basically just muddled my way through it over the years, and I learned things as I needed to. Basically, whenever a client requested something I didn’t know how to do, that’s when I’d learn it. So I probably spread what would have been a 2 year education, out over ten years. And there are still a lot of things I don’t know how to do.

Nevertheless I’ve built 130 websites in the past 11 years, and have been able to support myself without having to go to work at a full time job. I consider myself semi-retired. Websites have been good to me.

7

@Printninja -
You sound like me. I spent 30 years working in the commercial printing business and then I made a change over to Industrial Maintenance. I ended up teaching myself electrical - everything from very low voltage DC up to over 480VAC 3 phase and then got heavily into automation controls such as programmable logic controllers, sensors, bar code scanner arrays, and various types of industrial machinery. I’ve worked on glass tempering furnaces that heat up to 1300 degrees and then also a 700+ foot long shipping sorter in a 2 million square foot distribution center. I never took a class in any of these things but have had lots of blessings in my life and still do.

I’ve been doing things as you have for quite some time. I taught myself how to set up a linux VPS and how to harden it and I have been using Wordpress and other PHP/mySQL for some time, but I recently ran into another instance where the mySQL database got clobbered and rather then trying to save it I just decided to throw the plates and dishes instead. I do not know the inward workings of WordPress well enough to outsmart it even with the blessings that I get, so I decided to sit down and learn something correctly, at least once before I fall face-first into my oatmeal one morning. :laughing:

WordPress is getting waaaaaay too expensive as a cottage industry to participate in. Everything is going to a subscription model and every plugin author figures that your website is generating funds that they want a chunk of and I never set up personal websites that generate funds so it costs me and I’d just as soon take the time now to learn things and set up my own sites and pay nobody except my very reasonable VPS company. And along the way I can learn something that I might be able to put to use to generate a few bucks if the need arises. I’m also trying to get a few of my relatives to follow along with me to learn javascript and such from the floor up and I’ll buy their Udemy courses for them if they wish to better themselves.

I can totally see where you are coming from because that’s how I roll too. I’m going to make my own fork in the road right now though and go about this a different way and see if it works for me or not. It may be that my personality is like yours and I just get the info as I need it, which has been working so far. I’ll keep you posted.

8

That’s really wild because around 1999, I started working in the graphic dept of a small commercial print shop for about 5 years while I focused on getting my own business off the ground. I also did typesetting for a larger printer for about ten years before that, so I became familiarized with all the old-school printing methods… cameras, stripping, rubylith, wax machine to create mechanicals, and then the slow modernization to image-setters and film output, and then computer-to-plate. I also ran the cutters, folders, and worked in bindery, but I never ran pressed. In high school, I even learned to set metal type.

But before I worked in printing, I spent about 3 years working as a commercial electrician. Seriously. I did everything from wiring new residential construction to pulling 500 MCM in 4" conduit for 3 phase 480v. Wired up shopping centers, warehouses, you name it. I hated the work though.

My own business was geared towards artwork for silkscreen printing, but I also did a ton of brokered work… offset printing, graphic design, signs, banners, promotional products, embroidery, patches. Did that for about 10 solid years and finally got sick of it, so I closed my offices and moved the computers home and started working out of my house learning web design. I created a partnership with a very old and trusted friend who was very good with marketing and sales, and that’s where I am today.

And I also noticed how everything was shifting to subscription models, so I figured, “can’t beat 'em, join 'em” so that’s how I built my website company. We charge a very small up-front cost, but have a monthly fee for the site that includes all the bells & whistles… forms, email, SEO, Google & Facebook marketing, updates and maintenance, analytics, and so on. I had to learn everything to make the sites good lead generators, so as long as they generate leads for the clients, they are more than happy to pay a monthly free. Win-Win. And it’s a LOT less work than hanging light fixtures or fixing wonky files in the pre-press dept. Hope to see you around here.

9

That is wild. :-). I started working in printing on the graveyard shift in the bindery and delivering for a multiple listing printer in 1973 or so and then went to another place and ran their brand new 20 clamp perfect binder where we were making 10,000 books an hour on a good day. Phone books were the worst - breathing in that newsprint gave you a sore throat. This was at a pretty large web house. After that I moved over to a very large format sheet-fed place and stayed there for a long time. Working the 110’ Lawson cutter gave you big arms! The Stahl folders made me deaf! I ended up being the head estimator before getting tired of driving 100 miles a day to work and back. Got a job about 2 miles fro the house and stayed at places close to the house until I retired. Industrial Maintenance was good to me as well. Still lots of sweat work. Retired about 2 years early due to disability and need a cane/walker to get my backside around now. Feeding the birds and teasing the cats with lasers are my new jobs.
It is an interesting parallel that you and I have walked. I remember the old Linotype machines and the quoins (spelling?) and such. I got all into U.V. coating and such for a long time. It was an interesting career and it paid the bills. Lots of overtime too. It all seems like a blur now. :slight_smile:

10

I’ve just come upon Pinegrow after years of struggling to hand code websites; and I can see from this conversation thread that I am in the right place! I started into photography during my first year of high school; and by the time I graduated, I was capable enough to get a job in a small magazine’s darkroom just by walking in (that was in 1979). Over the years, the reliance of newspapers upon photo-mechanical typesetting technologies guaranteed that I could easily find employment as needed; so I decided to study philosophy during my university years. By the late 1980s and early 1990s, of course digital technologies were displacing traditional forms; and then the Internet arrived.
Over the years, I have transitioned into desktop publishing and then into web design; but often as self-taught. I am REALLY happy to have found this program, am and looking forward to exploring website design (I am about to start a course at the State University of New York’s Empire State College on this) — using PINEGROW!

2 Likes
11

I can add another Youtube channel to my list above of tutorial sources.

Traversy Media

He also has really good udemy courses which I can say in my opinion are better than the ones I listed in my post above.

There are several crash course style introduction to various things like react, sass, PDO, various JS and CSS frameworks, Laravel, Flutter etc etc…

The most recent PHP crash course on this channel is over 6 hours.

His udemy courses are excellent, really top notch. Wait for the Udemy discount periods that occur regularly through the year and you can get them between $10 and $16 each.

12

The new thing out there is creating PWA ( progressive web applications ) from websites and adding offline functionality to existing and future mobile apps.

Google has just starting requiring or strongly suggesting that mobile apps offered through it’s play store have offline capability. At the very least the ability to access content offline.

So if you are learning JS start looking up how PWA works because the internet is going to be switching to that type of website, mobile application. As I see it now, it will become the default standard for web development and by end of 2021 will be main stream.

Look at offline storage, cacheing feature of the DOM. It is already built-in you just have to tap into it via the DOM api using Javascript. Isn’t a big deal.

I recommend Traversy Media youtube channel and udemy courses as well as Academind udemy courses to get you up to speed. Though if you already know Javascript you may just need to watch some good youtube videos on it ( PWA ).

13

SASS

If you already know css then just read through the SASS official website, this allows you to write code faster by using shortcuts, variables and create programmatic functions to dynamically create css based on specific situations instead of just globally.

A common thing you can do is dynamically have color of backgrounds and elements change based on surrounding colors or color themes. Lighten or darken colors in a specific color range automatically etc… when the css is exported it is just css you just didn’t write it yourself it was output by SASS based on your requirements.

You don’t really need a tutorial just read their website documentation. Unless you are not very good or new to CSS, then just take a good course that covers both.

You will need a SASS compiler which you can install from the main editors available such as VS Code, Atom etc… Just search for “SASS compiler”.

Pinegrow is good visual web design application but no matter what it is not meant for hand coding or being a serious code editor. Atom or VS Code or similar paid or open source application is what you need for that.

Otherwise you will need to install Node.JS and all the addons for CSS and SASS etc… and one of the node local servers to automatically build or compile CSS from SASS.

Easier to use VS Code or Atom and install the SASS compiler addon for those editors than deal with Node.

14

You can also use the SASS compiler that is built into Pinegrow.

15

There is?

I don’t use Pinegrow for editing so I did not know that.

16

Yup, Just add in the compiled sheet (or an empty file if not yet compiled created) using the Stylesheet manager. Then click the ‘Use SCSS/LESS’ button and give the location of the uncompiled file.

image
image1762×732 109 KB

Within the Settings are a few controls for the compiler.
image
image1726×498 66.8 KB

Note: it uses libsass, not dart as a compiler.