Reflections Front End Web Development – Lessons 5 and 6

Lessons five and six cover CSS syntax.  After a second review,  I  took a moment to write down my thoughts and answer the following questions:

  • What new skills have I learned?
  • What has been easy?
  • What has been difficult?
  • How have I used the problem solving strategies from the first project to overcome challenges so far?

I’ve refreshed and learned many new skills.  Overall, I found the css lessons and problems to be moderately easy (especially given the many provided online resources), and did not encounter any significant difficulties.  The HTML learned from previous lessons was carried over.

Lesson 5:

CSS (Cascading Style Sheets) is the markup language used to describe how elements on websites should look: it’s all about style.  Here we separate the description of the content (HTML) from the description of how we want the content to look on the page (CSS).

We also took some time to cover both CSS and HTML comments:commentsPlus we learned about three different types of selectors:

  • Tag Selectors
  • Class Attribute Selectors
  • Id Attribute Selectors

Provided CSS references included:

In addition, we were introduced to Google Chrome’s Developer Tools (the set of web authoring and debugging tools built into the Google Chrome browser). These tools are used to iterate, debug and profile websites.  Other browsers also provide their own developer tools. For example, Firefox Developer Tools allow you to examine, edit, and debug HTML, CSS, and JavaScript on the desktop and on mobile; and Safari includes it own Web Inspector.  Then I loaded one of my favorite websites and identified some id and class attributes:

graphicPolicy

Next we learned about CSS Units: absolute/fixed units and relative units (comparison to other linked property).  The two most commonly used unit types are pixels (fixed) and percentages (relative).

We also learned of two means to define CSS colors: RGB versus Hex.  We also saw a tutorial on how to access the color picker within Chrome’s developer tools.

color picker

Listed below are resources for additional information on coloring:

Lesson 6:

In lesson six we tackled the CSS css problem set and learned how to link a CSS stylesheet to an html page.  A stylesheet is a file containing the code that describes how elements on your webpage should be displayed.

linkToAStylesheet

We also worked on quizzes requiring the use of the Chrome developer tools to do some reformatting.

Here is the CSS/HTML code from the problem set that I saved to codepen.io (note that in some cases, because I am using the free version of codepen that does not allow the posting of images, I substituted my own image links to make the code work):

Happy Coding and Blogging!

Images

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s