Another week with CSS and learning about its possibilities. This is also the week in which I completed my first CSS training project and, more importantly, learned the limitations of this language. Let’s get down to business.
Some time ago I came up with the idea to use the project carried out as part of the Advanced CSS training to create a website about Błędnych Skały. The website design at the CSS training stage has been completed, time to adapt it to your needs.
How I rebuild first CSS project
First of all, it will have to be slimmed down, because during the training we made a website with fireworks, which are unnecessary in the Błędne Skały project. There are also some sections that can be cut out. I’m already working on all of this, but the hardest part is filling the page with content. There are not many sources of information about this interesting and worth visiting place, so it is difficult to cite anything. You can only rely on your own ingenuity and creativity.
What does it mean Mobile First in CSS
Stopping for a moment while designing, since I started learning web programming, I was wondering what is the difference between Mobile First and Desktop First. It seemed to me that this is a magical set of rules that you must know, because in job advertisements the knowledge of Mobile First rules is often mentioned in the requirements. It turns out, however, that it is nothing complicated.
The main rule is one: it should look good on the phone and not burden the internet connection. You also have to watch out for pseudo CSS elements that do not work on mobile devices, e.g. hover. And that’s it, no great magic, we just focus as usual on the client and his needs, providing him with a useful product for him.
How to design breakpoint in CSS
Pulling on the topic of product usability, one more thing is worth paying attention to: Break Point. For me, from the first time I encountered this term, it was clear that break points are set when the page no longer looks good and you need to rearrange the elements on the page to keep it looking good. It turns out that this is neither an obvious nor a popular approach.
In the world of Frontend, most of the scaling points are rigidly defined: 1200px, 900px, 600px. On the one hand, it is understandable, because it is easier to construct contracts or price a project in this way, but on the other hand, I am very surprised by this approach. After all, you can specify in the contract that the website will be responsive and will contain three breakpoints. It comes out the same, but with one major difference: the customer gets a better product.
HTML srcset TAG
The last novelty this week for me was the html srcset tag, which allows you to define what image the browser should take depending on the width of the screen. So far, I have tried to scale or arrange photos on the page so that they look good on desktop and mobile, and at the same time they do not have too much MB.
Now I can look at it differently and load different photos depending on what device the page will be displayed on. This removes at least one important limitation in designing the appearance of the website.
I spent nineteen hours programming this week. Don’t ask me how I did it;)