Code First: Girls - why you should join
Tags: codefirstgirls, codenewbie
Published: 2019-12-31 23:57:10

# *If you can dream it, you can do it!*

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/eppswhvi40rdzxcyug51.jpg) 

i was very excited to write this post as this was a milestone i had dreamed to achieve. i had came across Code First: Girls one day like any other when reading about [Pauline Narvas](https://twitter.com/paulienuh) on Twitter and later on [her blog](https://pawlean.com/). Because i was looking for a community to learn how to code, the rest was history. And thankfully was accepted and there was one nearby. (:

The Code First: Girls i undertook was delivered in Manchester at Thoughtworks every Tuesday from 6.30pm to 8.30pm (also a great way to break the routine i think) for 8 weeks (1 day a week) from October to November and was the Level 1 Front-End Beginners (i've been seeing there is a next one about Pyhton? 👀).

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ra5vey5c43cnlhx4taze.jpg)

# First Day: Introduction to the course and HTML

Arrived on time, there was some FREE pizza and soda but i was a bit nervous so didn't take any. Also was worried about my laptop battery but it managed to work for the all time (plus there are plugs anywhere, so do not worry). The room was full when we started; around 24 girls, and 2 female and 4 male instructors. 

The first session was delivered by [Gabriele Sapagovaite](https://www.linkedin.com/in/gabrielesapagovaite/) who is a Data Scientist and comes from an Accounting background. 

i had already read about how a great number of people working in tech come from unconventional backgrounds, so it was very good to hear it *'in-real-life'*. Btw, there is an awesome project about this created by [Pete](https://twitter.com/petecodes), called [No CS Degree](https://www.nocsdegree.com/) which *[explore how makers and programmers have been able to succeed in learning to code with no Computer Science degree](https://www.nocsdegree.com/about/)*, shares very useful advice and resources for newbies. i [follow them on Twitter](https://twitter.com/nocsdegree). also a [really useful newsletter](https://mailchi.mp/67e1bf258afa/nocsdegree).

## Getting started

We did a super quick table-round presentation stating our names, what do we do and what was our favourite type of cheese. 

`Inês, graduated in Marketing (doesn't like sales, it's a 0 at design and sales but loves the back-end of it like market research, competitor analysis, SEO, optimisation and data) and doesn't really have a favourite cheese :/`

The majority of the girls were the same, came from every type of degree from Acting to Architecture, Physiotherapy, Politics, to being a teacher and just wanted to learn a new skill. So because it's something new, everyone will be nervous and you can expect a chill, informal and comfortable environment.

Because i had already worked with a bit of HTML and CSS learning from YouTube tutorials, the tasks we did were easy. But what i felt the most 'hard' thing was, was the lack, the 0 knowledge of how things *actually* work. The definition of a static/dynamic website, LAN/WAN networks, server/client,... some examples to start with. Did a quick research and found [these books](https://www.quora.com/What-are-the-best-books-to-learn-how-computers-work) recommendation.

It was a good thing to do a bit of an 'awareness' preparation before:
• try some HTML and CSS before,
• be comfortable with using simple text editors (had been using Sublime; used Atom on the first session but it's too slow on my laptop, now I'm using Visual Studio Code and so far so good) and,
• recognise some tags and their functions. But don't worry because prior, during and after to the Course you'll receive guiding materials to explore and practice. So all good. 

Also would add that making an 'awareness' preparation helps you to already have some doubts you can clarify. i had my first two:
• is there a difference between leaving a space between tags? for instance:
`<h1>Hello World</h1>` and `<h1> Hello World </h1>`
**A**: no, it will work both ways, so spaces are superfluous. 
this can also be applied to CSS, but in this case, they [aid our readability](https://www.codecademy.com/forum_questions/53d665b78c1ccc644a0027a8): `color:red` vs `color: red`
• how to add pages to a website.

i had made this simple webpage from [this tutorial](https://www.youtube.com/watch?v=0afZj1G0BIE) but I didn't know how to add a new page.
![a simple website page](https://thepracticaldev.s3.amazonaws.com/i/l3jjgj65lfp3sk0wh5ty.png)

How could you click on the *About* and redirect you to another page? 
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/cs7msnvja8q6j3lxrm36.png)

**Solution**: create a new file, in this case, called `about.html` and add a redirection link to it in your your `index.html`.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/1pb7j9xol6wadkn6agl6.png)

the time passed so fast! i left inspired and eager to keep learning. since day one, i kept a record of the tasks in a specific repository on GitHub, if you want to take a look at [/Code-First-Girls-Beginners](https://github.com/inesreisx/Code-First-Girls-Beginners). 

# Second Day: Introduction to CSS

This time it was impossible to resist the two slices of margherita and that cup of coke (tbh i don't remember when it was the last time i had drank Coca-cola..). Full session ✔️, food ✔️, excitement ✔️.

[Mehdi Varandi](https://www.linkedin.com/in/mehdinv/), a Computer Science Student and intern, led the session. It was a code-along session and because we would see more *dynamic* results, it was fun. We ended up learning how to create a `styles.css` page, connect it to `index.html` and discovering some cool functions like the `:hover` selector.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/f0la80lhk3t2typ3qign.gif)

In the end, we randomly created our group for the CFG website competition and posted it on [Slack](https://slack.com/signin) (a platform which had been totally unknown for me and that i now daily use at work).

# Third Day: Recap and UX

Starting with the bad news: my computer couldn't connect to the Internet-until the end of the CFG course- (CFG's network had changed and no solution was found, it's thought it was because of me using an older version of Windows instead of 10 ), but since this was the most theoretical session of all, i was lucky for not using the computer so much.

The session about UX- User Experience, was delivered by [Pritam Sangani](https://www.linkedin.com/in/pritamsangani/), a graduate software developer (which was also a student and a Student Ambassador at MMU).

We first started with an exercise where we had to save a random picture taken from the Internet into our colleague's phone. The girl next to me had an iPhone and i own an Android, so it was perfect. It was interesting to navigate on another interface and discover that in our case, a picture saved on her iPhone would go to 'Photos' and on my Samsung would go to `Gallery`. Overall, it was intuitive.

i think the major key learning for this session was delivered through this quote: *"a great user interface doesn't mean a great user experience"*, in simple words, your website can look great but be a crap.

A curious thing about this day was that when leaving the session and chatting with Rugile (team member) about the group work, we both discovered each other were a Pauline's follower on social media and had found out about CFG also through her when discussing how `we can do this!` just as Pauline could coming from a non-CS-background. It was cool.

# Fourth Day: Git and GitHub

Halfway there! Unbelievable but exciting at the same time. 
In this paragraph, i will not mention how i was feeling a bit tired from work, a bit nauseous from my period and a bit ): because i had no Internet at all again throughout the all session. And this time, it was needed. However, Gabriele helped me to solve the issue from trying everything possible: *network adapters*, *ip/config* and everything more you can [find here](https://troubleshooter.xyz/wiki/fix-ethernet-not-working-in-windows-10-solved/), but, it didn't work.

The good thing was: i had already made a [GitHub](https://github.com/inesreisx) account (since June when i first became interested in learning how to code), i had seen some YouTube videos about Git and GitHub, and i had created [our group's repository](https://github.com/inesreisx/Two-Thumbs-Up). Yeap, as they say, *preparation is key*, i guess.
{% youtube o8NPllzkFhE %}*Linus Torvalds, the creator of Linux*

The session was led by [Alexandra Danes](https://www.linkedin.com/in/alexandra-danes-b1b885156/), software developer and Kurtis Angell, also a [Northcoders graduate](https://northcoders.com/testimonials/2019/05/kurtis-an/) and developer.

Things i learned/had doubts about:
• Git
• GitHub is a platform that holds Git. 
• Each repository can have its GitHub page.
• Push and Pull
• Conflicts 

#Fifth Day: Bootstrap

No Internet (used my phone's hotspot to download the files), 2 slices of pizza and a cup of pineapple and grapefruit juice (very good btw). And maybe a love-hate relationship with Bootstrap? Another code-along session with Mehdi.

i had previously tried Bootstrap at home to develop a customised WordPress theme (ok, i'm a bit curious). But, the result was a crap so i had just left it behind. This session made it definitely more clear.

Bootstrap is a framework, meaning it is made of pre-made code. And you can get it [here](https://getbootstrap.com/).


# Sixth Day: JavaScript and jQuery

*...and on the sixth day, God created Manchester.* 
Two days left! i'll miss it already. As a not-very-social-person, i struggle with finding groups where i can feel comfortable and CFG makes it so easy to get along with. There are no stupid questions, everyone helps each other and we're connected by computers and of course, the love of pizza.

Dear JavaScript, i had heard some things about you such as:
<ul>
<li>You are essential as a skill</li>
<li>You are simple to be written</li>
<li>You give dynamism, make things alive and everyone smile</li>
But, are you easy to be learned?
</ul>

To be completely honest? This was the most confusing session of all. And i would say for all the class. We did a review of previous concepts before which took some time and ended up rushing a bit on JavaScript.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/puic1ee9qorpwnowye5q.jpg)

We got to know and did some tests in the Chrome DevTools Console and learned how to make an alert. Still a work in progress.

# Seventh Day: Revision

This session was made of a compilation of questions collected around each table from each one of us 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/njb45ovbrlse5ps198f2.jpg)

(was a bit sad for knowing you cannot see GitHub projects "live" unless they have a GitHub pages or you have a link to the project?)

and group work! We tried to sketch something presentable and work on them on [Glitch](https://glitch.com/~two-thumbs-up).

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/upz0sg1r7g01rz600moj.jpg)

# FINAL DAY: Project presentation and goodbyes

It passed so quick! The session was all about everyone's projects. There were some really cool websites and ideas.

The winners were [Africa Travels](https://ivymak.github.io/africa/), 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/pb18dwf3s33qy1t1si2y.gif)

with other awesome competitors like [MCR Buzz](https://lja96.github.io/mcr-buzz/)

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/758pax0270bajy3ezd93.gif)

(learn how to make that glow [here](https://www.w3schools.com/howto/howto_css_glowing_text.asp))

and a website about [Coaching](https://sailaroundlife.github.io/My-first-website-/) with really great text effects.



### Our Project: Two Thumbs Up (a random but positive team name)

About our project, we decided not to incorporate bootstrap, or use a pre-made template or code, which in my opinion was better for our learning process because we needed to understand how to make a proper structure with containers and divs (something that was making me a lot of confusion). We worked on [Glitch](https://glitch.com/~two-thumbs-up-cfg-final-project) as we could see immediate changes and work together more easily. This was our thinking process (all following images available in [pdf format](https://github.com/inesreisx/Two-Thumbs-Up/blob/master/CFG%20Two%20Thumbs%20Up%20Process.ppt):

<ol>
<li>We wanted to do a simple website about Manchester (you could look for Events, Sports, Culture, Food). And the differential would be a video playing in the background. Video was the keyword. So we cut and put together some parts of websites we liked for a first mockup.</li>

![First Website Mockup](https://thepracticaldev.s3.amazonaws.com/i/3z6vpx0xt0l69xtlcxuk.JPG)

<li>We later researched about drop-down menus and dynamic features we could implement. And had even managed to create a drop-down menu when clicking on the bee.</li>

![Drop-down menu attempt](https://thepracticaldev.s3.amazonaws.com/i/soezbh1klw57o9fg9me5.png)

But later, we found a really cool thing: showing page elements along your scroll like [this one](https://michalsnik.github.io/aos/) and wanted to try it out. But, a bit too advanced when you don't manage your time properly :/

![Slide in as you scroll example](https://thepracticaldev.s3.amazonaws.com/i/5fp22zrlcazazkb20633.gif)

How to do it: [here](https://stackoverflow.com/questions/15798360/show-div-on-scrolldown-after-800px) and [here](https://css-tricks.com/slide-in-as-you-scroll-down-boxes/).

<li>So we moved to another plan. Create a grid, which was challenging!</li>

![Grid](https://thepracticaldev.s3.amazonaws.com/i/sy4szzcfjlsjbbgwrbqc.png)

![Trying out a grid](https://thepracticaldev.s3.amazonaws.com/i/7zkk8c2ooo5kch0g03wo.png)

🤦‍♀️ It was missing [1fr](https://www.developerdrive.com/how-to-create-a-css-grid-step-by-step/) 🤦‍♀️

<li>The result was quite nice.</li>

![Grid Result](https://thepracticaldev.s3.amazonaws.com/i/3oely85wjcwietif5v7k.png)

<li>And we tried to add the video once again.</li>

![Grid with video](https://thepracticaldev.s3.amazonaws.com/i/nr9fub12x5sbaibjfvpv.png)

<li>And also took it all off and tried to place the drop-down menu on top of the video, which had worked for a few moments.</li>

![Video with drop-down menu mockup](https://thepracticaldev.s3.amazonaws.com/i/2lh6oszeirz42umuzrty.JPG)

<li>But, as the deadline was approaching and our idea was vanishing away... we took another route. Which we were proud of (:</li>

![Our final project](https://thepracticaldev.s3.amazonaws.com/i/h1thtrpfg3mphpk24t5f.png)

💡 What about...

What about if the website functions as a platform to get new recommendations about Manchester? Like every day you receive a new keyword to type into the search box and then when you press enter you are redirected to that new thing? 💡

this was our final result! You can check it and try it out [here](https://inesreisx.github.io/Two-Thumbs-Up//how-does-it-work.html).

![How does it work?](https://thepracticaldev.s3.amazonaws.com/i/6h0srhgj1qktt7vyzbl2.JPG)

(note: the project is not functional as we wanted, but will hopefully give an idea of our plan. For the presentation we wanted to set up <em>events</em> as the keyword to redirect to the CFG website. But all words work and redirect to the same website. Still a #wip)


In the judgement process, websites were evaluated according to formatting, organisation, different elements, visually appealing design, being a responsive, and how was the teamwork process behind it. Having the competition element definitely always adds something extra to any learning process, but overall we felt proud of the learning journey and we all left the course eager to explore more and of course, make a future upgrade to our project. 

#### In the end, I would say Code First:Girls is a place where girls can eat pizza, get greasy fingers, clean them to their jeans and start learning how to code.

Thanks for reading this far (:

![CFG Inês Reis certificate](https://thepracticaldev.s3.amazonaws.com/i/43wi55h21yubdm7x88ln.jpg)


Thank you Pauline for sharing it, following and for always being an inspiration ❤️

{% twitter 1212277778562899968 %}