<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: ubair noor</title>
    <description>The latest articles on DEV Community by ubair noor (@ubairnoor).</description>
    <link>https://dev.to/ubairnoor</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F353211%2F1bcf2e08-457a-4e2e-9074-412fc8f0773c.png</url>
      <title>DEV Community: ubair noor</title>
      <link>https://dev.to/ubairnoor</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/ubairnoor"/>
    <language>en</language>
    <item>
      <title>What is Front End Developer? </title>
      <dc:creator>ubair noor</dc:creator>
      <pubDate>Thu, 12 Nov 2020 17:10:44 +0000</pubDate>
      <link>https://dev.to/ubairnoor/what-is-front-end-developer-269h</link>
      <guid>https://dev.to/ubairnoor/what-is-front-end-developer-269h</guid>
      <description>&lt;p&gt;Front-end web development, also known as client-side development is&lt;br&gt;
the practice of producing HTML, CSS and JavaScript for a website or Web Application so that a user can see and interact with them directly.&lt;br&gt;
The challenge associated with front end development is that the tools&lt;br&gt;
and techniques used to create the front end of a website change&lt;br&gt;
constantly and so the developer needs to constantly be aware of how&lt;br&gt;
the field is developing.&lt;br&gt;
The objective of designing a site is to ensure that when the users open&lt;br&gt;
up the site they see the information in a format that is easy to read and&lt;br&gt;
relevant. This is further complicated by the fact that users now use a&lt;br&gt;
large variety of devices with varying screen sizes and resolutions thus&lt;br&gt;
forcing the designer to take into consideration these aspects when&lt;br&gt;
designing the site. They need to ensure that their site comes up correctly&lt;br&gt;
in different browsers (cross-browser), different operating systems (cross-&lt;br&gt;
platform) and different devices (cross-device), which requires careful&lt;br&gt;
planning on the side of the developer.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>css</category>
      <category>html</category>
      <category>jquery</category>
    </item>
    <item>
      <title>Why reactjs is important</title>
      <dc:creator>ubair noor</dc:creator>
      <pubDate>Mon, 19 Oct 2020 18:32:55 +0000</pubDate>
      <link>https://dev.to/ubairnoor/why-reactjs-is-important-1l31</link>
      <guid>https://dev.to/ubairnoor/why-reactjs-is-important-1l31</guid>
      <description>&lt;p&gt;React.js is one of the most demanding frameworks in the market;31.3% of worldwide specialists are currently utilizing this technology.  Some of the world’s top tech teams use the tool to design scalable, easy-to-maintain solutions — Netflix, PayPal, eBay, Airbnb, and more. Why are businesses so interested in React.js implementation? Here are the benefits of adopting the framework. Follow me &lt;/p&gt;

</description>
      <category>javascript</category>
      <category>react</category>
      <category>html</category>
      <category>css</category>
    </item>
    <item>
      <title>What is Front-End Development? Necessary Web Development Job Skills Explained.</title>
      <dc:creator>ubair noor</dc:creator>
      <pubDate>Sun, 18 Oct 2020 18:31:40 +0000</pubDate>
      <link>https://dev.to/ubairnoor/what-is-front-end-development-necessary-web-development-job-skills-explained-202n</link>
      <guid>https://dev.to/ubairnoor/what-is-front-end-development-necessary-web-development-job-skills-explained-202n</guid>
      <description>&lt;p&gt;by ubair noor&lt;/p&gt;

&lt;p&gt;2020-10-16&lt;/p&gt;

&lt;p&gt;A front-end developer is someone who works on software, like desktop or mobile websites, that users interact with. Specifically, a front-end developer spends time on the side of technology that the user touches and sees.&lt;/p&gt;

&lt;p&gt;The front end is also commonly referred to as the client side, or more broadly speaking, the user interface.&lt;/p&gt;

&lt;p&gt;While many people use front end to describe website-related development, it can refer to any software that a user interacts with.&lt;/p&gt;

&lt;p&gt;For the purpose of this article, let’s use a broader definition: front-end development can include the engineering work done on mobile apps of desktop software.&lt;/p&gt;

&lt;p&gt;When I first learned about front-end development I heard a simple metaphor from a teacher that I have not forgotten.&lt;/p&gt;

&lt;p&gt;I want to share this metaphor with you.&lt;/p&gt;

&lt;p&gt;Front-end development is akin to building the buttons on an automated teller machine (ATM).&lt;/p&gt;

&lt;p&gt;It goes without saying that the client side of an ATM is mission critical for withdrawing money.&lt;/p&gt;

&lt;p&gt;But it is just one part of the process.&lt;/p&gt;

&lt;p&gt;The back end of the ATM needs to store cash and properly account for withdrawals. The front end is what the user touches and interacts with when completing the transaction.&lt;/p&gt;

&lt;p&gt;Taking this example back to the world of software, front-end engineers work in close collaboration with back-end engineers, designers, and product managers to design and build products holistically.&lt;/p&gt;

&lt;p&gt;How so?&lt;/p&gt;

&lt;p&gt;Let’s walk through a front-end developer's interaction with each stakeholder they will engage with when building a website or application.&lt;/p&gt;

&lt;p&gt;Internal Stakeholders&lt;br&gt;
Firstly, a front-end developer must work with back-end engineers who manage the servers, instances, databases, and storage that modern applications and sites run on.&lt;/p&gt;

&lt;p&gt;Much of the work between front-end and back-end developers is what drives cloud computing, which is the on-demand delivery of IT resources over the internet.&lt;/p&gt;

&lt;p&gt;Secondly, front-end developers interact frequently with designers. Designers are responsible for the look and feel of products.&lt;/p&gt;

&lt;p&gt;A designer owns the color scheme, layout, and usability requirements.&lt;/p&gt;

&lt;p&gt;Designers help bring style, aesthetic frameworks, and schemas to the forefront so that the front-end developer can bring all of these attributes together for end users.&lt;/p&gt;

&lt;p&gt;Thirdly, a front-end engineer will have a relationship with the product manager, the stakeholder most responsible for thinking strategically about how to build and bring a product to market.&lt;/p&gt;

&lt;p&gt;Product managers own the product experience, the profit and loss of a product, and launch and marketing guidelines.&lt;/p&gt;

&lt;p&gt;If you want to explore the field of front-end development, you should be prepared to work in a dynamic and collaborative manner with other internal technical stakeholders to drive your product forward.&lt;/p&gt;

&lt;p&gt;Necessary Technical Competencies for Front-End Development&lt;br&gt;
In order to become a front-end developer, you not only need to understand the nature of the work (which I have attempted to demystify above). You also need technical skills.&lt;/p&gt;

&lt;p&gt;To think about it formulaically, front-end development is about engaging other stakeholders + helping users + working with technology.&lt;/p&gt;

&lt;p&gt;For example, nearly all websites are built with a combination of HTML, JavaScript, and CSS. If you are not familiar with these technologies, you will need to learn them.&lt;/p&gt;

&lt;p&gt;Learning how to write these languages and how they interact with each other is imperative to being an effective front-end engineer.&lt;/p&gt;

&lt;p&gt;While writing this piece I interviewed a close friend who is a product manager at a large technology company.&lt;/p&gt;

&lt;p&gt;I asked him the following questions to provide you - the reader - with more guidance:&lt;/p&gt;

&lt;p&gt;What makes a great front-end developer?&lt;br&gt;
How does a front-end developer demonstrate ownership when building a product?&lt;br&gt;
His answers are illuminating.&lt;/p&gt;

&lt;p&gt;If you are applying for a job as a front-end engineer, or want to become a better front-end developer, you would be wise to incorporate his guidance into your work.&lt;/p&gt;

&lt;p&gt;What makes a great front-end developer?&lt;br&gt;
“A strong and effective front-end developer shows a determined focus and obsession on what users and customers need and want.&lt;/p&gt;

&lt;p&gt;They start with the use-case of the customer and works backwards, working tirelessly to earn and maintain customer trust by building the front-end of products.&lt;/p&gt;

&lt;p&gt;Strong front-end developers own their products and own solutions. They need to think medium to long term while delivering immediate product results.&lt;/p&gt;

&lt;p&gt;A good front-end developer uses project tracking tools to track changes, demonstrate progress, and most importantly let their peers know why changes are being made and when.&lt;/p&gt;

&lt;p&gt;A front-end developer knows what their job entails and stays in their lane.&lt;/p&gt;

&lt;p&gt;Lastly, a strong front-end engineer strives to invent and simplify.&lt;/p&gt;

&lt;p&gt;By bringing a spirit of innovation to work, this developer may suggest improvements to the product, back-end APIs, or other aspects of the technical stack that make the product more usable and more effective.”&lt;/p&gt;

&lt;p&gt;How does a front-end developer demonstrate ownership when building a product?&lt;br&gt;
“A front-end developer is curious and this curiosity drives their ownership in the success and growth of a product.&lt;/p&gt;

&lt;p&gt;The engineer never stops seeking ways to improve the product, or themselves.&lt;/p&gt;

&lt;p&gt;Lastly, the front-end engineer has and maintains high standards. They raise the bar for product excellence - speed, operational efficiency, security, reliability - and ensure that defects do not get sent down the line.&lt;/p&gt;

&lt;p&gt;These are attributes that front-end developers demonstrate when contributing to the building of products.&lt;/p&gt;

&lt;p&gt;If you are a front-end developer, you need to communicate with your team.&lt;/p&gt;

&lt;p&gt;You need to manage complexity, celebrate wins, and send product launch emails.&lt;/p&gt;

&lt;p&gt;This is ownership and this is leadership.&lt;/p&gt;

&lt;p&gt;If you are working remotely now, know how to schedule and lead virtual team meetings and communicate the development work you are planning to do.&lt;/p&gt;

&lt;p&gt;In summary, front-end developers are obligated to respectfully challenge decisions when they disagree, even when doing so is uncomfortable. They show conviction.”&lt;/p&gt;

&lt;p&gt;Jobs and Common Skills Needed&lt;br&gt;
Now that you know what a front-end developer does, who a front-end developer interacts with, and what makes someone effective at this job, let’s turn to the skills needed to interview for and accept a role in this field.&lt;/p&gt;

&lt;p&gt;Web development jobs are in high demand.&lt;/p&gt;

&lt;p&gt;If you enjoy writing, testing, and deploying software, creating websites, or using HTML and CSS to interact with databases and services, you might thrive in a web-development career.&lt;/p&gt;

&lt;p&gt;I reviewed dozens of front-end development jobs to summarize the core skills that nearly all job postings desired. Here are the top five attributes you must demonstrate:&lt;/p&gt;

&lt;p&gt;Proven technical skills in web programming;&lt;br&gt;
Demonstrated skills with HTML and CSS;&lt;br&gt;
An understanding of JavaScript (and/or PHP, ASP.NET, or Ruby on Rails);&lt;br&gt;
Experience working with others to test, diagnose, and analyze software;&lt;br&gt;
An understanding of security and best development practices.&lt;br&gt;
Bringing It All Together: Examples and Conclusion&lt;br&gt;
The day to day responsibilities of a front-end developer may vary depending on the technology that your job or team uses.&lt;/p&gt;

&lt;p&gt;Regardless of the tech stack, you should expect to play a substantial role in shaping the front-end culture, have technical ownership of one or more of products, and be a subject matter expert on the software architecture.&lt;/p&gt;

&lt;p&gt;Whether you start an online business, join a small company like a fintech startup, or manage engineering teams at large enterprises, you will need to navigate these processes and work-flows to drive value.&lt;/p&gt;

&lt;p&gt;Remember the ATM metaphor.&lt;/p&gt;

&lt;p&gt;If you want to help users withdraw cash from the machine - and find that to be worthwhile and exciting - you are well on your way to building products that add value to users.&lt;/p&gt;

&lt;p&gt;This will make your career exciting and worthwhile.&lt;/p&gt;

&lt;p&gt;Here are additional and specific examples that can inspire you to dive deeper and become a front-end developer.&lt;/p&gt;

&lt;p&gt;Runners Athletics is a website that brings together a simple and elegant UI with powerful e-commerce backend ordering flow.&lt;/p&gt;

&lt;p&gt;If you want to sell products on the internet a front-end engineer will need to bring together the clickable CTAs (Calls To Action) with back-end payment and ordering systems.&lt;/p&gt;

&lt;p&gt;Many sites prompt you for your email or contact information. Signup forms are good examples of front-end design.&lt;/p&gt;

&lt;p&gt;They are action oriented, easy for the user to engage with, and help a company or website collect valuable information.&lt;/p&gt;

&lt;p&gt;Front-end work can improve not only mobile and desktop sites but video social media tools as well. Front-end developers can help the browser edit and compress videos and render better visual displays.&lt;/p&gt;

&lt;p&gt;Offeo.com leverages front-end developers to build work-flow tools and ready-made templates for video as well.&lt;/p&gt;

&lt;p&gt;A front-end developer had to build these compelling templates that interact with payments, color schemes, and graphics etcsmartdevelopers.web.app© 2020&lt;/p&gt;

</description>
    </item>
    <item>
      <title>How To Make Login &amp; Registration Form Using HTML And CSS Step By Step using Toggle button</title>
      <dc:creator>ubair noor</dc:creator>
      <pubDate>Wed, 20 May 2020 18:21:24 +0000</pubDate>
      <link>https://dev.to/ubairnoor/how-to-make-login-registration-form-using-html-and-css-step-by-step-using-toggle-button-40h0</link>
      <guid>https://dev.to/ubairnoor/how-to-make-login-registration-form-using-html-and-css-step-by-step-using-toggle-button-40h0</guid>
      <description>

</description>
      <category>css</category>
      <category>javascript</category>
      <category>frontend</category>
    </item>
    <item>
      <title>Portfolio Developed in HTML,SASS.</title>
      <dc:creator>ubair noor</dc:creator>
      <pubDate>Sat, 28 Mar 2020 15:12:46 +0000</pubDate>
      <link>https://dev.to/ubairnoor/portfolio-developed-in-html-sass-510i</link>
      <guid>https://dev.to/ubairnoor/portfolio-developed-in-html-sass-510i</guid>
      <description>&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/ubairnoorcodepen/embed/vYOvjjV?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

</description>
      <category>sass</category>
    </item>
    <item>
      <title>Before and After Pseudo</title>
      <dc:creator>ubair noor</dc:creator>
      <pubDate>Tue, 24 Mar 2020 06:08:13 +0000</pubDate>
      <link>https://dev.to/ubairnoor/before-and-after-pseudo-2hen</link>
      <guid>https://dev.to/ubairnoor/before-and-after-pseudo-2hen</guid>
      <description>&lt;p&gt;Difference Between Before and After.&lt;br&gt;
Follow Me: &lt;a href="https://www.linkedin.com/in/ubair-noor-314b68146/"&gt;https://www.linkedin.com/in/ubair-noor-314b68146/&lt;/a&gt;&lt;br&gt;
Follow Me Instagram: &lt;a href="https://www.instagram.com/ubair_noor/"&gt;https://www.instagram.com/ubair_noor/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/ubairnoor-the-decoder/embed/xxGyVXx?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

</description>
      <category>css</category>
      <category>javascript</category>
      <category>html</category>
      <category>wordpress</category>
    </item>
    <item>
      <title>Grid System</title>
      <dc:creator>ubair noor</dc:creator>
      <pubDate>Fri, 20 Mar 2020 13:38:24 +0000</pubDate>
      <link>https://dev.to/ubairnoor/grid-system-1l95</link>
      <guid>https://dev.to/ubairnoor/grid-system-1l95</guid>
      <description>&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/ubairnoor-the-decoder/embed/gOpjzpa?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

</description>
      <category>codepen</category>
    </item>
  </channel>
</rss>
