Check out my journey from an absolute beginner learning to code two months in
Tags: webdev, beginners, css, codenewbie
Published: 2022-08-01 01:15:00

learning to code hasn't been easy it takes a lot of hardwork, determination, consistency to pull it off but its also fun learning and I am so excited to get really great at it.


##My first ever projects

This was the first project I made after learning the basic of html like html links, html images, html headings, and some inline css styling like background color, border, text color.

![html code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kdem8c5yb439lshfmqc5.jpg)

I then went further to learn more inline styling properties and values and also some more html like html lists, html tag attributes, html form and html button.


![webpage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/crqqf4u0s9o5j7of05v9.jpg)

##After weeks of learning

At this point I had memorized almost all the html tags and a lot of simple css properties. 

I had just learnt html tables and a few more css properties so I decided to explore and use my imagination to build a webpage and I added a navigation to it.
 

![webpage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c0itjtlc1iwpf2f9k86e.jpg)

looks pretty nice given my knowledge then I think I showed signs of good creativity on the design front given I had no knowledge of design at all and I was basically trying out all the css properties I knew.

I also decided to try to make a log-in page and it wasn't hard to make at this point although I know I broke a ton of design rules but again I think I showed some brilliance on the design front given the knowledge I had then.


![login page ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2c1nfjtvuo4btk9gqo1y.jpg)


![sign up page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5sz04s5lsmwuuh74zgct.jpg)

Went on to learn how to make layouts with css

##Learning css layouts

###First with floats


![floats webpage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ehwzflfcmhvmv7uh0vn.jpg)

###Then css flexbox


![flexbox webpage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6376o7mv7g86j1msoedk.jpg)

###Then css Grid


![grid webpage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7kfjdyihw7xsemylhuv6.jpg)

Then I learnt a little bit about design and user interface 

I built this web page for learning from the little knowledge of design I had with rules like typography, visual hierarchy and so on.

![webpage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sdy07vamh5n2ecglwww9.jpg)
![webpage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ti8q9hfnh1owu7c9tjp3.jpg)
![webpage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gug6ieao8wehiatx59m9.jpg)

##I went on to learn more components of a landing page like :

###Accorrdion

![accordion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vfmdebt0yzxj37ci8mcz.jpg)

###carousel

![carousel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tw0oomgd6ni6qckso1ar.jpg)

###Tables

![Tables](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bpd4w92wujlq6zkpt89t.jpg)

I made this with html tables and css grid to challenge myself

###pagination


![pagination ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z1mn6x8cv9aki68ahd2k.jpg)

and finally

###Hero section

![hero](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9zcm2r7j8g2d4992imx9.jpg)

##I dabbled a little bit in Javascript here are some of the projects.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mk7otbfy95wmm1kzagyb.jpg)
###people counter app


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2o7nknot79y2wcj8sizz.jpg)
###Calculator



**
It is important to celebrate progress however little and follow your own timeline and not some unrealistic claims on the internet.
I had some help with personal tutoring and from Jonas schmedtmann courses on udemy.

Thanks for reading I wish you Goodluck as you continue to learn**