CSS

Learn HTML and CSS

Standard

I first learned a little HTML when I was a teenager, but never got very far with it. More recently, I have been in touch with it when scraping websites and my work with data visualisation has made me more interested in web development and UX/UI design. So a few months ago I decided to teach myself the basics of HTML and CSS. I managed to get to the point I wanted to within about four weeks, while working full-time and doing all of it for free.

My approach

  1. I started out with the one-week free trial you get as a new user on Codeacademy and made my way through as much as I could from the course “Learn how to build websites“. Rather than doing all of the lessons strictly in order I was selective about which to skip, and concentrated on the content delivery lessons in the later modules rather than the practice, as I knew I would be able to do this on my own later. This process got me to the point of understanding the basic structure of HTML and CSS. (If you are happy to pay a little money for a monthly subscription you can complete this course and take more time for this step. The remaining steps of this list are still relevant.)
  1. I then used Pinterest to select some websites that I tried to copy. The aim of this was to practice what I had learned and identify gaps in my knowledge to figure out what to learn next. Because I knew the basics of HTML and CSS structure, I was able to just look up any particular commands I had forgotten or not learned yet.
  2. One part of the Codeacademy course that I did not have much time to engage with was layout, so all I could do was arrange items vertically on the page. I spent about another week just concentrating on learning Flexbox, which allows you to control exactly where you want objects to appear in relation to each other and how you want them to react when the site is viewed on different-sized screens. I highly recommend Flexbox Zombies for this, as it explains the concepts very well and includes endless repetition, which really helps to understand and remember all the different commands.
  3. Besides just learning website coding, I also wanted to learn more about the visual design aspect. I got started with Figma, a very intuitive, free, programme made especially for the purpose of designing websites and apps. Watching this one-hour video on Youtube was pretty much enough to get me to the point where I could use the software and could then get by with just looking up the occasional functionality.
  4. I selected an existing website that I felt could use some improvement, and used Figma to design a makeover. This is much easier than starting out with a completely blank canvas. It also has the benefit that all images and copy are already available and that the website layout is most likely quite simple.
  1. There is a follow-up video to the one mentioned in step 4, which takes the Figma design and translates it into HTML and CSS to create the complete website within an hour. This is really helpful, as it shows all steps from start to finish and includes for instance the approach the developer is taking to reusing code and the order in which he approaches the build. This sort of practical information doesn’t really get covered in any of the tutorials or courses that I tried and is useful to tie all the pieces together.
  2. With all this knowledge I took my Figma redesign of the existing website and started coding it. As the design had multiple pages, this took quite a while, and as I was going along, it allowed me to practice what I had learned and look up new things that I had done with ease when creating the design in Figma but now had to translate into code. It gave me a good insight into what it would be like to create a full website rather than just code snippets.

Where I am now

My focus shifted from this project to strengthening my SQL skills and learning Python, so my progress has halted since step 7. Currently, after going through the steps above, I feel that I am at the stage where I can create a simple website and understand how other sites are set up. Some things that my new knowledge has helped me do:

  • Understand and change how Tableau visualisations are embedded into other websites.
  • Better understand other code, such as Python.
  • Have a better understanding of how websites I want to scrape are structured and thus how to take them apart most effectively.
  • I used to create any images or icons I needed for Tableau in PowerPoint but now generally use Figma.

Next steps

While I am not concentrating on this path at the moment, I will definitely pick it up again in the future. There are several things that I want to concentrate on when I do, which weren’t covered sufficiently in the steps I took:

  • I still struggle with optimising a site for different screen-sizes or devices, which is of course really important nowadays, as so much content is consumed via mobile devices. I will seek out some dedicated resources on this subject.
  • I recently tried to create a design for my consulting website in Figma. Even though I engaged with lots of different resources on webdesign and I generally think of myself as having decent design skills, I found it very challenging to come up with something that looked professional and modern. The final website was set up by my partner, who is a developer, and we used templates to make the build easier and quicker. I now follow a lot of UI design on Pinterest and Instagram to get a better sense of how to create appealing interfaces, and will continue to practice, especially as this is a skill that is also very useful for Tableau.
  • I now have a live website and my own domain, but have very little understanding of how this was set up and what I would need to do if I wanted to host another site. While I know how to locally code a website, I still need to learn how to share this with the rest of the internet.
  • For additional functionality, many sites use JavaScript in addition to HTML and CSS and this is a language I would love to add to my repertoire. Especially, as D3 is a JavaScript library and would be incredibly useful as an alternative to Tableau for embedding visualisations on websites. Additionally, JavaScript is also used to build Tableau extensions and web data connectors.