Email me for api key, I need your domain (where wordpress in installed)
https://angelprivate.s3.amazonaws.com/teaching/yootheme_wp_1.18.8.zip
Category: Class Reference
For students who already set up visual studio scroll to the bottom of this post!
Watch the video here if you need visual instructions https://my.pcloud.com/publink/show?code=XZYzg97ZUQI88fjJP3HSQlYxyr2rzFRMbTqk
The first thing you need to do is download the application from the following link:
https://code.visualstudio.com/downloadAfter you install the app by dragging it into the Applications folder, open it.
Now navigate to this link to install the Settings Sync extension https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync and click the Install button
Once you install the extension you will need to click the Reload to Activate button
Once the app reloads follow these steps:
- Use keyboard shortcut Cmd + Shift + P to open the command palette
- Type Sync and go down with the arrow keys to the Sync: Advanced Options and click Enter
- Use arrow keys to go down to Sync: Download Settings from Public GIST and click Enter
- Use keyboard shortcut Cmd + Shift + P to open the command palette again
- Type Sync: and go down to Sync: Download Settings then click Enter
- It should ask you to enter a GIST ID enter the following 846a59831c3a903c311ea25354694cae
It will take a few minutes for all the Extensions to load, once they are done it will ask you to reload. Reload and you are done!
Already followed this guide and just need to update:
- Type Cmd + Shift + P and type “Download” find/select “Sync: Download Settings“
- A popup will ask you to reload click Yes
Suggested extensions:
- Bootstrap auto complete https://marketplace.visualstudio.com/items?itemName=thekalinga.bootstrap4-vscode
- Bulma auto complete https://marketplace.visualstudio.com/items?itemName=demijollamaxime.bulma
Class 14
Review of midterm and some other important CSS properties
Class 15
Frameworks 1
Class 16
Frameworks 2
The Website Generator
http://webdevninja.surge.sh/#/
Additional CSS topics
- Basics: https://codetheweb.blog/2017/11/15/basic-css-properties/
- Borders: https://codepen.io/shayhowe/pen/JmtqC
- Styling links: https://www.smashingmagazine.com/2010/02/the-definitive-guide-to-styling-web-links/
- Box shadows: http://www.css3.info/preview/box-shadow/
- CSS Specificity: https://css-tricks.com/specifics-on-css-specificity/
- Styling buttons: https://fvsch.com/styling-buttons/
- Using the Developer Tools to learn CSS https://stnsvn.com/blog/how-to-learn-css-using-inspect-element-tool
- Practice in class:
- Do together: https://flexboxfroggy.com/
- Try yourself:
- https://learn.freecodecamp.org/responsive-web-design/basic-css/use-a-css-class-to-style-an-element/
- https://learn.freecodecamp.org/responsive-web-design/basic-css/use-css-selectors-to-style-elements/
- https://learn.freecodecamp.org/responsive-web-design/basic-css/use-a-css-class-to-style-an-element/
- https://learn.freecodecamp.org/responsive-web-design/basic-css/style-multiple-elements-with-a-css-class/
- https://learn.freecodecamp.org/responsive-web-design/basic-css/change-the-font-size-of-an-element/
- https://learn.freecodecamp.org/responsive-web-design/basic-css/size-your-images/
- https://learn.freecodecamp.org/responsive-web-design/basic-css/add-borders-around-your-elements/
- https://learn.freecodecamp.org/responsive-web-design/basic-css/give-a-background-color-to-a-div-element/
- https://learn.freecodecamp.org/responsive-web-design/basic-css/adjust-the-padding-of-an-element/
- https://learn.freecodecamp.org/responsive-web-design/basic-css/adjust-the-margin-of-an-element/
- https://learn.freecodecamp.org/responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element/
- https://learn.freecodecamp.org/responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element/
- https://learn.freecodecamp.org/responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element/
- https://learn.freecodecamp.org/responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element/
- https://learn.freecodecamp.org/responsive-web-design/basic-css/style-the-html-body-element/
- Advanced:
- https://learn.freecodecamp.org/responsive-web-design/basic-css/inherit-styles-from-the-body-element/
- https://learn.freecodecamp.org/responsive-web-design/basic-css/prioritize-one-style-over-another/
- https://learn.freecodecamp.org/responsive-web-design/basic-css/override-styles-in-subsequent-css/
- https://learn.freecodecamp.org/responsive-web-design/basic-css/override-all-other-styles-by-using-important/
- Additional Practice at home:
- https://www.codecademy.com/courses/learn-css/lessons/css-setup-selectors/exercises/inline-styles
Homework for this week is focused on our final projects. There are two parts.
Part 1: Provide a wireframe of at least your main/home page. This can be from GoMockingbird, or a picture of your notebook. Should look something like this:
Part 2: Provide a simple outline of the 6 main features/functionalities of your website like this
- Header with menu navigation and a Request a Demo call to action button
- A Hero section that sells the concept of the product with an image of the product
- etc..
Homework is due Tuesday 13th of November via email, please make subject Homework 4
Let’s get your CSS skills up to par with this fun exercise. The final result should resemble something like this:
Download the initial HTML code from this link https://my.pcloud.com/publink/show?code=XZpAHM7ZkMJvAaSzqeSD8pN8oSFlw8m00AQk inside your Class folder and double-click to extract it. Then open it in Visual Studio Code.
The following boxes should exist:
- div.header.flex
- h1.logo
- div.header-menu
- a.menu-item href #about
- a.menu-item href #news
- a.menu-item href #contact
- div.about.flex id=about
- div.about-left
- img.about-image src=link to image of you
- h3.about-name
- p.about-text
- div.about-right
- h2
- p
- div.about-left
- div.news id=news
- h2
- div.news-story
- h3
- p
- p
- div.news-story
- h3
- p
- div.contact id=contact
- h2
- div.contact-info.flex
- div.contact-map
- iframe (from google maps embed http://x.co/gmapslink
- or use the following code directly
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3291.5035300186455!2d-119.85113568388252!3d34.413962880508954!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80e93f67f3314b37%3A0x4e956b7e5cb6cec2!2sUniversity+of+California%2C+Santa+Barbara!5e0!3m2!1sen!2sus!4v1540941782587" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
- div.contact-address
- h4
- h5
- div.contact-map
Your stylesheet should contain the following classes and declarations
- .logo
- margin 0
- padding 0
- color red
- .menu-item
- color green
- .about-left
- width 350px
- padding 20px
- .about-right
- width 100%
- .about-image
- width 100px
- .about-name
- color red
- .news-story
- padding 20px
- .contact-address
- width 50%