| You need to know a good deal of CSS rules to make that painting. Best to memorize these. Its like asking a fresh art student to make a style on par with piccaso or van gogh. You need to know a few art rules (rule of thirds, vanishing points, color theory, etc). Every website has its own unique art style and its own set of rules. Learn them before breaking them In general, build a frontend template looks like this 1) pen + paper low fidelity markup. Also called "Wireframing". Your just making boxes inside boxes, and highlighting the relationships those boxes have with each other. Usually its some idea in your head and inspiration drawn from multiple sources. 2) [Optional] High fidelity markup in Figma / Sketch / Photoshop/ Gimp / AfterEffects Etc. This is where you can identify color schemas that work, font sizes and typography, and fine tune the final version of the end result 3) Inspiration from an idea elsewhere normally (dribble, existing site, a infographic printed catalog, etc). You can skip steps 1 and 2 if this applies. 4) You should have an idea of how all the major HTML and CSS components will work. What CSS properties you will msotly use (rotate, position absolute), etc. You have an idea on the big picture and how everything fits together. You choose between making things in pure HTML/CSS vs loading it as a image/SVG instead. Doing the latter option is almost always easier. 5) JS first or HTML first approach. JS first approach would utilize something like react, that's only if you are working complex UI interfaces that deals with alot of data binding (the example you linked doesn't qualify). You would best be taking an HTML approach first in this instance, e.g. write the HTML, write CSS, reiterate until done. I highly recommend checking out layout land once you have a good fundamental understanding of basic CSS/JS/HTML. It teaches you "how" to think like a webdesigner, choosing between different CSS rules etc. The author is the head designer at mozilla https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag For more crazy mathmatical designs, you would need to learn SASS (precompiled CSS) as well generally, and some mathmatical principles (high school geometry is a must, etc). The best source to find these designs is in codepen/dribbble. For very advanced design CSS tutorials, I really enjoy watching @DavidKpiano and @shshaw for these. https://www.youtube.com/channel/UCtmYk7H-NNYLEe_LgBRYomA/fea... |