HTML and CSS Basics – Learning Outcomes Quiz

The Odin Project shows you the learning outcomes at the beginning of the lesson. Then invites you to test yourself on those questions after studying the materials.

These are the questions from HTML and CSS Basics in the Web Development 101 Course.

Note: These are just my answers from my current (limited) understanding. So, if you notice any mistakes or misunderstandings, please leave a comment below.

  1. Why do we separate HTML and CSS?
    1) One CSS file can affect many webpages.
    2) If you need to make a change you only need to change on file, not every page where you want the style to change.
    3) Reduced loading time/bandwidth use.
  2. What are classes and IDs (and how are they different)?
    Classes and IDs are ways to specify an element of the HTML. We specify the class or ID in the HTML element. Then we use that as a reference in the CSS to apply styles to that element. It also allows us to apply the same style to many different kinds of elements.
    Classes are less specific – use a dot in the selector in CSS (.class)
    IDs are more specific – use a hash in the selector in CSS (#ID)
  3. What are elements?
    Elements in HTML are things contained in tags. For example,
    <header>The Header</header>
  4. What are tags?
    Tags are the things that identify the element in HTML. For example,
    <br> <a> <h1> 
  5. What are attributes?
    Attributes are in the opening tag of an HTML element. They control the behavior of the element or provide information about it. For example,
    href="link.html"    alt="alt text" 
  6. What are forms?
    Forms are inputs for data from the user of the website. The user can input in the form and submit it. Forms are specified within the HTML.
  7. What is a div?
    A divider in the HTML. It is often used as a container for other HTML. It allows us to specify and apply CSS to that particular section.
  8. What are selectors?
    Selectors are the way we target an HTML element. For example, the tag itself, a class, an ID, an element within a class, or a behavior.
    p div a h1
    .content .navbar
    #content-top #biglist
    .content p
  9. What are properties?
    Properties are the things we can change and specify for in CSS. For example,
    color: ;  font-face: ; padding: ;
  10. What are values?
    Values are the actual values we input into the properties to decide the size or color.
    For example,

    red sans-serif 10px
  11. What is the “query string” in a URL and what does it do?
    It shows what was submitted from a form. It appears when the form submission method is set to”get” (which is the default). It is only used for non-sensitive data like searches in a search engine. Since it is a string in the URL, it allows you to bookmark that webpage.
  12. What is the difference between “pixels” and “ems”?
    Pixels are set sizes on the page, like 12px is 12 pixels wide on the screen. It is measured relative to the screen size. They are useful for use in exact control of design but it takes away control from the user.
    Ems is relative to the default font size of the document. 1em is 100%. For example, if your default font size is set to 12px:
    0.5em is 6px
    1em is 12px
    1.5em is 18px
    2em is 24px
    They are useful for allowing flexibility in displaying well and adapting to different view ports. It is more fluid design and more accessible for users with sight issues.
  13. How do CSS styles for a particular element get inherited? i.e. how does an element get its “default” styles?
    Default styles already exist in HTML and CSS. Unless you specify otherwise the default CSS rules will apply.
    If you specify a CSS rule for a particular element it has singled out that element so it is more specific than the default, so it will override the default.
    CSS in inherited based on specificity and order in the CSS file. Styles of the same specificity level which are found lower in the CSS document will be applied (as the document is read from top to bottom). If we imagine the computer running down the document, first it will see “.content-box {color: red;}” and make the text red, then see “.content-box {color: blue;}” and make it blue.
    This order can be overriden if one is more specific. For example, if it was”#todaysnews {color: blue;}” then “.content-box {color: red;}”  the first is an ID so it is more specific and would override the class, which is less specific.
  14. What are two CSS attributes you can change to push an element around on the page?
    I feel unsure of this question as the phrase “push around” is a bit vague – does it mean to change position on the page. Or when you resize the window, the content will move around and be flexible in it’s position?
    During the CSS lessons we covered:
  15. What are the three different ways to include CSS in your project or use CSS to style a particular element?
    Inline – inside the HTML element that you want to style
    For example,
    <h1 style=”color:red;padding:10px”>
    Internal – Write the CSS within style tags inside the head of the HTML document.
    h1 {
    color: red;
    padding: 10px;
    External – in a style.css document which is linked to in the head of the HTML document.
  16. What is the “default stylesheet” or “user agent stylesheet”?
    These are both names for the default CSS stylesheet set by the browser.

  17. Why use a CSS reset file?
    If you want to reset the default stylesheet you can use a CSS reset file. For example, the default stylesheet automatically has some padding so you can override this with 0 padding.
    This allows you to start your style coding from a baseline that should avoid issues – like the browser automatically adding padding and making your calculations for your layout off.



How much would a coding Bootcamp really cost in Japan?

I was wondering how much financial commitment is really involved in joining a coding bootcamp.

A coding bootcamp typically involves not working and studying full-time for 9-12 weeks to devote all your time to learning programming.

There are two big coding bootcamps that opened in Japan over the past two years:

  1. Le Wagon
  2. Code Chrysalis

I am not seeking to assess their contents and benefits here, just the money matters of studying full-time in Tokyo, Japan.

Note: All numbers below are based upon publicly available information at the time of writing and current exchange rates.

Tuition Fees

Le Wagon Code Chrysalis
Tuition ¥790,000 ¥1,030,000
US Dollars $7,031 $9,167
British Pound Sterling £5,372.00 £7,004.00

The Le Wagon course is 9 weeks, whereas the Code Chrysalis course is 12 weeks. So, their weekly tuition is actually pretty similar:

Le Wagon Code Chrysalis
Weekly Tuition ¥87,778 ¥85,833

How much money would I actually need, though?

If we assume you have a rent of 70,000 yen and bills of 10,000 yen and put aside 4000 yen per day for travel and expenses:

Le Wagon Code Chrysalis
Living Expenses ¥252,000 ¥336,000
Rent ¥175,000 ¥210,000
Bills ¥25,000 ¥30,000
Total Expenses ¥452,000 ¥576,000
Grand Total ¥1,242,000 ¥1,606,000
US Dollars $11,054 $14,293
British Pound Sterling £8,445.60 £10,920.80

And, if you do get a job immediately after graduation, it will still be one more month before you receive your first months wages. So, you will need to keep aside at least two months living expenses.

That would make the grand total:

Le Wagon Code Chrysalis
Grand Total ¥1,642,000 ¥2,006,000
In US Dollars $14,614 $17,853
British Pound Sterling £11,165.60 £13,640.80

I think it is not possible to work during the bootcamps as their are so intensive and need your full time and focus in order to succeed during them.

I’d say that’s a pretty big financial commitment. Comparatively, a year of university study tuition fees can be up to £9,250 in the U.K.

Is it possible for me?

I definitely can’t answer that – it depends on how much you have in savings, how much passive-income you make and many other factors.

However, Code Chrysalis note on their website that you can discuss financing options with them, though.

Is it worth it?

Another question I can’t answer. I did these calculations purely out of curiosity.
There are a lot of YouTube videos, Quora questions, and reddit threads online talking about whether bootcamps are worth it or not.

Android Logo in CSS

Following the Odin Project syllabus I followed along with this video on Code Player (a website where you can watch and download other people’s code).

I made the Android logo entirely with CSS and it’s arms, legs and head move when you hover over them.

I tried it out first on CodePen (an online tool for writing code which I was introduced to by someone at a coding meetup a few weeks ago).

I reviewed my Git and GitHub by tracking my html and css documents with git and then pushing them to GitHub, editing it and making commits here.

I enjoyed creating something – even though it was copying something someone else made.

I’m thinking at the moment if there’s anything else I could make in a similar way just to practice my CSS!

See the Pen Android Logo in HTML/CSS by rebeccode (@rebeccode) on CodePen.


Learn Enough Command Line to be Dangerous

I listened to a 5-year old podcast on Dev Chat about How to Learn.

It had a lot of useful advice but one thing that I thought relates to my life in particular was about how to study books.

Like many people, I want to read self-improvement books to improve.

Honestly, it feels like I am improving just by reading them… but then the changes and big ideas I thoroughly agreed with at the time don’t actually stick to become habits.

The podcast had 3 steps for how to read tech and coding books:
  1. Read the back of the book, look at the table of contents and browse the book to get an idea of what is in the book.
  2. If it is a technical manual, read to get an overview and highlight, then only go back when you need those particular pieces of information.
  3. If it is more of a tutorial book, do a thorough page-by-page read first away from computer. Then go back and do a page-by-page read and do the coding samples

I decided to try out this pattern by using the highly recommended “Learn Enough Command Line to be Dangerous” e-book.

I opened up an Evernote note and put a link for the e-book for easy access. Then I created a checklist for my first reading and when I completed it. And then the second reading and when I completed it.

A screenshot of an Evernote note. It shows a checklist "First reading. Start: 9/18. Finish 9/18." "Second Reading (note-taking and attempting the exercises." Then there are notes below about the "Learn Enough Command Line to be Dangerous" book.
Image © Rebeccode

Now, the reading part. First, I read the table of contents on the side of the page to see what I would be learning about.

Then I read the main tutorial. It was difficult to read through and not want to code along with some new functions of the command line that I hadn’t learned before.

I did notice that I found it much easier to process the information I was doing in the exercises after already reading it and knowing where it is going.

I made a lot of mistakes while going through the exercises but I could write notes on what I did wrong and how I fixed it which will be a great reminder if I ever come back to review this tutorial.

I usually have a mental block of starting something and doing it part-way and then finding it so hard to get back into it. This might sound familiar: “Where did I leave off? What is this? I have never read this before in my life. What? I wrote that?!”

This mental block often stops me from starting something again or just going back to the beginning completely. So, I also kept track of when I did the reading and which sections I did so it will be easy for me to finish off working through the exercises today.

WWC “How do you start a career in tech?” Event

I attended a Women Who Code (WWC) Lightning Talks event last night in Roppongi, Tokyo.

The event was titled “How do you start a career in tech?”

Since that just so happens to be a direct quotation of what I keep wondering I had to attend.

I thought it would be a great chance to hear stories from those who had transitioned into a career in tech from other fields.

I was right.

It featured lightning talks (around 10 minute brief presentations) from 6 women:

1. Introduction to the Software Development world
Tutti Quintella @tuttiq (Software Developer at Quipper)

2. Building dev skills while staying at your current job
Lena Morita @mirka (JavaScript Developer at Automattic)

3. Hack your career: teach yourself coding!
Kate Gamo (Java Developer at Yamato, Ltd.)

4. University of Chicago, current Computer Science student
Bing Wang (Joining us with a video submission from Chicago!)

5. What are/were key factors in my career development? and Lessons and Learned
Takako Nishio (Executive Officer and VP, Grow / Protect Technology Program Management at MetLife Insurance)

6. And We Still Have to Give Birth
Yan Fan @yanarchy (CTO & Co-founder at Code Chrysalis)

Details taken from the event page here.

It was only an hour but I feel like I got a lot from that time. All of the speakers did a great job introducing themselves, their story and giving advice to the many people in the room who didn’t raise their hands when asked “Do you currently work in tech?”

Tutti gave a great overview of the kinds of software there are and the kind of languages that are used in them. It contained a lot of information but it left me with the overall feeling that there are loads of options and no way is the “right way”.

The thing that stayed with me the most from many of the talks was how quickly many of the speakers had transitioned from other career fields into technology – around a year for many people.

Also, they all had different journeys and different stories. Some had done coding bootcamps and some had attended coding schools. Others had self-studied while working their current jobs.

Particularly, Lena talked about how she kept her current job while studying coding in her free time. Then she worked on her own projects and she found problems she had in her work or in her life. Processes she could find ways to improve or make more efficient or automated.

Bing built upon this by mentioning that you can try to help open source projects and contribute code. If your code is used to improve it this can show your real-life application of your coding skills.

Kate mentioned about learning to code to do things that interested her in Swift for mobile applications. Then as she learned more she realised she needed a broader range of skills and joined a coding school to prepare before landing her current job.

The final presentation resonated with me. It was by Yan (who runs the Code Chrysalis coding bootcamp that started in Japan in 2017).

She mentioned that she had a first couple of months of attending meetups, daydreaming, studying a little then stopping for weeks. Then, she got serious and knuckled down to study properly. And then she got good enough to enter a good coding bootcamp in the US.

I feel a little like I am still in the more “casual” phase of:

  • Fitting in a little studying in my lunch break at work
  • Spending a few hours at the weekend to study online courses and read books
  • Attending meetups to learn a bit and meet new people.

Most of the presenters and the audience seemed to be in their 20’s or possibly early 30’s – all just starting to build careers. So to hear Takako’s speech which chronicled her 30 year career in tech was very enlightening. We heard about the moves she had made over the years and why. Also, how she had to make sacrifices to live her dream of working abroad.

Takako mentioned how technical skills are a must – those skills are a prerequisite for any tech job. But it is the soft skills (and people skills) that are the key to unlocking your career potential. So, self-reflection is so important: celebrating your strong points and identifying your weak points so you can improve.

Yan’s speech ended by saying about how only around 25% of tech related jobs are going to women. Also that there is a huge economic gap between men and women in general, not just in Japan (which ranked 114 out of 144 in the Gender Equality Ranking in 2017). It made me grateful that these kinds of events exist and there is a community in Toyko for women interested in technology.

Git and GitHub

I studied a bit about Git and GitHub recently by following the track on Odin and watching Le Wagon’s Git and GitHub movie.

Yesterday, I created a repository on GitHub.

Then I cloned it on my local machine.

I used the command line to start tracking that repository with Git on my machine, then I created new files in the local repository.

I made a file. Then I added it to the staging area. Then committed the file with a short message about what I did.

I repeated this process with a hello-world.txt file.

Then I pushed my changes to GitHub.

You can see the repository here.

It was a very simple thing but actually implementing what I had learned about Git, GitHub and the command line and seeing it come up on GitHub felt like a proud moment for me last night.

Watching a Coding Bootcamp Demo Day and APIs

I watched one of Le Wagon’s Demo Days in Tokyo in June 2018.

It was the day those people showcased a project they had made. Those were the people who had done the preparation work, stopped jobs or studies to go to a bootcamp full time for 9 weeks, and thrown down almost 800,000 yen in cash for the chance.

The pitches for the projects were done by a couple of the members of the group, which consisted of 5 or so members.

They prepared these apps or websites in the final two weeks of the course.

This was a show – not just for the participants to catch the attention of people who may be able to help them or give them jobs in the future – but also for the bootcamp itself to show its results.

I was impressed with all of the participants. One app was for self-improvement and dealing with your negative thoughts. One website was for coordinating bitcoin investments with groups of people.

The one I found most connected to my life was the Japanese language learning app. You scanned the text from a picture and it translated it into English (albeit imperfectly). You then had the option to pick out words, make them into flashcards and review them. The coolest feature was a “focus-mode” which removed the English or Japanese reading above the Chinese character so you really have to test your skills. As you scroll up and down the translations are revealed so you can quickly check yourself.

After the presentations, the audience could ask questions. One member asked “How did you manage to make this photograph-to-text programming and also the text-to-Japanese translation by yourselves in just two weeks. It’s impossible!”

The presenter said it was Googles API.

I had heard the term API many times, but I didn’t really understand what exactly it was. I know it was something going on behind the scenes in websites, different than the HTML, CSS and JavaScript that goes on in the browser.

I looked it up at the time but it still felt a bit unclear.

Over lunch at work over the past two days, I watched the Le Wagon workshop on API for Beginners.

It all made much more sense.

API stands for Application Programming Interface

But to understand it you need to read it backwards:

IPA (no, not alcohol)

It is an Interface used by Programs to interact with an Application

Web APIs are what allow things to update or refresh without us manually refreshing the page or the app.

In the workshop, they demonstrate how to use Zapier to set up an API to send data from a form (on Wufoo) to a project collaborating/organizing board (on Trello).
There is no need to manually input the data from the potential customer on the form into the cards on Trello. There is a “webhook” that sends the data when it arrives to the card on Trello.

APIs are a bit hard for me to get my head around. I can understand the function of them and the things they can do. What they “are” is still something I feel a bit fuzzy about.