Learning to Code #2 | CSS

By -

When I wrote my first of these posts on learning #HTML, I wrote down into " Have I managed to achieve that ? " and i will talk about CCS this week ..
So this week i wanna talk about CSS (Cascading Style Sheets) , styling websites (so they no longer look like something straight out of the 90s). 

What were my aims ?

  • complete the CSS3 section course .
  • finish reading my book on CSS3
  • start a project to build my portfolio and improve my design skills
  • continue to layer code onto my ongoing website project.
  • share my web development plan here on the blog

 Have I managed to achieve that ?

 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.
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  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 personalize it to your needs.

With CSS, you can change the layout,colors ,fonts, 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.








 Allows you to pick any color from a web page and get the hex code (e.g. #FFFFFF). Useful when you’re practicing 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.

 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.

 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.

 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.

    • **** Wikipedia is also useful just to get your head around the bigger picture.
 

Comments

Post a Comment