DEV Community: Chabulsqu

7 Projects for Your Front-End Portfolio

Chabulsqu — Sun, 29 Jan 2023 12:00:00 +0000

Web development and in general, programming is a field that requires a lot of practice, maybe you are looking to build your first portfolio or land a job.

In either cases you will need projects to showcase and if you started learning on your own (like I once did) then it’s going to be hard to find opportunities to practice, in this article you’ll find some of them.

I classified them on two different levels (beginners and advanced). All the designs are made by me except when noted.

Beginners

You can make this simple web sites just by using HTML and CSS.

Landing Page

Build a landing page for something. It could be a business, an influencer or an e-commerce shop. Th page should have a call-to-action and basic information about the website’s brand displayed on it.

Restaurant Page


Madhu Mia for Upnow Studio

Code a Restaurant page, some of the content you could include are menus, promotions and even a kitchen tour. You could make this a single page web or split into several pages for each option — It’s up to you!

Help Page


Jordan Hughes®

Make a help page for a business or software with a search bar and several topics included in, you could even code a chatbot for customer service if you feel confident with it.

Advanced

This projects can be completed with advance knowledge on HTML, CSS and a Javascript framework (or pure javascript if you prefer).

Kanban board


Patryk Ilnicki

Design a board similar to Trello’s one where users can drag and drop, remove, add, edit and update cards. You can also allow users to create tags for each card, You choose!

JavaScript Library Clone

Especially useful if you aim to sharpen your skills with JavaScript, trying to code some of the methods of libraries like Lodash can be a good hook for recruiters.

Calculator

Make a Web Calculator, it could go from a simple one to a very complex scientific one, remember to make it responsive so users from every device can use it.

Streaming platform


Emmanuel Edokpa for Piqo Design

Using an API like TMDB (The Movie DataBase) to fetch data from famous movies, you could emulate a famous streaming platform like Netflix or Amazon Prime. This could also mean a good time to show your CSS skills making focus states and animations.

Some other ideas

You could also try to replicate a famous social media app or website like Reddit, Twitter or Instagram, it can give recruiters a nice sight of what you are able to do.
Never forget to have a well organized and complete Github profile with several projects and regular activity, it is a perfect way to show them your experience and collaboration skills.

And that’s it for today’s article, I hope you have enjoyed this article as much as I enjoyed writing it. Have a great day! 😃

My First Front-End Portfolio

Chabulsqu — Thu, 08 Dec 2022 21:06:47 +0000

Hello everyone, I began taking courses on Front-end development a couple of months ago and I finally decided to make my first personal portfolio website, it took me an entire month working around 1/2 hours a day. You can see its live site or the project repository.
My portfolio, on desktop view

Step 1: Wireframe my website

I made the first wireframes of my main and projects page in paper and in a pretty basic way, but they guided me and help me remember the design while coding.

Step 2: Write the basic HTML

I did this for both pages, and added classes I thought I would need later on during the project.

Step 3: Add basic styling for your Portfolio

I recommend doing this on a separate stylesheet instead of the one you are using for each page (styles.css) so you don't have to split the code when you go further in the project like I had. I also recommend to use a reset file like reset.css for managing styles easier.
Speaking about the general design and color pallete, I wanted the page to have a modern and soft look, so, using the Adobe Color contrast checker and inspired by Twitter design I picked the main background, accent and text colours for both Dark and light Mode, I also tried to use soft shadows to give it a deeper look.

Step 4: Make each site responsive

If you can, try to use as much relative measurements as you can so you need to write less code. I worked on 5 device size ranges: phones (320 to 480px); tablets (481 to 768px); laptops (769px to 1024px); desktop (1025px to 1440px) and large screens (1440px+). If you see your stylesheet getting really big at this point (500+ lines) try to split it into more, believe me, it will be easier to edit later in the future.

Step 5: Adding Javascript for interactivity

In this case I decided to use JS to make a light / dark mode switch (with help of CSS classes and custom properties), an hamburguer menu (only mobile devices) and 2 dropodowns featuring the technologies I used for the project and my contact information. I also learned to use local storage so I could save the user preferred mode and use it the next time he/she visits the page.

Step 6: Start the second page

I decided that my second page would feature all of my projects, with links to their code and their live versions, you could also make a third or fourth page if you like, but for me I decided that it was enough for a portfolio.
My projects page, seen on Dark ModeStep 7: Final features and accessibility
After days of headaches thanks to Media Queries and, after converting a video into a gif so I can directly use it on my site hero with the background-image property; I finally completed the page. At this point I recommend you to use some accessibility testing tool like Axe devtools to ensure that your website is accessible. If you haven't done so yet, start a Github repository for your project and enable Github pages on it, make a decent Readme and publish it in any site you want.

And that's it for today's article, I hope you have enjoyed it, Have a good day! 😄

A brief guide to A11y

Chabulsqu — Sat, 02 Jul 2022 00:01:19 +0000

Accessibility is defined as the process of designing products, devices and environments that people with disabilities of various kinds can use. In 1990 the United States Congress sanctioned the ADA (American Disabilities Act) and since then we can find both in public and private spaces tools for people deprived of their vision (braille) or in physical aspects (ramps for wheelchairs). The regulatory body for internet accessibility is the WCAG(https://www.w3.org/TR/WCAG21/), which is responsible for that websites have features such as subtitles on videos, images with alternate text, labels readable by screen readers, etc.

Visual Accessibility Elements:

Contrast: The process of differentiating two elements to give them importance and readability for users with reduced vision or color blindness, can be done through colors, fonts and spacing.
Headings: The web is fast and therefore the content must be divided into several sections these headings have a relationship of h1 (unique on the page), h2 (section title) h3 (section subtitle) and so on.
Design for the colorblind: Use opposite colors on the color wheel where possible or else use multiple shades of the same color (it also helps colorblind people who only see in grayscale), color is a powerful contrast agent, but should never be the only one. Use text, icons, images (for example if a form is wrong, use red borders + a box that explicitly says so)

What is Aria?

ARIA is short for Accessible Rich Internet Applications, it is a set of attributes to handle assistive technologies for people with disabilities that HTML alone cannot handle. The technical specification was called WAI-ARIA and was published by the W3C initially in 2008 and became a recommendation in 2014.

Primary components of ARIA:

Roles: They are used to define the specific type of an interface element (role=”role_name”).
Abstract Roles: These are brief descriptions used by search engines to give meaning to roles and should not be changed.
Document Structure Roles: They provide descriptions for various parts of the page (toolbar, img, heading). While HTML 5 already handles this quite well, since screen reader support for it is still limited, it is recommended to use both types.
Landmark Roles: They are used to indicate the beginning and the end of a certain section of the document by screen readers (banner, form, search)
Widget Roles: They give a semantic meaning when HTML does not, they are divided into groups of Widgets or UI Widgets (grid, menu, tablist) and standalone Widgets or child Widgets (checkbox, link).

ARIA Rules:

Use native HTML unless it is absolutely or nearly impossible to do so.
Don't change semantic elements in HTML unless absolutely necessary.
All ARIA controls must be keyboard accessible, they can be added to tab navigation using (tabindex=”0”).
For all focusable elements, never use (aria-hidden=”true” or role=”presentation”) as this can cause user confusion when focusing on an empty element.
Give all interactive elements an accessible label, either with (Search) or (<input type=” text” aria-label=”” / aria-labelledBy="") not to show it to users who don't use screen readers.

Alt attribute rules:

If the image is already described below, add an empty attribute.
If the image is a link, also add the page it leads to.
Alt should not be longer than 150 characters
The alt should clearly and concisely describe the image.
Images used as decoration (such as a decorative border) should have an alt attribute, even if it is empty.

The Alt attribute differs from aria-label because the former will also be displayed if the element's source is not found or on slow connections, while the latter is for screen readers only, however, it is preferable to use alt on elements where they can be used.

A brief Javascript guide

Chabulsqu — Sat, 18 Jun 2022 01:05:11 +0000

Javascript is one of the most used programming languages and in this guide I will review briefly the basics of the language for someone who just wants to take a look at the language or see if it's the kind of language they want to learn

What is JS?

Javascript is a high-level, weakly typed, multi-paradigm language used for both Front-end (executed on the browser and used along HTML and CSS) and Back-end (on server side) Web Development and standardized by the EcmaScript (ES).

JS Basics

To print something to the console, the console object must be used together with the log method and the value to be printed in parentheses.

The data types in Javascript are:

string (text strings or simple characters, each one of them having a specific index)
Numeric (integers, bigInt for large numbers and float for decimals)
Boolean (true or false)
undefined
null
objects
symbols

They can be declared with the word var (depreciated since ES6) or with let in the case of variables that can be changed throughout the program or const in the case of constant ones. At the end of each statement, though not necessary for the program, a semicolon (;) is used.
Javascript Operators:

> more than < less than
>= more or equal than <= less or equal than
== not strict equal (5 == '5' true)
=== strict equal (5 === 5 true) / (5 === '5' false)
!= not strict different
!=== strict different

console.log('Hello World');
var example = null;
let example2; // undefined
example2 = true;
const number = 5;
number = 10; // Error: Assignment to constant variable

Functions

Functions in Javascript allow you to execute pieces of code at any time without having to write them again. Normal functions are declared with function functionName (parameters) { function content }. They can also be abbreviated and wrapped in variables as in the case of anonymous functions. To call a function, nameOfTheFunction(parameters) is used, and in case the latter do not exist, each one can be given a default value from the function through the equals symbol (num1 = 1, num2 = 2) . To encapsulate and return the value of a function, the return keyword is used.

// Common functions
function sum (num1, num2) {
    return num1 + num2;
}

// "Arrow head" Functions
const sum1 = num1 => {
    return num1 + 1;
}
const multiply = (num1, num2) => num1 * num2 ; /* Implicit return keyword, only available on this type of functions */

Loops

Pieces of code that can be repeated over and over again until a given condition is met. They are used both to traverse strings, arrays and other values. They can be for loops and they can also be used as a while loop, which runs as long as a condition (specified outside of the loop) is met and do while loops (do a yes-or-yes action first and then set the condition to be false, if not, continue). However while loops are used less because of the increased change for infinite loops.

const firstVariable = 'Hello'
for (let i = 0; let < 5; let++) {
/* Loop index is 0 and 1 is added at each iteration
(loop content execution) till i stops being less than 6 */
console.log(firstVariable[i]) // prints the letter where the loop is iterating
// Prints h e l l o in separated lines
}
const secondVariable = 'World!'
// While loops example
let j = 0;
while (j < 6) {
    console.log(secondVariable[j]);
    j++;
}

let k = 0;
do {
    k++;
    console.log('Increasing k');
} while (k < 3)

This has been my first post, hope you like it, I would be glad if you put any suggestions in the comments.