How I made my CSS Remote Workspace with The Little Human

Stephanie Okolie — Wed, 22 Sep 2021 22:35:04 +0000

Since I started learning software development, I have cloned sites like Twitter, Email, and others, but my biggest challenge was making my own design with CSS and HTML. First, I thought about designing a human look-alike with CSS.
 
I had been trying to do this for a long time. My first trial ended in a disaster as I tried to create a head shape that looked far from what I had imagined.
 
After so many trials that did not work, I decided to pause until one day, as I sat in front of my computer, a tweet popped up on my screen; someone I was following had designed a project with CSS that was so good.
 
After the tweet, I said to myself, 'no, if this person can make a design like this, you bet I can too.' I started thinking about circles. And after that, I thought about more circles until further thoughts started flowing in my head as ideas.
 
Then, I had an epiphany: the human head is a circle-like shape, some are diamond and some are oval. If I can create a circle with CSS, I can achieve my goal the same way.

I immediately logged into chrome and Googled How To Make CSS Shapes. The results brought many answers to my screen.
 
One was from w3schools.com, while the other was from CSS Tricks. After binge-learning on these sites, I achieved a head shape with eyes and other attributes that form the head.
 
The eyes shape was achieved using an oval shape with a much smaller width and height. Then I browsed for human eye colour in hex code; many colour options came up as usual, and I selected the ones I wanted to use for my code.
 
Best to know that Instead of creating too many divs for one object like for the eyes, you know in the eyes, we have the white part, the brown part, and the black part. So instead of creating three divs for these three elements, I made one div for them. Using before and after for that div as shown below.

.eyes{
Add preferred styling here
}

.eyes:before{
Add preferred styling here
content: "";

Without this content:" ", these styles will not be added to the output of your code. Always remember this.

You can also use z-index. This z-index helps to show your style below or above another style.
 
Like this :before, You can also use :after the same way as .eye:before { }
 
The hair of my human was made using separate :before and :after divs for each fringe. Both height, width, border-radius and background colour were also used as below:

.full-fringe{
position: absolute;
top: 30px;
left: 605px;
margin-left: 94px;
width: 150px;
height: 150px;
border-top: #2e1103 solid 20px;
border-radius: 24px 50px 0px 0px;
transform: rotate(-90deg);
}

I aligned each object by positioning them.

I used relative positioning for the parent div, and I positioned the child div with absolute positioning. Then I adjusted the top, left or right.

See below:

position: relative,
top: 10px or -10,
Left: 10px or -10.

 
To get the perfect shape to the taste of your liking, I used transform property. To skew or to rotate the object in different degrees for a certain style type.

Like this: transform: (rotate 20 deg) or (-20deg, whichever one you like)
 
I gave the neck a background colour that is the same as the head, hands, and fingers. The pants and shoes all have a different colour.

And after everything, may I introduce you to my Remote Workspace with one of my favourite humans?
 
I would like to mention here that I make Google my friend. I have learnt to never dawdle when I'm stuck but to Google. Someone like me must have had a similar problem and written about it, just as I am sharing my experience with you. Don't call it quits, rather ransack the internet and make use of the resources on there.
 
And a final one: when I'm frustrated with my code, I try to channel my anger to make cool things I never knew I could do, just like this article I'm working on or when I made my first clone. I remembered how mad I was, but instead of throwing shits and stuff, I channelled them into my code and made something really nice out of it

Thank you.

You may check out my other works on my GitHub page or CodePen. Please, comment and let me know what you think.

My Internship Goals for the HNGi8 Program

Stephanie Okolie — Sat, 21 Aug 2021 17:34:44 +0000

Before October 2020, I never would have imagined a girl like me could write codes. I started learning to code in October last year, and this period has been an exciting phase of my life.

I love learning. I enjoy writing codes as much as I love writing. I am confident that I would be more proficient in software engineering at the end of this program.

If I could go back in time, I would tell my younger self that I could do anything I set my mind to and that anyone could be an engineer.

I would love to get the experience I need to get set in the tech industry; this experience would help me learn more about working in a community of tech-related people.

This program would add a lot to my experience as I push to perfect my skills in software engineering.

My goal for this internship program is to

Improve my coding skills.
Improve my communication and collaboration skills.
To make progress towards my track as a Software Engineer.
Gain more experience of working in a community of tech-related people.
By the end of 8 weeks, I would have achieved a wider knowledge and be in a better position than I was before I started this program.

Through this internship, I hope to teach young people that it is not impossible to write codes, and all that's needed is to believe in themselves and have the determination and perseverance to push through. I hope to make resources readily available for anyone who has the interest to learn software development.

See below some noteworthy tutorial references:

Figma is one of the hot interface design application tools out there. It's made for collaboration and working with others on digital-based projects.
Here is beginner tutorial for designing with Figma
HTML is the standard markup language for Web pages, with HTML you can create your own Website.
HTML is easy to learn!
Here is a tutorial link link for HTML.
Git is a version-control system for tracking changes in computer files and coordinating work on those files among multiple people.
tutorial link link for Git
JavaScript is the world's most popular programming language.JavaScript is the programming language of the Web.
tutorial link for js
Youtube tutorial link for basic training in JavaScript
Node.js is an open source server environment. Node.js allows you to run JavaScript on the server.
tutorial link link for basic training in node.js. Video tutorial for basic training in node.js

DEV Community: Stephanie Okolie

How I made my CSS Remote Workspace with The Little Human

My Internship Goals for the HNGi8 Program