Link Search Menu Expand Document
refcode-docs

Sprint 2

HTML structure & semantics, CSS Atomic Design, and Web design

Making Time to Code

Learning to code is skill similiar to learning an instrument, the only way to improve is with practice! In the last class we talked about a few different strategies which can help you find time to practice coding:

  1. Create a detailed schedule and stick to it
  2. Code before your other obligations start
  3. Try to sneak coding into smaller windows of availability, like lunch breaks

Review

  • How much time did you spend coding or learning this week?
  • Does anyone else struggle with procrastination?
  • Keeping a calendar with all of you events is a great way to find time for coding in a busy schedule. [Carson’s calendar]
  • Setting goals is another way to be intentional about how you’re spending your time.

Homework Review

HTML Best Practices

  • What are a few HTML best practices?
  • Why is it important to follow HTML best practices?
  • What is “clean code”?

Exercise 📝

Find all of the HTML best practice errors on the worksheet. Explain how the error should be fixed and why the error is problematic in the numbered section below. HTML Mistakes Worksheet

CSS Best Practices

  • What are CSS naming conventions? What is a “convention”???
  • What problems are CSS naming conventions trying to solve?
  • What does BEM stand for?

Exercise 📝

Write out class names using BEM for the page elements highlighted in red. CSS Class Naming Worksheet

Conclusion…

There are only two hard things in Computer Science: cache invalidation and naming things.

- Phil Karlton

In-class Assignment

Creating Pull Requests

For this assignment we are going to have students create a basic page on their projects repository as a new branch, then open a pull request for their changes. Next, we will pair up into groups where members will comment on each other’s code. We will initially perform a code review face-to-face with one assigned reviewer, and then we will break for discussion.

Questions for Discussion

  • What was helpful in the comment?
  • How did you point out things that you wanted to ask about?
  • What suggestions did the reviewer give?
  • Did you agree with everything the reviewer said?

Takeaway

When developing on your own, you have total control on what goes into your project and how it is written. The code for your project only has to make sense to you! However, as soon as you have another person look at your code, you have make sure your code makes sense to others too. If your code is not understandable to other developers, then they won’t be able to make good comments and help you out, and they also won’t want to add your code to their project. Viewed this way, code is a language that everybody needs to understand in order to work together. Just like any other language, we have some common practice that help us understand each other. For instance, when developing HTML, we want to make sure any tags that open are also closed.

Understanding Github

  1. What is Github doing?
  2. What is Github Pages doing?
  3. What are we doing when we “merge” code?

Github Pages

  1. What is happening when we turn on Github Pages?
  2. When I view my site on Github Pages, what am I viewing?

Getting started with Free Code Camp

Free code camp is a free resource for learning and practicing coding concepts. On their website, they have hundred of coding challenges testing HTML, CSS, JavaScript and more! They also have a great newletter where which sends tutorials and advice articles for people learning to code.

1. Create an account

2. Update profile

  1. Update your username (and save!)

  2. Change the following settings to public:

    • My name (first name is okay)
    • My location (optional)
    • My points
    • My heat map
    • My certifications (optional)
    • My portfolio
    • My time line

3. Share your profile in Slack

  1. Click “Show me my public portfolio”
  2. Copy URL and share in Slack (Example: https://www.freecodecamp.org/cocarson)

Homework

The goal of this week’s homework is to practice CSS patterns for layouts. CSS layouts are one of the most difficult concepts to do well and cause many professional developers problems. We’ll focus on three main topics for CSS layout: CSS Grid, Flexbox and Media Queries.

Assignments:

  1. Experiment with media queries. Maybe even create an example using https://codepen.io/pen/! Once you understand media queries, upload a post titled “media-queries.md” to your /blog explaining what media queries do and why we use them.
  2. Complete at least half of the challenes in the “CSS Flexbox” section of the Free Code Camp curriculum.
  3. Complete at least half of the challenes in the “CSS Grid” section of the Free Code Camp curriculum.

If you have questions working on your homework, ask in Slack! Volunteers are eagerly awaiting your questions.

Below is a list of resource to help you learn the above concepts. Watching and reading all materials is not required - however, completing the above assignments is.

Videos

Feel free to search for your own tutorials on Youtube! Here are a few we found.

  • Media Queries: https://www.youtube.com/watch?v=ZYV6dYtz4HA
  • CSS Flexbox: https://www.youtube.com/watch?v=0e02dl66PYo
  • CSS Grid:
    • https://gridbyexample.com/video/
    • https://www.youtube.com/watch?v=t6CBKf8K_Ac

Written lessons

  • Media Queries: https://css-tricks.com/css-media-queries/
  • CSS Flexbox: https://medium.com/free-code-camp/learn-css-flexbox-in-5-minutes-b941f0affc34
  • CSS Grid: https://tympanus.net/codrops/css_reference/grid/

Reference:

  • CSS Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  • CSS Grid: https://css-tricks.com/snippets/css/complete-guide-grid/

« Back to curriculum overview