MCTC Course Schedule (next class, Fall 2019)
In this course we will be reviewing HTML and CSS basics and move forward with:
- Creating an index.html, a css folder, and a styles.css page.
- Getting our own Github spaces / registering for a Github Account
- Creating and Hosting a Personal Site on GitHub
- Create an index.html on Github
- Create a css folder, and css file, on Github. Paste in the content from the local site you made.
- View that site online
We will continue with:
CSS Box Model
The CSS cascade
Start with a left-float layout (add a page)
More freecodecamp exercises including items from Applied Visual Design:
- Change an Element’s Relative Position
- Move a Relatively Positioned Element with CSS Offsets
- Lock an Element to its Parent with Absolute Positioning
- Lock an Element to the Browser Window with Fixed Positioning
- Push Elements Left or Right with the float Property
- Change the Position of Overlapping Elements with the z-index Property
- Center an Element Horizontally Using the margin Property
And the rest of Basic CSS module:
- Use CSS Variables to change several elements at once
- Create a custom CSS Variable
- Use a custom CSS Variable
- Attach a Fallback value to a CSS Variable
- Improve Compatibility with Browser Fallbacks
- Cascading CSS variables
- Change a variable for a specific area
- Use a media query to change a variable
Basic Git commands
From Github, create a working copy of a local repository.
First, select or create a new folder on your local machine. Then using terminal (Mac) or Cmder (Windows) make sure you’re in that directory then run the command:
git clone https://github.com/username/username.github.io.git
Copy the “Clone with HTTPS” URL using the green button in your Github repository
Once you have your files pulled down to your local machine you can modify them in your preferred text editor. Then preview them in a browser. For example, if you make changes to your css file, or to your index.html file, view the index.html file in a browser by using the File -> Open File dropdown menu or by dragging and dropping the file from your folder into the a browser window.
When ready to push your files back up to github go to your terminal or Cmder window and type git status to see confirm changes have been saved. Then:
- type git commit -m “Updated the index file with x y z content”
- git push
- View the site online, at Github
- Look at the file history on Github to see the history
Responsive Web Design Basics at MDN
Responsive Web Design Principles in Freecodecamp, with the below exercises:
- Introduction to the Responsive Web Design Challenges
- Create a Media Query
- Make an Image Responsive
- Use a Retina Image for Higher Resolution Displays
- Make Typography Responsive
- Eliminate unnecessary image resources
- Leverage CSS3 effects where possible
- Use web fonts instead of encoding text in images
Creating Navigation: http://css-snippets.com/simple-horizontal-navigation/
Navigation with a dropdown: https://css-snippets.com/drop-down-navigation/
The Flexible Box Module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities.
Flexbox Videos from The Net Ninja with his Github Repo
Understanding Basic Concepts of CSS Flexbox
A Complete Guide to Flexbox
Flexbox Froggy – A game for learning CSS flexbox
Understanding Flex Shrink, Flex Grow, and Flex Basis, and using these properties to their full potential
- CSS Transitions
- Learning jQuery and jQuery introduction video
Should you use or learn jQuery in 2019?
To use or not to use? To learn or not to learn? Let’s see how you can avoid jQuery altogether, and the reasons you should keep using it.
Content Management Systems and Modifying Themes (WordPress Example)
If there’s time:
- Jekyll and Static Site Generators
- Create a blog site with Jekyll
More Resources, for Outside of Class
Beginner’s Guide To CSS Grid And Flexbox
An overview and comparison between CSS Grid and Flexbox layout techniques in CSS.
Does grid replace Flexbox?
Coding Bootcamp Prep
Start learning to code today with our comprehensive free online coding