There was a lot going on this week, and the whole week was filled with Frontend. I made the decision that the coursework at WTF would become my homepage. This gave me extra motivation to practice the same thing many times until the element is done well. Starting with BEMa.
BEM Notation rules
As is often the case in courses: the teacher says one thing and the listener hears the other. Yes, I also listened to BEM and thought that class names must contain a reference to one of the three parent elements: header, main, and footer. In practice, this is not the case. Now I know that in BEM the point is that each “container” has its own class, even if it is not used, and we add the name of the element to it and get a sub-class, which we possibly modify if necessary by adding a modifier. I understood this only when the trainer showed the solution to the homework. It’s nice that I caught it, but on the other hand, I already had such a cool system for naming “containers”. Someone, however, invented BEM to make it easier to find oneself in the maze of CSS classes and certainly had more knowledge than me, so it’s worth taking these assumptions and sticking to them.
Too many code generated CSS problems
Moving smoothly to the CSS style sheets, this week I worked on the appearance of my website based on the knowledge provided during the course and as it usually happens with such knowledge, something went wrong for me and I could not give styles as it happened in the course. One of the headings persistently refused to give in to the style I indicated in the code. This is probably an indispensable element of each of the courses. The host shows something and works great. You are trying to do the same thing on your computer and it does not work. In my case, it may be so, because the site I am working on has moved away from what is done in class. I added a few more HTML tags and maybe that spoiled the way CSS worked shown during the course. Fortunately, I coped with this problem.
Where you can find CSS Cheat Sheets
Working with CSS I often know what effect I want to achieve, but I do not know CSS commands by heart and I was wondering how and where best to look for the answer to the question: what command to use to make a given element look the intended way. One possible solution is to use Pinterest. There are plenty of so-called CSS Cheat Sheets on this platform. Still, you may still not find what you’re looking for. Another solution is to use the great document https://devdocs.io/ page, in which you will find, among other things, the operation of a wide range of CSS elements. The best thing is that they are arranged in a table of contents according to how they affect a given element, which significantly facilitates the search. On this page, you will also find similar compendiums of knowledge about other languages including HTML and JS.
JS a little bit
This week I also got to know JS. Still the basics, but I understood what those who say: “Get to know one programming language well, and the next ones will come to you much easier.” I’m not a programming guru yet, but I can already see that conditional loops or syntax look very similar in different programming languages. The details change, but the idea itself is the same. This is a good sign for me because a script written in Python for “disassembling exponentiation” will be easily converted into a JS script. I just need to figure out how to pull the data from the form and not lose it when redirecting to the solution page.
This week I spent a total of 10 hours creating my website.
