CSS Flexbox, AMP, and Bootstrap 4: Mastering the Foundations of Modern Web Development
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 practice - Range slider and getting the value in jQuery
This article demonstrates how we can style input range, a form element. It gives you an idea that:
- Input range can be custom styled.
- **Shadow DOM** gives selectors to style input ranges.
- It has **track and thumb** components.
- To make it consistent across vendor prefixes, exact vendor prefixes should be used.
- Input range has three attributes: **min**, **max**, and **value**.
Practising jQuery - DOM Manipulation
jQuery is a JavaScript library, and this article shows how to use various jQuery methods like:
- `.append()`, `.prepend()`, `.appendTo()`, `.prependTo()`
- `.after()`, `.before()`, `.insertAfter()`
- `.wrap()`, `.html()`, `.text()`
- `.empty()`, `.remove()`
This article explains each syntax with examples and output.
Google’s Accelerated Mobile Pages (AMP)
After Google I/O 2018, **AMP** has been in talks. AMP has been observed as a growing community in 2018 as Google is into its serious business. The AMP official plugin for WordPress has been released later this year, and AMP has brought reasonable changes in the **SEO** dimensions.This work taught us that user experience and ROI are directly tied to perceived page speed, a fact now solidified by Google’s focus on SEO performance optimization.
So, we thought of giving our readers an overview of what AMP is all about in our article.
Font Awesome 5
Last year, we all knew that Font Awesome was working on their new release. Of course, they made it big this year! The range of icons suiting our needs and in different formats made us realize how user-friendly they are. They accepted requests for icons from the audience and implemented them, making it a vast community.
As the new version is released, it is important for us to learn the implementation so that we start using it in our projects. It was a comprehensive article by itself, getting a very good number of shares among our community.
Bootstrap 4
Bootstrap 4 was a major milestone! Its move from float-based layouts to CSS Flex was a game-changer, influencing the entire ecosystem. This transition emphasized the shift toward utility-first CSS concepts and scalable, modular design principles.
- Moving from inline blocks layout to start using CSS Flex.
- Introduced utilities of all ranges, making it a custom-ready framework for developers.
- Change in grid systems.
Creative Technocrayts covered a series of articles explaining the concepts and real-time examples:
Datatables plugin
We had a project, an admin dashboard, where we used datatables.net extensively. We thought of sharing our implementation with the readers, which might be handy to them.
Mobile Usability
Google announced in 2018 that websites having better mobile usability would be ranked better. After this announcement, Creative Technocrayts gave its readers tools and insights on making their websites more mobile usable.
Comments
Post a Comment