How to start CSS

[KR0N05]

 

Hey y'all,

 

So basically I'm a student interested in learning styling and html, html has been easier to learn for whatever reason (seems to be that I can find lots more documentation on this than any other web language), but I've always wanted to be artistic in my websites (make them look good) , make them look cool and have features many other well created websites contain. This is also to help with a upcoming project as I want to create a portfolio of my abilities as a coder, now I'm familiar with C, Java and SQL and Python for example.

If anyone can point me in a direction so links, tips anything that could help all appreciated in advance.

 

[Enderman]

https://www.w3schools.com/html/default.asp

and

https://www.w3schools.com/css/default.asp

[typographie]

In my experience, CSS is often taught as a supplement to HTML, rather than as a language of its own. w3schools has a tutorial and vast libraries of documentation, which may be a great place to start.

[DnFx91]

realizes thread is not about counter strike source, backs away slowly........

[Mira Yurizaki]

If you're more traditional and want a book, I recommend this one: https://www.amazon.com/HTML-CSS-Design-Build-Websites/dp/1118008189/ref=sr_1_2?ie=UTF8&qid=1493747603&sr=8-2&keywords=html5+and+css3

[razaro]

Here is nice site for starting CSS https://www.codecademy.com/courses/css-coding-with-style/0/1 and also do use browsers 

development tools. Like in Google Chrome you can make changes and test on the fly 

https://developers.google.com/web/tools/chrome-devtools/inspect-styles/

[KR0N05]

First off, thanks all for the responses. After looking through some of these links, I found out I got a long way to go , I have occasionally picked up the odd thing from HTML but hopefully these links/books/online practice will help me put more of it into use. I have seen a few of these before like the w3schools however didn't get very far in them can't remember why but always worth going over again I suppose. 

 

[Cruorzy]

Once you start writing alot of CSS try to go to LESSor SASS/SCSS it makes nesting possible and variables, mixins it makes your code more DRY (Dont repeat yourself).

With a building system like Grunt or GULP. Which has alot of videos/guides to set it up.

 

If you did not really get what i said just youtube gulp with less or something. Im sure some videos will make it more than clear and makes CSS a bit less painful.

[Mira Yurizaki]

2 hours ago, Cruorzy said:

Once you start writing alot of CSS try to go to LESSor SASS/SCSS it makes nesting possible and variables, mixins it makes your code more DRY (Dont repeat yourself).

With a building system like Grunt or GULP. Which has alot of videos/guides to set it up.

I had some interest in LESS and SASS, but then I still do my CSS manually and when I catch myself repeating things, I roll them back into one class.

 

I guess it helps to avoid having a long list of classes in your HTML.

[KR0N05]

3 hours ago, Cruorzy said:

Once you start writing alot of CSS try to go to LESSor SASS/SCSS it makes nesting possible and variables, mixins it makes your code more DRY (Dont repeat yourself).

With a building system like Grunt or GULP. Which has alot of videos/guides to set it up.

 

If you did not really get what i said just youtube gulp with less or something. Im sure some videos will make it more than clear and makes CSS a bit less painful.

Thanks for the reply, I'll have to keep this in mind and see the difficulty because although I want to start off pretty basic I suppose its just what can LESS or SASS do that CSS wouldn't allow me to do and just seeing how far I can get with keeping up with the difficulty.

[gspark05]

Decide what you want to do: Example ... making wizard style steps for a workflow. Then google wizard steps fiiddle css. You will find a plethora of examples of what people have mode. What is even better is that with fiddle you can f with what they have done to make it work the way you want.

 

I use fiddle in my job all the time (full stack sharepoint developer). Mess with fiddle, learn LESS (for better control without as much code), and GOOGLE! Just google what you want and add fiddle at the end. You are nearly guranteed to find something every time.

 

Lastly, learn JQuery to mess with the CSS on the fly.

[Cruorzy]

3 hours ago, KR0N05 said:

Thanks for the reply, I'll have to keep this in mind and see the difficulty because although I want to start off pretty basic I suppose its just what can LESS or SASS do that CSS wouldn't allow me to do and just seeing how far I can get with keeping up with the difficulty.

I dont know how much you know about it but in a nutshell, less/sass gets compiled to basic css in the end you get the same end functionality but it makes writing the end product much better.

 

Syntax is the same in most cases like background :green etc

 

But there are a few handy things you could replace that would actually write 5 lines in the css file like propertys that need specific pointers to chrome/edge browsers 

 

its awesome

[Cruorzy]

2 minutes ago, gspark05 said:

Decide what you want to do: Example ... making wizard style steps for a workflow. Then google wizard steps fiiddle css. You will find a plethora of examples of what people have mode. What is even better is that with fiddle you can f with what they have done to make it work the way you want.

 

I use fiddle in my job all the time (full stack sharepoint developer). Mess with fiddle, learn LESS (for better control without as much code), and GOOGLE! Just google what you want and add fiddle at the end. You are nearly guranteed to find something every time.

 

Lastly, learn JQuery to mess with the CSS on the fly.

Dont really know what it is, but ill look into it too. Thanks for sharing man

[gspark05]

6 minutes ago, Cruorzy said:

Dont really know what it is, but ill look into it too. Thanks for sharing man

FIDDLE ... it is literally the best thing since sliced bread.

Like here ... this is what I found when I was looking at how to make wizard steps via css: https://jsfiddle.net/slothbear/gxRMr/

You can mess with the code without having to deploy it locally on your test site.

[Cruorzy]

Oh i see, seems something like codepen what i use when i share a short amount of code to someone.

 

Codepen also has the feature to write sass/less and include libs on a easy way.

[gocha]

https://www.freecodecamp.com - best site I have ever used (years ago used - w3s, codeacademy and many more sites, but this now i love it.), similar to w3schools principal, but there is very active only chat and challenges, were you can go and learn and finish like lessons. Chat is very helpful because when you are stuck write in this chat your problem and guys will instantly help you and solv this problem.

 

sorry for my language, i try my best.