Learning to Code #2 | CSS (plus 4 useful resources.)

learning css

When I wrote my first of these posts on learning HTML, I wrote down what my aims were for the next stage of my studies. Learning CSS3 and styling websites (so they no longer look like something straight out of the 90s). I have listed the goals below as a little recap to review how I found this area of study.

Goals for CSS:

  • complete the CSS3 section of my course, lectures 44-82 (short lectures!)
  • finish reading my book on CSS3 chapters 10 to 19
  • start a project to build my portfolio and improve my design skills
  • a summary sheet for CSS3 that can become a printable
  • continue to layer code onto my ongoing website project.
  • share my web development plan here on the blog

Have I managed to achieve this?

For the most part yes. I have a really good grip on how to use stylesheets and after a lot of practice, would be confident in providing these skills at a professional level.

I’ve completed my summary sheets for CSS, handwritten as per usual as I really enjoy writing things down. It tends to make information sink in more and as a bonus, is also fairly cathartic. I don’t think this works in terms of a useful printable though. One of my next projects is to look into creating printable graphics using tools such as Canva. This way I can provide a neat and useful summary sheet that I can refer to on my computer, plus something for my readers to download and use in their own studies. I may just be adding to my workload but I may as well document my ideas. Then one day hopefully I will get around to working on them!

What I haven’t started building yet is my portfolio.

I’m not sure why I keep putting this off – but I certainly seem to be. I have had the domain name for a while. I think it’s because I’m not sure what design I want to go for yet. It seems like such a simple step, especially when I know I can build it with relative ease. The problem is, it’s such an important first impression to any potential new customers/clients that let’s be honest – it feels like a lot of pressure. I don’t know where to start!

If you have any ideas about what I should put in a simple portfolio, with very little work experience yet, then any help would be greatly appreciated. Even just general tips on starting out in web development.

Finally, in terms of sharing my web development plan,  you can read that here.

What is interesting about learning this language?

As CSS (cascading style sheets) is essentially what makes a website look good/aesthetically pleasing I have enjoyed pretty much all of the learning processes. The design aspect of web development is something that really appeals.

Non of the interactivity or mobile responsiveness (though very important) of a site really matters if it still looks like a basic HTML layout. You use HTML tags, ids and class attributes (amongst other selectors) to pick elements from your page and give them styles using CSS declarations.

Once you have learnt CSS you can start to edit pre-existing themes. For example if you run a WordPress site but want to slightly alter the current theme, you can change the CSS of your child theme to personalise it to your needs.

With CSS, you can change the layout, the colors (note the American spelling!) the fonts,  the borders, the positioning of elements on the page etc.

Once I wrapped my head around floating and positioning, with the help of a lot of googling and useful posts written on the subject, I found it really rewarding. It is probably one of the most enjoyable languages to learn in code as it is fairly easy to understand, but with really quick and noticeable results. Especially before you move onto more complex code such as javascript and PHP, these are rewarding too but it takes much longer to get to that ‘ aha’ moment.

I would honestly encourage anyone in tech, or interested in website design to at least learn some basic CSS. It will make your life a lot easier and put you in control of your own branding. It will also mean that if you do choose to hire someone (like myself) or a web designer in the future, then you will be able to describe what you need from them in a much more accurate way, then understand what they are offering too. Like anything in life really, the more you learn, the less likely you are to end up with something unexpected.

In terms of front-end web development as a career, it is one of the fundamental tools you will need.

Useful CSS tools and resources

Here are some resources that I have found really helpful whilst learning CSS, many recommended by the Udemy course I am taking.

ColorZilla for Chrome 

Allows you to pick any color from a web page and get the hex code (e.g. #FFFFFF). Useful when you’re practising CSS by copying a preexisting site (don’t do this on a live web page). Or even if you just really love a color a site is using.

Coolors

Another great one for picking colors to brand a site with. I have spent way too much time clicking through different combinations to find my favourites. It feels a little like picking your color scheme on The Sims and I’m not ashamed to say that I love it.

Google Fonts

Full of free fonts plus it is easy to link to the library in your code. Also, a great introduction to using external fonts, for if you ever decide to purchase a unique font for a project further down the line.

W3 Schools

Already a great reference for HTML, it doesn’t disappoint for CSS either. Lots of examples and explanations. It is a fairly simple take on things and probably shouldn’t be the only reference you use. It is great as part of a wider pool of information though.

It’s always good to read an explanation/overview of the language you’re about to learn and W3 schools really helps with this. Wikipedia is also useful just to get your head around the bigger picture. I find it is much easier to understand each individual block of code, if you understand where it will lead you overall!

My next mission is to learn javascript. This will be my first foray into learning ‘proper code’ so to speak. HTML and CSS as wonderful as they are, are only really skimming the surface. Javascript will allow me to add interactivity to my websites. Whether its changing a how a website responds when you hover a mouse over an element, to changing styles depending on how you are using the website. Javascript is a really powerful language, and will hopefully be interesting to learn too!

Code goals for Javascript.
  • complete javascript section of course
  • learn how to make websites interactive and responsive
  • complete Javascript and jquery book by Jon Duckett
  • look into creating printable summaries on canva – then actually do it
  • start building my portfolio!

Let’s see if I can manage to achieve these by the next update. I have already made a start and am really enjoying getting my teeth stuck into some more ‘serious’ code. If you have any useful Javascript resources, I would love to hear about them!

1 Comment

Leave a Reply

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