Three Weeks and Beyond with #100Devs
Tags: beginners, 100devs, webdev, codenewbie
Published: 2022-01-29 18:06:18

# The Recap

Woah! We finally made it through three weeks of #100Devs Cohort 2, and are proficient to lay down serious vomity code to create a webpage with HTML & CSS. If I were to talk to my past self three weeks ago and say, "You are going to be able to create something out of nothing in three weeks. Trust me!", I would have laughed.

In today's blog, I am covering what I have learned so far in the past three weeks of #100Devs to become an employed Full Stack Software Developer.

**⚠ Please, feel free to provide any feedback/comment/likes/dislikes on this or any blog I post. It can make me unlock the new potential to become a better blogger. 👍🏾**

 > ***💡 "I want to help you become a Software Engineer for free"***  - Leon Noel

<iframe src="https://giphy.com/embed/fdLR6LGwAiVNhGQNvf" width="480" height="270" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/fdLR6LGwAiVNhGQNvf">

# Week 1

Class one was the most hype and watched stream in the Software & Game Development category on Twitch...EVER! [A total of 7K+ Software Engineers tuned in live](https://www.twitch.tv/videos/1260641923) to figure out if:

1.  Is the **#100Devs** Bootcamp real?
2. What's the catch of a *free* Bootcamp? 
3. Am I ready to become a **Software Engineer**?

If you answered "Yes" to all three questions, you faced homework the very first class: 
- [Learning How to Learn](https://www.coursera.org/learn/learning-how-to-learn)
- [How to Study for Exams, by Ali Abdaal](https://www.youtube.com/watch?v=ukLnPbIffxE)
- [Space Repetition, by Ali Abdaal](https://www.youtube.com/watch?v=Z-zNHHpXoMM)

The objective was to complete four weeks of learning how to learn in one week and supplement the course with [Ali Abdaal's](https://www.youtube.com/c/aliabdaal) how-to-study videos. I discovered that I was learning new things wrong and that utilizing active recall and spaced repetition is the key to retaining anything. 

Introducing [**Anki**](https://apps.ankiweb.net/)! Anki is an intelligent flashcard reader that allows you to create, organize, and study decks of cards. This is a tool that is meant to be used not only for the cohort but for life! The game plan is while you are reading/learning life, Anki is your best friend in creating your flashcards to perform active recall later, then do it again, and again...and again 😂

<iframe src="https://giphy.com/embed/Uv2K54K09f5x2GqqqW" width="480" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/cbc-cooking-show-fridge-wars-fridgewars-Uv2K54K09f5x2GqqqW"></a></p>

The second set of homework, which set me in the trough of sorrow (yes, you Shay) was:
- [Learn to Code HTML & CSS 💀(https://learn.shayhowe.com/html-css/)
- [Intro to using MDN DOCS](https://developer.mozilla.org/en-US/docs/Web/HTML)
- BBC Website ![bbc-image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1643446063466/nTi4kYweB.png)

Since learning from [The Odin Project](https://www.theodinproject.com/paths/foundations/courses/foundations), I was familiar with adding HTML semantics to the [BBC Homework Assignment](https://glitch.com/edit/#!/bbc-homepage). The trough of sorrow hit me like a train when reading 12 lessons back to back and creating various flashcards on Anki. Because I have not been in a structured learning environment in seven years, paying attention and staying focused was no easy task. Thankfully, I was able to complete the lessons using the [Pomodoro Technique](https://tomato-timer.com/), or in my case, Animedoro. 

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">so leon mentioned &quot;animedoro&quot;... sounds like a distraction but I won&#39;t knock it until I try it. 😂 maybe 35 on, 25 off with death note. <br><br>any <a href="https://twitter.com/hashtag/100Devs?src=hash&amp;ref_src=twsrc%5Etfw">#100Devs</a> have a favorite anime series they recommend? <a href="https://t.co/A0VFWmyUQA">pic.twitter.com/A0VFWmyUQA</a></p>&mdash; stefan 🍍 (@codewithfan) <a href="https://twitter.com/codewithfan/status/1482893465469915136?ref_src=twsrc%5Etfw">January 17, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# Week 2

> ***💡 "Leon Noel is a Pokemon Master"*** 

<iframe src="https://giphy.com/embed/xuXzcHMkuwvf2" width="480" height="360" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/90s-the-girls-are-in-charge-xuXzcHMkuwvf2"></a>

We made it out alive of the first week of #100Devs. Some were able to submit their Coursera homework on time while others were still catching up with Barbara. 

For Class 3 - Tuesday's class, we reviewed the following:
- Navigation
```
    <nav>
        <ul>
            <li><a href="#">Donate</a></li>
            <li><a href="#">Login</a></li>
            <li><a href="#">Sign Up</a></li>
        </ul>
    </nav>
```

- Forms:
`<form action="/my-handling-form-page" method="post"></form>`

- Input Types

![Screen Shot 2022-01-29 at 6.42.24 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1643449355121/GgorGqraG.png)

In addition, we went over how Leon approaches a webpage if he were to create its HTML. The homework assigned was to re-create the [Khan Academy](https://glitch.com/edit/#!/khan-academy-100devs), [Tech Crunch](https://glitch.com/edit/#!/tech-crunch-100devs) webpage using only HTML, and learn how to do layouts on [learnlayout.com](https://learnlayout.com/). 

<iframe src="https://giphy.com/embed/zOvBKUUEERdNm" width="480" height="270" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/coding-zOvBKUUEERdNm"></a>

Class 4, we dived into the nitty-gritty of CSS fundamentals such as:
- Where should you style your CSS?
- How do you link your HTML & CSS together?
- The CSS Breakdown 
![Screen Shot 2022-01-29 at 7.29.18 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1643452171888/V21_MRJO0.png)
- Classes, IDs, and basic properties
- Most !important 
![Screen Shot 2022-01-29 at 7.30.31 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1643452254620/mFS1RFVcM.png)

To conclude week 2, we were given the task to use HTML & CSS to create a [simple lab site](https://glitch.com/edit/#!/simple-lab-leon-100-devs)

![Screen Shot 2022-01-29 at 8.07.15 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1643454454466/ULgeOu_OHJ.png)

# Week 3


> ***💪🏽 "We don't get got. We go get!"*** 

Classes 5 and 6 are where we put our true learning abilities to the test. This week, we discussed:
- The Box Model
![Screen Shot 2022-01-29 at 8.19.41 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1643455191263/CVGJQzVpD.png)
- created basic layouts

![Screen Shot 2022-01-29 at 8.20.29 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1643455244204/sTgoUb8aq.png)
- practice relationships selecting without using classes or IDs.
![Screen Shot 2022-01-29 at 8.16.52 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1643455054640/b06ThJphbK.png)
- specificity practice
![Screen Shot 2022-01-29 at 8.18.14 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1643455116533/sEc94MBbZ.png)

After completing the three layouts, the next objective is to read and dive into Responsive Web Design. From my foxhole, it means creating websites so they are accessible and viewable across all devices and platforms. Our resource is to learn from the superstar Shay Howe: [Learning to Code Advanced HTML & CSS](https://learn.shayhowe.com/advanced-html-css/), but supplement with the MDN Docs as well. Once all understood, the goal is to make the three layouts responsive, like how Nicole did!

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Day 19 of <a href="https://twitter.com/hashtag/100DaysofCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysofCode</a>: <a href="https://twitter.com/hashtag/100Devs?src=hash&amp;ref_src=twsrc%5Etfw">#100Devs</a> assignment today. <a href="https://twitter.com/leonnoel?ref_src=twsrc%5Etfw">@leonnoel</a> said we needed to make it responsive. It&#39;s definitely responding. 😅 <a href="https://t.co/zM56c8T6Zv">pic.twitter.com/zM56c8T6Zv</a></p>&mdash; Nicole Barnabee (@NicoleBarnabee) <a href="https://twitter.com/NicoleBarnabee/status/1487085289851994117?ref_src=twsrc%5Etfw">January 28, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# That's all friends!

<iframe src="https://giphy.com/embed/w89ak63KNl0nJl80ig" width="480" height="400" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/theoffice-w89ak63KNl0nJl80ig"></a>


No joke, this was difficult to write. Writing is an art I want to continue to practice while on the #100Dev journey. I will post a weekly recap of the lessons at the end of each week. If you have any questions, comments, concerns, **feedback**, do let me know. Until next time ~

This is where you can find me → [Twitter](https://twitter.com/codewithfan), [LinkedIn](https://www.linkedin.com/in/stefantaitano/)!