DEV Community: monica

Fun Games That Teach You Coding

monica — Thu, 14 Mar 2024 06:32:25 +0000

Are you learning a new language? Do you find it kinda boring and you want to break that monotony,or do you want something to keep you interested in your learning journey to keep learning and motivated. Why don't you play fun and engage in games to learn coding?
Here is a list of fun games to play and keep learning programming.

CodingGame

This is the first website I used in playing games, it has a simple interface that is easy to navigate. This website supports most programming languages while providing fun, challenging, and engaging games to play and learn with.
Users can learn various programming languages, including C++, Java, Ruby, Python, and more

Beyond offering games, CodinGame also has tutorials and an active community and forums where you can interact with other developers just as you.

CodeCombat

All core levels are free
Code combat starts players on simple coding challenges then rumps up the difficulty. It is a fun and awesome game for everyone from professionals looking to level up their skills to children wanting to have fun.

You can use code combat to learn python or Javascript, codecombat has plenty of resources for players including community forums and real time feedback via the code editor.

CodeWars

CodeWars It's designed to be challenging, making it perfect for experienced programmers who want to push their skills to the limit, it's like a gym for the brain. It offers coding challenges in various languages, including Python, Ruby, Java, and JavaScript.
In order to start using it You’ll have to prove your skills first with a basic test of your understanding of the language you want to practice.

Cyber Dojo

Cyber Dojo has practice exercises and challenges for dozens of coding languages including Ruby, JavaScript, PHP, Python, and more. Each exercise spells out a challenge to complete with an example showing what the end result should look like..

Flexbox Froggy

Want to learn how CSS flexbox works? Check out Flexbox Froggy. It has a simple interface that teaches you the basics of how things align in flexbox while you help Froggy and his friends.Flexbox Defense

Flexbox Froggy teaches users how to use CSS flexbox layout to create flexible and responsive layouts for the web.

Flexbox Defense

Flexbox Defense is another great way to practice your flexbox skills. This time, you’ll move gun towers into position along a path to defeat oncoming waves of enemies, using the same kinds of commands as Flexbox Froggy.

CSS Diner

CSS Diner is among the few free online coding games that can help users learn how to target HTML elements and apply CSS styles to them.

There are 32 levels that’ll teach you the basics of how CSS selectors work. Each level gets progressively more complex, building on what you’ve learned in previous lessons.

Robocode

In this open-source game, users write code to control their tank and its movement, aiming, and firing. Robocode also provides APIs that let players interact with their virtual environment.

You’ll learn programming skills by building virtual robot battle tanks in Java or .NET. Battles are then played out on screen in real time.

Untrusted

Untrusted is a meta-JavaScript adventure game that tests your JavaScript skills to solve problems. You use JavaScript to guide Dr. Eval through a machine continuum and alter his reality to move between levels. It’s a great game for practicing more complex JavaScript skills.

CheckIO and Empire of Code

CheckIO and Empire of Code are both strategy games that can teach you JavaScript or Python. Empire of Code uses a space setting and you learn by defending your own base and attacking others, while CheckIO lets you improve your skills by using others’ solutions.

Its Game Over, Guys
There is no reason you can't have fun while learning, I have given you just a few games but there are more resources to check out on the internet. There will always be more challenges in life, it's good to embrace these challenges in order to boost your confidence in your coding journey and be able to problem solve in real life.

Thanks for reading. See you in the next blog!😊🙌

What Tech Stack Should I use To Build My Portfolio

monica — Wed, 13 Mar 2024 20:11:32 +0000

Introduction
Choosing the right tech stack is a daunting task, with new technologies coming up every day it’s difficult to assess which would be a long-lasting framework, tools or library to use for your portfolio website.

A good website makes pitching for projects and bidding for jobs effortless, it shows potential employers the extent of your skills and what you can achieve as a developer. Having the right portfolio website is the first step in your freelancing career, it shows samples of your work instead of having to explain it every single time to a client.

Portfolio
Portfolio is a tool designed to showcase your completed projects. It is not focused on educational titles, jobs, or previous experience but on providing evidence informing of samples of what you can do as a developer.

At some point you must build a portfolio as a developer, every portfolio is different and built according to the owner’s taste in colors, animation and design.

Elements of a portfolio

A good portfolio should have these key elements:

About Page -The about page is the first page that people will see as they enter your portfolio. Talk about who you are and your career journey as a developer.
Resume Page — Talks all about your education how far you have gotten from your achievements, experience, education, skills as a web developer. This is where you can add a downloadable resume link so that the client can have a copy of your resume.
Works Page -Here people can find all the projects you have worked on, and upon clicking on any project, people will see all the other information necessary to know about the project.
Contact Page — Ensure your contact details are included and easy to find. They are essential for the employer to be able to reach you.

Portfolio design(examples)
Here are a few examples of developer portfolios worth looking at.

1. Brittany Chiang

https://brittanychiang.com/
Brittany Chiang is a Senior Frontend Engineer, Her portfolio shines for its simplicity, setting a great example of what a web developer portfolio can be.She uses brilliant color scheme, modern design feel, and her main mission to build things for the web.

2.Philip Turkiewicz

codeturkie.io

Codeturkie.io portfolio belongs to a Front-end developer known as Philip Turkiewicz He is based in Toronto Canada.He uses colors pink and yellow and various other combinations of colors which brings this portfolio to life and make it stand out from other portfolios. Its a simple portfolio full of unexpected surprises which enhance the look and feel of this website.

3. Yasio

https://yasio.dev/

Yasio is a portfolio website of Jan Baszczok,a web/mobile developer and designer from Poland.This portfolio has a simple yet stunning design, has sleek black background and white typography. He has incorporated some javascript animation which reveals sections as you scroll down, thus it improves the look and feel of the design.

4.Square Me

https://squareme.si/en/

Square me is a creative video agency which specializes in creating beautiful things and making video content for brands out there. A a professional freelancer, agency or web developer should consider a portfolio that stands out from the rest of the other players in the industry. This portfolio was chosen to inspire creatives who love a little bit of personality in their websites.

5.Ben Darby

Ben Dary is a product designer from Uk, He plays a multifaceted role in the product development lifecycle, from understanding user needs and defining problems to designing intuitive interfaces and iterating on design solutions to create impactful and successful products. His portfolio captures the incense of who He is.

The available technologies commonly used.
1.HTML, CSS, & JavaScript

You can never go wrong with a simple vanilla website. There’s no need to over-complicate the architecture of your portfolio if you don’t want or need to. You can use HTML,CSS and Javascript to create your website and use different javascript animations to make your website very unique.

2. Static Site Generator

Static site generators are becoming increasingly popular in the tech industry with the adoption of popular libraries and frameworks (React, Vue, Angular, etc.).

There are many different site generators to choose from such as Next.js for React applications and VuePress for Vue.js.These offer many benefits such as plug-ins for image optimization, mobile-friendly responsiveness, and accessibility.

3.PHP and Laravel

Laravel is a framework that helps you create web applications using PHP, by providing tools and features such as routing, controllers, views, models, migrations, middleware, and blade templates. PHP and Laravel are relevant in the web development industry, because they offer compatibility, performance, and flexibility.

4. Ruby and Rails

Ruby is another programming language that can be used for web development, among other things. Rails is a framework that helps you create web applications using Ruby, by following the convention over configuration (CoC) and don’t repeat yourself (DRY) principles.

5. Python and Django

Django is a framework that helps you create web applications using Python, by providing tools and features such as models, views, templates, forms, authentication, and admin interface. Python and Django are popular in the web development industry, because they offer simplicity, productivity, and security.

Conclusion
To actually answer this question is that it doesn’t matter what tech stack you choose to use. It all depends on the skills you have, how you would like your portfolio to look and the design you want. Pick something that makes you happy and build your portfolio with that. Often the fear of getting started and many choices available keeps a lot of developers stuck from bringing that vision to life.

Thanks for reading. See you in the next blog!😊🙌

Resources Every Web Developer Needs

monica — Wed, 13 Mar 2024 09:38:44 +0000

I have compiled a list of the tools that have helped me over the years in building my websites for personal use and for clients. Let's get started, this is a small list compared to many other resources out there on the internet you can use to enhance the look and feel of your websites.

Websites To Learn Web Development

Codecademy
TheOdinProject
Frontend Mentor
Javascript30
Coursera
Khan Academy
freeCodeCamp
MDN Web Docs
W3Schools
Scrimba

Youtube Channels to Learn Web Development

Web Dev Simplified
Coder Coder
The Coding Train
FreeCodeCamp
Traversy Media
The Net Ninja
Code with Harry (Hindi)

*Websites for HTML/CSS Templates
*

HTML5UP
HTMLRev
Free-CSS
Templated
FreeHTML5
Start Bootstrap
BootstrapMade
Bootswatch
BootstrapTaste
Cruip
Tooplate
HTML5xCSS3

Code Editors To Use

Visual Studio Code (VS Code)
Sublime Text
Brackets
Vim

JavaScript Animation Libraries

Anime.js: Lightweight JavaScript animation library.
ScrollReveal.js: Easily reveal elements as they enter the viewport.
Popmotion: A functional, flexible JavaScript motion library.
AniJS: Declarative handling library for CSS animations.
Wow.js: Reveal CSS animation as you scroll down a page.
Typed.js: A JavaScript library that types.
Velocity.js: Accelerated JavaScript animation.
GSAP: Professional-grade animation for the modern web.

Website for Vectors, Images, and Illustrations

Freepik: Discover free vectors, photos, PSDs, and icons.
Vecteezy: Find high-quality vector art, graphics, and illustrations.
Unsplash: Access over a million free high-resolution photos.
Pixabay: Explore a vast library of free images and videos.
Flaticon: Download free icons, SVG, PSD, PNG, EPS format, or as ICON FONT.
Openclipart: Share and use free clipart and images.
SVGRepo: Download SVGs for free.
Vectorportal: Free vectors, clip art, and icons.
SVGBackgrounds: Customizable SVG patterns and backgrounds.
FreeDesignFile: High-quality graphic design resources.
Pexels: Find free stock photos and videos shared by talented creators.
Vectorian: Download royalty-free vector art, stock photos, and stock footage.

I hope these resources will help you in building your websites.
Thanks for reading. See you in the next blog!😊🙌