DEV Community: Jemima Abu

How to Learn JavaScript

Jemima Abu — Wed, 18 May 2022 11:09:31 +0000

When I first started learning frontend development, I was determined to avoid JavaScript.

I found it confusing – I didn't understand anything about how the DOM worked and I didn't think I'd use it that much anyway. I already knew HTML and CSS and that's pretty much all you need for designing websites, right?

Much to my dismay, I soon discovered that not only is JavaScript very much needed for designing websites but almost all websites depend on it.

JavaScript is used in some form or the other by 97% of all websites on the internet. There's just no getting away from it.

Since avoiding it didn't work, I decided to tackle the problem head on. I made an effort to write at least one line of JavaScript code everyday and started building applications to learn more.

To my surprise, once I got started I realised JavaScript wasn't the monster I thought it was. I was even - dare I say it - enjoying learning JavaScript.

If you're trying to move from HTML and CSS to JavaScript and you're finding it difficult like I was, then this is the article for you.

The reason JavaScript seems overwhelming at first is because there's a lot to learn.

So this article will serve as a high-level beginner's guide to learning JavaScript. I'll narrow things down, cover what JavaScript is and what it's used for, and recommend some courses to help you start your JS learning journey.

What is JavaScript?
What is JavaScript Used For?
How to Write JavaScript Code
JavaScript Projects for Beginners
JavaScript Tutorials for Beginners

What is JavaScript?

JavaScript is a programming language that makes web pages interactive. This involves everything from changing colors to collecting user input and passing it to a server.

JavaScript is used in conjunction with HTML and CSS to build fully functional webpages.

A common analogy is to think of a webpage as a human body: HTML is the skeletal structure responsible for how the body is formed, CSS is the skin and determines how the body looks, and JavaScript is the muscle that allows the body to be functional.

With the advent of JavaScript frameworks, a lot of modern websites are heavily reliant on JavaScript and won't work without it.

What is JavaScript Used For?

JavaScript is a very complex language that can be used for anything from client-side rendering to creating large-scale applications.

We'll be focusing on the more common uses of JavaScript when building webpages:

1. JavaScript lets you manipulate HTML and CSS

You can use JavaScript to change the HTML of a page by adding or deleting elements from the DOM or by updating element attributes. You can also use it to change the styling of an element.

Most interactive actions on a webpage such as toggling a drop down menu or displaying a modal are usually done by using JavaScript to manipulate HTML and CSS as needed.

Recommended reading: How to Manipulate the DOM - A Beginner's Guide.

2. JavaScript lets you carry out mathematical operations and algorithms

JavaScript is a programming language and can be used to compute complex mathematical equations and algorithms.

This allows us to carry out calculations on the client-side such as determining the number of characters in a form or getting the height of an element from the top of the screen.

Recommended reading: How to do Math in JavaScript with Operators.

3. JavaScript lets you manipulate complex data with data structures

You can use JavaScript to handle data structures in different formats such as arrays or objects.

There are multiple operations you can do on these data structures such as adding and deleting elements or filtering and sorting. This is widely used in real life situations to manipulate user data.

Recommended reading: JavaScript Data Structures.

4. JavaScript lets you detect and respond to user interactions on a page

JavaScript uses event listeners such as scroll or click to monitor how the user interacts with a page. These listeners are used to carry out certain functions based on the event.

For example, you can use the onClick event listener to display an element when a user clicks a button.

Recommended reading: Understanding Events in JavaScript.

5. JavaScript lets you communicate with a server

You can use JavaScript to communicate with a server or a database by sending and receiving data.

For example, when a user submits a form on a webpage, you can create a fetch request to POST the data in that form to a server and process the returned response from the server.

How to Write JavaScript Code

You add JavaScript to a basic webpage as a script tag in an HTML file.
The code can be written directly in the script tag or imported as an external .js file using the src attribute.

<!-- using the script tag -->
<html>
  <head>
    <title>Home</title>
    <script>
      // JavaScript code goes here
    </script>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

<!-- importing a JS file -->
<html>
  <head>
    <title>Home</title>
    <script src="main.js"></script>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

How to Run JavaScript Code

JavaScript is a language that runs in the browser. Most browsers are equipped with developer tools and these tools contain a panel called the Console.

The console is a runtime environment for JavaScript code. This means you can write JavaScript code directly into the console and see the results right in your browser.

To open the console, navigate to the developer tools in your browser on your laptop or desktop. There are different ways to get to the developer tools depending on which browser you're using: Chrome, Safari, Firefox or Microsoft Edge.

You can also use online code editors to run JavaScript code. Popular ones include CodePen and CodeSandbox.

Online code editors are a good way to get familiar with interacting with the DOM using JavaScript, as you can see all the changes happening to your project in real time.

For example, in the Pen below, I'm using JavaScript to change the text of an element with the id attribute name.

For a more in-depth look into everything about JavaScript, checkout The JavaScript Handbook.

JavaScript Projects for Beginners

When it comes to JavaScript, much like with everything else, practice makes perfect. The best way to learn JavaScript is to build projects, and there's no limit to projects you can build using JavaScript.

A good approach is to build things that solve problems. For instance, I was having trouble copying the content from a Word document into an HTML list, so I built a Text-to-HTML Converter.

Building applications is also a good way to understand basic concepts in JavaScript and get some real-life experience with practical application.

These are some resources for ideas on projects to build when learning JavaScript:

JavaScript Tutorials for Beginners

Aside from building projects, it also helps to follow a guided tutorial when trying to learn JavaScript.

Most courses attempt to cover all the important concepts you need to know, and some provide a certification at the end to help improve your résumé.

Here are some online courses and curricula that provide a good introduction to JavaScript, and a few that cover more advanced concepts.

1. freeCodeCamp

If you have no prior coding knowledge, freeCodeCamp is an excellent place to begin your tech journey. They have a variety of courses, all explained in a simple-to-grasp format.

There is also a large online forum which makes it easy to receive help or feedback from other people while taking the courses.

Recommended course

JavaScript Algorithms and Data Structures

Suited for: Beginners

2. Udemy

Udemy is a paid online platform that offers courses for a wide range of skills. Most of the courses are short-term, and can be learned in your free time.

Recommended courses

Suited for: Beginner and intermediate learners

3. Udacity

Udacity is a tech-focused learning platform that offers Nanodegrees for their courses. Courses can take anywhere from 2 to 6 months, depending on how many hours you're able to commit. They're a great way of gaining in-depth knowledge in a skill relatively quickly.

Recommended courses

Suited for: Intermediate developers

50 Online Resources To Improve Your Technical Skills

Jemima Abu ・ May 3 '21

#career #webdev #beginners #productivity

4. Zero To Mastery

Zero To Mastery offers practical courses for people looking to advance their career. If you're looking to apply for a job or start a career in tech without any prior experience, it's helpful to learn a course that offers real-life usage. This is especially useful for the interview stage.

Recommended courses

Suited for: Experts and professionals

Conclusion

Despite how it seems, JavaScript is one of those things that gets easier with practice. Hopefully, this article will be a helpful starting point on your journey to JavaScript mastery.

If you found it useful or you have any other questions, feel free to reach out to me on Twitter or send me a message on my website.

How To Improve Your SEO Ranking

Jemima Abu — Fri, 07 May 2021 08:19:10 +0000

Fun fact: if you Google "front end developer Nigeria", my portfolio website shows up on the first page. Why? SEO.

Search Engine Optimization (SEO) is how you make sure your website shows up in relevant search results. Ranking refers to a website's position in those search results.

In this article, we'll be discussing how to optimize your website or brand to help you get a high ranking on Google and other search engines. We'll also discuss how to improve the online presence for yourself or your brand.

I'd like to preface this by saying that I'm not an SEO expert so I'll just be sharing the tips that worked for me.

Here's what we'll be covering in this article:

What is SEO?
Why is SEO important?
How do I improve my website's SEO ranking?
How do I improve my personal/my brand's online presence?
How do I test the SEO of my websites?

What is SEO

Search engine optimization is the process of improving the quality and quantity of website traffic to a website or a web page from search engines.

Simply put, SEO is ensuring that your website receives relevant and continuous traffic through organic search results. Organic search results refer to results that show up in search terms due to relevancy as opposed to paid search results.

Studies have shown that people tend to click more on organic search results than ads.

SEO doesn't just affect your websites; it affects the visibility of anything you post online such as articles, products or videos.

The world of Search Engine Optimization is so vast and complex that companies have dedicated SEO managers just to ensure the visibility of their brand.

Importance of SEO

The major importance of SEO is to increase the traffic and visibility of your website and content. High rankings are the best way to generate traffic to your site.

The above image is a screenshot of the traffic for an article I wrote in 2017. The article has had over 32,000 views since then and over 50% of that traffic was from organic search results on Google.

Having a high ranking means that you no longer have to constantly market your products and content and instead you attract your target audience naturally.

Think of it this way: when was the last time you went to the second page of Google? The higher your search engine ranking, the more visible your site is.

Tips for Improving SEO

There are multiple ranking factors that can affect the SEO of your site but I'll be focusing on the factors I prioritized in order to optimize my website:

Accessibility
Metadata
Relevant content and links
Performance and page speed
Traffic and backlinks
Domain name and extensions

Accessibility

Accessibility means creating websites that can be used by everyone. Ideally, you should build your websites to be as accessible as possible. Not only is it considered best practice but it also directly affects your site SEO.
Accessibility also improves user experience which is another important contributor to SEO.

Here are some quick tips to focus on to ensure your personal website meets base accessibility needs:

Use the lang attribute in your HTML tag. The lang attribute is what allows browsers to translate websites from one language to another so be sure to write your HTML tags appropriately e.g. <html lang="en">
Use alt tags for images that require description. Alt tags describe the content of an image for screen readers and should be included as attributes in image tags <img alt="" src="" />. Alt tags are also used by search engines to return relevant image results.
Use semantic elements for creating layouts in HTML. Semantic elements such as nav, footer and header provide a description of the content to screenreaders.
Use heading tags in the appropriate order. The rule of thumb is to have only one H1 tag on a page, serving as the title and let the headings follow in sequential order i.e. a h4 tag shouldn't appear before a h2 tag in the same section.
Ensure that the colors on your site have adequate contrast. Adequate contrast between the colors of the text and the background allows for easily readable content.
Use descriptive links. Links on your website should describe the page they lead to e.g. Read More About Me rather than generic statements like Click Here.

You can view my slides on Getting Started With Web Accessibility, watch my video on Understanding Accessibility as A Concept or check out the Accessibility Checklist by Jay Nemchik for more information and resources.

Metadata

Metadata is what provides information about your website to search engines.

The two major tags for SEO are:

Title. The <title> tag is included in HTML and it contains the name of your webpage. It's a good idea to include your main keyword in your title tag.

<title>Jemima Abu: Front End Developer</title>

The title tag should be changed on each page to describe the content of the new page e.g. <title>About Me | Jemima Abu</title>. A descriptive title also improves the ranking for articles and videos. Your title should be between 50 to 60 characters to avoid search engines truncating or ignoring it.

Description. The description tag describes the content of your webpage and it's also placed in the tag of your HTML page. It should explain the main goal of your webpage and use more keywords related to the message you're trying to pass along.

<html>
  <head>
    <meta name="description" content="Jemima Abu is a self-taught 
    Front End Developer and school-taught Systems Engineer 
    from Lagos, Nigeria.">
  </head>
</html>

Another tag to mention is the keywords tag. It was previously used by search engines to match relevant keywords but most search engines have announced that they no longer consider the meta keyword tag in a site's ranking. Using too many keywords can also have a negative impact on your site's SEO as this could be seen as spam by some search engines.

Relevant content and links

Providing relevant content on your website increases your website's SEO ranking. Here are some tips on increasing the relevancy of content for articles:

Use action words in your title and words related to search terms. An article with a title like "Introduction to Web Accessibility" or "How to Make Your Website Accessible" would be placed higher than an article simply titled "Web Accessibility".
Use proper formatting by separating sections with titles and emphasizing important content using bold text or italics.
Include links to related resources in your article. Using outbound links can lend to the credibility of your content.
Avoid plagiarism. If Google detects the same content in two search results, they'll remove whichever they consider least relevant. If you're trying to upload your content to multiple sites, be sure to include a [canonical link](https://moz.com/learn/seo/canonicalization#:~:text=A%20canonical%20tag%20(aka%20%22rel,content%20appearing%20on%20multiple%20URLs.).
Provide a summary of your content in list tags. Google tends to place summarized content at the top of search results.

Using relevant keywords in the link of your article also helps with ranking. If I write an article titled "How To Make Your Website Accessible", a good link would be myblog/make-your-website-accessible.

Performance and Page Speed

Performance and page speed are factors used by Google to determine a website's ranking. If your page loads slowly or has poor performance, it directly affects your SEO.

Here are some tips on improving how fast your page loads:

Reduce images to the maximum rendered size. If an image on a page only gets rendered at a maximum width of 450px then the width of the actual image shouldn't be more than 450px. You can also optimize your images to reduce their data size.
Avoid using embeds. When using embeds, the time it takes them to load is also calculated with your page speed. I was able to increase my page speed score from 63 to 91 by getting rid of the YouTube embeds on my landing page.
Reduce loading animation. Google measures how long it takes for content to appear on your page so if you're animating content into the page, the time for animation might affect your score. Try to keep all loading animation under 1s.
Minify your files You can reduce the size of your CSS and JavaScript files by minifying them. This means removing all spaces, new lines and other unnecessary characters. You can use the Minifier tool to do this manually.

You can use Page Speed Insights on your website to get more information on how to improve the performance and decrease loading time.

Traffic and backlinks

If your site gets a lot of traffic from other sources, it increases its ranking as it seems more relevant. A good way of generating traffic and improving your SEO is using backlinks.

Backlinks are the inbound links for your site. They're created when other websites link to your site. Backlinks are basically votes from other sites vouching for the credibility of your site. A backlink from a highly ranked site also boosts your ranking.

Google uses backlinks as one of their top three ranking factors.

You can create backlinks by including a link to your site whenever you appear online. If you publish an article for an online magazine or you appear in an interview, including a link to your website on those sources create more backlinks for your site.

You can read this article to learn more about backlinks.

You can also use the Google Analytics tool to detect how much traffic your website generates and which sources you acquire traffic from.

Domain name and extensions

Having a domain name tailored to your website is a good way of increasing traffic to your site as it lends credibility. Your domain name should perfectly represent your website e.g. use your full name for a personal site or the main keyword for a business site.

The domain extension also matters. .com domains are the most popular domain extension and tend to have higher rankings. For location-targeted rankings, you can use country code domains e.g. .co.uk or .eu.

You can buy a domain name on Namecheap (this is an affiliate link so I get a commission if you decide to buy with this link).

Tips for creating an online presence

Having an online presence refers to having all results related to you or your brand show up when you Google yourself.

While all the tips for improving SEO can also be applied to increasing your search results, here are some specific actions you can take to ensure a solid online presence:

Have a personal website. If you're trying to secure your brand's online presence, invest in a .com domain name and make sure all your other online accounts (Twitter, Instagram, LinkedIn) point to that site. You can read my article How To Create a Portfolio Website for a step-by-step guide to creating your personal website.
Direct traffic to your site. Aside from organic traffic, you can also take advantage of your social media presence to direct traffic to your personal site. If you have a viral tweet or video, be sure to include a link to your site somewhere.
Create accounts on larger platforms. If you're going to create a personal blog, you might generate more traffic by creating it on a site like Hashnode, Medium or Dev.to than a lesser-known platform.
Use the same username across all accounts and URLs. If you have a name you want to be known by online, make sure that's the name that you use for every account and in the same format.
Use common keywords on all your accounts. I use pretty much the same tagline for all my accounts ("Self-taught Front End Developer, School Taught Systems Engineer") so this helps link them together.

Testing for SEO

You can test your website's SEO by running the Lighthouse audit tool in Google Chrome. The audit returns a score based on how optimized your site is for search engines. The passed audits section contains the features of your website that improves SEO.

You can also use an online SEO checker to get a more detailed report on the SEO of your website.

Conclusion

And that's how you can get your website to the first page of search results for relevant keywords.

If you're interested in more in-depth research on the workings of SEO, you can check out these articles and tutorials:

What is Search Engine Optimization?
10 Crucial SEO Ranking Factors You Need To Know
SEO Specialization - University of California, Coursera

You can also read my article on How I Built My Perfect Portfolio Website for more insight into the process of creating my website.

If you found this article useful and you'd like to contribute to my content creation, feel free to buy me a coffee 😊

If you have any questions or comments, leave a message below or reach out on Twitter.

50 Online Resources To Improve Your Technical Skills

Jemima Abu — Mon, 03 May 2021 22:44:23 +0000

Online courses are a popular choice for learning technical skills and advancing your career, mostly due to their easy access and multiple options.

In this article, I've compiled 50 online courses on topics ranging from artificial intelligence to prepping for interviews.

The courses listed in this article are sorted into the following fields:

Artificial Intelligence Courses (5)

AI Programming with Python

Learn Python, NumPy, pandas, Matplotlib, PyTorch, Calculus, and Linear Algebra—the foundations for building your own neural network.

Level: Beginner

Become an AI Product Manager

Learn to develop AI products that deliver business value. Build skills that help you compete in the new AI-powered world.

Level: Beginner

Artificial Intelligence for Trading

Complete real-world projects designed by industry experts, covering topics from asset management to trading signal generation. Master AI algorithms for trading, and build your career-ready portfolio.

Level: Intermediate

Become a Machine Learning Engineer

Learn advanced machine learning techniques and algorithms -- including how to package and deploy your models to a production environment.

Level: Intermediate

Expand Your Knowledge of Artificial Intelligence

Learn to write programs using the foundational AI algorithms powering everything from NASA's Mars Rover to DeepMind's AlphaGo Zero.

Level: Advanced

Autonomous System Courses (4)

Become a C++ Developer

Learn C++, a high-performance programming language used in the world's most exciting engineering jobs -- from self-driving cars and robotics, to web browsers, media platforms, servers, and even video games.

Level: Intermediate

Intro to Self-Driving Cars

In this program, you'll sharpen your Python skills, apply C++, apply matrices and calculus in code, and touch on computer vision and machine learning.

Level: Intermediate

Become a Self-Driving Car Engineer

Learn the skills and techniques used by self-driving car teams at the most advanced technology companies in the world.

Level: Advanced

Become a Robotics Software Engineer

Build hands-on projects to acquire core robotics software engineering skills: ROS, Gazebo, Localization, Mapping, SLAM, Navigation, and Path Planning.

Level: Advanced

Business Courses (6)

Become a UX Designer

Design impactful user experiences for products in today's digital world. Build a portfolio that showcases your ability to transform user research to high-fidelity interactive designs.

Level: Beginner

Become a Digital Marketer

Gain real-world experience to run live campaigns as you learn from top experts in the field. Launch your career with a 360-degree understanding of digital marketing.

Level: Beginner

Learn SQL

Master SQL, the core language for Big Data analysis, and enable insight-driven decision-making and strategy for your business.

Level: Beginner

Agile Software Development

Learn best practices for using the Agile framework to build better products faster and more efficiently.

Level: Beginner

Become a Product Manager

Envision and lead the product strategy of industry-defining products, and learn to successfully bring them to market.

Level: Beginner

Business Analytics

Gain foundational data skills applicable to any industry. Collect and analyze data, model business scenarios, and communicate your findings with SQL, Excel, and Tableau

Level: Beginner

Cloud Computing Courses (5)

Intro to Cloud Computing

In this course, you'll learn foundational cloud computing skills that will set you on your path to a career in cloud computing.

Level: Beginner

Become a Cloud Developer

Enroll now to build and deploy production-ready full stack apps at scale on AWS, an essential skill for advancing your web development career.

Level: Intermediate

Become a Cloud DevOps Engineer

Enroll now to operationalize infrastructure at scale and deliver applications and services at high velocity, an essential skill for advancing your career.

Level: Intermediate

Become a Cloud Developer using Microsoft Azure

Learn to build cloud-based applications on Microsoft Azure, the cloud services platform used by 95% of Fortune 500 companies.

Level: Intermediate

Become an AWS Cloud Architect

Lead your organization's cloud computing strategy as an AWS Cloud Architect. Plan, design, and build secure, high availability cloud infrastructure.

Level: Advanced

Cybersecurity Courses (6)

Introduction to Cybersecurity

Get your start in the high growth field of Cybersecurity by building foundational skills in how to evaluate, maintain, and monitor the security of computer systems.

Level: Beginner

Network Security by Georgia Institute of Technology

This course provides an introduction to computer and network security.

Level: Intermediate

Intro to Information Security by Georgia Institute of Technology

This course touches on the importance of management and administration, the place information security holds in overall business risk, social issues such as individual privacy, and the role of public policy.

Level: Intermediate

Become A Security Engineer

Gain the highly sought-after skills to protect an organization's computer networks and systems from security threats or attacks.

Level: Intermediate

Become A Security Analyst

You'll master the skills necessary to become a successful Security Analyst and learn to identify, correct and respond to security weaknesses and incidents.

Level: Intermediate

Become An Ethical Hacker

Meet the growing demand for cybersecurity professionals by gaining the offensive security skills to protect an organization's computer networks and systems.

Level: Advanced

Data Science Courses (7)

Programming for Data Science with Python

Prepare for a data science career by learning the fundamental data programming tools: Python, SQL, command line, and git.

Level: Beginner

Programming for Data Science with R

Prepare for a data science career by learning the fundamental data programming tools: R, SQL, command line, and git.

Level: Beginner

Data Analysis and Visualization with Power BI

Meet the growing demand for data analysis and visualization professionals by gaining the Power BI skills that top companies want.

Level: Beginner

Become a Data Engineer

Data Engineering is the foundation for the new world of Big Data. Enroll now to build production-ready data infrastructure, an essential skill for advancing your data career.

Level: Intermediate

Become a Data Analyst

Use Python, SQL, and statistics to uncover insights, communicate critical findings, and create data-driven solutions.

Level: Intermediate

Become a Data Scientist

Gain real-world data science experience with projects designed by industry experts. Build your portfolio and advance your data science career.

Level: Advanced

Become a Data Architect

Learn how to plan, design and implement enterprise data infrastructure solutions and create the blueprints for your organization's data success.

Level: Advanced

Programming & Development Courses (10)

Learn to Code

This course is your first step towards careers in Web and App Development, Machine Learning, Data Science, AI, and more!

Level: Beginner

Become A Front End Web Developer

Learn how to build high-quality websites and dynamic applications to create stunning user experiences for the web.

Level: Intermediate

Introduction to Backend Development

This course presents an overview of a variety of Web backend topics: handling user input, producing templated output, storing information in databases and data stores, and building systems with secure user accounts.

Level: Intermediate

Become A Full Stack Web Developer

Learn to design and develop powerful modern web applications that form the foundation for the apps, websites, and systems that people and businesses use every day.

Level: Intermediate

Become a Blockchain Developer

Demand for blockchain developers is skyrocketing. In this program, you'll work with the Bitcoin and Ethereum protocols, build projects for real-world application, and gain the essential skills for a career in this dynamic space.

Level: Intermediate

Become a Java Web Developer

Learn enterprise scale back-end development with Java, and be prepared for the software engineering jobs that are in demand at a majority of Fortune 500 companies like Google, Amazon, Netflix, and more.

Level: Intermediate

Become a React Developer

React is completely transforming Front-End Development! Master this powerful UI library from Facebook with this course.

Level: Intermediate

Become an iOS Developer

Master the Swift programming language, and create a portfolio of iOS apps for iPhone and iPad to showcase your skills!

Level: Intermediate

Android Basics by Google

This course is for aspiring Android developers who are new to programming to ensure that you get the real-world skills you need to know how to build and accelerate your journey towards becoming a professional Android Developer.

Level: Intermediate

Data Structures and Algorithms

Get hands-on practice with over 100 data structures and algorithm exercises and technical mentor support when needed to help prepare you for interviews and on-the-job scenarios.

Level: Intermediate

Career Courses (7)

Refresh Your Resume by Grow With Google

Your resume is the first step in the job search. Through this course, you will identify the companies you want to work for, and showcase your key achievements to align with their roles.

Strengthen Your LinkedIn Network & Brand by Grow With Google

Networking is an essential job search skill. In this course, you'll learn strategies and tactics for effective networking.

Craft Your Cover Letter

Introduce yourself with a memorable cover letter. In this short course, you'll use proven writing techniques to show why you are the best person for the job.

Front-End Interview Prep

You will review common Front-End Web Developer interview topics ranging from palindrome functions to closures, and learn best practices for behavioral questions and whiteboard problems.

Android Interview Prep

You'll work through common Android Developer interview topics ranging from explicit and implicit intents to designing a min stack.

Data Science Interview Prep

In this course, you'll review the common questions asked in data science, data analyst, and machine learning interviews.

Full-Stack Interview Prep

You'll review common Full Stack Web Developer interview topics like palindrome functions and data structures.

How I Built My Perfect Score Portfolio Website

Jemima Abu — Wed, 31 Mar 2021 11:15:43 +0000

I recently published the fourth version of my portfolio jemimaabu.com.
With this version, I tried to make the code as performant and accessible as possible but still have an interactive site, so this article will be about how I managed to achieve that.

These are the following features in my portfolio that we'll be discussing:

Clear content and easy to navigate.
Built with HTML, CSS and JavaScript (no frameworks or libraries)
Works on JS-disabled browsers
Vanilla JavaScript implementation of smart navigation and animate on scroll
6 different color themes
Perfect scores on accessibility, performance, best practices and SEO

I shared the portfolio on Twitter once I was done and it got a lot of feedback and I also got messages from people asking about certain features so I decided to write this article to explain these features.

1. Creating The Design

It took me about a month to come up with the design for my portfolio, mostly because I designed the entire thing on a trial and error basis - swapping out different layouts and colors till I liked how it looked.

I also went around the internet looking at other people's portfolios for inspiration and using features that I liked.

These are some of the portfolios that I got inspiration from:

Usecue - perfect lighthouse score, call to action buttons for next and previous item
RFarn - large text loading screen, slightly fixed header on scroll to offset the URL bar resizing
Webinsane - brown color theme, the font 'Inter'
Håvard Brynjulfsen - vaporwave theme

Clear content

A major reason I wanted to revamp my portfolio from the previous version was to have all my content on my site without overloading the landing page.

I had different pages for each content and chose designs I felt would best present the information:

About page - splitting sections into expandable details to reduce text appearance on page
Articles page - simple article title and description display according to how most blog posts are displayed
Talks page - information set in responsive table (the table converts to a list on smaller screens)
Projects page - projects set in slider carousel so I could include as many projects without having a terribly long page.

I also included selected parts of each content on the landing page along with a call-to-action button leading to each page to encourage user navigation.

2. Writing the code

Ever since the second version of my portfolio, which was easily the least performant version of all versions, I've always built my portfolios from scratch with HTML and CSS, using as little JavaScript dependency as possible.

I also try to avoid using frameworks or libraries so I can optimize my code for performance and accessibility.

Works on non-JS browsers

A lot of interactions on the page are actually done with CSS or semantic HTML and not JavaScript, such as:

filter on Articles and Presskit pages - How to Build a Filtering Component in Pure CSS
slider carousel on Projects page - CSS-Only Carousel
expandable content on About page using HTML details - The Details disclosure element

The benefit of this is that the site isn't dependent on JavaScript for displaying information so it still works without it.

Vanilla JS Implementation

I used JavaScript to handle minor interactions on the page such as elements fading in on scroll, the smart navigation and handling multiple color themes. I also wrote two articles on how I did this:

How to Animate on Scroll With Vanilla JavaScript on Envato Tuts+ and,
Creating a Smart Navbar With Vanilla JavaScript on CSS-Tricks

In order to ensure that the content wasn't dependent on being displayed with JavaScript, I only implemented the effects on the elements once the JavaScript had loaded. For example, for the scroll-in element, my JavaScript code looked like this:

scrollElements.forEach((el) => {
  el.classList.add('js-opacity');
})

Then I handled styling by targeting only the classes with the js-opacity attached.

.scroll-in.js-opacity {
  opacity: 0;
}

This way the elements are only hidden if the script has actually loaded and since the landing page wasn't too heavy or making multiple calls, the script loads almost immediately.

How to implement multiple color themes

This was definitely the most fun feature to implement.

The first version of my portfolio has a dark/light theme switch but I wanted something more interesting this time so I thought, why have two colors when you can have six.

I implemented the multiple color theme feature using vanilla JavaScript and CSS.
The best part is, thanks to the implementation, I could have gone on to have as many color themes as I wanted.

This is the JavaScript code for handling theme switching:

const setTheme = (className) => {
  var root = document.getElementsByTagName('html')[0];
  root.className = className;
}

All we need to do is assign a className to the root element depending on what's selected.
Then the HTML looks like this:

<button onclick="setTheme('light')" aria-label="Set light theme">
</button>
<button onclick="setTheme('dark')" aria-label="Set dark theme">
</button>
<button onclick="setTheme('brown')" aria-label="Set brown theme">
</button>
...

And our CSS looks like this:

:root,
:root.light {
  --background-color: #fafafa;
  --text-color: #000;
  ...
}

:root.dark {
  --background-color: #0d1926;
  --text-color: #f7fafc;
  ...
}

:root.brown {
  --background-color: #eeeae2;
  --text-color: #120c07;
  ...
}
...

Finally, make sure you only assign colors to each element according to the CSS variable.

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

An optional feature you can implement is setting a dark/light theme according to the user's system settings. We can do this using the prefers-color-scheme media query.
We just need to update our default root variables:

@media (prefers-color-scheme: dark) {
/* set new default root to same colors in root.dark */
  :root {
    --background-color: #0d1926;
    --text-color: #f7fafc;
  }
}

That's pretty much the gist of the logic. You can see the complete implementation at my portfolio repository.

3. Deploying the site

Once I had all my content and logic implemented, I added the repository to my Netlify site and connected it to my custom site. You can read about how I set up continuous deployment from Netlify (and more options for hosting and deploying your site) in the third article building my portfolio inspired: How to Create a Portfolio Website – A Beginner Developer's Guide

How To Get A Perfect Lighthouse Score on Your Website

You can test the scores of your website using the Lighthouse audit tool in DevTools.

It's a good idea to run Lighthouse in incognito mode to prevent extensions interfering with your score. It returns a report giving you a score according to how well you meet certain metrics and also tells you things you can fix.

You can easily increase your score by taking note of the returned items and making those fixes accordingly.

Here's how I ensured high scores in each category:

Accessibility

It's always best to ensure your site is as accessible as possible and not just for score-related reasons. You can watch my video on Understanding Accessibility As A Concept for more information on that.

These are some of the things I do to ensure accessibility on my site:

Using an accessibility checklist
Writing code with the Web Accessibility extension in VSCode
Using the appropriate aria-roles for custom elements
Manually testing the site after building (tabbing through and checking that all elements get visible focus, mouse operable elements work with keyboards etc).

You can also use the WAVE tool for further testing after building.

Perfomance

This definitely gave me the most headache but here's how I got a perfect performance score:

Compressed all images and included an explicit width and height. This is one of the most common contributing factors to decreased performance scores mostly cause it's a lot of stress to implement. I resized all my images to be the maximum width they'd be rendered on the page, around 720px and set explicit width and height and made them responsive with CSS.

<img src="" width="720" height="340" alt="">

img {
  width: 100%;
  height: auto;
}

I was able to do this because I served static images saved on my local folder so if you're calling your images from a CDN or somewhere else, look into the options they offer for rendering responsive images.

I split all my code according to the pages calling them to make sure I wouldn't be loading unnecessary stylesheets or scripts. My site was very CSS heavy so instead of calling one large CSS file, I split the files according to the pages that needed them.

Reduced page load animation.
Chrome detects how long it takes for text to appear on your page and the timing can affect your performance score so try to keep your loading animation under 1s (one second).
imported font using font-face instead of link. For some reason, Google Chrome marks downloading fonts from Google fonts as a render-blocking resource which is odd to me cause like aren't y'all part of the same company? You fix it, what do you want me to do (I'm kidding lol. Mostly).

SEO and Best Practices

SEO and Best Practices usually go hand in hand with performance and accessibility so as long as you have good scores there, they'll follow right along.
The audit report tells you what needs to be updated so you can always fix any errors that pop up.

Conclusion

And that's how I build my perfect score portfolio website. Maybe you're wondering why does it matter to have a perfect score on your website?

For bragging rights, obvy. Also, you get fireworks if you have a perfect score so that's always nice.

Seriously though, it's not the perfect score that matters, it's just the idea behind it.

You should always be building your sites to be as accessible and performant as possible, according to best practices and the SEO is an added benefit. Lighthouse scores are just a way of measuring how well you've done that.

Thanks for reading :) If you found this article helpful, let me know in the comments or on Twitter.

DEV Community: Jemima Abu

How to Learn JavaScript

Table of Contents

What is JavaScript?

What is JavaScript Used For?

1. JavaScript lets you manipulate HTML and CSS

2. JavaScript lets you carry out mathematical operations and algorithms

3. JavaScript lets you manipulate complex data with data structures

4. JavaScript lets you detect and respond to user interactions on a page

5. JavaScript lets you communicate with a server

How to Write JavaScript Code

How to Run JavaScript Code

JavaScript Projects for Beginners

JavaScript Tutorials for Beginners

1. freeCodeCamp

Recommended course

2. Udemy

Recommended courses

3. Udacity

Recommended courses

50 Online Resources To Improve Your Technical Skills

Jemima Abu ・ May 3 '21

4. Zero To Mastery

Recommended courses

Conclusion

How To Improve Your SEO Ranking

What is SEO

Importance of SEO

Tips for Improving SEO

Accessibility

Metadata

Relevant content and links

Performance and Page Speed

Traffic and backlinks

Domain name and extensions

Tips for creating an online presence

Testing for SEO

Conclusion

50 Online Resources To Improve Your Technical Skills

Artificial Intelligence Courses (5)

Autonomous System Courses (4)

Business Courses (6)

Cloud Computing Courses (5)

Cybersecurity Courses (6)

Data Science Courses (7)

Programming & Development Courses (10)

Career Courses (7)

How I Built My Perfect Score Portfolio Website

1. Creating The Design

Clear content

2. Writing the code

Works on non-JS browsers

Vanilla JS Implementation

How to implement multiple color themes

3. Deploying the site

How To Get A Perfect Lighthouse Score on Your Website

Accessibility

Perfomance

SEO and Best Practices

Conclusion