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.
We've all been there: lookin' a thousands line spaghetti code of CSS, scrolling up and down, trying to find all the declarations, which override each other here and there, and almost cry when we find out that changing one thing affects a lot more page elements than we expected. (In the meantime we mumble some angry words about the previous developer of the file and sometimes we realize that we are talking about ourselves…)
Slides form my workshop @ drupalaton:
http://2014.drupalaton.hu/schedule#speaker-22
In this one hour tutorial Simon Collison will demonstrate why convention, order and understanding are vital to web design and development teams. He'll give insights into how Erskine approach projects and will help attendees explore ways of creating and evolving their own "Ultimate Package".
Why conventions are essential for successful web projects. How Erskine approach HTML, CSS & JavaScript in their own projects. What to consider when developing your own "Ultimate Package".
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.
We've all been there: lookin' a thousands line spaghetti code of CSS, scrolling up and down, trying to find all the declarations, which override each other here and there, and almost cry when we find out that changing one thing affects a lot more page elements than we expected. (In the meantime we mumble some angry words about the previous developer of the file and sometimes we realize that we are talking about ourselves…)
Slides form my workshop @ drupalaton:
http://2014.drupalaton.hu/schedule#speaker-22
In this one hour tutorial Simon Collison will demonstrate why convention, order and understanding are vital to web design and development teams. He'll give insights into how Erskine approach projects and will help attendees explore ways of creating and evolving their own "Ultimate Package".
Why conventions are essential for successful web projects. How Erskine approach HTML, CSS & JavaScript in their own projects. What to consider when developing your own "Ultimate Package".
If you are new to CSS or have been using it for years this presentation should give you more insight into how to write and use CSS to make your web sites better.
Go over a quick crash course into what it takes to develop a WordPress theme and then jump into some deeper waters on how to utilize Custom Post Types, create custom theme options, and custom meta boxes.
Grok Drupal (7) Theming - 2011 Feb updateLaura Scott
These are slides from my presentation at Drupal Design Camp Los Angeles, February 2011. Video with rather low resolution version of the slides (we inadvertently recorded my presentation notes screen rather than the projector screen) can be viewed on blip:
http://ladrupal.blip.tv/file/4731722/
Media queries are one of the most exciting aspects about CSS today. They will allow us to change our layouts to suit the exact need of different devices - without changing the content. This presentation explains what Media queries are, how to use them, how to target the iPhone and how to create flexible layouts.
Presentation for the Denver HTML5 Users Group on advanced HTML techniques.
Focuses, specifically, on semantic markup (POSH), new HTML5 structural elements, microformats, microdata and ARIA landmark roles
If you are new to CSS or have been using it for years this presentation should give you more insight into how to write and use CSS to make your web sites better.
Go over a quick crash course into what it takes to develop a WordPress theme and then jump into some deeper waters on how to utilize Custom Post Types, create custom theme options, and custom meta boxes.
Grok Drupal (7) Theming - 2011 Feb updateLaura Scott
These are slides from my presentation at Drupal Design Camp Los Angeles, February 2011. Video with rather low resolution version of the slides (we inadvertently recorded my presentation notes screen rather than the projector screen) can be viewed on blip:
http://ladrupal.blip.tv/file/4731722/
Media queries are one of the most exciting aspects about CSS today. They will allow us to change our layouts to suit the exact need of different devices - without changing the content. This presentation explains what Media queries are, how to use them, how to target the iPhone and how to create flexible layouts.
Presentation for the Denver HTML5 Users Group on advanced HTML techniques.
Focuses, specifically, on semantic markup (POSH), new HTML5 structural elements, microformats, microdata and ARIA landmark roles
Five Free Ways to Make Your Business Work Better in MobileBrandEmotivity
Brand Emotivity works with brands and advertising agencies on mobile and innovation projects. In this presentation, we show how every organisation regardless of size can create a great mobile experience.
Presentation made at:
http://www.themarketingandcommunicationloft.com/swissclub/
Customers are trying to engage with Luxury Brands through mobile devices. This deck presents:
. The size of the opportunity, by brand, and by region;
. The competitive landscape;
. A framework for action.
Recem nacida a partir da Rede dos SAMU do Ministerio da Saude e dos SUS uma organizaçao de Protecçao Civil Sanitaria modelo par outros paises com rede de SAMU
two maritime prone disasters countries are implementing their maritime SAMU network for planing the maritime agencies integration for Medico Sanitary disasters taking the SAMU of Le Havre organization in the Chanel Sea
This presentation will introduce the audience to designing a WordPress theme in HTML5 and CSS3. We’ll discuss the history of HTML5, why HTML5 makes blog design easier, and what you need to do to get WordPress to output valid HTML5 code. You’ll also see how CSS3 can be used to generate an awesome-looking site using little to no graphics.
For our first Rice DevChat, BIOE PhD Student Ahmed Haque (me) will be leading a workshop titled: "Introduction to Twitter Bootstrap: A Crash Course on Web Development for Noobs".
These slides contain the introductory material on HTML/CSS that led up to the "live-build" of the Rice DevChats website. See the Github Repo: https://github.com/afhaque/Rice-DevChats-Bootstrap and Rice DevChats website for more information: http://ricedevchats.org/
Ever tried to maintain a design system across a large site? Collaborated with a front-end designer or front-end developer who wants to design/code in the style guide, but can’t see what impacts that will have on the actual site? Do you use and maintain a single design or brand across multiple sites? Are you building on design frameworks like Bootstrap or Foundation but not sure if you’re “doing it right”?
At the conclusion of this Meetup you will have a better understanding of what it takes to design, build and support more scalable, systemized designs.
In this two part presentation, we’ll first present an overview of pattern libraries, atomic design, and design systems. You’ll understand these important concepts and be prepared to start thinking about how to use them in your work.
We’ll then show you how Exygy uses pattern libraries in a way that empowers our designers and engineers to collaborate effectively and efficiently as a team. We’ll touch on leveraging pattern library specific tools like Fabricator (using Node.js and Handlebars templates), and finish with a solution for creating and maintaining a pattern library within WordPress and integrating it into the templates for your custom WordPress theme.
Vskills certified CSS designer Notes covers the following concepts.
1 CSS Basics
1.1 Introduction
1.2 Why to use CSS
1.3 CSS Editors
1.4 A CSS Example
1.5 Custom CSS
1.6 Cross Browser Testing
1.7 Including CSS
1.8 Validating CSS
Get complete e-book on CSS.
http://www.vskills.in/certification/Web-Development/certified-css-designer
Tata Group Dials Taiwan for Its Chipmaking Ambition in Gujarat’s DholeraAvirahi City Dholera
The Tata Group, a titan of Indian industry, is making waves with its advanced talks with Taiwanese chipmakers Powerchip Semiconductor Manufacturing Corporation (PSMC) and UMC Group. The goal? Establishing a cutting-edge semiconductor fabrication unit (fab) in Dholera, Gujarat. This isn’t just any project; it’s a potential game changer for India’s chipmaking aspirations and a boon for investors seeking promising residential projects in dholera sir.
Visit : https://www.avirahi.com/blog/tata-group-dials-taiwan-for-its-chipmaking-ambition-in-gujarats-dholera/
Enterprise Excellence is Inclusive Excellence.pdfKaiNexus
Enterprise excellence and inclusive excellence are closely linked, and real-world challenges have shown that both are essential to the success of any organization. To achieve enterprise excellence, organizations must focus on improving their operations and processes while creating an inclusive environment that engages everyone. In this interactive session, the facilitator will highlight commonly established business practices and how they limit our ability to engage everyone every day. More importantly, though, participants will likely gain increased awareness of what we can do differently to maximize enterprise excellence through deliberate inclusion.
What is Enterprise Excellence?
Enterprise Excellence is a holistic approach that's aimed at achieving world-class performance across all aspects of the organization.
What might I learn?
A way to engage all in creating Inclusive Excellence. Lessons from the US military and their parallels to the story of Harry Potter. How belt systems and CI teams can destroy inclusive practices. How leadership language invites people to the party. There are three things leaders can do to engage everyone every day: maximizing psychological safety to create environments where folks learn, contribute, and challenge the status quo.
Who might benefit? Anyone and everyone leading folks from the shop floor to top floor.
Dr. William Harvey is a seasoned Operations Leader with extensive experience in chemical processing, manufacturing, and operations management. At Michelman, he currently oversees multiple sites, leading teams in strategic planning and coaching/practicing continuous improvement. William is set to start his eighth year of teaching at the University of Cincinnati where he teaches marketing, finance, and management. William holds various certifications in change management, quality, leadership, operational excellence, team building, and DiSC, among others.
VAT Registration Outlined In UAE: Benefits and Requirementsuae taxgpt
Vat Registration is a legal obligation for businesses meeting the threshold requirement, helping companies avoid fines and ramifications. Contact now!
https://viralsocialtrends.com/vat-registration-outlined-in-uae/
Premium MEAN Stack Development Solutions for Modern BusinessesSynapseIndia
Stay ahead of the curve with our premium MEAN Stack Development Solutions. Our expert developers utilize MongoDB, Express.js, AngularJS, and Node.js to create modern and responsive web applications. Trust us for cutting-edge solutions that drive your business growth and success.
Know more: https://www.synapseindia.com/technology/mean-stack-development-company.html
What are the main advantages of using HR recruiter services.pdfHumanResourceDimensi1
HR recruiter services offer top talents to companies according to their specific needs. They handle all recruitment tasks from job posting to onboarding and help companies concentrate on their business growth. With their expertise and years of experience, they streamline the hiring process and save time and resources for the company.
Digital Transformation and IT Strategy Toolkit and TemplatesAurelien Domont, MBA
This Digital Transformation and IT Strategy Toolkit was created by ex-McKinsey, Deloitte and BCG Management Consultants, after more than 5,000 hours of work. It is considered the world's best & most comprehensive Digital Transformation and IT Strategy Toolkit. It includes all the Frameworks, Best Practices & Templates required to successfully undertake the Digital Transformation of your organization and define a robust IT Strategy.
Editable Toolkit to help you reuse our content: 700 Powerpoint slides | 35 Excel sheets | 84 minutes of Video training
This PowerPoint presentation is only a small preview of our Toolkits. For more details, visit www.domontconsulting.com
Implicitly or explicitly all competing businesses employ a strategy to select a mix
of marketing resources. Formulating such competitive strategies fundamentally
involves recognizing relationships between elements of the marketing mix (e.g.,
price and product quality), as well as assessing competitive and market conditions
(i.e., industry structure in the language of economics).
Affordable Stationery Printing Services in Jaipur | Navpack n PrintNavpack & Print
Looking for professional printing services in Jaipur? Navpack n Print offers high-quality and affordable stationery printing for all your business needs. Stand out with custom stationery designs and fast turnaround times. Contact us today for a quote!
Unveiling the Secrets How Does Generative AI Work.pdfSam H
At its core, generative artificial intelligence relies on the concept of generative models, which serve as engines that churn out entirely new data resembling their training data. It is like a sculptor who has studied so many forms found in nature and then uses this knowledge to create sculptures from his imagination that have never been seen before anywhere else. If taken to cyberspace, gans work almost the same way.
Kseniya Leshchenko: Shared development support service model as the way to ma...Lviv Startup Club
Kseniya Leshchenko: Shared development support service model as the way to make small projects with small budgets profitable for the company (UA)
Kyiv PMDay 2024 Summer
Website – www.pmday.org
Youtube – https://www.youtube.com/startuplviv
FB – https://www.facebook.com/pmdayconference
LA HUG - Video Testimonials with Chynna Morgan - June 2024Lital Barkan
Have you ever heard that user-generated content or video testimonials can take your brand to the next level? We will explore how you can effectively use video testimonials to leverage and boost your sales, content strategy, and increase your CRM data.🤯
We will dig deeper into:
1. How to capture video testimonials that convert from your audience 🎥
2. How to leverage your testimonials to boost your sales 💲
3. How you can capture more CRM data to understand your audience better through video testimonials. 📊
6. The Browser has “default styling” for all tags.
<h1><a href="index.htm">
AppEngineLearn</a></h1>
<ul>
<li><a href="sites.htm">Sites</a></li>
<li><a href="topics.htm" >Topics</a></li>
</ul>
<h2>Google App Engine: About</h2>
<p>
Welcome to the site dedicated to
learning the Google Application Engine.
We hope you find
www.appenginelearn.com useful.
</p>
7. We will apply CSS to the tags in the document.
With no changes to the HTML.
8. Lots of CSS properties to play with
We can set these properties on any HTML tag in a document.
background-color, border-width, border-color, margin-top,
padding, font-family, top, left, right, float, font-size,
background-image, text-align, text-decoration, font-style, font-
weight, vertical-align, visibility, overflow, ....
10. Anatomy of a CSS Rule
body
font-family: arial, sans-serif;
font-size: 100%; }
property - which
aspect of CSS are
we changing
selector - which part of the
document does this rule apply
to
value - What are we
setting the property to.
11. Multiple tags with same styling
h1, h2, h3 {
color: yellow;
background-color: black;
}
Making a noticeable background color is a fun way to debug / identify blocks.
12. Three ways to add style rules
• Inline Style - Add style information to a tag
• Embedded Style - Add style information to the document at the
beginning
• External Style Sheet - Put all of your style in an external file
• Preferred - because two people can work independently
13. csev$ ls –l
total 32
-rw-r--r-- 1 csev staff 44 Jan 28 13:14 glike.css-
rw-r--r-- 1 csev staff 680 Feb 17 08:25 index.htm-rw-
r--r-- 1 csev staff 886 Feb 17 08:00 sites.htm-rw-r--
r-- 1 csev staff 681 Feb 17 08:01 topics.htm
csev$
We put the CSS file in the same directory so the link works.
<head>
<title>Learning the Google App Engine</title>
<link type="text/css" rel="stylesheet" href="glike.css">
</head>
14. Fonts
• Default fonts are ugly and they have
Serifs - which make them harder to
read on a screen
• So the first thing I usually want to do
is override the font in my document
• And I want to do this everywhere.
15. Fonts
body {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: x-large;
}
Most Favourite Least Favourite
Fallback fonts: serif, sans-serif, monospace, cursive and fantasy.
17. Color Names
• W3C has listed 16 color names
that will validate with an HTML
validator.
• The color names are: aqua, black,
blue, fuchsia, gray, green, lime,
maroon, navy, olive, purple, red,
silver, teal, white, and yellow.
Source: http://www.w3schools.com/html/html_colors.asp
18. Colors by the number...
#e2edffThree Numbers,
Red, Green , and
Blue - each from 00 -
FF (Hexidecimal)
#ffffff = white
#000000 = black
#ff0000 = red
#00ff00 = green
#0000ff = blue
Source: http://www.w3schools.com/css/css_colornames.asp
Web-safe
colors
#edf = #eeddff
20. Styling Links
a {
font-weight: bold;
}
a:link {
color: black;
}
a:visited {
color: gray;
}
a:hover {
text-decoration: none;
color: white;
background-color: navy;
}
a:active {
color: aqua;
background-color: navy;
}
link - before a visit
visited - after it has been visited
hover - when your mouse is over it
but you have not clicked
active - you have clicked it and you
have not yet seen the new page
Browser default styling for links is
downright ugly!
21. CSS Tags and Attributes
• As CSS was introduced they introduced two new tags that are pretty
much there to serve as handles for styling
• <div> - A block tag (breaks justification)
• <span> - An inline tag that does not break justification
• There are two attributes with special meaning to CSS
• id= - Marks a unique block within the document for styling (use only
once)
• class= - Marks a non-unique tag within the document for styling
(multi-use)
22. div as Container
<div>
<p>This is a paragraph inside a div.</p>
<p>So is this.</p>
</div>
<div id="header">
<ul>
<li><a href="sites.htm">Sites</a></li> <li><a
href="topics.htm" >Topics</a></li>
</ul>
</div>
“div” stands for “division” as it allows us to divide our page into parts or sections
and then do something different with each “section”.
The id attribute on the tag allows us to
uniquely mark a div in a document. The
id tag is also useful for screen readers.
23. Nested divs
<div id="outer">
<div id="nested1">
<p>A paragraph inside the first nested div.</p>
</div>
<div id="nested2">
<p>A paragraph inside the second nested div.</p>
</div>
</div> <!-- End of the outer div -->
Adding divs give us a “handle” to apply styling (CSS) to a block of text.
24. Styling with class=
.fun {
color: #339999;
font-family: Georgia, Times, serif;
letter-spacing: 0.05em;
}
<p class="fun">A man walks into a bar; you
would've thought he'd see it coming!</p>
<p>Have a nice day.<p>
<p class=”fun”>More fun stuff</p>
class can be used many
times in a document.
25. Span (Invisible tag)
<p><span class="fun">Bubble Under</span> is a group of diving
enthusiasts based in the south-west UK who meet up for diving
trips in the summer months when the weather is good and the
bacon rolls are flowing. We arrange weekends away as small
groups to cut the costs of accommodation and travel and to
ensure that everyone gets a trustworthy dive buddy.</p>
Sometimes you want to style something smaller than a whole block - then use span. Do not use span if you are
applying something to a whole block - just put your styling on the enclosing block tag.
31. Quick Advertisement - Firefox
• You pretty much need to use Firefox for serious website development
• Important plugins:
• Web Developer - Chris Pedrick
• FireBug - Joe Hewitt
http://addons.mozilla.org/
33. CSS Box Model
• height and width properties size the block element
• margin properties define the space around the block element
• border properties define the borders around a a block element
• padding properties define the space between the element border and the
element content
• background properties allow you to control the background color of an
element, set an image as the background, repeat a background image
vertically or horizontally, and position an image on a page
http://reference.sitepoint.com/css/boxmodel
34. The Box Model
.trapped {
height: 100px;
width: 200px;
margin: 20px;
border: 5px solid yellow;
background:red;
padding: 20px;
font-family:Arial;
color:orange;
font-size:20px;
}
<p class=”trapped”>
I am trapped in a glass case of emotion
which is 100px high and 200px wide.
</p>
11
55
00
11
99
00
11
44
00
11
00
00
5
20
20
38. CSSValidation
• You can validate your CSS to make sure it has no syntax errors
• Browsers will generally quietly ignore bad CSS syntax
• http://jigsaw.w3.org/css-validator
• The validator can save you time
and sanity
Source: W3C http://validator.w3.org/check