A-Z CAREER PATH IN COMPUTER SCIENCE

The following are the list of careers in Computer Science, all you need to do is to go through it, pick one area, read extensively, and start out your career by pursuing it with all you have got (strength, passion, diligence, determination, skills, talent, etc.)

1. Android / iOS Development
2. Academics
3. Artificial intelligence
4.     Arduino (Software and Hardware)
5.     Blogging and writing articles as related to computer related works and trending issues.
6.     Computer Packages (Microsoft Word, Excel, PowerPoint)
7.     Cloud computing
8.     Consultancy
9.     Information and Cyber Security
10. DevOp
11. Desktop applications
12. Data Communication
13. Database Management
14. Data Science / Data Analytics / Big Data
15. Ethical Hacking
16. Graphics Design (using CorelDraw, PhotoShop)
17. Technical support (Attending to customers request)
18. Multimedia
19. Networking
20. Operating System Scripting (scripting through command prompt for windows, mac, linux using batch script, shell script (unix-style shell scripts)
21. Quality Assurance / Software Testing / Project Management
22. Re-arranging customized desktop and web applications for companies to suit their needs.
23. Software Engineering
24. Telecommunications
25. Technical writer and Trainer
26. Web Development

MY PORTFOLIO HTML CSS JAVASCRIPT

CODE OUTPUT

Objective:

We will create a portfolio using html css javascript

search: fontawesome cdn (content delivery network)

visit

cdnjs.com (i use this)

https://www.bootstrapcdn.com/fontawesome/

<!DOCTYPE html>

<head>

<style>

:root{

--green: #27ae60;

--black: #444;

--light-color: #777;

--bg-color: #e6e6e6;

--border: 1rem solid rgba(0,0,0,0.3);

--box-shadow: .5rem .5rem 1rem #ccc,

-.5rem .5rem 1rem #fff;

--box-shadow-inset: .5rem .5rem 1rem #ccc inset,

-.5rem .5rem 1rem #fff inset;

}

font-family: 'Poppins', sans-serif;

margin: 0; padding: 0;

box-sizing: border-box;

border: none; outline: none;

text-transform: capitalize; text-decoration: none;

transition: 0.3s linear;

}

html{

font-size: 63%;

overflow-x: hidden;

scroll-behavior: smooth;

}

body{

background-color: var(--bg-color);

padding-left: 30rem;

}

/* change the color when switch to dark mode */

body.active{

--black: #fff;

--light-color: #ddd;

--bg-color: #222;

--border: 1rem solid rgba(0,0,0,0.4);

--box-shadow: .5rem .5rem 1rem #111,

-.5rem .5rem 1rem #333;

--box-shadow-inset: .5rem .5rem 1rem #111 inset,

-.5rem .5rem 1rem #333 inset;

}

/* handles the navigation bar */

.header{

position: fixed;

top: 0; left: 0;

z-index: 999;

background-color: var(--bg-color);

width: 30rem;

border-right: var(--border);

height: 100%;

padding: 2rem;

text-align: center;

}

.header .user img{

margin: 1rem 0;

border: 1rem solid transparent;

border-radius: 50%;

height: 18rem; width: 18rem;

box-shadow: var(--box-shadow);

}

.header .user h3{

color: var(--black);

font-size: 2.5rem;

}

.header .user p{

color: var(--green);

font-size: 1.5rem;

}

.header .navbar{

padding-top: 1rem; /* push the nav link down */

}

.header .navbar a{

margin: 1.5rem 0;

padding: .7rem;

border-radius: 2rem;

font-size: 2rem;

box-shadow: var(--box-shadow);

color: var(--black);

display: block; /* puts the nav link in column format */

}

.header .navbar a:hover{

box-shadow: var(--box-shadow-inset);

}

#menu-btn{

position: fixed;

top: 1.5rem; left: 2rem;

height: 5rem; width: 5rem;

line-height: 5rem;

border-radius: 50%;

font-size: 2rem;

cursor: pointer;

box-shadow: var(--box-shadow);

z-index: 1000;

text-align: center;

color: var(--black);

background: var(--bg-color);

display: none; /* hides the hamburger icon */

}

#menu-btn:hover{

color: var(--green);

box-shadow: var(--box-shadow-inset);

}

#theme-toggler{

position: fixed;

top: 1.5rem; right: 2rem;

height: 5rem; width: 5rem;

line-height: 5rem;

border-radius: 50%;

font-size: 2rem;

cursor: pointer;

box-shadow: var(--box-shadow);

z-index: 1000;

text-align: center;

color: var(--black);

}

#theme-toggler:hover{

color: var(--green);

box-shadow: var(--box-shadow-inset);

}

/* each section style */

section{

min-height: 100vh;

padding: 2rem;

}

/* home style */

.home{

display: flex;

flex-flow: column;

align-items: center;

justify-content: center;

text-align: center;

}

.home .content h3{

font-size: 7rem;

color: var(--black);

line-height: 1.5;

text-transform: uppercase;

}

.home .content p{

font-size: 2rem;

color: var(--green);

padding-bottom: .6rem;

}

.btn{

margin-top: 1rem;

display: inline-block;

padding: 1rem 3.5rem;

border-right: .5rem;

font-size: 1.7rem;

cursor: pointer;

background: none;

color: var(--black);

box-shadow: var(--box-shadow);

}

.btn:hover{

box-shadow: var(--box-shadow-inset);

color: var(--green);

}

.home .share{

position: relative;

top: 10rem;

border-radius: .5rem;

box-shadow: var(--box-shadow);

padding: 1rem;

}

.home .share a{

height: 5rem; width: 5rem;

line-height: 5rem;

box-shadow: var(--box-shadow);

margin: .5rem;

font-size: 2rem;

color: var(--black);

border-radius: .5rem;

}

.home .share a:hover{

box-shadow: var(--box-shadow-inset);

color: var(--green);

}

/* about style */

.heading {

text-align: center;

font-size: 5rem;

color: var(--black);

text-transform: uppercase;

padding-bottom: 2rem;

}

.heading span{

color: var(--green);

text-transform: uppercase;

}

.about .row{

display: flex;

align-items: center;

flex-wrap: wrap-reverse;

gap: 2rem;

}

.about .row .box-container{

flex: 1 1 40rem;

display: flex;

gap: 1.5rem;

flex-wrap: wrap;

}

.about .row .box-container .box{

flex: 1 1 20rem;

text-align: center;

padding: 2rem;

border-radius: .5rem;

box-shadow: var(--box-shadow);

}

.about .row .box-container .box h3{

font-size: 5rem;

color: var(--black);

line-height: 1;

}

.about .row .box-container .box p{

font-size: 1.5rem;

color: var(--light-color);

padding: 3rem 0;

}

.about .row .content{

flex: 1 1 40rem;

}

.about .row .content h3{

font-size: 2.5rem;

color: var(--black);

line-height: 1.8;

}

.about .row .content h3 span{

color: var(--green);

}

.about .row .content p{

font-size: 1.5rem;

color: var(--light-color);

line-height: 1.8;

padding: 1rem 0;

}

.about .row:nth-child(3){

padding-top: 2rem;

}

.about .row .progress{

flex: 1 1 40rem;

}

.about .row .progress h3{

color: var(--black);

font-weight: normal;

font-size: 2rem;

display: flex;

justify-content: space-between;

}

.about .row .progress .bar{

box-shadow: var(--box-shadow);

border-radius: 5rem;

height: 2rem;

padding: .5rem;

margin: 1rem 0;

}

.about .row .progress .bar span{

display: block;

height: 100%;

background: var(--green);

border-radius: 5rem;

}

.about .row .progress .bar-1-1 span{

width: 75%;

}

.about .row .progress .bar-1-2 span{

width: 55%;

}

.about .row .progress .bar-1-3 span{

width: 60%;

}

.about .row .progress .bar-2-1 span{

width: 90%;

}

.about .row .progress .bar-2-2 span{

width: 72%;

}

.about .row .progress .bar-2-3 span{

width: 58%;

}

/* services style */

.services .box-container{

display: grid;

grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));

gap: 2rem;

}

.services .box-container .box{

padding: 2rem;

border-radius: .5rem;

box-shadow: var(--box-shadow);

position: relative;

z-index: 0;

overflow: hidden;

}

.services .box-container .box i{

font-size: 4rem;

padding-bottom: 5rem;

color: #fff;

}

.services .box-container .box h3{

font-size: 2rem;

padding-bottom: 1rem;

color: var(--black);

}

.services .box-container .box p{

font-size: 1.4rem;

line-height: 1.8;

color: var(--light-color);

}

.services .box-container .box::before{

content: '';

position: absolute;

top: 0; left: 0;

height: 100%; width: 100%;

background: var(--green);

z-index: -1;

clip-path: circle(9rem at 5% 0%); /* curve green background to the top-left corner */

transition: .3s linear;

}

.services .box-container .box:hover:before{

clip-path: circle(100%);

}

.services .box-container .box:hover > *{

color: #fff;

}

/* portfolio style */

.portfolio .box-container{

display: grid;

grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));

gap: 2rem;

}

.portfolio .box-container .box{

height: 25rem;

border-radius: .5rem;

overflow: hidden;

box-shadow: var(--box-shadow);

position: relative;

border: 1rem solid transparent;

}

.portfolio .box-container .box img{

height: 100%; width: 100%;

object-fit: cover;

}

.portfolio .box-container .box .content{

position: absolute;

top: 0; left: 0;

height: 100%; width: 100%;

background: var(--bg-color);

display: grid;

place-items: center;

transform: scale(0);

}

.portfolio .box-container .box:hover .content{

transform: scale(1);

}

.portfolio .box-container .box .content h3{

font-size: 2.5rem;

color: var(--black);

text-transform: uppercase;

transform: translateY(-5rem);

opacity: 0;

transition-delay: .3s;

}

.portfolio .box-container .box:hover .content h3{

transform: translateY(0rem);

opacity: 1;

}

/* contact style */

.contact form{

margin: 1rem auto;

max-width: 78rem;

border-radius: .5rem;

box-shadow: var(--box-shadow);

padding: 2rem;

}

.contact form .box{

padding: 1rem 1.5rem;

background: none;

color: var(--black);

font-size: 1.6rem;

text-transform: none;

margin: .7rem 0;

box-shadow: var(--box-shadow);

border-radius: .5rem;

width: 100%;

}

.contact form textarea{

height: 20rem;

resize: none;

}

.contact form .box:focus{

box-shadow: var(--box-shadow-inset);

}

/* footer style */

.credit{

font-size: 2rem;

text-align: center;

padding: 2.5rem 1rem;

margin-top: 1rem;

border-top: var(--border);

color: var(--black);

}

.credit span{

color: var(--green);

}

/* media queries */

@media(max-width: 991px){

html{

font-size: 55%;

}

body{

padding-left: 0;

}

.header{

left: -100%;

}

.header.active{

left: 0%;

transition: .5s linear;

}

#menu-btn{

display: initial;

}

@media(max-width: 450px){

html{

font-size: 50%;

}

.header{

width: 100%;

border-right: 0;

}

</style>

<title>portfolio dmac tutor</title>

</head>

<body>

<h3>Theophilus Ajala</h3>

<p>Computer Science Instructor</p>

</div>

<a href="#about">about</a>

<a href="#services">services</a>

<a href="#portfolio">portfolio</a>

<a href="#contact">contact</a>

</div>

</header>

<h3>Theophilus Ajala</h3>

<p>Computer Science Instructor</p>

<a href="#" class="btn">download CV</a>

</div>

</div>

</section>

<h1 class="heading"> <span>about</span> me </h1>

<p>years of experience</p>

</div>

<p>satisfied clients</p>

</div>

<p>working hours</p>

</div>

<p>award won</p>

</div>

<div class="content">`

<h3>my name is <span>theophilus ajala</span></h3>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis

cumque aperiam quaerat inventore hic. Libero blanditiis excepturi itaque, veritatis qui quos quidem,

veniam fugit eum voluptatibus non eaque aperiam mollitia?</p>

<a href="#" class="btn">contact me</a>

</div>

<h3> web design <span>75%</span> </h3>

<h3> graphics <span>55%</span> </h3>

<h3> UI/UX design <span>60%</span> </h3>

</div>

<h3> javascript <span>58%</span> </h3>

</div>

</section>

<h1 class="heading">my <span>services</span></h1>

<h3>web design</h3>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem qui quaerat placeat facilis id unde voluptatibus,

doloribus iure at eveniet delectus, fugit saepe totam repellendus voluptates consequatur adipisci? Hic, assumenda!</p>

</div>

<h3>graphics</h3>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem qui quaerat placeat facilis id unde voluptatibus,

doloribus iure at eveniet delectus, fugit saepe totam repellendus voluptates consequatur adipisci? Hic, assumenda!</p>

</div>

<h3>responsive design</h3>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem qui quaerat placeat facilis id unde voluptatibus,

doloribus iure at eveniet delectus, fugit saepe totam repellendus voluptates consequatur adipisci? Hic, assumenda!</p>

</div>

<h3>digital marketing</h3>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem qui quaerat placeat facilis id unde voluptatibus,

doloribus iure at eveniet delectus, fugit saepe totam repellendus voluptates consequatur adipisci? Hic, assumenda!</p>

</div>

<h3>wordpress</h3>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem qui quaerat placeat facilis id unde voluptatibus,

doloribus iure at eveniet delectus, fugit saepe totam repellendus voluptates consequatur adipisci? Hic, assumenda!</p>

</div>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem qui quaerat placeat facilis id unde voluptatibus,

doloribus iure at eveniet delectus, fugit saepe totam repellendus voluptates consequatur adipisci? Hic, assumenda!</p>

</div>

</section>

<h1 class="heading">my <span>portfolio</span></h1>

<h3>project 001</h3>

</div>

<h3>project 002</h3>

</div>

<h3>project 003</h3>

</div>

<h3>project 004</h3>

</div>

<h3>project 005</h3>

</div>

<h3>project 006</h3>

</div>

</section>

<h1 class="heading"> <span>contact</span> me </h1>

</form>

</section>

let menu = document.querySelector('#menu-btn')

let header = document.querySelector('.header')

menu.onclick = () =>{

menu.classList.toggle('fa-times')

header.classList.toggle('active')

}

let themetoggler = document.querySelector('#theme-toggler')

themetoggler.onclick = () =>{

themetoggler.classList.toggle('fa-sun')

if(themetoggler.classList.contains('fa-sun')){

document.body.classList.add('active')

}else{

document.body.classList.remove('active')

}

</script>

</body>

</html>

Shortcuts

To create id css selector and a div automatically

Type #id-name and press the tab key, for example #navbar

To create class css selector and a div automatically

Type .class-name and press the tab key, for example .navbar

To check the effect of media query

Right click the browser, select inspect

Then adjust the browser to any size of your choice

To create a particular type for input element

For example, <input type="submit" value="" class="btn">

Type

input:submit.class (we can do same for email, file, password etc)

To change the position of inspect tool panel

If you want to change the location of the panel, click the three-dots icon in the top right corner of the panel (next to the X icon), then choose your preferred dock position.

press minimize tab of the browser, so as to adjust the browser box on the screen

You can also inspect each element in the flex container > right click and select inspect

NON-RESPONSIVE CONTACT FORM

OUTPUT

CODE

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

label{

width: 100px;

display: inline-block;

margin: 5px;

}

#form{

border-radius: 10px;

background: purple;

color: #fff;

width: 300px;

padding: 5px;

margin: 100px;

}

h2{

text-align: center;

}

#submit{

width: 50%;

margin-top: 10px;

}

</style>

</head>

<body>

<h2>Student Login</h2>

<label for="">Email</label>

<label for="">Phone</label>

</form>

</div>

</body>

</html>

Contact Us page -nonResponsive

output

code

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0; padding: 0;

box-sizing: border-box;

font-family: 'Poppins', sans-serif;

}

.contact{

position: relative;

min-height: 100vh;

padding: 50px 100px;

display: flex;

justify-content: center;

align-items: center;

/* flex-direction column remove the shape in row format */

flex-direction: column;

/* background: url(images/location.png); */

background-color: blueviolet;

}

.contact .content{

max-width: 800px;

text-align: center;

}

.contact .content h2{

font-size: 50px;

font-weight: 500;

color: #fff;

}

.contact .content P{

font-weight: 300;

color: #fff;

}

.container{

width: 100%;

display: flex;

justify-content: center;

align-items: center;

margin-top: 30px;

}

.container .contactinfo{

width: 50%;

display: flex;

flex-direction: column;

}

.container .contactinfo .box{

position: relative;

padding: 20px 0;

display: flex;

}

.container .contactinfo .box .icon{

min-width: 60px;

height: 60px;

background: #fff;

justify-content: center;

align-items: center;

border-radius: 50%;

font-size: 22px;

}

.container .contactinfo .box .text{

display: flex;

margin-left: 20px;

font-size: 16px;

color: #fff;

flex-direction: column;

font-weight: 300;

}

.container .contactinfo .box .text h3{

font-weight: 500;

color: #00bcd2;

}

.contactform{

width: 40%;

padding: 40px;

background: #fff;

}

.contactform h2{

font-weight: 500;

color: #333;

font-size: 30px;

}

.contactform .inputbox{

position: relative;

width: 100%;

margin-top: 10px;

}

.contactform .inputbox input{

width: 100%;

padding: 5px 0;

font-size: 16px;

margin: 10px 0;

}

</style>

</head>

<body>

<h2>Contact Us</h2>

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic nulla, esse consectetur

perferendis deserunt exercitationem dolorum quam maiores cupiditate amet labore expedita perspiciatis ab iure aspernatur fugiat libero molestiae repellendus?</p>

</div>

<h3>Address</h3>

<p>20, Allen Avenue, <br>Lagos, Ikorodu</p>

</div>

<h3>Phone</h3>

</div>

<h3>Email</h3>

<p>ajalabamiset@gmail.com</p>

</div>

<h2>Send Message</h2>

</div>

<span>Email</span>

</div>

<span>Message</span>

</div>

</div>

</form>

</div>

</section>

</body>

</html>

Contact Us page: Responsive

OUTPUT

CODE

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0; padding: 0;

box-sizing: border-box;

font-family: 'Poppins', sans-serif;

}

.contact{

position: relative;

min-height: 100vh;

padding: 50px 100px;

display: flex;

justify-content: center;

align-items: center;

/* flex-direction column remove the shape in row format */

flex-direction: column;

/* background: url(images/location.png); */

background-color: blueviolet;

}

.contact .content{

max-width: 800px;

text-align: center;

}

.contact .content h2{

font-size: 50px;

font-weight: 500;

color: #fff;

}

.contact .content P{

font-weight: 300;

color: #fff;

}

.container{

width: 100%;

display: flex;

justify-content: center;

align-items: center;

margin-top: 30px;

}

.container .contactinfo{

width: 50%;

display: flex;

flex-direction: column;

}

.container .contactinfo .box{

position: relative;

padding: 20px 0;

display: flex;

}

.container .contactinfo .box .icon{

min-width: 60px;

height: 60px;

background: #fff;

display: flex;

justify-content: center;

align-items: center;

border-radius: 50%;

font-size: 22px;

}

.container .contactinfo .box .text{

display: flex;

margin-left: 20px;

font-size: 16px;

color: #fff;

flex-direction: column;

font-weight: 300;

}

.container .contactinfo .box .text h3{

font-weight: 500;

color: #00bcd2;

}

.contactform{

width: 40%;

padding: 40px;

background: #fff;

}

.contactform h2{

font-weight: 500;

color: #333;

font-size: 30px;

}

.contactform .inputbox{

position: relative;

width: 100%;

margin-top: 10px;

}

.contactform .inputbox input,

.contactform .inputbox textarea{

width: 100%;

padding: 5px 0;

font-size: 16px;

margin: 10px 0;

border: none;

border-bottom: 2px solid #333;

outline: none;

resize: none;

}

.contactform .inputbox span{

position: absolute;

left: 0;

padding: 5px 0;

font-size: 16px;

margin: 10px 0;

pointer-events: none;

transition: .5s;

color: #666;

}

/* makes the text (full name, email...) fly up */

/* valid function holds the text at the top */

.contactform .inputbox input:focus ~ span,

.contactform .inputbox input:valid ~ span,

.contactform .inputbox textarea:focus ~ span,

.contactform .inputbox textarea:valid ~ span{

color: #e91e63;

font-size: 12px;

transform: translateY(-20px);

}

.contactform .inputbox input[type="submit"]{

width: 150px;

background: #00bcd4;

color: #fff;

border: none;

cursor: pointer;

padding: 10px;

font-size: 18px;

}

@media(max-width: 991px){

.contact{

padding: 50px;

}

.container{

flex-direction: column;

}

.container .contactinfo{

margin-bottom: 40px;

}

.container .contactinfo,

.contactform{

width: 100%;

}

</style>

</head>

<body>

<h2>Contact Us</h2>

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic nulla, esse consectetur

perferendis deserunt exercitationem dolorum quam maiores cupiditate amet labore expedita perspiciatis ab iure aspernatur fugiat libero molestiae repellendus?</p>

</div>

<h3>Address</h3>

<p>20, Allen Avenue, <br>Lagos, Ikorodu</p>

</div>

<h3>Phone</h3>

</div>

<h3>Email</h3>

<p>ajalabamiset@gmail.com</p>

</div>

<h2>Send Message</h2>

</div>

<span>Email</span>

</div>

<span>Message</span>

</div>

</div>

</form>

</div>

</section>

</body>

</html>

To change the position of inspect tool

If you want to change the location of the panel, click the three-dots icon in the top right corner of the panel (next to the X icon), then choose your preferred dock position

W.I.P on icon

search: font awesome cdn

visit: https://www.bootstrapcdn.com/fontawesome/

from above

click the down arrow, copy the text within the html box

the recommended cdn for boostrap, font awesome, bootswatch, boostrap icons

for icon

search: font awesome 4.7 icon

visit: fontawesome.com

type what you want to search in the search box

for example; map (> map-marker) > right click open in new tab > copy the code

for example; phone (> phone) > right click open in new tab > copy the code

for example; map (> envelope-o) > right click open in new tab > copy the code

CLICK HERE TO SEARCH

Ajala (dmactutor) teaches STEM & Computer Science Courses

A-Z CAREER PATH IN COMPUTER SCIENCE

Comments

Post a Comment

Popular posts from this blog