This document provides an introduction to HTML and CSS for building websites. It begins with introductions and background on the instructor and Thinkful. It then discusses why students may be interested in learning web development. The document proceeds to cover basic HTML tags and elements to build a simple website, then introduces CSS to style the HTML. Key concepts of CSS like selectors, properties, and values are explained. Students are given challenges to practice these new skills. Finally, tips are provided for continuing to learn and information on Thinkful's programs is shared.
Slides for a 90 minutes HTML workshop I gave. It was meant for absolute beginners in HTML. In addition to the slides I handed out cheat sheets for HTML and CSS (found online). The tasks were first done in http://codepen.io and later in a local HTML editor.
HTML and CSS can be a little daunting at first. This workshop covers the basics, breaks down the barrier to entry and shows you how you can start using HTML and CSS now.
80% of the end-user response time is spent on the front-end. (YSlow Team)
By following these best practices we can have a great impact over the performance of our sites and applications.
In these slides we will go through some best practices related to performance, semantics & accessibility and patterns for better maintainability and readability which is gold when collaborating.
In the second part of the slideshow we will share some tips on how to pick the best layout available, create the slices with optimization in mind, master the basics and stay organized form the beginning with your CSS code.
This 20-minute presentation provides an introduction to several HTML5 semantic tags: article, section, aside, header, footer, nav. Includes how you can address browser compatibility issues.
How to build a Joomla template that is technically optimised for seo? Use the right tags and create a source-ordered xhtml-css design. Learn how with this presentation.
Slides for a 90 minutes HTML workshop I gave. It was meant for absolute beginners in HTML. In addition to the slides I handed out cheat sheets for HTML and CSS (found online). The tasks were first done in http://codepen.io and later in a local HTML editor.
HTML and CSS can be a little daunting at first. This workshop covers the basics, breaks down the barrier to entry and shows you how you can start using HTML and CSS now.
80% of the end-user response time is spent on the front-end. (YSlow Team)
By following these best practices we can have a great impact over the performance of our sites and applications.
In these slides we will go through some best practices related to performance, semantics & accessibility and patterns for better maintainability and readability which is gold when collaborating.
In the second part of the slideshow we will share some tips on how to pick the best layout available, create the slices with optimization in mind, master the basics and stay organized form the beginning with your CSS code.
This 20-minute presentation provides an introduction to several HTML5 semantic tags: article, section, aside, header, footer, nav. Includes how you can address browser compatibility issues.
How to build a Joomla template that is technically optimised for seo? Use the right tags and create a source-ordered xhtml-css design. Learn how with this presentation.
We will cover whole of the web development basics comprising of HTML, CSS, JavaScript in this series.
Following are topics useful for any newbie to intermediate who is interested in learning Web Development
Basics of html for web development by software outsourcing company indiaJignesh Aakoliya
This presentation provides overview of HTML basics for web development - by Software outsourcing company in India, iFour Technolab Pvt. Ltd. - http://www.ifourtechnolab.com
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/
Cascading Style Sheets is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
Instructions for Submissions thorugh G- Classroom.pptxJheel Barad
This presentation provides a briefing on how to upload submissions and documents in Google Classroom. It was prepared as part of an orientation for new Sainik School in-service teacher trainees. As a training officer, my goal is to ensure that you are comfortable and proficient with this essential tool for managing assignments and fostering student engagement.
Palestine last event orientationfvgnh .pptxRaedMohamed3
An EFL lesson about the current events in Palestine. It is intended to be for intermediate students who wish to increase their listening skills through a short lesson in power point.
The Roman Empire A Historical Colossus.pdfkaushalkr1407
The Roman Empire, a vast and enduring power, stands as one of history's most remarkable civilizations, leaving an indelible imprint on the world. It emerged from the Roman Republic, transitioning into an imperial powerhouse under the leadership of Augustus Caesar in 27 BCE. This transformation marked the beginning of an era defined by unprecedented territorial expansion, architectural marvels, and profound cultural influence.
The empire's roots lie in the city of Rome, founded, according to legend, by Romulus in 753 BCE. Over centuries, Rome evolved from a small settlement to a formidable republic, characterized by a complex political system with elected officials and checks on power. However, internal strife, class conflicts, and military ambitions paved the way for the end of the Republic. Julius Caesar’s dictatorship and subsequent assassination in 44 BCE created a power vacuum, leading to a civil war. Octavian, later Augustus, emerged victorious, heralding the Roman Empire’s birth.
Under Augustus, the empire experienced the Pax Romana, a 200-year period of relative peace and stability. Augustus reformed the military, established efficient administrative systems, and initiated grand construction projects. The empire's borders expanded, encompassing territories from Britain to Egypt and from Spain to the Euphrates. Roman legions, renowned for their discipline and engineering prowess, secured and maintained these vast territories, building roads, fortifications, and cities that facilitated control and integration.
The Roman Empire’s society was hierarchical, with a rigid class system. At the top were the patricians, wealthy elites who held significant political power. Below them were the plebeians, free citizens with limited political influence, and the vast numbers of slaves who formed the backbone of the economy. The family unit was central, governed by the paterfamilias, the male head who held absolute authority.
Culturally, the Romans were eclectic, absorbing and adapting elements from the civilizations they encountered, particularly the Greeks. Roman art, literature, and philosophy reflected this synthesis, creating a rich cultural tapestry. Latin, the Roman language, became the lingua franca of the Western world, influencing numerous modern languages.
Roman architecture and engineering achievements were monumental. They perfected the arch, vault, and dome, constructing enduring structures like the Colosseum, Pantheon, and aqueducts. These engineering marvels not only showcased Roman ingenuity but also served practical purposes, from public entertainment to water supply.
How to Split Bills in the Odoo 17 POS ModuleCeline George
Bills have a main role in point of sale procedure. It will help to track sales, handling payments and giving receipts to customers. Bill splitting also has an important role in POS. For example, If some friends come together for dinner and if they want to divide the bill then it is possible by POS bill splitting. This slide will show how to split bills in odoo 17 POS.
Operation “Blue Star” is the only event in the history of Independent India where the state went into war with its own people. Even after about 40 years it is not clear if it was culmination of states anger over people of the region, a political game of power or start of dictatorial chapter in the democratic setup.
The people of Punjab felt alienated from main stream due to denial of their just demands during a long democratic struggle since independence. As it happen all over the word, it led to militant struggle with great loss of lives of military, police and civilian personnel. Killing of Indira Gandhi and massacre of innocent Sikhs in Delhi and other India cities was also associated with this movement.
2. About me
• Jasjit Singh
• Self-taught developer
• Worked in finance & tech
• Co-Founder Hotspot
• Thinkful General Manager
3. About us
Thinkful prepares students for web development & data
science jobs with 1-on-1 mentorship programs
4. About you — why are you here?
• Do you want to work better with developers?
• Do you want to start working in tech?
• Do you have an idea you want to build?
5. About you — programming experience?
• I’ll write my first lines of code tonight
• I’ve been coding for under three months
• I’ve been coding for three months or longer
6. Goals
• Core concepts of HTML/CSS to build websites
• Drills to practice those concepts
• Build your first website
• Get more comfortable learning to code
• Take home challenges
7. How the web works
Type a URL from a client (e.g. google.com)
Browser communicates with DNS server to
find IP address
Browser sends an HTTP request asking
for specific files
Browser receives those files and renders
them as a website
8. Clients / Servers
Client (sends requests)
Frontend Developer
Manages what user sees
Server (sends response)
Backend Developer
Manage what app does
9. Example: facebook.com
HTML, CSS, &
Javascript render
interactive newsfeed
Algorithm determines
what’s in your feed
Request
Get data about your
friends’s and their posts
Open browser
and navigate to
facebook.com
Application Logic
Database
Response
Client Server
10. How it relates to what we’re doing
When we write HTML & CSS today, we are creating
those files that are stored on a server which are then
sent and then rendered by your browser
11. Setup
http://bit.ly/tf-html-classroom
Normally to write our code we’d use a text editor or an
integrated development environment (IDE)
But since we’re learning we’re going to write our code
in a website to skip the setup, see our results
immediately, and make it easy for us to track progress
12. Let’s start with HTML
HTML is the content and structure of a webpage
It’s the skeleton of your website
14. We’ll make it pretty later
We will start with just HTML — we’ll then add a
Cascading Style Sheet (CSS) file to “style” our
website. More on that later…
15. Your first website
Copy this code (don’t worry if you don’t understand it)
<html>
<body>
<h1>Hello world!</h1>
</body>
</html>
17. HTML tags
Every tag starts with a “less than” sign and ends with a
“greater than” sign
<html> #this is an HTML opening tag
<body> #this is a body opening tag
<h1>Hello world!</h1> #this is set of
H1 tags
</body> #this is a body closing tag
</html> #this is an HTML closing tag
18. More about tags
• There are opening tags and closing tags — closing tags
have a backslash before the tag name (</html> versus
<html>)
• Tags instruct a browser about the structure of our
website
• There are hundreds of built-in tags though you’ll use
the same few a lot
19. Non-exhaustive list of HTML tags
• <html> #html tags wrap your entire page
• <head> #head tags holds info about the page
• <body> #body tags wrap around your content
• <h1> #signifies the largest headline (through h6)
• <p> #wraps a paragraph of writing
• <div> #div tags are generic container tags
• <a> #anchor tags for text to be a link
• <ul><li> #unordered list of items
• <button> #this is a button
20. HTML elements
HTML elements usually consist of an opening tag,
closing tag, and some content
<html> #html element starts here
<body> #body element starts here
<h1>Hello world!</h1> #this is an
HTML element
</body> #body element ends here
</html> #html element ends here
21. More about elements
Some consist of just a self-closing tag
<img src=“http://i.imgur.com/Th5404r.jpg">
22. A note about <div>’s
We use <div> tags to separate sections of our site. This
will allow for sophisticated styling. It’s a good habit to
“wrap” most sections into a <div>
<div>
<h1>Hello world!</h1>
</div>
23. HTML attributes
HTML attributes set properties on an element — the are
attached in the opening tag
<a href=“https://somewhere.com">This is a
link</a>
href is an attribute that sets the destination of a link
<h1 class=“headline”>This is a headline</h1>
class is one attribute that identifies element (for CSS &
Javascript)
24. HTML Challenges
Complete the following assignments on
http://bit.ly/tf-html-classroom
• About me
• Images
• Links
25. What is CSS?
Cascading Style Sheets (CSS) interact with your HTML
to determine the visual presentation of your webpages
29. CSS selectors
• Determine HTML elements to target for styles
• Can target tags, classes, id’s and many more!
• Selectors can be combined
30. Example selectors
p (selects all paragraph tags)
.name (selects HTML elements with class “name”)
p.name (selects paragraph tags with class “name”)
31. CSS properties
Determines aspect of an element’s appearance to change
• color (set the font color)
• font-family (sets main and backup typefaces)
• background-image (sets background image)
• height (sets the height of an element)
32. More on CSS properties
• Each property has a default value — when you write
CSS, you override that default with a new value
• There are lots of CSS properties! For a full list see
http://www.htmldog.com/references/css/properties/
33. CSS values
Determines the aspect of the element’s appearance we
wish to change
• color: red, blue, green, #CCCCCC
acceptable values for the color property
• font-family: helvetica, arial, sans-serif
acceptable values for the font-family property
• background-image: url(“imageFile.jpg")
looks for a URL value for image file
• height: 40px, 50%
set in pixels or percentage of container height
34. Declarations and declaration blocks
This is a declaration block containing two declarations
p {
color: red;
font-size: 36px;
}
36. Linking CSS to HTML
• Normally you’d have one HTML file for each webpage
(for example, home.html and profile.html), and a single
CSS file for the whole website’s styles (styles.css)
• To link your stylesheet to your HTML, you’d insert the
following line into the <head> section of your HTML
webpage
• <link rel="stylesheet" type="text/css"
href="theme.css">
37. Learning to learn
• Google is your friend!
• Practice at the edge of your abilities
• Ignore the hot new thing. Instead go deep with one
technology
38. Ways to keep learningLevelofsupport
Learning methods
39. 1-on-1 mentorship enables flexibility
325+ mentors with an average of 10
years of experience in the field
42. Try us out!
• Initial 2-week trial
includes six mentor
sessions for $50
• Learn HTML/CSS and
JavaScript
• Option to continue
onto web
development
bootcamp
• Talk to me (or email
jasjit@thinkful.com) if
you’re interested