Today's Progress: I began the Responsive Web Design program. It started with Basic HTML and HTML5 exercises on FreeCodeCamp(www.freecodecamp.com/learn) which consisted of 28 lessons which I completed 100%(28/28). I also watched 2 hours of the youtube video from freeCodeCamp channel(https://youtu.be/mU6anWqZJcc) which is 11 hours and 30 minutes(I'm 10hours into it now).
Thoughts: I was introduced to HTML in high school(2009) when I attended an enrichment program known as Clemson Emerging Scholars. During that time we were taught the basic elements so Day 1 of #100DaysOfCode was easy to complete because I remembered quite a few elements.
Link(s) to work
Today's Progress: Basic CSS exercises on FreeCodeCamp(www.freecodecamp.com/learn) which consisted of 44 lessons which I completed 100%(44/44).
Thoughts: Learned about overriding styles in CSS. The second declaration of a class will always take precendence over the first. I have always wondered whether an id or class can override each other, and turns out id overrides class. Also the "!important" keyword overrides all to make sure that the element has specific CSS.
Link(s) to work
Today's Progress: I began the exercises on Applied Visual Design on FreeCodeCamp(www.freecodecamp.com/learn). Didn't get the chance to finish the last hour of HTML5 & CSS3 from scratch - Full Course which I began watching in the early part of this year. I actually watched Introduction to Responsive Web Design - HTML & CSS.
Thoughts: Today was a laid back day for me. I'm still trying to get use to coding everyday. I have previously studied HTML & CSS, but there are a few things I have to refresh on my memory cause there's alot to remember. I'm just on the third day and I feel like I'm doing too much. =( Too many tutorials sorry. I see why the rules say no tutorials this thing can get confusing. But this is my first round. I promise to be better later on in this challenge.
Link(s) to work
Today's Progress: Continued the exercises on Applied Visual Design on FreeCodeCamp(www.freecodecamp.com/learn). What stood out to me was the lesson about the Hue of a Color and Scaling. Played around with the different colors and scaling today a tad bit.
Thoughts: It's the weekend and I had plans to do over an hour today but unfortuantely I did not have much time. The variety of colors are amazing and the different values you use to show them are quite interesting. The hsl value which was introduced in CSS3 uses a color wheel concept and not a spectrum. Hmmm I love this already. I get to choose any color.
Examples of color values:
rgb(0, 0, 255)
#0000FF
hsl(240, 100%, 50%)
Link(s) to work
Today's Progress: Completed Responsive Web Design: Applied Visual Design on freeCodeCamp. Learned about creating 2D graphics & using keyframes to manipulate animations in CSS.
A few animation properties:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
Thoughts: 2D graphics are good, but I cant wait until I'm able to do 3D. Drawing a heart and cresent was neat. To be able to manipulate animations is superb. Getting those animations to do exactly what you want them to do I'm amazed.
Link(s) to work
- None
Today's Progress: Completed 55% of Applied Accessibility on freeCodeCamp. Learned about the new elements that were introduced in HTML5 to make a web design more accessibile. What I learned today was these elements which make the screen reader navigation more simple:<header> <nav> <main> <article> <section> <footer>.
Also here's a few topics that were covered:
- Headings Hierarchical
- Accessibility of Audio content
- Chart Accessibility using
<figure>and<figcaption>element - Form Field Accessibility using
<label>element - Accessibility of Radio Buttons
<fieldset>and<legend>element
Thoughts: The new elements introduced in HTML5 gives a better understanding rather than using so many <div> element giving it a class or id. How magical is this? I'm definitely going to start using these new elements hopefully it will make it make sense.
Link(s) to work
Today's Progress: Completed 100% of Responsive Web Design: Applied Accessibility section on freeCodeCamp. Worked on my site I started on yesterday and the link is listed below. I have plans to finish it.
Here is a few topics that were covered:
- Accessible Date Picker & Standard Time
<time datetime="2020-10-20"> - Visually Hide Content in CSS
overflow: hidden; - Avoiding Color Blindness Issues
- Using brief descriptive text with
<a>tag - Making Links Navigable in HTML with
accesskeyandtabindexattributes
Thoughts: So I decided to apply some of these topics into creating my own site and I realized that I'm struggling setting up the margins or padding of the content. I can picture how I want my page to be but I can't seem to get it together. Maybe I'm just thinking too hard about it. Putting them into a container sounds best for me, but I still get so confused.
Link(s) to work
Today's Progress: Completed 100% of Responsive Web Design Principles section on freeCodeCamp. Made some changes to the web page I'm creating on Accessibility couldn't figure out why the images were out of the container.
Here is a few topics that were covered today:
- Media Queries
- Making a Image Responsive
- Using Retina Images for Higher Resoulution Display
- Making Typography Responsive
Thoughts: The images were wider than the container when I resized the page.(solved it) All I had to do was add the img selector to the CSS stylesheet, then add max-width property, and set it to 100% and this makes sure the image is never wider than the container. The height property will have a value of auto which keeps the original aspect ratio. Can't wait to get into the Flexbox and Grid section so I would not fear setting up the layout on my own.
Link(s) to work
Today's Progress: Watched freeCodeCamp video on Introduction to Responsive Web Design - HTML & CSS. Also changed a few things that I learned on Applied Accessibility(see link below).
Thoughts: Today was kinda a rough day, so I decided to watch a video. Didn't get the chance to get into the next section on freeCodeCamp. Didn't come up with a new name for Applied Accessibility web page I created.
Link(s) to Work
Today's Progress: Began the lesson CSS Flexbox on freeCodeCamp.
Here is what I learned:
display: flex;add to a element when you want to add flex container toflex-directionproperty to align any children of that element into rows or columns.- To fill all the spaces or align container use
justify-contentoralign-itemsproperty
Thoughts: Will be doing this for a few days the fact being that this is not my first time doing seeing flexbox and I feel like I would need alot of repetition to fully understand each property of the flexbox. Yesterday Day 9 video that I watched was very helpful because I got to visually see how it is done, so that is great. I'll be working on different types of layouts that I can come up with.
Link(s) to Work:
- None
Today's Progress: Completed CSS Flexbox on freeCodeCamp. Also I used the site Flexbox Froggy which was very helpful also.
Here are the properties I learned today about Flexbox:
flex-wrapsplits a flex item into multiple rows or columnsflex-shrinkallows an item to shrink the flex container, it takes numbers as valuesflex-growis the opposite of shrink it grows the flex containerflex-basisspecifies the initial size of item before CSS makes adjustments- The short hand for flex is
flex: (flex-grow) (flex-shrink) (flex-basis) ; align-selfallows you to adjust each item's alignment individually instead of setting them all at once
Thoughts: This is going good CSS Flexbox isn't that hard as I was making it seem in the beginning. On the Flexbox Froggy site there was a property that was not introduced in freeCodeCamp's lesson which is flex-flow which has the values for the flex-direction and flex-wrap. Example, flex-flow: (flex-direction) (flex-wrap);
Link(s) to Work:
Today's Progress: Worked on my Flexbox webpage. Also did some more research on flexbox to get a better understanding from different point of views.
Thoughts: Relied on CSS Flexible Box Layout for the standard for flex box, but someone who can explain it without so much detail is what I prefered.
Link(s) to Work:
Today's Progress: Began lesson on CSS Grid on freeodeCamp. Rewatched first 2 hours of freeCodeCamp Responsive Web Design from Day 9 plan to finish the other 2 hours soon.
Here's what I learned today:
- Set
display: gridto turn into a grid container - Units to Change the Size of Columns and Rows( px, em, fr, auto, and %)
grid-template-columnswill add a set number of columns determined the number of parametersgrid-template-rowswill set add a set number of rows determined the number of parametersgrid-column-gapcreates a gap between the contents columns using the units specified for gridgrid-row-gapcreates a gap between the contents rows using the units specified for grid- Shorthand
grid-gap: (grid-row-gap) (grid-column-gap);
Thoughts: This seems alot simpler than Flexbox but in reality it's not because it helps you build complex web designs. I'm sure its more to it than what I learned today; didn't get to finish the whole section. Before its time to do the projects for the Responsive Web Design section I plan to find a video to help me give it more features.
Link(s) to Work:
- None
Today's Progress: Finished the CSS Grid lesson on freeCode Camp.
Here's what I learned today:
grid-rowjustify-selfandalign-selfjustify-itemsandalign-items- Grid Into Area Template
grid-template-areas - Reduce Repetition Using
repeat()function - Limit Item Size Using
minmax()function - Create Flexible Layouts Using
auto-fillandauto-fit
Thoughts: Forgot to log yesterday so I'm logging on the next day.. Sorry. But CSS Grid seemed more easier to learn than CSS Flexbox although I did have a problem in the beginning with the grid-column and grid-row properties such as grid-column: 2 / 4; ... I get it now.
Link(s) to Work:
- None
Today's Progress: Started on the first project of Responsive Web Design: Tribute Page. Completed it also in the same day.
Thoughts: Didn't think I would be able to complete this project in one day but it was simple and straight to the point
Link(s) to Work:
Today's Progress: Started on the second project of Responsive Web Design: Survey Form.
Thoughts: This was also interesting, but didn't get to finish it. Working with the margins and padding now. Im getting there slowly but surely.
Link(s) to Work:
- "I'm Embarassed I'll post it on tomorrow log when I do more work to it"
Today's Progress: Still working on my Survey Form project. Did some more research on the best way to do a layout for a form.
Thoughts: When working with a survey form I'd like to center it. Played around with the linear gradient fuction and got a background image to look as if it was fading I thought that was so cool. So I have a background that I want but cant get the input box to strectch will probably have to add a class to it and do it that way it makes more since. Okay going to do that now.
Link(s) to Work:
Today's Progress: Watched the last 2 hours of the 4 hour video on freeCodeCamp Youtube Channel about Responsive Web Design Video.
Thoughts: I have a lot of thought about creating a blog but I'm strugging with margin and padding
Link(s) to Work:
- None
Today's Progress: Completed the Survey Project on freeCodeCamp website.
Thoughts: I've had many challenges trying to complete this project. My main reason why I stopped web design before was because I know how to work the padding and margin properties but I can never get an layout to look even. Learning CSS flexbox and CSS Grid explains alot. Doing this survey form I didn't have to use neither, so I had to do some research on calc() function to get my input widths to work properly.
Link(s) to Work:
Today's Progress: Began Computer Programming course on Khan Academy. In this unit the goal is to learn how to use the JavaScript language and the ProcessingJS library to create fun drawings and animations.
Thoughts: This is very interesting because it begins with Drawing and Animation in JavaScript(JS) processing.js library for the first unit. It was fun creating a snowman and giving him arms with the line function. I learned that an ellipse function value x positions is actually determined from the center of the shape, while the rect function starts from the upper left of the shape. I hope I'm right if I listened correctly.
Link(s) to Work:
- None
Today's Progress: Continued Computer Programming course on Khan Academy.
Thoughts: I learned about the fill and stroke function tbh i already knew this. Already knew how to add a background it was simple like the property used in CSS just background.
Link(s) to Work:
- None
Today's Progress: Completed the "What's for Dinner" challenge @khanacademy in the Computer Programming course.
Thoughts: This challenge was fun to do .. Mind wasn't working right so it took me some time to think of what can I could actually draw using the ellipse rect and line function. Really wanted to draw a fish but just couldn't come up with an actual idea of how it could be drawn at that moment probably could have drew the ellipse then drew a triangle for the tail. I'll try that fish out in the future.
Link(s) to Work:
Today's Progress: Learned how to use variables to hold values, and animate drawings with processing library in JS at Khan Academy Computer Programming course.
Thoughts: Refreshed my memory of technical terms like assignment operator.The term camel case is new to me don't believe I've heard it before.
Link(s) to Work:
Today's Progress: Continued working on animations on Computer Programming course at Khan Academy.
Thoughts: Worked on incrementing shorcuts such as x += 1; which has the same meaning as x = x + 1; or x++. This is where math comes in cause you will have to know the right expressions to use to make your program do what you want it to.
Link(s) to Work:
Today's Progress: Learned how to make programs that draw shapes based on the mouse location, also how to use variable expressions to resize parts of your drawing relative to other parts.
Thoughts: I wish to complete alot more so i can get to the HTML & CSS session so I can complete my projects on freeCodeCamp don't want to forget what I've learned thus far.
Link(s) to Work:
- "Shooting star" challenge
- "Tasty tomato" challenge
- " Mouse movement mania" challenge
- "Brown bear eyes" challenge
Today's Progress: Completed the "Animal attack" challenge at khanacademy. Also worked on how to display text on a canvas, resize it, color it, and animate it.
Thoughts: Created a panda on ice but what I wanted the panda to do I just didn't think hard enough on it. I wanted the panda to enlarge it's eyes as the panda is about to attack. The program does that but the eyes aren't porportional as they get bigger.
Link(s) to Work:
Today's Progress: Learned about how to make code reusable using functions in Javascript, and making those functions accept parameters and return values. Also learned about the mouseMoved function.
Thoughts: Remember hearing terms like return statement, local and global variables i learned about this in java during my undergrad years so it's similar. Creating a function for a calculator was simple you just need the right symbols and parameters.
Link(s) to Work:
Today's Progress: Well today is election day and I've been nervous as ever. But today I worked on the "fish tank" project on codeacademy's computer programming course. After I completed this I worked on Bootstrap 3.4.1.
Thoughts: Well to begin with I want my fish to change random colors at random positions. I know how to use the random function but I dont know how to use 3 parameter to pass a rgb value. I'll keep this in mind for future references. Working with Bootstrap I can finally get my webpage to have equal columns just the way I want them (I only wanted 3 max).
Links(s) to Work:
Today's Progress: Completed the "fish tank" project and I'm satisfied now. Also began working on Logic and If statements on khanacademy.
Thoughts: Yesterday I logged that I wanted the fish to change colors and I accomplished this today, and it wasn't hard at all. Learning about if statements again brings back memories (aww I'm relieved). The bouncy ball challenge was something I wanted to remember how to do and this challenge helped me. The Number Analyzer challenge had me to overthink because I solved it before I even read the direction(bad decision) then had to start over and actually go step by step (this was accomplished too).
Link(s) to Work:
Today's Progress:Finished lesson on Logic and if Statements, and completed the Magic 8-Ball project on KhanAcademy where i used if else statements to show different messages. Also read about debbuging programs (how to figure out what is wrong with your program).
Thoughts: It can be difficult at times to figure out where you went wrong when you are coding and there is an error. Just take your time and figure it out.
Using these tips can help when debugging:
print()orpritnln()to check valuesdebug()to send the output to your browser's JavaScript console- having an object or person to state the coding process to
- exaggerate your output with extreme or bigger values
Link(s) to Work:
Today's Progress: Learned about loops in Javascript by using processingJS library on khanacademy. Began working on the "Build-a-House project".
Thoughts: Using while loops is similar to if/else if statements being that they both consider conditions. The only difference with the while loop is that it loops how many times you want and prints that each time. You can convert simple while loops into for loops which is a quicker way to tell the computer to initiliaze, and repeat the condition to me. Doing these challenges gave me the change to actually work on my problem solving skills.
The 3 Loop Questions:
- What do I want to repeat?
- What do I want to change each time?
- How long should we repeat?
Link(s) to Work:
Today's Progress: Completed the "Build a House" project on KhanAcademy. Also recieved more tips on writing clean code, and completed lesson on arrays in javascript.
Thoughts: During these two projects I realized that I have to work on my problem solving skills. The Build a House was simple just had to add a for loop for the windows bushes and grass(simple). I felt like I was struggling the whole time on the Make It Rain project I knew the steps that needed to be taken was just overthinking. For one I was placing my for loop in the wrong spot so I started over from the beginning and wrote comments to see what was going on in each section that needed to be clarified, and I eventually came out with a solution.
Link(s) to Work:
Today's Progress: Working on my FCC (freeCodeCamp) - Product Landing Project .. Having trouble with fixed navigation it's completed but my first section which is a form is not showing. I figured it out .. GO ME.. Now i can sleep peacefully although I probably won't go to sleep for another 2 hours.. Going to work on it some more.
Thoughts: Someone please look at this and help me 😓 😭 me with this.. I'm so sad right now.!! I knew I could figure it out just needed a break, and to think things clearly (CHECKED MY CSS FOR ONE AND MADE SURE THAT I HAVE A SELECTOR FOR WHAT I WANT TO STYLE).
Link(s) to Work:
Today's Progress: Continued working on my FCC (freeCodeCamp) - Product Landing Page .. playing around with different styles using CSS such as flexbox again.
Thoughts: I feel confident now. Although I need more practice I'm puting flexbox to use and I think this page is turning out good.
Link(s) to Work:
Today's Progress: Played around with some margins and padding on my Product Landing Page.. Learned about how to use Font Awesome 5.
Thoughts: This seems like it's taking forever maybe I'm being too extra could have just used Lorem to fill in certain information.
Link(s) to Work:
Today's Progress: Still working on the Product Landing Page project from freeCodeCamp.
Thoughts: Unfortunately I said I would be done with this project today but then I realized that the margins are off on smaller devices such as mobile. Just when I thought I had everything figured out showed me other wise. Not mad at all because I'm glad I found this problem so I can challenge my self some more. SHould have not played around too much with the section margin and padding on each one.
Link(s) to Work:
Today's Progress: Watched some videos on CSS Box Model and a few clips on chrome devTools tricks to help me see what I'm missing in my Product Landing Page Project.
Thoughts: Lately I've been thinking I have things under control then I overwork myself, and then just screw things up.. But I hope actually studying these things will help me in the future. I passed all test on the Product Landing Page project for freeCodeCamp but I don't like the way the links work when you interact with them. I noticed on the example when you click on the FCC project link the header covers part of the section .. I would like to get mine to start exactly at that section. Each of my sections have 100% width, and 100vh for the height. Any suggestions are welcomed.!!
Link(s) to Work:
- Master The All Important CSS Box Model - Colt's Code Camp
- Chrome DevTools in 60 seconds!
- Product Landing Page
Today's Progress: Completed the Product Landing Page project at freeCodeCamp's Responsive Web Design projects. Started on the 4th project .. Build a Technical Documentation Page.
Thoughts: The Build a Product Landing Page was completed two days ago but because I wanted it to be perfect I prolonged it. Althought it is basic it's just the beginning of great things. I only used HTML & CSS to create this product page, basically it is a non-profit organization who find homes for companion animal such as cats and dogs.
Link(s) to Work:
Today's Progress: Worked on the Build a Technical Documentation Page project today from freeCodeCamp's Responsive Web Design curriculum.
Thoughts: This project is more simple.. All I had to do is make sure that the navbar has a height of 100% to give it a side bar, and style it how I want to. Also make sure I choose a color that follows color accessibility rules because the last project I did it this was not passed in Lighthouse devTool.
Link(s) to Work:
- None
Today's Progress: Completed the Technical Documentation Page Project from freeCodeCamp's Responsive Web Design(RWD) curriculum.
Thoughts: This was fun to do when I found out that you can customize the scroll bar I was more than excited. Although there is a small errors in my page for tablets and below it passes all test so it is completed. But I will be working on my first 3 projects to see what I can improve in them while I began my next project.
Link(s):
Today's Progress: Began planning how I want my next project to look.. which is Build a Personal Portfolio Webpage
Thoughts: This should be interesting .. Now that I know how to do vertical and horizontal navs, well I have the HTML part down but sometimes get confused with the CSS. My plan is to use flexbox again. Also to pick a nice blue color (I might change my mind). I will be doing the outline of the webpage tonight also.
Link(s) to Work:
- None
Today's Progress: Continued working on my Personal Portfolio for freeCodeCamp's Responsive Web Design projects .. Added a nice color to it.
Thoughts: Like I said before I had trouble getting the nav to work but as I played around with flexbox I eventually got it to how I wanted it to look. Re-did Flexbox Froggy to see & understand the purpose of each value. I picked a nice purple and black gradient.
Link(s) to Work:
Today's Progress: Continued working on my Personal Portfolio didn't make much progress because once again I am honestly lost.
Thoughts: I just keep confusing my self.. Trying to grasp the important concept of actually giving a page layout scare me .. I got the welcome section complete but working slowly to do the other two sections. I have to create a grid for my projects and I'm not sure if I should use display: flex; or display: grid;
Link(s) to Work:
- None
Today's Progress: Completed my Personal Portfolio for freeCodeCamp's Responsive Web Design final project.
Thoughts: I was so excited going into this project after my Full Stack Bootcamp. They gave me hope to get it complete today and no later. My only problem is I never give a section a height so it doesn't have a size nor is there CSS in it ... Crazy right but I made that seem like it was the hardest thing to do. How can you possibly show something if you arent stying it 😆
Link(s) to Work:
Today's Progress: Using float and clear to create 3 layouts using HTML & CSS.
Thoughts: Well this was a task because now that I was introduced to flexbox and grid I don't have to do it this way so this is a challenge for me.
Link(s) to Work:
Today's Progress: Played this fun game called CSS Diner where you learn and practice CSS Selectors.
Thoughts: This game is very fun to play .. Today's lesson was to engage in a activity where I can learn and practice at the same time. I was going to get a head start on Javascript but I wanted to actually understand CSS indepth which would be good for the Full Stack Web Dev Free Bootcamp I've joined.
Link(s) to Work:
Today's Progress: Started on the homework assignment which was to create a clone of the BBC.com website using float, and began the Learn Javascript course on codecademy.
Thoughts: This is fun to do .. To actually build a website from scratch without using flexbox.. Difficult but fun. For my Javascript sections I'll be moving fast because as you remember I have already been working on javascript on khanacademy ... I stopped on objects tho so hopefully I'll be able to test what I know and get back to it
Link(s) to Work:
Today's Progress: Read an article on How to Code Advanced HTML & CSS.
Thoughts: Hmm it was alot to take in .. But I will use space repetition and learn all the important things.
Link(s) to Work:
Today's Progress: Still trying to figure out how to clone these websites just using floats.
Thoughts: I have the layout but can't decide whether or not I should be using margin or padding.. I'm sure its padding tho. Sometimes I always get confused to which property to use. I mean I know what both do and how it affects the page but always unsure of what to do with it. If I choose margin I would be sorta changing its entire position on the page, but padding just changes the content inside position. I think
Link(s) to Work:
- Working on it on VSCODE first
Today's Progress: Worked on making my TechCrunch and other web clones better.
Thoughts: Still trying to grasp the concept of using float to actually do a web layout. This will only make me better and I needed a challenge.
Link(s) to Work:
Today's Progress: Continued JavaScript lesson on codecademy.
Thoughts: I know there is a lesson on javascript on freeCodeCamp but I actually want to get a good feel of it before I began the course and projects. So this time it won't be a struggle when it's time to put what I learned into a project. It is a learning thing and I have to actually know something for a fact can't just go into it and then do something guess that's what the information is there for to chunk it.
Link(s) to Work:
- None
Today's Progress: Still creating layouts using float for homework assignments.. This has gotten very interesting. Did a levelground-wireframe layout.
Thoughts: Completed this with only one problem the hav section, but I recieved help this time from someone in the 100Devs community.. How awesome .. Simple but I was confused on what to do. Now that it is complete I will know what to do the next time I come across another nav section.
Link(s) to Work:
Today's Progress: Making the 5th layout using float 2 more to go for my homework assignment from my Full Stack Bootcamp.
Thoughts: I was told to vomit the code it doesn't have to be perfect, but I find myself trying to make it perfect after getting halfway there which makes my focus kinda off. I should use pomodoro during this time, but I'm so anxious and excited to get it done and over do it somedays just totally wrecking it.
Link(s) to Work:
- Source-Wireframe
Today's Progress: Began working on the cuisine restuarant website which is the 6th layout.
Thoughts: This layout is not hard to do at all simple like the ones before but I know one thing I'll have trouble with is making it responsive just using floats. Also another challenge within this webpage is creating a grid with 2 rows and 4 columns also just using float. *NO FLEXBOX OR GRID HOW GREAT IS THIS *
Link(s) to Work:
- None
Today's Progress: Started today with CSS Diner, then continued working on the last two layouts: cuisine restuarant an salon.
Thoughts: I just wish that I can do a whole webpage layout within a whole day .. I believe I can but too many distractions. One day I'll be able to focus and get it done. As far as the layouts the restuarant layout with the 2 rows and 4 columns was not hard at all using floats, but I know there will be a problem when trying to make it responsive.
Link(s) to Work:
- None
Today's Progress: Added a footer to the cuisine restuarant layout, then watched Traversy Media Crash Course on Javascript.
Thoughts: I'm glad I know something about programming languages so catching on to javascript syntax is simple. There is a few things that I will have to study indept but the beginning of it is understandable.
Link(s) to Work:
Today's Progress: Started on freeCodeCamp's Javascript Algorithms and Data Structure Certification. Completed 40% of Basic Javascript.
Thoughts: In today's lesson I learned a variety of things about javascript. The fact being that my first programming language was java the concept is the same just a different syntax meaning variable declarations like var or letor const. So far freeCode camp speaks of var which has a global scope. I made it to how to access mutli-dimensional arrays with indexes.
Link(s) to Work:
- None
Today's Progress: Enjoyed class today 100Devs(introduced us to Javascript), then after class I continued with freeCodeCamp's Basic Javascript cirriculum.
Thoughts: Although I did freeCodeCamp's lesson a day before class and previous days introducing myself to Javascript I believe spaced repetition and my study habit helped me to be able to know what the lesson in today's class was about. I understood just about everything except for the homework example that are due Tuesday. Things like querySelector and innerHTML, but I will be learning about them before the next class.
Link(s) to Work:
- None
Today's Progress: Continued working on freeCodeCamp's Basic Javascript made it to 60%.
Thoughts: There's a few things I'll have to study like shift() and unshift(). I pretty much understand how conditionals go so there isn't a problem there
Link(s) to Work:
- None
Today's Progress: Worked on the 100Devs homework assignments, and continued freeCodeCamp's Basic Javascript made it to 70%.
Thoughts: Enjoyed working with conditionals many different statements that can be used such as if else if and switch. This brings back memories from my college days trying to figure it out
Link(s) to Work:
- None
Today's Progress: Worked on a homework assignment the salon landing page ... It is almost complete.
Thoughts: This layout isn't so bad. Working throught it has been simple but I just have to set up each section to make it look like something.
Link(s) to Work:
- None
Today's Progress: Continued freeCodeCamp's Basic Javascript completed 1% today and got stuck 75% which would be 5% for today on the Counting Cards challenge for an hour.
Thoughts: I started the challenge with if and else if statements then I said I can use a switch It would be so much quicker. I got through with the switch statement then had to end up using a if statement anyways. I feel like I did the right thing and there is an error on the site because I checked the solutions afterward and I was on the right track. The only problem is that the count doesn't increment or decrement the way it is suppose to. **CAN SOMEONE HELP ME UNDERSTAND PLEASE!!
Okay so I figured it how .. Currently at 75% on the Basic Javascript curriculum. Taking it at a steady pace because I will have to come back to this to make sure I have a solid understanding.
Link(s) to Work:
Today's Progress: Completed 80% of Basic Javascript on freeCodeCamp, attended class #100Devs which is a 30 week Full Stack Web Development Bootcamp Currently on Class #10.
Thoughts: I'm so overwhelmed learning something new everyday about Javascript. It is not as hard as I thought it would be. Creating a function is simple but it's the objects for me. 😅
Link(s) to Work:
- None
Today's Progress: Created a temperature converter using #html #css and #javascript
Thoughts: This assignment was fun to do. We had to do this for our coding challenge .. and of course I needed an image to make it look more fun. I wish for the input to change on both temperatures once a number is entered but for now I will calculate them separately.
Link(s) to Work:
Today's Progress: Attended the 30 week Full Stack WebDev bootcamp which was 3 hours we reviewed variables and conditionals, and last we covered functions in javascript.
Thoughts: This bootcamp last 3 hours every Tuesday and thursday from 6:30pm EST to 9:30pm EST. I enjoy this community of people who actually want to learn they are so helpful. As we are introduced to the basics of javascript we also get to play with DOM such as querySelector() which I believe is a method.
Link(s) to Work:
Today's Progress: Completed 87% of Basic Javascript on freeCodeCamp site. Also installed git, and played around with arrays and objects in javascript.
Thoughts: Had some trouble with nested objects but it will get better. The main thing that gave me trouble was the Record Collection challenge on freeCodeCamp. It makes you think easy but challenging. You have to pay close attention to how things are worded
Link(s) to Work:
- None
Today's Progress: Studied Arrow functions in javascript which was a homework assignment from 100Devs Bootcamp, made a few arrow functions to understand how they work.
Thought: This way of creating functions is so quick. In the beginning I was kind of confused because I was wondering where the name of the function goes and how I would call it. You assign a variable to an arrow function with its arguments and use to the fat arrow => to evaluate the expression and return its results. If you have one argument the parentheses doesn't need to be included, but if there are no arguments just use an empty (). I have to get use to the structure of an arrow function.
Link(s) to Work:
Today's Progress: Studying for loops in #javascript.
Thoughts: Having trouble understanding how nested for loops work. I remember doing java and learning it in college but it's just not sticking right now.
Link(s) to Work:
Today's Progress: Made it to 90% on Basic Javascript freeCodeCamp Javascript Algorithms & Data Structures.
Thoughts: Taking it slow so i can absorb the important things. Using nested for loops can be confusing, so I'm using console.log() on the outer for loop and inner one to understand what is taken place inside each code block. This way makes it so much easier to comprehend
Link(s) to Work:
- None
Today's Progress: Completed 91% of Basic Javascript on freeCodeCamp, and honestly I completed 1% today because I did not remember how recursion works so I had to read on that.
Thoughts: During my undergrad years I recall doing recursion using java but I just can't seem to remember the steps used to implement such a function. Hopefully as I use spaced repetition it will stick to my brain this time.
Link(s) to Work:
Today's Progress: Continued working on Basic Javascript on freeCodeCamp.
Thoughts: The Profile Lookup was a challenge within the lessons I completed today. I remembered how to access objects using bracket notation and how to use a for loop.
Link(s) to Work:
- None
Today's Progress: Completed 100% of Basic Javascript on freeCodeCamp, and began working on the 100Devs coding challenge
Thoughts: Finally I know the purpose of parseInt(). In javascript I can create a binary converter using this method and I'm so excited. During my college days I created a base converted using java and let me tell you this it was not easy. Another thing recursion is recursion I have to understand it and not just bypass it.
Link(s) to Work:
- None
Today's Progress: Began Javascript Algorithms and Data Structures: ES6 completed 26%.
Thoughts: In today's lesson I acutally understood the difference between using var, let, and const. I never knew that you could mutate using a const but it is possible while using an array such as: const arr = [1, 2, 3]. You could mutate this array by assigning the index of that constant another value like arr[1] = 7. This would change the array list to [1, 7, 3] .
Link(s) to Work:
- None
Today's Progress: Worked on freeCodeCamp JavaScript ES6 made it to 52% .
Thoughts: Spent sometime on Destructing it was very challenging especially the last one. But I got through it. The lessons I completed were such:
- Use Rest Parameter w/ Function Parameter
- Use Spread operator to Evaluate array in place
- Use Destructing Assignment to Assign Variables from: objects, nested objects, and arrays.
- Use Destructuring Assignment with the Rest Parameter to Reassign Array Elements
- and Use Destructuring Assignment to Pass an Object as a Function's Parameters this one was kinda tricky because it kept saying test was complete but destructured parameters should be used
Links:
- None
Today's Progess: Completed 65% of ES6 on freeCodeCamp ... This was interesting because I revisited template literals again.
Thoughts: I remember seeing template literals on codecademy javascript course so to see it again made me excited.
Link(s) to Work:
- None
Today's Progress: After a day of trying to figure out how typed.js library works I finally got it.
Thoughts: Can you say excited? Thank you Matt 😄 Typed.js is a library that animates typing. You can enter any string and watch it type at the speed you set. Now time to create this portfolio. Wanted to learn something cool to go on it and I found just the thing.
Link(s) to Work:
Today's Progress: Completed 87% (27/31) of ES6 on freeCodeCamp .. Learned about getters and setters and how to reuse js code using import and export from a file.
Thoughts: Today was a relaxing day. When I saw that I would be doing getters and setters for the first lesson I got excited because I remember doing so in my Data Stuctures course in college. Although I didnt remember exactly how it was implemented I knew what both of those meant. Yesterday I came across something that said import and was automatically aware of the lesson on import. I wasn't sure how export would work.
Link(s) to Work:
Today's Progress: Worked on my javascript coding challenge #3 for 100Devs.
Thoughts: This was interesting had an error with putting the button inside the form and had to move it outside of the form in order for the webpage to show the results.
Link(s) to Work:
Today's Progress: Completed 100% of ES6 on freeCodeCamp.
Thoughts: This was an interesting journey and there will be days where I go back and use spaced repetition to understand those lessons. Today I learned about javascript promises - you use it to make a promise to do something.
Link(s) to Work:
- None
Today's Progress: Read about functions in javascript .. This cool website called Eloquent Javascript has detailed information about the language.
Thoughts: This chapter tells you how to write a function, also talks about arrow function something new in javascript I think. The key to understanding function is to know the scopes of them. Parameters and bindings declared in a given scope are local and not visible from the outside of the scope. functions can help organize a program by grouping code into pieces that do specific things. This will be my third time in life working with recursion this should be the charm but practice makes perfect.
Link(s) to Work:
Today's Progress: Planned out and drew a wireframe for my portfolio.
Thoughts: In order for me to get started on a task I have to draw it out. Things turn out more better when I do it this way.
Link(s) to Work:
- None
Today's Progress: Had fun implementing my portfolio.
Thoughts: I think I'm satisfied now... But there is a few things I'd like to change on it so tomorrow will be interesting.
Link(s) to Work:
- None
Today's Progress: Started on the Regular Expression section of freeCodeCamp completed 30% (10/33).
Thoughts: So far I'm loving RegEx maybe because the beginning of using it is so simple. The symbols are so easy to remember. I covered these lessons in today's session so far:
- Literal patterns
/search/ - Wildcard character
. - Character classes
[ ] - Hyphen character
[a-e]
Link(s) to Work:
- None
Today's Progress: Started working on my horoscope project. Also continued the RegEx section freeCodeCamp completed 64% (21/33).
Thoughts: Putting together the pieces for the horoscope app is interesting because there are many ways that you can implement this type of app when it comes to inputing the data into the actual browser.
The RegEx lesson consisted of:
- Negated Character
^ - Character that occurs 1 or more times
+ - Character that occurs zero or more times
* - Greedy/Lazy Match
- Match Beginning String Patterns
^ - Match Ending String Patterns
$ - Match All Letters and Numbers
\w - Match Everything BUT Letters and Numbers
\W - Match ALl Number
/d - Match All Non-Numbers
/D
Link(s) to Work:
Today's Progress: Worked on my Horoscope app today completed all the main parts just have to fix a few bugs in it. Still learning how to use Javascript DOM.
Thoughts: Well today was excellent accomplished alot and ran into a few errors that I figured out after taking a break to clear my mind. This js application has a few errors that need to be worked on but I think I met my breaking point for today.
Link(s) to Work:
Today's Progress: Worked on my horoscope app .. added a clear button to reset the form and data underneath. Also, read Eloquent Javascript Chapter 5: Higher-Order Functions very interesting.
Thoughts: It was fun figuring out how to acutally make a clear button do exactly what you need it to do. Before I finished last night I said I wanted to create a clear button did some research on it and got it done. For the chapter I read about Abstraction * I sort of remembered it from learning java in college but it has been so long since I acutually used it*. Didn't get to do the exercises will do those at a later date.
Link(s) to Work:
Today's Progress: Read Eloquent Javascript Chapter 4 - Data Structures: Objects and Arrays
Thoughts: This chapter focuses on basic data structures. An array stores sequences of values. Objects are arbitrary collections of properties. Unlike numbers, strings, and booleans which are immutable, objects can be changed which makes them mutable. With objects, there is a difference between having two references to the same object and having two different objects that contain the same properties. In this chapter they go deeper into data structures and I'm just grasping it.
Link(s) to Work:
Today's Progress: Read Eloquent Javascript Chapter 5 - High-order Functions
Thoughts: Previously read through this chapter and there was a few things I wanted to read back over such as Filtering Arrays, Transforming with Map, and Composability.
Link(s) to Work:
Today's Progress: Read Eloquent Javascript Chapter 6 - The Secret Life of Objects
Thoughts: This chapter discussed Encapsulation, Prototypes, Classes, a great explanation of Maps, Polymorphism, and Inheritance. I will be revisiting this chapter in the future.
Link(s) to Work:
Today's Progress: Been away from freeCodeCamp for a few days so I decided to watch their video on Regular Expression.
Thoughts: Just reminding myself of what I've been learning recently on freeCodeCamp so I can recall for the next lessons I have to do when I come back tomorrow.
Link(s) to Work:
Today's Progress: Completed 100% of freeCode Camp Regular Expressions (RegEx) section.
Thoughts: This was very interesting section because I learned someting new during this time. Even though it did get a little difficult the previous sections were there to help. The problem I had was with the restrict possible username. I had to watch the videoo to understand what was going on.
Link(s) to Work:
- None
Today's Progress: Started on creating a Simple Calculator with HTML, CSS, and Javascript.
Thoughts: So far I have the html elements in place. Wish I could have completed more but hopefully tomorrow I will get alot done.
Link(s) to Work:
- None
Today's Progress: Worked on my Simple Calculator & attended class 100Devs.
Thoughts: In class we reviewed Javascript Basics. So far with the Simple Calculator using Javascript I added styling to it now to figure out how to implement the javascript of it. This has been on my mind all day such as how I would implement button clicks using an object or create a event listener for each button.
Link(s) to Work:
Today's Progress: Worked on khanacademy today. Successfully made through the JS Objects section.
Thoughts: In order for me to grasp the concept of an object, I HAVE TO practice and make sure I understand what is going on. #javascript #js
Link(s) to Work:
- None
Today's Progress: Continued working on khanacademy Intro to JS: Objects began the Project - Bookshelf.
Thoughts: In this project you are asked to make an array of books atleast two of them and use a loop to display a row of those books on a shelf. There are three bonuses that you can do to test your ability of implementing objects. One book was already implemented on the shelf so I decided to add two more books and an author property. I have the title and author displayed but can't seem to get the image of the amount of stars the books are to be shown on each book. What am I missing?
Link(s) to Work:
- None
Today's Progress: Sat here for an hour trying to figure out how to display the stars for every book the Bookshelf project on khanacademy couldn't come up with a solution I'll try again tomorrow.
Thoughts: I was thinking that I needed another for loop but I tried to do a nested loop and I still didn't get any results maybe I'm overthinking this and it is something so simple. After a few tutorials maybe I'll come up with a solution.
Link(s) to Work:
Today's Progress: Figured out how to make the number of stars given for each book to display on their own book cover ... I'm so excited.
Thoughts: This was so simple and I made it so hard. All I had to do was implement a better x position for the stars because each book rating was on top of each other. I did this by adding the counter to the x position and multiply the first loop counter to the x position.
Link(s) to Work:
Today's Progress: Attended 100Devs class where we learned about Javascript Arrays. Also Redid my Simple Calculator, and changed a few things on my 3rd portfolio.
Thoughts: Today was hectic but I accomplished something and I didn't just sit there and do nothing. Class was very productive we played around with arrays and got a feel of them. One thing that stood out to me was forEach every since I started working with javascript I'd always see this and wonder how it works and tonight I recieved a great explanation.
Link(s) to Work:
Today's Progress: Worked on a few things to finalize my portfolio.
Thoughts: Learning how to create a hamburger menu with an animation to the nav. I want a circular nav to the right side of my portfolio. Also I would like to have the icon which opens the nav to transition into a 'X'.
Link(s) to Work:
- None working on it I promise when I'm done I will deploy it on github/netlify.
Today's Progress: Finalizing my portfolio.
Thoughts: This will be my 3rd portfolio. The first one was created when I was working on freeCodeCamp's Responsive Web Design Certification. It was okay but I needed to add more to it because I felt like it was too simple. The second had a right side bar navigation and I wasn't really feeling that because of responsiveness, and this one I'm actually trying new things.
Link(s) to Work: