week 1 recap

Whaddya Learn
  • | HTML
  • | CSS
  • | Git – basics

This cohort has started off very similar to the Mountain View one, but has some key differences. Our morning & evening lectures are given by the founder Michael and he has ambitious goals for us. Same as the CA bootcamp, We are expected to fully cover and feel comfortable with HTML & CSS by the end of week one. Once we have the tags & attributes, we demonstrate our understanding by recreating four different websites with HTML & CSS from screenshots… no inspect element. I’ll put up my work on GitHub.

One key difference between the two cohorts was day two. Day two’s lecture was on some of the basics of Git. While just add, commit, clone, push & pull were discussed, it has introduced everyone to not only the technology & theory of version control, but also shown them the initially scary terminal. In Mountain View we didn’t discuss Git until end of week two.

A second small difference is the frequency of rapid group projects. In week one we did three different group HTML & CSS website recreations from screenshots.

Here’s what I made

website4 - HTML & CSSwebsite4 - HTML & CSSwebsite4 - HTML & CSS

Some interesting tidbits…
  • | custom bullet indents
  • | linear gradients
  • | position absolute/relative

While helping the others, I found that when a custom bullet is specified in CSS using the :before selector, items wrapped in that li element will not indent to same margin as above. Achieving the correct indent can be performed through text-indent:-1em.

Since this first week was a review for me, I decided I would just recreate the fourth screenshot. Of the four assignments, it has the largest room for reusable elements, in my opinion. While creating this site, I looked further into linear gradients in CSS. Unlike my previous attempts, I found that custom color stops can be specified in the CSS. background: linear-gradient(to bottom, silver, white 50%) In this way, backgrounds can be two toned w/o a ramped transistion.

Also on the fourth site, one of the interesting points was aligning images to the bottom of div rather than just adding some margin above the image. This can be accomplished with position:relative on the containing div and postion:absolute;bottom:0; on the div to be aligned to the bottom. This probably isn’t the best, but it is certainly concise and pretty clean.

And that’s a wrap