What front-end skills do you want to learn?

I believe that most of developers, including seniors, sometimes forget the core of front-end development. Semantic HTML not only improves accessibility but also helps search engines classify your content better. In my view, CSS plays an important role in delivering a good experience in a world connected with different devices. We have a variety of features like keyframes, grid, and flexbox to achieve that. JavaScript has gained new features since ES6. I could mention array methods such as ‘includes,’ ‘from,’ ‘find,’ and ‘findIndex.’ Additionally, topics like Promises and Await/Async are essential to learn.

Correct, you should learn HTML, CSS, and then Plain Javascript. I will recommend the best tutorial. JavaScript: Understanding ES6 and Beyond by Tony Alicea. After you understand Javascript, I will recommend learning a Framework like React.js or Vue.js

These are the core technologies of front-end development, and you should have a solid grasp of them before moving on to other skills. HTML defines the structure and content of web pages, CSS styles and layouts them, and JavaScript adds interactivity and functionality. You should learn how to write semantic, accessible, and responsive HTML, how to use CSS preprocessors, frameworks, and grids, and how to use JavaScript for DOM manipulation, events, data fetching, and animations. You should also be familiar with the latest features and standards of these languages, such as HTML5, CSS3, and ES6+.

HTML, CSS, and JavaScript. HTML, the skeleton of the web, forms the structure of every webpage you encounter. Imagine it as the framework of a house, defining rooms (divs), windows (images), and doors (links). CSS, the artist of the web, breathes life into HTML's structure. It's like the interior design of the house, painting walls (backgrounds), laying carpets (layouts), and arranging furniture (alignment) to make the space welcoming and vibrant. JavaScript, the wizard of the web, adds magic to the mix. It's the electricity that powers appliances (interactive elements) and opens curtains automatically (dynamic content changes). Together, these three create the mesmerizing web experiences we navigate daily.

Try each framework yourself and understand their core differences. Ultimately, they all share the same principles and philosophy, understanding this is what will make you a great frontend developer. More importantly, try to make a similar project in vanilla JS to understand why these frameworks came to be.

I began my coding journey with React due to its straightforward syntax and beginner-friendly nature. As I delved deeper into it, I recognized the importance of learning additional concepts, such as TypeScript. Now working as a full-time mobile developer, I believe this path has been the right fit for me.

For crypto, I’d add learning React.js as the main library for front end and Next.js as the main framework for applications that need good performance from SEO.

I want to learn about new features in Vue, Nuxt also making scalable architecture cross browser compatibility, connecting this technologies with backend

As developers, it is important to prioritize web accessibility because we have an ethical responsibility to treat all users with respect and provide equal access to information and services. This commitment not only ensures inclusivity but also leads to an improved user experience. It is essential to consider elements like clear navigation and a consistent layout during development

Considering accessibility is one of the fundamental steps in building website and applications, However, this is highly neglected subject and considered of less priority. As web developers we not only loose respect but also very large audience if we take this subject for granted.

The aspect of web compatibility is important in web accessibility. The system should always be robust enough to adjust to different range of web technologies and applications.

Web accessibility is not just about adhering to guidelines; it's about inclusivity and ensuring that everyone, from all walks of life, can engage with online content seamlessly. The internet has become an indispensable tool for acquiring knowledge, connecting with others, and accessing various services. Ensuring that web content is accessible to all, irrespective of physical or cognitive disabilities, is crucial for an inclusive digital age.

A acessibilidade é fundamental para garantir a inclusão e igualdade na sociedade. Ao tornar espaços físicos, digitais e informações acessíveis a todas as pessoas, independentemente de suas habilidades, promovemos um ambiente mais justo e diversificado. A acessibilidade não beneficia apenas indivíduos com deficiências, mas também enriquece a experiência de todos, proporcionando uma interação mais fácil e eficiente com o mundo ao nosso redor.

Performance optimisation can be achieved via code optimization, let's consider the following for instance; ■ Page loading speed: This can be achieved by optimising code, and ensuring reduction of website asset files (images, audio, video). ■ Minimising HTTP Request: This can be achieved via reducing unnecessary external resources and minimising JavaScript files. ■ Mobile Optimisation: This can be achieved via responsive development which enables optimised view for all devices in this case Mobile 📱 devices. Conclusively, I have seen over the years the rise in need of SEO experts by organisations, this is to place the company’s visibility high and optimise application performance.

Improving web performance is vital for user experience and SEO. I want to learn techniques like lazy loading images, minifying CSS and JavaScript files, and utilizing browser caching. For example, understanding how to use tools like Lighthouse and WebPageTest to identify and fix performance bottlenecks, as well as optimizing critical rendering paths to make web pages load faster.

🔄 Before the era of Next.js Server Components, we used good ol' useEffect to fetch data from servers and APIs. Then came the heroes: React Query, SWR, and our trusty custom fetch hooks! 🦸♂️ 🌐 Context API was our jam, but now we've got options like Redux Toolkit, Zustand, and Joi, among many others! 🧰 🤔 Every project is a unique, and choosing wisely for performance is the name of the game! 🎮 😅 Post RSC, we're like, "No more hooks, please!" 😂 Well, at least I am! RSCs bring the speed, performance, and SEO magic! ✨ Give Next.js 13 a spin! It comes with a bunch of cool features out of the box. You won't regret it, but be sure to grasp how everything's hooked up! 🤓🚀

As someone who has a marketing and technical SEO background: having this background helped me understand how important it is to have a high performing website. Not only does Google prefer faster websites and websites that offer a good user experience: the consumer prefers it too. Any slowness in loading pages or in the checkout process can make a user drop off and go to a competitor. There's a lot involved to getting a faster website but it definitely is worth learning about it.

Performance optimisation is a very important topic for frontend devs. While this is a very broad topic, here are a few things to know if you are just getting started: - You can use Google Lighthouse in Chrome Devtools to find out the performance score and some hints how to improve. - lazy loading images improves performance - video optimizations incase your webapp needs video with modern web friendly codecs - font optimization - loading only essential code and lazy-ily importing non-primary features - optimizing size of assets - caching - minifying of code - using service workers in case of resource intensive frontend work These are just a few things to get started with in performance optimization

🌊 Ah, the good old days of "float"! Then came "flexbox," "grid," "gap," logical props, and a bunch more. It's quite the learning curve, so nailing the basics is crucial! 📚 📱 Start with the mobile-first approach! It's a real time-saver and gives you a crystal-clear roadmap for implementation. 💡 ✅ Pro tip: 📏 Use Grid for your layouts—think aside, header, footer, and main! 🎨 Go with Flex for your inner designs, like card styling, for instance! 💪 👀 Check out "ResponsivelyApp" to see all your screens simultaneously—makes life easier! 📱💻🖥️

Responsive Web Design in website development can be achieved through the following; ■ Responsive Media Queries. ■ Fluid Grid Layout. ■ Viewpoint Meta Tag. ■ Mobile first. There are other ways to take care of responsiveness in Web development, and one of the ways I use personally is CSS Frameworks, my favourite even though it's old is Bootstrap. Bootstrap serves as the foundation of most of my work and I can categorically say its caters for most responsiveness in my application, note this doesn't mean I cannot handle responsiveness via other means, but it gives me that safe zone lay my application foundation.

Web browsers have evolved from just computers to smartphones, tablets and smart devices. With a responsive design, users can enjoy an optimal viewing experience allowing for easy navigation and interaction with the website, regardless of the device used. Important thing is to be proactive rather than reactive during development and build from ground up keeping in mind responsive design instead of trying to fixing things after the application is built.

Have a good responsive design for your website matters a lot to generate leads. Make sure to have a good frameworks for client facing websites (or use your custom one). If your organisation can afford, build org specific UI libraries. If you are unsure what to use, use a lightweight framework like mantine.dev to get good responsive UI and build beautiful apps.

Designing with a mobile-first approach. Starting with the smallest screen size forces you to prioritize content and functionality, resulting in a more streamlined and user-centric design. Relying solely on emulators for testing responsiveness. While they can provide a general idea, nothing beats testing on real devices to ensure the best user experience across the board.

One of the major things in frontend development and technology at large is the flexibility to learn and adapt to developmental trends, staying updated 6 months ago doesn't guarantee being updated today. For examples, emerging technologies in frontend web development across libraries, frameworks and so on are things evolving per time which each tech expect needs to keep up with, not to necessarily use all, but to understand the solution this technologies can offer, if not in due time such tech expert might be outdated.

Frontend development trends right now are dynamic and user-centric. Leading are NextJS/React, Vue, Angular, and Svelte, each offering distinct benefits. Jamstack is revolutionizing speed and security, while Server-Side Rendering (SSR) with Next.js and Nuxt.js enhances SEO and performance. Progressive Web Apps (PWAs) deliver native app-like experiences, and Component-Driven Development streamlines UI construction. Headless CMS and API-First approaches for flexible content management. Mobile-first design caters to the growing smartphone usage, and TypeScript's adoption for strong typing is improving code quality and maintainability.

Stay ahead in the field by staying updated on emerging front-end trends and technologies. Explore innovations such as Progressive Web Apps (PWAs), Server-Side Rendering (SSR), and JAMstack architecture. Experiment with technologies like GraphQL for efficient data fetching and consider the potential of WebAssembly for performance-intensive tasks. Continuously learning and adapting to new trends will keep your skills relevant and competitive in the evolving tech landscape.

As a frontend developer, there's always work as interactions, user experiences, and interfaces in web applications, VR apps, or voice user interfaces can always be enhanced. Seeking the best user experience is an ongoing task that never ends. Therefore, it's important to always keep an eye out for the latest trends and developments.

Nowadays developing pwa is growing magnificent in web development. Learning pwa techniques and capabilities and also caching strategies in pwa is so crucial in making pwa web apps.

One of the key aspects of development (frontend and backend) basically is the problem solving capability. This is the dot that connects all development and even growth in developers. In my opinion, I believe having a core programming language to understand programming concepts and capabilities would help even to transition to other languages and aspects of technology. So as a developer, develop your problem solving ability as you learn each language of choice.

I recommend Node js also Node.js empowers front-end developers by enabling them to use JavaScript for server-side development, building scalable applications, providing access to a vast package ecosystem, and fostering a unified development environment. Its importance lies in enhancing productivity, performance, and collaboration, making it an essential tool for modern front-end development.

I would add some basic knowledge of various JavaScript package managers (NPM, Yarn), building and processing tools (Webpack, babel, gulp, turbo, vite, etc). Current ecosystem is huge and projects may be very complex. So it is crucial to understand not only code writing, but also building and shipping stages.

Learning coding skills as a frontend developer is not enough anymore. Learn to give users experiences they would never forget in a hurry. Think of them when: - Adding too many inputs in forms. + If it isn’t necessary, remove it. - Selecting that color or bg. + Add dark & light modes. - Using images. + Add descriptive alt text. ✌️