DEV Community: Anmoldeep Singh Arora

How to Build a Great Frontend Website

Anmoldeep Singh Arora — Mon, 20 Mar 2023 17:26:23 +0000

Building a great front-end website requires combining design, coding, and user experience skills. Here are some tips to help you create a website that looks good, functions well, and provides a great user experience.

1. Plan Your Website

Before you start designing and coding, it’s essential to plan your website. This means defining the purpose of the website, identifying the target audience, and creating a wireframe or mockup of the site’s layout.

There are many tools available to help you plan your website. Some of the popular ones are:

Figma
Sketch
Adobe XD
InVision
Balsamiq

Planning helps you stay organized and focused, and ensures that your website meets its intended goals.

2. Design for User Experience

User experience (UX) is critical for the success of any website. You want to make sure that your website is easy to navigate, visually appealing, and intuitive to use. This means paying attention to things like color scheme, font choice, and the placement of buttons and links. Keep in mind that users should be able to find what they’re looking for quickly and easily.

To design a website for a great user experience, consider the following quick tips:

Pay attention to color scheme, font choice, and the placement of buttons and links.
Make sure that users can find what they’re looking for quickly and easily.
Use responsive design to ensure that your website looks good and functions well on any device.
Test your website on different devices and browsers to ensure that it looks and functions as intended.
Use analytics tools to track user behavior and make data-driven decisions about your website design and functionality.

3. Optimize for Speed

Website speed is essential for user experience and search engine optimization (SEO). If your website takes too long to load, users are likely to abandon it and look elsewhere. To optimize for speed, you can compress images, minify code, and use caching to reduce server response times.

To optimize website speed, you can try the following:

Compress images: Large images can slow down your website, so make sure to compress them without sacrificing quality.
Minify code: Minifying your CSS and JavaScript files can reduce their size, which can speed up loading times.
Use caching: Caching can help reduce server response times by storing frequently accessed data, such as images or scripts, on the user’s device.

By implementing these strategies, you can optimize your website for speed and provide a better user experience for your visitors.

4. Use Responsive Design

Yes, it seems a repeating point, but that’s because it is so crucial!

Responsive design ensures that your website looks good and functions well on any device, from desktops to smartphones. This means creating a layout that adapts to different screen sizes and resolutions. Responsive design is important because more and more people are using mobile devices to browse the web.

To make a website responsive, you can use CSS media queries to adjust the layout and styling of your website based on the screen size and resolution of the user’s device. You can also use flexible grid systems like Bootstrap or CSS Grid to create a layout that can adapt to different screen sizes. Finally, make sure to test your website on different devices to ensure that it looks and functions as intended.

5. Test Your Website

Testing is an essential part of the website building process. You should test your website on different devices and browsers to ensure that it looks and functions as intended. You can also use tools like Google Analytics to track user behavior and make data-driven decisions about your website.

Testing a website is essential to ensure that it functions properly and provides a good user experience. Here are some steps you can take to test your website:

Check for broken links: Use a tool like Broken Link Checker to check for broken links on your website.
Test on different devices: Test your website on different devices, such as desktops, laptops, tablets, and smartphones, to ensure that it looks and functions as intended.
Test on different browsers: Test your website on different browsers, such as Chrome, Firefox, Safari, and Edge, to ensure that it works on all popular browsers.
Test for accessibility: Use tools like WAVE or Axe to test your website for accessibility and ensure that it is accessible to users with disabilities.
Use analytics: Use Google Analytics or another analytics tool to track user behavior on your website and make data-driven decisions about its design and functionality.
Get feedback: Ask friends, family, or colleagues to test your website and provide feedback on its design, functionality, and user experience.

By following these steps, you can ensure that your website is functioning properly and providing a great user experience for your visitors.

Some Basic Elements that are expected in general on a website:

A clear and concise navigation menu that makes it easy to find information on the website.
A header that includes the website’s logo and tagline.
A footer that includes important information such as contact details, copyright information, and links to social media pages.
A search bar that allows users to quickly find what they’re looking for on the website.
A call-to-action (CTA) button that encourages users to take a specific action, such as signing up for a newsletter or making a purchase.

“A successful website does three things:
It attracts the right kinds of visitors.
Guides them to the main services or product you offer.
Collect Contact details for future ongoing relation.”
― Mohamed Saad

By following these tips and including these basic elements, you can create a front-end website that looks great, works well, and provides a great user experience. Happy coding! :D
Follow CSE Singh for more :)

This article is published w/ Scattr ↗️

A Guide for Aspiring Developers: How to Prepare, Apply and Find Opportunities

Anmoldeep Singh Arora — Tue, 14 Feb 2023 07:30:23 +0000

The one who is best fit in eyes of a recruiter, isn't a tailor made persona, but a more than enough of an asset to teams/company.

As a recently graduated student, entering the job market can be an intimidating and daunting task, especially for aspiring developers. With the rapidly evolving tech industry and fierce competition for jobs, it is essential to develop a positive mindset and a proactive approach to stand out and secure opportunities.

Here are some tips on how to prepare, apply and find opportunities to help kick-start your career as an aspiring developer.

1. Develop a growth mindset

The first step to success as an aspiring developer is to adopt a growth mindset. This means believing that your abilities and talents can be developed through hard work, dedication and continuous learning. Embrace failure as a learning opportunity, and always seek to improve and expand your skill set.

2. Focus on building a strong portfolio

In the tech industry, a strong portfolio is critical to showcase your skills and expertise to potential employers. Build a robust portfolio of projects that demonstrate your technical proficiency and creativity. Collaborate with peers, participate in hackathons and open-source projects, and build your own projects to add to your portfolio.

3. Stay updated with industry trends and technologies

The tech industry is constantly evolving, and it is essential to stay up-to-date with emerging technologies, tools and practices. Attend tech conferences, meetups and webinars, and follow industry leaders and blogs to stay informed about the latest developments in the field.

4. Network and collaborate

Networking is crucial in the tech industry to gain visibility and build connections. Attend job fairs, meetups, and networking events to connect with potential employers and peers. Collaborate with others on projects and contribute to open-source communities to gain visibility and build your reputation.

5. Proactively apply and seek opportunities

When it comes to job hunting, don't wait for opportunities to come to you. Be proactive and seek out job opportunities through job boards, LinkedIn and other job search platforms. Build your resume and tailor your applications to the specific job requirements to stand out. Reach out to recruiters, peers and mentors for advice and guidance.

In conclusion, the tech industry offers immense opportunities for aspiring developers, but it requires a proactive approach and a positive mindset to succeed. Focus on building a strong portfolio, staying updated with industry trends, networking and collaborating with others, and proactively seeking opportunities. With dedication, hard work, and continuous learning, you can kick-start your career as an aspiring developer and achieve your goals.

Feel free to reach out for help at IG/@csesingh,
and follow for more similar articles :)

Peace and Good Vibes! :D

Solution to common Apex issue - ApexCRUDViolation.

Anmoldeep Singh Arora — Thu, 02 Feb 2023 12:16:00 +0000

The simple answer is to put an if statements that ensures we have access at runtime, and instruct our SOQL Queries to respect the rules set by Admin.

Eg:

if (Schema.sObjectType.Contact.fields.Email.isCreateable()) {
  // Create new contact
}

Or for SOQL Queries, you can add WITH SECURITY_ENFORCED to tell apex that while fetching records do respect the policies set by the Org Admin.

Eg:

List<Account> act1 = [SELECT Id, (SELECT LastName FROM Contacts)
  FROM Account WHERE Name like 'Acme' WITH SECURITY_ENFORCED]

Pretty Common to forget, but can save hours of Fixing PMD Issues Later on!

Have a good day :)

For Details check:
https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/apexcode/apex_classes_perms_enforcing.htm

4 Types of Web Visitors

Anmoldeep Singh Arora — Tue, 14 Dec 2021 12:15:11 +0000

We all use web, but we are not alone the users of web.
Yes, strange but true, you will also know it in a minute after reading this article!

So broadly, there are 4 types of visitors for any website:

End Users (people)
'Specially abled' Users (eg: people having challenging optical abilities)
Web Crawlers/ Web Scrapers
Developers

1. End Users (people)

Undoubtedly this is clear in everyone's mind, because if you are reading this, even you are a End User of the Website too!
Absorbing the information here, and making sense out of it in your head. This directly correlates to the entire population of our planet as 'Possible/Potential audience', and the people who will get the most benefit from our provided information as 'Target audience'

2. 'Specially abled' Users

These are the users beginner developers often miss to consider and thus end up building apps/software that is very difficult for them to use. For example, we have websites right, but specially abled depends on screen readers, so as they can hear what is written on web. These screen readers again depend on developers to use semantic coding styles so screen-readers can pick right text for users to hear. Thereby, professional developers, also keep a part of their development process, for making their solutions friendly for screen readers as well, like by using aria-labels, role attributes, alt attributes in images, and many others.

Bit size fact:
Over 1 billion people are estimated to experience disability. This corresponds to about 15% of the world's population, with up to 190 million (3.8%) people aged 15 years and older having significant difficulties in functioning, often requiring health care services.

3. Web Crawlers/ Web Scrapers.

These are automated 'bots' that scan your website, webpages, for ranking and showcasing in search results for web search engines, or otherwise for data collection and data mining from your site for Data Science related use cases. Also, the more easily crawl-able/scrap-able site you have, the better ranking results you get (or better SEO)
And at the same time more easier for web scrapers to extract data from your site.

4. Developers

This one may sound strange, but developers to check into other websites and it's source code, sometimes to find a font/graphic they liked a lot, or sometimes to found pretty good and novel approaches for code structuring, that they can adapt to build better solutions as well. Also more importantly, while working in a team, often your peers will also need to understand your code before contributing their part of the logic/software!

Definitely something new for the day :)

references:

What is Semantic HTML and Why Should We Care?

Dylan Oh ・ Dec 12 '21

#html #webdev #beginners #programming