DEV Community: Sade online

Beautifying my ugly newbie HTML page

Sade online — Sat, 22 Jan 2022 23:29:10 +0000

You've taken the first steps. You've had a blast writing up some HTML code.

You even added a nice looking image AND used semantic HTML for improved accessibility and improved browser understanding of your content.

Note: Semantically correct HTML helps search engines, screen readers, and other user devices determine the significance and context of web content.

But now, it looks poo.

So poo, even you don't want to look at it for longer than you need to. 😄 Know what I mean?

As I write this, this is the situation I find myself in. I don't want to design ugly web pages, so I set myself a challenge of beautifying my Tribute page about Satoshi Nakamoto.

What follows next are a series of screenshots and tips I came across along the way so that if you happen to be in the same situation, you know where to start!

Before

See what I mean by poo? #LetTheTransformationBegin!

First, I imported a Google Font (VT323 for that "retro code look")
I then added one more image to spice up the page a little and added the pink border.
Next, I added the heading with some cool CSS effects.
Final touches included scaling the images on hover, for some interactivity.

Lessons learnt

Designing the desktop view was great. It created the feeling of progress, however, I SHOULD HAVE CODED MOBILE-FIRST 😭, especially because I wanted it to look good on mobile.
Trying to adjust columns and layout after, was a pain in the ***.
It's still not perfect but I had to move on after spending more time than I needed to on the project.
If there's one thing I'd say, it would be to start simple. I thought I'd need to do a lot to make it look somewhat presentable.
Simply adding images, non-boring font, exciting CSS and some layout features were enough for one of my first attempts at beautifying HTML with vanilla CSS on the fly.

What now?

I came across a resource: frontendmentor.io that aims to help teach how to beautify the front end. I'll check it out and start thinking about learning Bootstrap now that I know the basics of HTML and CSS.
I'll also finish the remaining practise projects I have lined up.

Final words
I hit some challenges and used Google quite a bit (mainly for some CSS syntax). The feedback from my Bootcamp instructor (Black CodHer Bootcamp!) was also invaluable.
Doing this was a lot of fun, and I'm ready for more!

View the final version
https://zealous-snyder-47096a.netlify.app/

P.s. It's much prettier on desktop mode 😋

Thank you for your time. Please drop your comments below. See you in the next one!

Demystifying your first portfolio UK (including app suggestions)

Sade online — Thu, 06 Jan 2022 22:40:25 +0000

"Portfolio".

This word keeps popping up over and over again. You finally decide to start taking yours seriously as you realise it's one of the most important things to have, to land your first job ... get your foot in the door... get some validation... you get the point😄

A lot (and I mean a lot) of new programmers get stuck on what exactly to include in their portfolio.

In this article, I've done some research so you don't have to. Time to stop feeling overwhelmed and get clarity and direction on your junior developer portfolio.

3 skills every developer should learn

App development (web apps and mobile apps)

Apps are everywhere. Need I say more? Being able to build an app; web or mobile is a fundamental skill to have. To build mobile apps; you could learn Flutter and/ or React Native. For web apps, you could learn React.

However to kill two birds with one stone, React wins as you can learn one framework and build cross-platform apps on mobile and the web simultaneously.

Networking basics

You want to know how HTTP requests work, about clients vs servers, API's (know how they work and how to build them) and JSON.

Databases

“Data is the new oil,” they say.
speaking of data, here are even more compelling reasons to get you some data skills.

companies will most definitely want to explore and make the most use of all that oil.

And so with these three components, you have a full-stack sandwich.

Can you get hired with static sites that don't have much use? ... Possibly. However to optimise your chances, create realistic projects that people could use.

If you can effectively demonstrate these three skills on your portfolio, you're laughing.

P.s. These are also the skills necessary to; not just secure a job, but build a business if you're that way inclined. 😄

Oh, if you were thinking of contributing to open source projects like I was as a brand new programmer... Perhaps hold off on that until you've put together a solid portfolio and are technically able to contribute.

5 Backend-specific technical skills

HTML, CSS, JavaScript
Database skills (those data skills again! Learning some SQL even as a front-end developer will put you in a good position. Periodt)
API's, for example, being able to connect Google Maps to your application.
Good problem-solving skills. You could improve this by doing coding challenges on Leetcode, HackerRank, and Edabit. You could also learn data structures and algorithms, however, this should come once you're comfortable with a programming language.

Two other critical skills needed for your first job (all jobs really) are excellent communication skills and attention to detail. You will be required to communicate with technical and non-technical people from different backgrounds and different walks of life.

It won't be a good look if you turn into jelly on the spot.

You can improve communication skills by having regular conversations with technical people, writing articles and/ or publishing YouTube videos!

You can improve attention to detail by following the best practice and style guide for your chosen stack. Also, aim for clean code where possible.

"Don't leave broken windows (bad designs, wrong decisions, poor code) unrepaired." - The Pragmatic Programmer

Last but not least, your ~~weapon~~ programming language of choice; and the stack surrounding it. For example, if you were to specialise in Node.js, a popular stack to learn is the MERN stack. MERN stands for MongoDB, Express, React, Node, after the four key technologies that make up the stack.

Level	Type of app	Criteria	Number of projects to build
Simple	Digital clock, to-do app, expense tracker	Does 1 - 3 things, no libraries/frameworks used, < 200 lines of code	4 - 8
Intermediate	Classic video games (e.g. pong, snake, Tetris), calculator, web scrapper	Does 5+ things, < 500 lines of code, minimal libraries and frameworks used	3 - 6
Capstone	Social media clone, e-commerce store, chat app clone	Must be interesting!, does a lot of things, uses databases and API's, uses multiple libraries and frameworks, > 500 lines of code	1 - 3

Table showing project types to include in portfolio

Other considerations.

I had started to build my portfolio without really knowing how I wanted it to look. If there's one thing you take away, let it be this: plan how you want your portfolio to look or have a very clear picture.

Finally, your portfolio projects should demonstrate that you add value to your employer immediately. It takes time and resources to train a new programmer... Don't hold back on your skills and what you bring to the table.

Things in tech move extremely quickly. Use the most up to date tech and syntax in your work. Also, do yourself a favour by ensuring whatever you're learning is easy to learn with resources (e.g. source code in GitHub repo) easily available.

Final words and resources used

Last but not least, check out the videos I used as inspiration for this article (and my upcoming portfolio).
Remember you can do this!

https://youtu.be/OPk4Pu97Ndc
https://youtu.be/L9k0Nxxd0Bg
https://youtu.be/RYE0QQKJI9o
https://youtu.be/Wf9oEdT9y4U
https://youtu.be/_Cb7SDwXy9M

Just Do It

Sade online — Sat, 01 Jan 2022 02:41:53 +0000

Doing the same thing over and over again and expecting a different result is insanity - Albert Einstein

Are you insane?

If you're tired of starting over, stop quitting.

Welcome to post #1. It's New Year's Day. Approximately 4 years ago I started my journey into web development - I joined Codecademy and bought Colt Steele's web development course. I even uploaded a video onto YouTube showing off my website marked up in HTML.

But I did what most people who foray into this world do. I gave up.
Why?
Because I couldn't get rich quick. 😭 Don't get me wrong, I was passionate about tech and the internet. I always kept coming back to coding, (believe me, I've bought my fair share of courses) but i wasn't disciplined enough to stick with it.

That was 2017. Fast forward to 2022 and here I am again. This time, I'm all in. I no longer need to get rich quick.

P.s. There's no such thing as getting rich quick... Legitimately at least.

I'm returning to what I'm truly passionate about; Writing, The internet and more recently... Blockchain tech 🔥
Assuming I didn't stop learning, I'm sure my life would be different today.
But I believe everything happens for a reason

I've gone on long enough.
TLDR; If you're walking down the right path and you're willing to keep going, eventually, you'll get there... and re-orientate yourself to what you truly love.

What's to come?

I'll be documenting my journey on all the learnings I learn as I learn - in ~~(hopefully?)~~ a fresh, punchy tone.
For now, these will be HTML, CSS, JavaScript, React, SQL and REST APIs.

Thank you for your time and have a smashing New Year 🔥

Sade