DEV Community: Adnan

Day 7 of #100DaysOfCode Variables and numbers

Adnan — Fri, 24 Dec 2021 10:51:23 +0000

Introduction

Today marks a week since I started the #100DaysOfCode challenge, I have been able to learn a bit of HTML and CSS specifically, how to lay out different things with flexbox, which came in real handy in order for me to progress and solidify my knowledge of the pillars of the web, Today I was introduced to javascript, now I would be lying if I said that this is the first time I touched on javascript but surprisingly enough I was amazed by some basic things that i was not aware of, I'm very excited about how much this journey has to offer and how much concepts I will be able to grasp going through all of it, some things are still a bit blurry and I can't seem to grasp them or pick them up instantly, but all things aside, I really love the javascript language and it's history, and hopefully I will be able to contribute to the community in the upcoming near future, to keep this short I'm going to talk about what I did today, what I found really hard to grasp and I will include a Q&A in the last section of this article to come back to it later.

What I did today

As I mentioned yesterday, I completed the landing page project from top's curriculum with most of the sections styled using only flexbox, which was annoying at first but As soon as I got through the first couple sections the other ones felt like a breeze even though I did stutter in some of them, Obviously next up on the foundations course is another Pillar of the web, javascript or commonly known as our good old friend JS, as I said in the introduction section, I was pretty excited to start this part of the path, I very much like the javascript language, but i was amazed by how detailed and well structured the resources top's curriculum provided, don't get me wrong though, I am not a complete beginner, I did play around a bit with C and PHP and just a little small tiny bit of javascript last Year got my feet wet a little bit so to speak, but I never really stuck with anything to be a master of it nevertheless, that is solely the whole reason why I started this challenge, to wrap up what I did today, I briefly went over Variables, JS data types, operators and arithmetic operators, the difference between the three ways you could use to declare a variable, naming conventions of variables, what are the difference between operand and operators, how string concatenation work, operator precedence values, the unary operator, along with some other things, I was fascinated by how much knowledge I was lacking, I still can't grasp some types of operators, but I will keep revisiting these subjects until I fully grasp these concepts and move on to more complex things like objects and prototypes.

Q&A time

below you will find a list of Questions that are from top's curriculum that I and the experts on top believe are required concepts to kickstart your Javascript journey, if you couldn't answer, Do not worry or undervalue yourself, this is what I was talking about when I said that I was fascinated by how much knowledge I was lacking, so to keep this short here's a list of all the questions:

Name the three ways to declare a variable?
Which of the three variable declarations should you avoid and why?
What rules should you follow when naming variables?
Explain the difference between == and ===?
When would you receive a NaN result?
How do you increment and decrement a number?
Explain the difference between prefixing and post-fixing increment/decrement operators?

Please spend some time reading through these questions, bring up your developer console and toy with js a little bit to get a grasp on how these things work, you will find the answers to this Q&A in the the last section.

Conclusion

I'm excited to carry on my learning journey and get a grasp of how javascript works, as always this has been ad until we meet again, Happy Coding!

Answers to Q&A :

Name the three ways to declare a variable?

answer: there is three ways to declare a variable in javascript, the old school way with the keyword var , the new keywords in town let and const. it is recommended that you always use let and const.mainly because the old keyword is only "function-scoped" and that can produce some unexpected behaviors for your variables.

Which of the three variable declarations should you avoid and why?

answer: it is recommended that you always use let and const.mainly because the old keyword is only "function-scoped" and that can produce some unexpected behaviors for your variables.

What rules should you follow when naming variables?

answer: a variable should have a clean, obvious meaning, describing the value that it stores, thus you should always spend time thinking about the right name for a variable before declaring it.

Explain the difference between == and ===?

answer: these are known as equality operators, it is recommend to always use the strict equality operator "===" to make your program less prone to error as it compares both the value and the data type compared to the loose equality operator that checks only if the values are the same.

When would you receive a NaN result?

answer: when you try to execute an illogical arithmetic operation like 'name' / 3, you cannot divide a string by a number , NOTE : NaN is sticky so any operation that has one operand as NaN will return Nan.

How do you increment and decrement a number?

answer: using the increment operator "++" and the decrement operator "--".

Explain the difference between prefixing and post-fixing increment/decrement operators?

answer: Postfix decrement operator means the expression is evaluated first using the original value of the variable and then the variable is decremented(decreased). Prefix increment operator means the variable is incremented first and then the expression is evaluated.

Day 6 of #100DaysOfcode hello javascript

Adnan — Thu, 23 Dec 2021 09:25:08 +0000

Introduction

this is my 6th article following the previous ones, for a quick recap, i'm a web development student who's been on and off the learning to code path for the past year, i came across the famous #100DaysOfCode challenge and decide to finally focus solely on webDev, learning the fundamentals through TOP's curriculum, i decided to stay committed this time by writing articles for every day of the challenge.

Where i left off

Yesterday i started working on a landing page project from the foundations course, i won't say it was pretty easy but considering i'm already familiar with html and css, it was really nice to work on, i did struggle a bit with lining up things correctly in the html, and some styling but i believe i did solidify my knowledge a bit considering all that flexbox training from the previous days of challenge, it really comes in handy i cant not recommend it, so i did finish through most of the landing page with just one more section to work on and lastly the footer, it took me a day to complete it, i know i know, it's pretty slow and unimpressive but i still very much consider myself a beginner and taking this slowly to solidify my knowledge and not make the same mistakes during last year, where i kept jumping from course to course, resource to another, to this code challenge, learning php here and javascript there, which ultimately only left me really confused with no real fundamental knowledge, but here we are now.

what i did

as i mentioned in the last section i had to work on the next section followed by the footer, it was a bit easier compared to the other sections of the page, if i'm being honest working on the header was the hardest part even though it does look like a real simple header at first i still did struggle and it took me the most time to complete, nevertheless i was pretty proud of myself for what i could accomplish on my own, it was the first time i felt that i built something for real without following the course instructor, for this very reason i'm growing fondly of TOP's way of teaching, no hand holding no walkthrough tutorials, just you and a text editor and a ton of resources, now let's drift back i worked for an hour on the last section and the footer, and i was so excited to move to the next lesson on the foundations course, a lesson that introduces you to javascript, now the real fun begins and i can't wait to progress more in one of the web biggest pillars, i'm going back to my hometown this weekend and i can't wait to be home and solely focus on this part of the course, i started reading a bit about Variables in javascript and naming conventions, then followed up by arithmetic operations, i really appreciate all the resources TOP is able to be provide, gotta love something that's built by the community for the community.

today's plans

i know that this article should have been posted yesterday,but i'll try to do better and stick to posting on the challenge day, for today i'm going to go over the rest of the lesson, and try to work on the assignments that are usually attached by the end of each lesson to check one's knowledge and solidify it, if i have some time left i will watch the rest of cs50 lecture that i started, and finally play some more flexbox zombies just to make sure i covered all that is there to cover regarding flexbox, i will keep you posted and as always Happy coding!

Day 5 of #100daysOfCode, a simple landing page

Adnan — Tue, 21 Dec 2021 21:17:38 +0000

table of content

-Introduction

-Landing page project

-How I tackled the project

Introduction

today marks the fifth day since I started the #100DaysOfCode challenge, it's pretty early to speculate and start feeling proud of one's self I know, but I really feel like I got pretty comfortable using flex and it's properties to be able to structure a simple landing page, or that was my first thought initially when I first had a glance at the expected outcome, as always here's a link that will take you to top's landing page project, I mentioned in the previous article that I couldn't wait to get my hands on the project and start as soon as I can but I also mentioned that I had to present a slideshow that I prepared yesterday about JWT you can view it here if you'd like to check what it's all about, my presentation went well, there were a couple questions here and there that I couldn't wrap my head around at first, but with more context provided I was able to sweep through and answer most of them, I Spent the rest of the day working on the landing page project from top's curriculum.

landing Page Project

I started working on the project shortly after finishing my presentation, I went ahead and made a repository and set up everything on github, cloned it into my local machine and started working, I really liked this assignment from the odin project, you start completely from scratch, no provided files, just an output image to base the project on :

and another one for fonts and colors and such:

so as you can see there is no hand holding in this project, which is a thing that I was excited about since i've always had my hand held by online tutorials or courses that I previously completed.

How I tackled the project

I started by creating and index.html file and link to another file called style.css and made an image directory to store images in in the same project folder structure, it was recommended to tackle it section by section, for example start with the header style it, then move to the content style it and so on, you get the idea, i imagined this would be pretty easy but it's lunch break already and i had just finished working on the header both its markup and style sheets, i did face some difficulties and went to google and stackoverflow, MDN docs aswell but i really felt like i was pretty comfortable using flexbox, specially after playing flexbox zombies everyday and reading about it on css tricks and other resources, i'm almost done i have two more sections call to action section and the footer, so here's a picture of where i left off

as you can see it took me a full day pretty much to go through all this, it might take some of you less, some more however it's not a criteria to base your progress on, i will carry on to finish it tomorrow and move on to study javascript on top's curriculum, which is something that i'm really excited about, as always i hope you enjoyed this article and happy coding!

day 4 of #100DaysOfCode, more flexbox

Adnan — Mon, 20 Dec 2021 21:57:42 +0000

today's article is going to be really quick and short, as i haven't really dedicated much time to work on the challenge, i carried on some more checking and reading articles from MDN, and other resources provided by TOP's curriculum, i was assigned by my professor to make a presentation for tomorrow, about the JWT(JsonWebToken), which is a pretty advanced concept if you're still considering yourself as a beginner, i advise you not to look into it, if you are still in the early stages of your path, but don't worry we will all get there with time, my day basically consisted of working on the project assigned to our class, which requires us to create a todo list using native nodejs and connect it to a mysql database, again i do not advise you to look into this just yet, avoid the same mistakes i made and stay on your path, always remembering that consistency is key and compare yourself to who you were when you first started or at least ask yourself everyday how did i improve from who i was yesterday, most of my day went into doing research for the presentation i have for tomorrow, i haven't finished yet, but i decided to take a break and write this short article.

i was also able to sneak a small hour into practicing my front-end skills, carrying on playing some other chapters from the game i started yesterday, flexbox zombies, which is available on mastery, you do need to create an account in order to start playing, i'm not sure if i could count the time spent playing into the challenge but i do feel like it was a better practice for sharpening my flex skills, upcoming on top's curriculum is a landing page project, with no hand holding from the foundation course, i'm pretty excited about it and can't wait to report the progress to be made, until then Happy Coding!

Day 3 of #100DaysOfCode css Holy-grail-layout

Adnan — Sun, 19 Dec 2021 18:30:53 +0000

day 3 of 100 days of code

Today was the third day for me of the challenge, luckily it's Sunday and i don't have much chores to do, so I decided to invest most of the free time i'm able to provide for the challenge, the last challenge was to replicate a google-clone layout using only flex and its properties, the next challenge was to use flex to style up a holy grail layout, for those of you who don't know what this is, simply put The holy grail is a web page layout which has multiple, equal height columns that are defined with CSS the various ways it could be implemented had some drawbacks over the years, but since the exercises focus on flexbox, it was obligatory to obtain the results using only flex, the layout usually looks a little something like this :

However the expected output of the layout exercise looks something like this:

now it's relatively easy to define a layout like this using CSS, but as someone who hasn't practiced his front-end skills often and not so much with flexbox either, it took me almost all day to figure out how to exactly style this layout, i even went on to ask for help on top's discord server, thankfully the community is full of people who'd like to help, that is if you provide good context for your problem and not just straightforwardly ask for a question, the previous top's lessons made sure to clarify that, if you'd like to read more on how to ask effective questions related to programming or coding in general the following article from FCC(FreeCodeCamp) provides some good insights on how to do so, having said all that after some hints from the loving community, i figured out how to wrap the cards in the layout as the problem that kept me from reaching my goal, was simply due to me being unaware that the cards did not have any fixed height or width defined to them, which ended up causing a big problem for me as the cards did not wrap even after setting flex-wrap to wrap on their parent container.

i will keep this article short and simple, so to wrap it up here's what i did throughout the day:

woke up at 9 am started working on the flex layout
made breakfast at 11 am and took a break from code
did some laundry made coffee and then went back to dig in
took a break from coding and went back to watch some of CS50 introduction to computer science videos
finally solved the problem and matched the expected outcome from the exercise.
played some more with flexbox zombies which is a mini game that teaches you how to use flexbox

so that wraps up how my day went as you can see this article isn't as long as the previous ones, but i'm staying committed to posting about every day of this challenge, thank you for reading or glimpsing through some article, and as always Happy Coding!

Day 2 of #100DaysOfCode, google-clone flex layout

Adnan — Sat, 18 Dec 2021 20:05:30 +0000

Introduction

it's me again with another report from the second day of 100 days of code challenge, i haven't posted yesterday, i know i know what's the point of this challenge if you can skip days, well to clarify, within the rules you can skip a day as long as you do skip just one day and not any longer, i had a pretty busy schedule yesterday but i'll try to sum it up below in the next section, i was pretty busy with school and couldn't squeeze any time for my challenge, merely because i had french classes and had to prepare for them and sleep before the time i'm used to, to attend the said classes.

What i did yesterday

preparing for the nodejs event

in the morning i had to read up a bit in the nodejs docs as i have mentioned in earlier posts, we're studying javascript and we are starting with server side first before moving back to the front end and study a bit on react and have hands on practice with both of them.

the NodeJs event

in the evening the nodejs event started hosted by one of our classmates who is a 19 year old boy from a city not far away from mine, also happens to be experienced in javascript in the last 6 years, and merely self-taught, he was able to provide us the newbies with an introduction on nodeJs, how it works behind the scenes and how it came into existence, i was fascinated by the event loop that node uses and the libuv library that's provided along with most of the v8 engine utilites, i did read up about node before hand but having someone who has hands on experience with a subject provides you with some things that would take you forever to grasp going on the self-taught path, nevertheless this only motivated more as they say the more you know, the more you don't know.

Today(Day2 of the challenge)

today aswell was just like day 1, all about flexbox, i did feel proud of myself going through the css exercises, it still is pretty frustrating when you feel like you hit a dead end after an hour or two has passed and i'm still not capable of completing the first few assignments, i might take a break or go for a walk, clear my mind and come back with a fresh perspective and try again but it's not quick it, couple breaks later, i hit the jackpot i was able to replicate a google like homepage, to be specific it's the flex layout exercise from the css exercises on the odin project, you can find the repo here.

my progress

i can't really determine or limit myself just yet, i do feel like i'm progressing but pretty slowly and due to the fact that i have school and on a busy schedule makes it a little tiny bit harder, but it gets easier, you just have to do it everyday, that's the hard part, but i will keep posting daily updates and try to stay on a streak everyday

what else am i doing right now

i'm also taking up cs50 course to understand technology a little better, even though i have been around computers for most of my life, i still feel like there's a lot of levels of abstraction that i have to uncover, and i'm planning on doing that slowly but surely, i dont do much during my days, simply because school takes most of my time and the rest is either to gather more information or follow the the top curriculum, i'm satisfied with the results of the effort and time i put in lately.

Conclusion

i do apologize for the delay, but i will try to be on time on most of the days of this challenge, and hopefully lookback and remember this journey,i wish you good luck wether you are at the beginning of your path, end, or somewhere in the middle, i've only been here a few days and noticed the great support from the community, i'm also excited to grow and give back in my own way, until the next read, thank you for taking time to ready this article, you can find me or contact me directly here. Happy Coding !

Day 1 of #100daysofcode: yay flexbox!

Adnan — Thu, 16 Dec 2021 16:20:11 +0000

First day of 100 on TOP curriculum.

Points of this article:

what i'm doing today.
my first flex real challenge
Q-A
answers to QA
conclusion

if you're confused by what this is, i recommend you read my previous article:100 days of code after 1 year of uncertainty, to have a better understanding of what is this about.

what i'm doing today:

As you know, today is my first day in doing the 100daysofcode challenge, as i had previously worked on some of top's foundation sections i was really stuck on flexbox section, now don't get me wrong, spoiler alert i did solve it in the end after spending almost an hour on it.

my first flex real challenge

when considering the one hour i spent working on it, it's not as bad as i estimated ill stay on it, but that's not the whole truth i was stuck on it since last saturday and was jumping back and fort between school assignments and this modal(pop-up) that should be implemented using only flexbox, below is an image of the expected outcome:

and here's my results after 1 hour of digging and trying different approaches with flexbox:

as you can see it's not 100% accurate, but i thought my results were acceptable and decided not to beat myself much over it, after finishing and reviewing the solution suggested by TOP, i felt like i was running around in circles when the solution consisted of only a few lines of css and containing or grouping html elements to play with them using flexbox.

i'm still skeptic and have mixed feelings when i'm working through some code but i noticed things went a little smoother everytime i stayed consistent and trying different approaches
you can find these challenges on top's curriculum or just by forking their CSS exercises repository.

Q-A

in this section, i will list a couple of questions from top to test out my flexbox knowledge later on or if you wanna have some fun and see how much flex properties you really know

What’s the difference between a flex container and a flex item?
How do you create a flex item?
What are the 3 values defined in the shorthand flex property?
How do you make flex items arrange themselves vertically instead of horizontally?
In a column flex-container, what does flex-basis refer to?
In a row flex-container, what does flex-basis refer to?

answers to these are at the end of the article.

Conclusion

So that was that for the first day of the challenge, i tried to squeeze some time without counting the time spent reading articles or watching introduction videos, according to the challenge you should only count time that you spent coding or trying to solve different challenges using code, i may not keep posting daily but i will most certainly try, as i'm trying to balance back and forth between blogging, squeezing time for the challenge and keeping up with the school(bootcamp) curriculum we are currently working on a nodejs app but i'm certainly taking my time going over the basics with top, for a quick refresher check the article or day 0 of my challenge.

Answers to Q&A:

What’s the difference between a flex container and a flex item?

answer: a flex container is any html element that has the display property set to flex, a flex item is a direct child of a parent that is a flex container:

element {
display: flex;
}

How do you create a flex item?

answer: following up after the first question a flex item is created when you set it's parent element display's property to flex.

What are the 3 values defined in the shorthand flex property?

answer: the flex property is a shorthand for 3 properties flex-grow: defines how much the item set to can grow off the flex-basis , flex-shrink, defines how much an item can shrink if the parent container can no longer fit its original width,
and lastly flex basis which is set to 0 by default

so by that we conclude that flex:1 0 auto;
is equivalent to

flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;

How do you make flex items arrange themselves vertically instead of horizontally?

answer: You can set the flex-direction property in the flex container to column to arrange the flex items(it's children) by default it's set to rows, you can also use row-reverse or column-reverse

In a column flex-container, what does flex-basis refer to?

answer: the flex basis refers to the main axis in the case of a flex container having flex direction columns will switch the main axis to top to bottom instead of left to right

In a row flex-container, what does flex-basis refer to?

answer: the opposite of the previous answer, the main axis is now set to left to right and the cross axis is top to bottom this is the default behavior and it changes when you change your flex direction to column so make sure you spend enough time to absorb this.

thank you for reading this article, and as always please reach out to me here for any questions or discussion.

#100 days of code after 1 year of uncertainty

Adnan — Wed, 15 Dec 2021 13:39:54 +0000

Why i'm doing this.

before any of that, an introduction.

my name is adnan, but you can refer to me as ad, i'm a twenty-three year old from morocco, i'm an aspiring it enthusiast and has always been fascinated by information technology and how it influenced my upbringing, i'm also a cancer survivor two years free almost, a bookworm and i recently went a school that is very much like your regular webdev bootcamps.

Back to the why

i have never written a blog before in my life, haven't cleared that out this article may seem a bit sloppy but hit a sweet spot if you related to my experience or going through it right now, i mainly decided to this for myself (sorry if misinterperted) i want to track my journey starting today and this is the first blog that will have many follow ups, now let's get to the real reason why, recently i joined a webdev bootcamp one of the firsts in our country as this concept is still completely new, having dropped out of school back when i was 16, i never graduated high school and spent most of my time laying on the couch watching tv, reading manga or books,
back in December of 2019 i was diagnosed with a hodgkin's lymphoma classic stage 4 cancer, in regular english my white blood cells sort of had cancer cells, loads of them, i went through treatment and eventually was cancer free by august 2020 i joined this bootcamp by january 2021, first 3 months were the basics , start with C and algos and data structures after that move on to webdev with html and css then learn some php to develop a full stack app with a functioning CRUD, then here comes LARAVEL and oh my god i'm not even sure if i should dig deep into flexbox or grid, maybe webdev is not for me? thoughts like this start to wrap on your head, we had a three months break and now we're back to learn the MERN stack and i'm completely lost, i felt stuck in tutorial hell and tried to chase perfection instead of learning in every project i tried to build, i decided it's maybe time to try something i was never brave enough to do so, commit publicly to 100 days of code, it's pretty simple with two rules, code for at least an hour every day for 100 days, commit or tweet publicly about what you did or learnt, so that's that.

the Path

i have already started with TOP(the odin project) curriculum and just reached the the css section specifically the flexbox one, i decided that i will dedicate 100 days of code to go through top's curriculum and try to build projects on the side and hopefully get hired a year from now or so, i will try to blog about each day of the journey to also keep track of my progress and also be able to compare myself to how i was at any point of the journey, thank you for reading through this and if you are interested or on the path aswell reach out to me here.