1) The document provides resources for a front-end development session including working files, slides, and an agenda.
2) It reviews HTML tags, CSS selectors, the box model, positioning, and Flexbox.
3) Instructions are given to install Atom plugins and review JavaScript and JQuery before adding an Express server to a webpage.
This document provides an introduction to CSS (Cascading Style Sheets), covering topics such as:
- What CSS is and why it's used
- How to reference a CSS stylesheet from an HTML document
- CSS syntax including selectors, properties, and values
- Common CSS tags, properties, and positioning techniques
- Tools for inspecting and debugging CSS
The document covers various topics related to CSS including CSS introduction, syntax, selectors, inclusion methods, setting backgrounds, fonts, manipulating text, and working with images. Key points include how CSS handles web page styling, the advantages of CSS, CSS versions, associating styles using embedded, inline, external and imported CSS, and properties for backgrounds, fonts, text formatting, and images.
Created and designed by Google, Material Design is a design language that combines the classic principles of successful design along with innovation and technology. Google's goal is to develop a system of design that allows for a unified user experience across all their products on any platform. Supported Browser Chrome,Firefox, IE9+(icons IE10+).
Web front end development introduction to html css and javascriptMarc Huang
This document provides an introduction to HTML, CSS, and JavaScript for building websites. It discusses how websites work by connecting clients and servers, and compares making a website to writing a book by organizing content into pages. The document then covers the basic purposes and syntax of HTML for creating page content, CSS for styling, and JavaScript for interactivity. It provides many code examples and explains common elements, properties, and methods in each language to demonstrate basic front-end web development concepts and tools.
The document provides an overview of HTML 5 and its structure and common elements. It discusses the basic structure of an HTML document which includes the html, head, body and doctype elements. It also covers common text formatting elements, headings, paragraphs, lists and more semantic structural tags introduced in HTML 5 like header, nav, aside and section. The document includes examples and exercises for readers to practice the concepts covered.
1) The document introduces CSS (Cascading Style Sheets) and discusses how it is used to separate HTML content from presentation through external style sheets, embedded styles, and inline styles.
2) It covers basic CSS syntax including selectors, declarations, properties, and values. Common text-related properties like font, color, size, and alignment are described.
3) The "cascade" of CSS is explained, with browser, user, and author styles having different levels of precedence based on specificity and importance. This determines which styles will apply when conflicts occur.
This is the CSS Tutorial for Beginners that teach the basics of CSS. This tutorial will show the basic structure of a CSS style and will show 3 different methods to apply styles.
Make Css easy(part:2) : easy tips for css(part:2)shabab shihan
This slideshow presentation is designed to introduce you to Cascading Style Sheets (CSS). It is the first of two CSS workshops available. In addition to the two CSS workshops, there are also workshops on HTML, PHP, and MySQL.
CSS is used to style and lay out web pages. There are three types of CSS: external, internal, and inline stylesheets. External stylesheets define styles in CSS files and can be used across many web pages, internal stylesheets are defined within the <style> tags in an HTML page, and inline styles are defined within HTML elements using the style attribute. CSS selectors allow targeting specific elements using IDs, classes, types, and other attributes to style them. Common CSS properties include colors, backgrounds, borders, padding, margins, and styling of links and lists.
1. CSS (Cascading Style Sheets) is a language used to define the style and layout of web pages. CSS can be applied internally, inline, or through external style sheets.
2. There are different types of CSS selectors including tag selectors, ID selectors, and class selectors that allow styles to be applied to specific HTML elements. Common CSS properties define colors, fonts, spacing, and layout.
3. CSS3 introduces newer specifications like rounded corners, shadows, gradients, transitions, and transformations that expand on the original CSS standards. Features like custom fonts, multi-column layout, flexible box and grid layouts add additional styling capabilities.
This document provides an overview of CSS concepts including id and class selectors, the box model, positioning, sprites, pseudo-classes, and color properties. It defines id and class selectors, explains how each selects a single or multiple elements. It describes the box model including the content, padding, border, and margin areas. Image sprites and examples of using them are provided. Pseudo-classes and their syntax are defined. Examples of navigation bars and vertical navigation bars using lists are given. Finally, it demonstrates setting background, text, and border colors using color names and hexadecimal codes.
The document provides an overview of basic CSS (Cascading Style Sheets) concepts including what CSS is, why it is used, CSS syntax, selectors like element, class, ID and pseudo selectors, and common CSS properties for styling elements like color, background, fonts, text, lists, and borders. CSS is used to control the presentation and layout of HTML documents and is linked to HTML pages through <link> or <style> tags in the <head> section.
this presentation covers the following topics which are as follows
1. Introduction of css
2. History of css
3. Types of css styling
4. Css syntax
5. Css Selector
6. Css Variations Or Css Versions
CSS3 is the latest standard for cascading style sheets (CSS). CSS3 introduces several new modules that expand the capabilities of CSS, including selectors, box model, backgrounds/borders, image values, text effects, transformations, animations, multiple column layout, and user interface. The document provides examples of CSS3 properties and modules, demonstrating borders, selectors, text effects, menus, and creating multiple columns. It concludes by thanking some websites for information on CSS3.
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at www.fitc.ca
If you’re working on a large project with a lot of hands in the CSS pot, then your CSS may be doomed to code bloat failure. Scalable and modular CSS architectures and approaches are the new hotness and rightfully so. They provide sanity, predictably and scalability in a potentially crazy coding world. This session will give an overview of some the most popular approaches, including OOCSS, SMACSS, CSS for Grownups, and DRY CSS as well as discussing some general principles for keeping your CSS clean, optimized, and easy to maintain.
Cascading Style Sheets (CSS) allows obtaining full control over HTML elements and their default properties. CSS can be used to easily redefine properties of any HTML tag, opening new design opportunities. Styles defined in CSS can be reused throughout an HTML document or across multiple pages for consistent formatting. The document discusses different methods of implementing CSS, including inline, internal, and external stylesheets. It also covers various CSS properties for formatting text, fonts, colors, backgrounds, lists, borders, opacity, and more. Examples are provided to demonstrate different CSS declarations.
This document provides an overview of responsive web design concepts including layouts, units like REM and EM, media queries, viewports, and grids. It discusses static, liquid, adaptive and responsive layouts. REM units are described as root EM units. Media queries are introduced as a way to apply different styles based on screen width. Viewport meta tags are covered to enable responsive scaling. Grid systems using floats or frameworks like Bootstrap are also summarized.
This document provides an important notice about final project milestones, links to slides about front end web development (FEWD), instructions for setting up a GitHub repository and copying code files for this week's lesson, and an agenda for reviewing variables, conditionals, functions, and working with arrays and collections of data. Students are instructed to begin writing pseudo code and drafting HTML/CSS for their application and submit it by the end of the 7th week.
The document discusses the origins and characteristics of thoroughbred horses. It states that thoroughbreds originated in England through the mating of native mares with oriental stallions from Arabia, Turkey, and Barbary. They are known for their speed and athleticism, and are commonly black, dark bay, bay, or chestnut in color. Thoroughbreds are typically used for horse racing over distances originally of up to 3 miles, though now around 1.5 miles.
The document provides instructions for setting up a development environment for front end web development using Atom as the code editor. It discusses installing Atom and useful Atom plugins. It then covers GitHub basics like what Git and GitHub are, how they work, common terminology, and how to create and clone repositories. Finally, it provides step-by-step instructions for using GitHub to create and publish repositories for class assignments.
The document provides step-by-step instructions for installing Windows 7 on a personal computer. It outlines 20 steps for installing Windows 7, including entering the BIOS, booting from the installation DVD, selecting language and time preferences, installing Windows files, setting up a user account, and configuring network settings. The instructions explain the installation process and note that the steps will complete installation of Windows 7 on a personal computer.
This document discusses electrical discharge machining (EDM). It summarizes key parameters and concepts in EDM processes. The parameters that influence EDM include supply voltage, breakdown voltage, charging resistance, capacitance, gap setting, electrode material, electrode movement, electrode wear, dielectric fluid, flushing method, process parameters like current and pulse duration, types of EDM like wire EDM, factors that influence material removal rate and surface integrity like surface roughness, recast layer and heat affected zone. The document also discusses characteristics of EDM processes.
This document provides information about Shetland horses. It states that Shetland horses originate from the Shetland Islands located off the coast of Scotland. They are very small, with an average height of 10 hands and a maximum height of 11.2 hands. Shetland horses come in colors like black, brown, and white with black spots. They have developed sturdy bodies and thick coats suited to withstanding the harsh climate of the islands. Shetland horses are commonly ridden by children for pleasure and are also sometimes used for pulling carts.
This document provides information and instructions for FEWD Week 6. It includes links to slides for the week, instructions for setting up the weekly GitHub repository, and notes on manipulating arrays and collections in JavaScript. It also discusses refactoring code, the "this" keyword, and techniques for debugging code, including using the console, breakpoints, and getting help from others. The agenda covers collecting and manipulating data, arrays, iterating over arrays, refactoring, the "this" keyword, and debugging.
An introduction to Machine Learning and we used it at FreshBooks to automatically categorize our customers' expenses. Presented at the November 2015 ExploreTech Toronto meetup by Alex Vermeulen & Tobi Ogunbiyi
This document provides an agenda and information for FEWD Week 3. It discusses units of measurement like pixels, percentages and ems. It also covers font sizing, layouts like static, liquid, adaptive and responsive designs. Media queries and flexbox are introduced as tools for responsive layouts. Students are assigned to continue working on the Relaxr project and learn about units, layouts, media queries and flexbox through examples and exercises.
This document provides an agenda and slides for a FEWD (Front End Web Development) class. It discusses the CSS box model, nested selectors, HTML templates, and starting the Relaxr landing page assignment. Key points include:
- The CSS box model consists of margins, borders, padding, and content
- Nested selectors allow targeting elements within other elements
- Students are instructed to create a GitHub repository and commit their weekly work
- Layout techniques like floats and HTML5 structural elements are reviewed to help structure the Relaxr assignment pages
The document summarizes information about the Percheron breed of draft horse. It provides details on the average weight, height, and color of Percherons. Additionally, it notes that Percherons are one of the most popular breeds of draft horse worldwide and describes their overall impression as powerful and strong with a quick temperament. Members of the breed are considered intelligent.
Designing for Online Collaborative SensemakingNitesh Goyal
The document describes a study that tested the effects of implicit sharing of notes in collaborative sensemaking. 64 participants were divided into 34 teams and assigned to one of two conditions: a condition with no implicit sharing where each person only saw their own notes, and a condition with implicit sharing where notes were automatically shared between partners. Both conditions allowed for explicit sharing via chat. The teams completed a practice session and a 60 minute task to identify the name of a serial killer from case documents. Performance, workload, and information exchanged were measured and compared between conditions to understand the impact of implicit note sharing.
This document provides information and instructions for Week 8 of the FEWD course, including:
- A link to slides for the week's material.
- A reminder that the final project draft is due and students should focus on iterating their project.
- Instructions for creating a GitHub repository to store weekly coursework.
- An overview of forms, including form tags, input types, labels, and validation. Styling forms and customizing form elements is also covered.
- An exercise to style a todo list form is included.
Next week, students will be required to hand in wireframes for their final projects. Wireframes can be created using tools like Balsamiq Mockups, Sketch, or pen and paper. Previous student projects from the FEWD program around the world can be found at a provided URL.
Hybrid Stochastic Search Technique based Suboptimal AGC Regulator Design for ...Dr. Omveer Singh
This document proposes a hybrid genetic algorithm-simulated annealing (GASA) technique for designing suboptimal automatic generation control (AGC) regulators for a two-area power system model. GASA is applied to determine the constrained feedback gains of a PI regulator using available state variables as outputs. Simulation results show the proposed GASA regulator provides better dynamic performance than suboptimal PI regulators, with lower overshoots and faster settling times in response to load perturbations. The proposed approach provides an effective yet simple suboptimal AGC solution that does not require full state information.
Asya Filipchenko is an architect and interior designer with over 15 years of experience. She has degrees from universities in Moscow and a diploma from Unitec Institute of Technology in Auckland. Her portfolio includes student work and professional experience with commercial design projects including offices, retail stores, cafes, and residential homes. She has extensive skills in 3D modeling, drawings, space planning, and material/furniture selection.
This document discusses basic CSS layout and properties. It explains how to use class and ID selectors to style specific elements on a page. It also describes the differences between internal, external, and inline CSS styles. Finally, it covers the main CSS background properties including background-color, background-image, background-repeat, and background-position that control the aesthetics of a website.
The document provides an overview of CSS (Cascading Style Sheets) methodology. It defines CSS as the language used for implementing designs on HTML documents. It then covers CSS basics including selectors, properties, conflicts resolution using specificity and cascade order. It also discusses the box model which defines how browsers handle rectangular boxes for elements. Finally, it offers some best practices tips such as resetting styles, separating content from design, and planning layout during HTML coding.
Css training tutorial css3 & css4 essentialsQA TrainingHub
Learn CSS - Cascading style Sheets to crate awsome looking for your general html Ui & Create responsive HTML Templates by understanding this css tutorial
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Erin M. Kidwell
Here are the steps to build a basic horizontal navigation menu bar:
1. Create an unordered list <ul> with class="menu"
2. Add list items <li> for each menu item
3. Style the <ul> with display:inline-block and border-bottom
4. Style the <li> with display:inline-block, padding and hover effect
5. Add a class="current" to highlight the active page
6. Use a border-left on .current to create a left arrow
Let me know if any part needs more explanation! Building menus is a common task and these techniques will serve you well.
The document discusses how to use Cascading Style Sheets (CSS) with Corvid Servlet Runtime templates to control formatting and layout. CSS allows separating design from content, making templates simpler and easier to maintain. It also enables adapting appearance for different devices. The document provides examples of using CSS classes to style template elements and explains how to set up a demo system using the included CSS and templates.
The document discusses how to use Cascading Style Sheets (CSS) with Corvid Servlet Runtime templates to control formatting and layout. CSS allows separating design from content, making templates simpler and easier to maintain. It also enables customization of appearance for different devices. The document provides examples of how to apply CSS classes and rules to Corvid template elements to control fonts, colors, positioning and more.
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
This document discusses CSS positioning properties. It explains static positioning as the default normal flow layout. It describes float as removing an element from the flow and allowing other content to wrap around it. Relative positioning is defined as positioning an element relative to its static position, while fixed takes an element out of flow and positions it relative to the browser window. Absolute positioning positions an element relative to its first positioned ancestor, removing it from the flow. Examples are given for float, relative, fixed, and absolute. Class exercises provide opportunities to practice these positioning techniques.
Cascading Style Sheets (CSS) allow control over the appearance of web pages by separating presentation from content. CSS is used to create consistent styles across multiple pages by defining styles that can be applied using classes and IDs. CSS rules define selectors and properties to style HTML elements, and separating styles from HTML structure makes pages easier to maintain and modify. Common CSS selectors include element, class, ID, and contextual selectors. Styles can be linked to HTML using inline, embedded, and external stylesheets.
GDI Seattle Intermediate HTML and CSS Class 1Heather Rock
The document provides an overview of an intermediate HTML and CSS class. It begins with introductions and setting ground rules. It then reviews key terms like web design, development, front end and back end. It reviews common tools like browsers, development toolkits, and text editors. It reviews the anatomy of a website, HTML elements, and CSS syntax. It covers techniques like resets, standard widths, wrappers, pseudo-selectors, linking pages, and using custom fonts. Finally, it provides a brief introduction to HTML5 and highlights new semantic elements.
Act Academy provides Industrial training in PHP, .Net, graphic designing, web designing and many more. Also provides diploma courses in CAD designing, Financial accounting with 100% job assurances.
Cordova training - Day 2 Introduction to CSS 3Binu Paul
This document provides an introduction to CSS3 and its key concepts. It discusses how CSS is used to control the style and presentation of HTML documents. The main topics covered include the advantages of CSS like time savings and easy maintenance, the different CSS modules, syntax involving selectors, properties and values, and how to include CSS through different methods. It also explains various CSS properties for styling text, backgrounds, borders, images and positioning elements.
Bootstrap is a popular front-end framework that provides pre-built styles and components for faster web development. It uses HTML, CSS and JavaScript for a mobile-first approach. Originally developed by Twitter, Bootstrap has been released as open source. It provides basic styling for common elements like typography, forms, buttons, tables and a powerful grid system for responsive design. The document discusses these features of Bootstrap in detail.
Bootstrap is a popular front-end framework that provides responsive grid system, prebuilt components, and plugins for developing responsive mobile-first websites and web applications. It includes HTML and CSS templates for typography, forms, buttons, navigation and other interface components as well as optional JavaScript plugins. The document discusses Bootstrap's grid system which uses rows and columns to build layouts responsive across devices, and provides examples of basic grid structures for stacking columns horizontally and creating different layouts for mobile, tablet and desktop screens.
This document provides an introduction to CSS (Cascading Style Sheets) and discusses various ways to implement CSS styles, including internal stylesheets, external stylesheets, inline styles, classes, IDs, and using divisions and spans. It covers CSS syntax, properties like margins, inheritance, and combining selectors. The document is divided into 18 chapters that progressively introduce CSS concepts from the basics to more advanced topics like browser issues.
This document provides instructions for setting up the folder structure and initial HTML page for a web development project. It walks through creating folders for the project files and then adding the basic HTML structure and tags for the first page, including the <DOCTYPE>, <html>, <head>, <title>, and <body> elements. It also introduces adding CSS and JavaScript files by linking and scripting them into the <head> of the page. The goal is to set up the initial structure and files needed to begin building out the first web page.
The document discusses different types of client-side scripts including Cascading Style Sheets (CSS), JavaScript, and Dynamic HTML (DHTML). It explains how CSS can be used to style web pages through internal, external, and inline styling. Common CSS properties for styling backgrounds, text, and other elements are also described.
Front-end methodologies discusses common solutions like SMACSS and ITCSS for organizing CSS code into reusable, maintainable components. It also covers approaches like OOCSS, BEM, and CSS Modules. CSS Modules in particular scopes class names to prevent collisions and makes extending classes problematic.
IP address - Past, Present and Future presented by Paul WilsonAPNIC
Paul Wilson, Director General of APNIC delivered a keynote presentation on 'IP address - Past, Present and Future' at MyNOG 11 held in Kuala Lumpur, Malaysia on the 5 June 2024.
Lincoln University degree offer diploma Transcript
Pfnp slides
1. PFNP - SESSION 2: THE FRONT END
WILL MYERS
Freelance Front-end Developer
WORKING FILES FOR THIS WEEK
http://bit.ly/1lJc7AM
SLIDES
http://www.slideshare.net/wilkom/pfnp-slides
2. ATOM PLUGINS
open Atom
go to Preferences (Atom > Preferences), this will launch a
Settings tab.
select Install from the Settings left-hand nav
search for 'atom-beautify' and install this
do the same for 'open-in-browser', 'white-cursor' and
'highlight-line'
restart Atom
4. AGENDA
Summary from last week
HTML Tags & CSS Selectors Review
The Box Model, Positioning, FlexBox
JavaScript and JQuery Review
Adding a simple Express Server to your webpage
Internet protocols - IP, TCP, HTTP
Online Global Community for Web Development
5. SUMMARY FROM LAST WEEK
introduction to the command line.
workshop to learn the basics of
JavaScript.
Install Node, NPM
Install http-servermodule globally
Create simple webpage with CSS styling and some
JavaScript functionality
( )
Run the http-servercommand to serve the current
working directory's files and sub-folders to the browser.
GA Fundamentals
Nodeschool javascripting
http://codepen.io/cbas/pen/QjRWZm
7. HTML SYNTAX
creates structured documents from page 'parts'
(headings, paragraphs, lists, links, footer etc)
is written in the form of HTML elements consisting of tags
elements either have opening and closing tags: <p></p>
or are 'empty', they have no closing tag: <img>
8. HTML SYNTAX
HTML tags can also have attributes which are properties
written inside the first (opening) tag:
<img src="smiley.gif" height="42"
width="42">
9. MAIN TAGS
<html></html>the root container tag for the whole
document (web page)
<head></head>the container tag for metadata and links
to external files (e.g .css files)
<body></body>contains all the visible structure and
content of the web page, nested inside
11. CONTENT TAGS
Text Elements
<p>This is a paragraph</p>
<code>This is some computer code</code>
<span>For styling words inside a container tag</span>
15. CONTENT TAGS
<div></div>
This is a very widely used generic container tag. It is a
rectangular element which can be styled with margins,
padding, borders, background-colors, width, height etc. Like
many other elements it has block-level display which means
it starts on a new line of the page.
<div>s can be nested in other <div>s
19. IMAGES
Relative Path
Given this folder structure the same image would be
<img src="../images/logo.png">
../means to go up a directory, and can be used
repeatedly: ../../would go up two directories.
23. HTML VS HTML5
HTML5 is HTML with a few additions The Doctype tells you if
the page is HTML5 ready.
<!DOCTYPE html>
HTML HISTORY
24. HTML5
brings many improvements and new features to web
pages
many features of HTML5 have been built to run on low-
powered devices such as smartphones and tablets
introduces the new <video>, <audio>and <canvas>
tags
introduces many new structural document tags, e.g.
<main>, <section>, <article>, <header>,
<footer>, <aside>, <nav>and <figure>- these
are like <div>but with a semantic styleable name.
26. CSS
is a styling (stylesheet) language used for describing the
presentation of an HTML document
it separates document content from document
presentation, including control of layout, colors, and
fonts
it makes the page much easier to edit and update, and
improves accessibility
multiple HTML pages can share the same formatting by
writing the CSS in a separate .css file and linking to it from
your HTML page
28. CSS
Where does CSS go?
Inline with the styleattribute
<h1 style="color: red;">Hello World</h1>
In the head
<head>
<style> </style>
</head>
h1 {color: red;}
In a separate file (best option)
<head>
<link rel="stylesheet" type="text/css" href="path/to/some.css">
</head>
29. CSS
Using a separate CSS file
It is best practice to put CSS in its own file and link to it from
the <head>.
<link rel="stylesheet" href="style.css">
31. CSS BREAK DOWN
This whole thing is called a rule.
The pis called a selector, and it's followed by a set of
declarations in a declaration block.
32. CSS BREAK DOWN
The selector, pin this case, specifies what parts of the HTML
document should be styled by the declaration. This selector
will style all pelements on the page.
33. CSS BREAK DOWN
The declaration block here is:
{
color: red;
font-weight: bold;
}
Declarations go inside curly braces.
Every declaration is a property followed by a value,
separated by a colon, ending in a semicolon.
34. CASCADING STYLE SHEETS (CSS)
COLORS
Colors can be specified in CSS in a variety of ways:
keyword (e.g. redor blanchedalmond)
hex codes (e.g. #FF0000)
rgb(0,0,0)
rgba(255, 255, 255, 0.8)
hsl(0, 100%, 50%)
hsla(0, 100%, 50%, 0.8)
Today we'll use keywords :
http://www.w3schools.com/html/html_colornames.asp
35. CSS SELECTORS
if you want to directly style all elements of a certain type (e.g
all <p>tags) they you style p
p {color: red;}
if you want to apply styles to individual elements then use
'#' (hash/id) selectors. This selects one element on your
page with an unique id attribute
#my-id {color: green }
if you want to apply styles to groups of elements then use '.'
(dot/class) selectors. These select elements which have a
corresponding class attribute.
.my-class {color: blue }
36. CSS SELECTORS
There are many other selectors and each has a different
level of importance. This means it can either be overwritten
by, or can overwrite another style.
See: http://code.tutsplus.com/tutorials/the-30-css-
selectors-you-must-memorize--net-16048
37. CSS SELECTORS EXERCISE
In the blankfolder of the downloaded working files, do the
following:
Copy this code into lesson.css
#my-id { color: green; background-color: white; }
.my-class { color: blue; background-color: yellow; }
Copy this code into lesson.html
<p id="my-id">There should only be one of me.</p>
<p class="my-class">There can be many of me.</p>
<p class="my-class">There can be many of me.</p>
<p>This text has <span class="my-class">a styled bit</span> inside</p>
38. CSS STYLE PROPERTIES
There are many CSS styling properties. Some can be applied
to all types of tags, others only work on certain tags.
color: sets the color of text
background-color: sets the color of the background
rectangular area, including the padding
width: sets the width of the element in different units
height: sets the height of the element in different units
font-family: sets the text font
font-weight: sets the text font weight - e.g. boldor
can be a numeric value
39. CSS STYLE PROPERTIES
These properties relate the to the box modeland
positioning
margin: sets the outer transparent rectangular border of
an element as part of the box model
border: sets the visible rectangular border style of the
element as part of the box model
padding: sets the inner transparent rectangular border
of an element as part of the box model
display: sets the layout of the element in the 'flow of
the page'
40. CSS BOX MODEL
The CSS box model is essentially a box that wraps around
every HTML element. It consists of: margins, borders,
padding, and the actual content.
In terms of visibility, marginarea is transparent, padding
area inherits background-color, borderhas its own style
and color properties.
You can see a representation of the box model for an
element in Chrome dev tools (Cmd + Alt + I), in the
'Elements' tab.
41. CSS STYLE PROPERTIES
margin, borderand paddinghave individual properties
for each side of the rectangle.
margin-top, margin-left, margin-bottom, margin-right
border-top, border-left, border-bottom, border-right
padding-top, padding-left, padding-bottom, padding-
right
These values can also be set with shorthand:
margin: top right bottom left; (clockwise)
margin: top-and-bottom left-and-right;
42. CSS STYLE PROPERTIES - BORDERS
Border has its own style and color properties:
border-width(number px)
border-style(string)
border-color(string or hex value)
It is commonly set as border: width style color;
border: 4px dashed red;
43. CSS STYLE PROPERTIES - BORDERS
Border style properties: none(low priority), hidden(high
priority), dotted, dashed, solid, double, groove,
ridge, inset, outset
Don't forget border-radius
border-radius:50%;makes a square into a circle
44. CSS AND <DIV>EXERCISE
Remembering that a <div>can be styled and nested inside
another <div>, try and do the following:
create a circle inside a square
create the Singaporean flag (without the stars)
Your code should look something like:
<div class="parent-class">
<div class="child-class"></div>
</div>
The demo is here, but have a go without looking first
http://codepen.io/wilkom/pen/OyrPzV
Work in the blankfolder of the downloaded working files
45. CSS POSITIONING
You can also position <div>s (or other HTML tags) with
exact values using the positionproperty and top, left,
bottom, right properties.
positionhas the following values:
static: default positioning in the document flow
absolute: positioned relative to its first non-static
ancestor element
fixed: positioned relative to the browser window
relative: positioned relative to it's normal default
position
46. CSS POSITIONING EXERCISE
Go to this link: http://codepen.io/wilkom/pen/xwmPeL
You can see the top and left properties set on the different
classes that are applied to the <div>s.
47. CSS OVERFLOW OF AN ELEMENT
What happens when we put some content into a container
and the content is bigger than the container? This can
happen particularly when you want to put some text inside
a container of a fixed size, but the text requires more space
than the container has available.
Open up the folder named overflow-textand open the
lesson.htmlfile in your browser
48. CSS OVERFLOW OF AN ELEMENT
For this we used the overflowproperty in the container. It
has the following values:
visible: (default) the content will âbreak outâand be
visible
hidden: any overflowing content will be hidden
scroll: the content is clipped and scroll bars will always
be available
auto: the content is clipped and scroll bars should be
available
initial: default value
inherit: inherits from parent container
49. CSS OVERFLOWING NESTED IMAGES
Open up the folder named nested-imageand open the
lesson.htmlfile in your browser
See if you can get the image to scale down be 'sitting inside'
the parent circle. Hint there is a class you can use in the
lesson.css.
50. CSS FLOW OF AN ELEMENT IN THE
PAGE LAYOUT
The display property affects how an element is positioned in
the 'flow' of the page.
displayhas the following values:
block: means the element 'moves down' the page
inline: means the element 'moves across' the page
inline-block: means the element is inline and the
inside of this element is block
flex: this is a big new thing that makes layouts easier
51. CSS FLEXBOX
Flexbox is a new way of laying out the flow of elements in a
web page.
It is a definite improvement in layout techniques for web
pages. A good link explaining Flexbox is here:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
It is now fairly well supported in browsers (going back to IE9
using prefixing), and so should be used in front-end web
development going forward.
52. CSS PAGE LAYOUT PRE-FLEXBOX
Open up the folder named web-page-float-layout
and open the lesson.htmlfile in your browser
Before Flexbox the most common way of doing a page
layout involved floats. The floatproperty in CSS was
originally intended for making content 'float alongside'
other content. It ended up also being used to float
containers alongside each other (e.g. sidebars in a web
page).
53. CSS FLOATS
You can 'float' elements to the left or right of a parent
container.
Floats are often used for page layouts - for example to
have a sidebar
You need to use the clearproperty in the style of the
element that comes after the container of the floated
elements. This stops the float continuing in the rest of the
page. By convention a style for clearing a float is
commonly called a clearfix.
55. CSS CLEARING FLOATS
You need to clear floatsfor different reasons - whether
you are still inside the container of your floated elements or
back up on the same level as the container.
In both cases a clearwill fix things, but because things are
different inside and outside the container there are also
other approaches to clear-fixing. Basically floated items in a
container will cause the container to collapse so this will
affect subsequent elements at the container level, as well as
elements in the container.
See http://www.sitepoint.com/clearing-floats-overview-
different-clearfix-methods/
56. CSS HTML5 TAGS LAYOUT
Open up the folder named web-page-h5and open the
lesson.htmlfile in your browser.
This page layout does not use floatsbut doesn't use
Flexbox either. It is a single column layout with a 'sticky
footer'.
It uses HTML5 semantic tags which can be styled directly.
57. CSS FLEXBOX LAYOUT
Flexbox's algorithm works on the basic principles of
elements flowing (vertically or horizontally), wrapping, and
expanding or shrinking according to different page sizes (e.g
for a laptop screen vs a tablet screen vs a mobile phone
screen).
Open up the following working files in the browser and play
around with resizing the window:
flexbox/holy-grail-layout/index.html
flexbox/flexible-column-layout-with-rows/index.html
58. CSS FLEXBOX VERTICAL CENTERING
Another old problem that Flexbox solves easily is vertically
centering text. Previous ways of doing this involved hackery
or limitations (e.g. content could only be on one line).
Go to this link to see examples of vertically centered text:
http://codepen.io/wilkom/pen/NGeyNg
59. CSS FONTS
In our web pages we can use the system fonts that come
with most operating systems, like Times, Arial and Helvetica.
But what if we want to use a really cool font, and embed it
so that anyone who visited our web page would see that
font. Enter the CSS3 font embedding syntax.
@font-face { font-family: MyFont; src: url('path/to/MyFont.ttf'); }
Now go and download some cool free fonts and put them in
your project folder: http://www.dafont.com/
Use the font-family: MyFont;property to apply that
font to a given tag
60. CSS3 TRANSITIONS
CSS3 which is the latest well supported version of CSS gives
you the ability to add transition animations to your HTML
elements. We use the transitionproperty.
We can add some transitions to specific properties so that
they change smoothly over time. One place we can do this is
when an a:hoverstyle is applied to an <a>anchor tag.
-webkit-transition: background-color 2s;
transition: background-color 2s;
https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
61. JAVASCRIPT AND THE DOM
JavaScript in the browser has an API (application program
interface) for accessing and editing the DOM (the document
object model) of an HTML document. The DOM is a
hierarchical tree representation of the structure of the HTML
in a web page.
JavaScript can target specific elements on an HTML page
and show, hide, style, edit and animate them. It can also
listen for events emitted by an HTML page (e.g mouse-clicks)
and invoke functions when an event occurs.
62. JAVASCRIPT AND THE DOM
JavaScript gets a reference to elements with (for example)
document.getElementById()
The JQuery library provides easier ways to do this, but is not
actually necessary.
63. JAVASCRIPT AND CSS
You can dynamically set CSS classes on elements with
JavaScript.
Open up the 'jsfb-styling-css-with-js' in the 'js-for-beginners'
folder and open lesson.htmlin your browser
64. JAVASCRIPT AND CSS
The same thing can be achieved with jQuery using less code,
but you have to import the jQuery library too!
Open up the 'jsfb-styling-css-with-jquery' in the 'js-for-
beginners' folder and open lesson.htmlin your browser
65. JQUERY
JQuery is a JavaScript library that does the following:
Access parts of the HTML page
Modify the appearance of the page
Edit the page
Respond to user interaction
Add animation
Retrieve data from a server using AJAX (Asynchronous
JavaScript and XML)
Simplify common JavaScript tasks
66. JQUERY
JQuery also provides the following useful features:
uses CSS selector syntax
supports extensions
abstracts away browser quirks
allows multiple actions to be defined in one line with
chaining
67. JQUERY SCROLLING
Firstly lets create some <a>anchor tags that link to other
parts of your same page. If you are linking to a spot on the
same page, the format of the link will be similar to:
<a href="#my-anchor">Jump to contact details</a> //note the # (hash)!
Now set the anchor where the first <a>will link to. The
anchor should be placed at the beginning of the line where
you want to start reading after you jump:
<p><a name="my-anchor"></a>Hey you can contact me at blah@blah.sg</p>
or you can target the id of a <div>
<div id="my-anchor">
68. JQUERY SCROLLING
Now make sure jQueryis linked in the <head>of your
page:
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
Create a file called scrollLinks.jsand put it in the root
of your current folder. Then create another <script>link
in your <head>:
<script defer src="scrollLinks.js"></script>
69. JQUERY SCROLLING
Now copy and paste the following code into
scrollLinks.js
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
When you click on an <a>that links to another part of your
page, the page should scroll to that position.
70. NODEJS EXPRESS SERVER EXAMPLE
cdto the 'hello-express-programmers' folder in your
Terminal. We now need to install dependencies via the
command line
npm i express --save
npm install
Now run the server with
npm start