Posts

Showing posts from December, 2018

CSS Flexbox, AMP, and Bootstrap 4: Mastering the Foundations of Modern Web Development

Image
A Fantastic Year of Learning: Creative Technocrayts' 2018 Rewind Wow!! 2018 was a fantastic foundational year for us, Creative Technocrayts. The skills we mastered that year—like implementing **advanced CSS layout techniques (Flexbox)**, pioneering **Core Web Vitals concepts** via Google’s AMP, and streamlining UI design with **Font Awesome 5**—are still **critical for modern high-performance web development today.** We have discussed a lot, thanks to the constant support from the community. We have received both positive feedback and negative criticism as well. Keeping that in mind, we strive to improve and learn more and give back to the community. 2018 showed tremendous increasing readership from the Google+ community and Facebook page, apart from Twitter and LinkedIn, and we are so happy about that. Thank you guys :) It's time for us to look back at this awesome year, 2018!!! Daily UI ...

Daily UI practice #1 - Input range slider and populating value in script

Image
Daily UI practice Recently I had some time so checked for latest updates in design from awwwards.com I wanted to practice UI for the day. So I picked up a site from there. The reason I picked up that is i) I wanted to learn something new ii) I wanted to do something which I haven’t done before So the exercise was about, Creating a range slider and getting the value Added box-shadow to jumbotron component. Now placing input range elements inside the component, Following bootstrap 4 documentation I got the above screen as it looked like in bootstrap website. I can’t proceed further as I didn’t have any other elements to style. Then I read few tutorials from css-tricks.com What is Shadow DOM? Well, we all know that, when a HTML page is loaded in a browser DOM (Document Object Model) is created. Likewise browsers have capability to create sub tree to the already created DOM elements.   Now we have got two components and customize the styles. They are 1. Trac...