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.
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 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.
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.
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!
- learn how to make websites interactive and responsive
- look into creating printable summaries on canva – then actually do it
- start building my portfolio!