HTML & CSS - Le Wagon Bootcamp

•

0 likes•182 views

This document provides resources and instructions for learning HTML, CSS, Bootstrap, and Fontawesome. It recommends starting with deciding on a business idea and sketching it out. It then covers connecting Bootstrap and Fontawesome, exploring CSS classes and IDs, and making designs responsive using flexbox. Bootstrap instructions are given for setting up a responsive grid layout with columns. Fontawesome code examples show how to add social media icons. The document aims to bring technical skills to creative people by teaching HTML, CSS, and related tools.

Technology

https://thenounproject.com/
https://nucleoapp.com/premium-icons/
http://colorhunt.co/
https://coolors.co/
https://fonts.google.com
https://getbootstrap.com/docs/3.3/
components/
http://fontawesome.io/
http://lewagon.github.io/landing/
Links

First Connect Bootstrap by pasting these links:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href=“https://
maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/
bootstrap.min.css">
</head>
Bootstrap Responsivness Setup

<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<!-- div class="card" -->
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<!-- div class="card" -->
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<!-- div class="card" -->
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<!-- div class="card" -->
</div>
</div>
</div>
Bootstrap Grid

First Connect Fontawesome (Setup):
<head>
<link rel="stylesheet" href=“https://
maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-
awesome.min.css">
</head>
Fontawesome 1/2

Then add it to the HTML
<body>
…
<ul>
<li><a href="#"><i class="fa fa-youtube”></i></a></li>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-github"></i></a></li>
</ul>
…
</body>
Fontawesome 2/2

Brings technical skills
to creative people

Ruby basics, command line & git
Software engineering
Database & SQL
HTML, CSS, JavaScript, jQuery, Bootstrap
Rails, Heroku
Github flow
Program outline

What's hot

Introduction to BootstrapCollaboration Technologies

VT2019 - DA355A - Responsiv webbutvecklingAnton Tibblin

Intro To Twitter BootstrapAhmed Haque

WordPress Maintenance: 14 Essential Tasks to Keep Your Site OptimizedMarshall Reyher

Web 2.0 Expo: Even Faster Web SitesSteve Souders

Twitter bootstrap 101bootstraptutor

Website performance optimisationWebstock

@media - Even Faster Web SitesSteve Souders

JavaScript with Adobe applications - Acceleration web development!shinobu tsutsui

Bootstrap tutorialvijaypatel_b

Bootstrap 3.1.1Prasad Parab

Slides from my talk on "Optimizing WordPress for Speed and performence" at Wo...Siddharth Ashok

Wordpress plugin directoryJohn Smith

Introduction to Twitter's Bootstrap 2Julien Renaux

Hardening WordPress - Friends of Search 2014 (WordPress Security)Bastian Grimm

Bootstrap IntroductionAndrea Tarr

Lab#13 responsive webYaowaluck Promdee

A beginner's guide to twitter bootstrapSunanda Bansal

DIGITAL MARKETINGVenet Dheer

Html5 - short introjeiseman

What's hot (20)

Introduction to Bootstrap

VT2019 - DA355A - Responsiv webbutveckling

Intro To Twitter Bootstrap

WordPress Maintenance: 14 Essential Tasks to Keep Your Site Optimized

Web 2.0 Expo: Even Faster Web Sites

Twitter bootstrap 101

Website performance optimisation

@media - Even Faster Web Sites

JavaScript with Adobe applications - Acceleration web development!

Bootstrap tutorial

Bootstrap 3.1.1

Slides from my talk on "Optimizing WordPress for Speed and performence" at Wo...

Wordpress plugin directory

Introduction to Twitter's Bootstrap 2

Hardening WordPress - Friends of Search 2014 (WordPress Security)

Bootstrap Introduction

Lab#13 responsive web

A beginner's guide to twitter bootstrap

DIGITAL MARKETING

Html5 - short intro

Similar to HTML & CSS - Le Wagon Bootcamp

“Good design is obvious. Great design is transparent.” — How we use Bootstrap...Roni Banerjee

Web technologies part-2Michael Anthony

CSS framework By PalashPalashBajpai

Twitter bootstrap training_session_pptRadheshyam Kori

Introduction to BOOTSTRAPJeanie Arnoco

Web Design Course - Lecture 18 - Boostrap, Gatting started, grid system, tablesAl-Mamun Sarkar

Bootstrap.pptxvishal choudhary

Slow kinda sucksTim Wright

BootstrapSarvesh Kushwaha

MicroformatsSrini Rajaram

Quickstrat bootstrapDeni Ywn

Seo Cheat SheetAnchal Thakur

Seo cheat-sheetElena Michelle

HTML 5 Drupalcamp Ireland Dublin 2010alanburke

Bootstrap 3McSoftsis

An introduction to bootstrapMind IT Systems

Quick start guide to java script frameworks for sharepoint apps spsbe-2015Sonja Madsen

Quickstartguidetojavascriptframeworksforsharepointapps spsbe-2015-15041903264...BIWUG

Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012crokitta

HTML and CSS Coding StandardsSaajan Maharjan

Similar to HTML & CSS - Le Wagon Bootcamp (20)

“Good design is obvious. Great design is transparent.” — How we use Bootstrap...

Web technologies part-2

CSS framework By Palash

Twitter bootstrap training_session_ppt

Introduction to BOOTSTRAP

Web Design Course - Lecture 18 - Boostrap, Gatting started, grid system, tables

Bootstrap.pptx

Slow kinda sucks

Bootstrap

Microformats

Quickstrat bootstrap

Seo Cheat Sheet

Seo cheat-sheet

HTML 5 Drupalcamp Ireland Dublin 2010

Bootstrap 3

An introduction to bootstrap

Quick start guide to java script frameworks for sharepoint apps spsbe-2015

Quickstartguidetojavascriptframeworksforsharepointapps spsbe-2015-15041903264...

Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012

HTML and CSS Coding Standards

Recently uploaded

What's New in Teams Calling, Meetings and Devices April 2024Stephanie Beckett

Bits & Pixels using AI for Good.........Alison B. Lowndes

Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCzechDreamin

AI revolution and Salesforce, Jiří KarpíšekCzechDreamin

IoT Analytics Company Presentation May 2024IoTAnalytics

Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Julian Hyde

Exploring UiPath Orchestrator API: updates and limits in 2024 🚀DianaGray10

Search and Society: Reimagining Information Access for Radical FuturesBhaskar Mitra

UiPath Test Automation using UiPath Test Suite series, part 2DianaGray10

Integrating Telephony Systems with Salesforce: Insights and Considerations, B...CzechDreamin

Optimizing NoSQL Performance Through ObservabilityScyllaDB

To Graph or Not to Graph Knowledge Graph Architectures and LLMsPaul Groth

WSO2CONMay2024OpenSourceConferenceDebrief.pptxJennifer Lim

Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung

From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...Product School

Knowledge engineering: from people to machines and backElena Simperl

Mission to Decommission: Importance of Decommissioning Products to Increase E...Product School

Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeCzechDreamin

Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software

"Impact of front-end architecture on development cost", Viktor TurskyiFwdays

Recently uploaded (20)

What's New in Teams Calling, Meetings and Devices April 2024

Bits & Pixels using AI for Good.........

Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder

AI revolution and Salesforce, Jiří Karpíšek

IoT Analytics Company Presentation May 2024

Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)

Exploring UiPath Orchestrator API: updates and limits in 2024 🚀

Search and Society: Reimagining Information Access for Radical Futures

UiPath Test Automation using UiPath Test Suite series, part 2

Integrating Telephony Systems with Salesforce: Insights and Considerations, B...

Optimizing NoSQL Performance Through Observability

To Graph or Not to Graph Knowledge Graph Architectures and LLMs

WSO2CONMay2024OpenSourceConferenceDebrief.pptx

Key Trends Shaping the Future of Infrastructure.pdf

From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...

Knowledge engineering: from people to machines and back

Mission to Decommission: Importance of Decommissioning Products to Increase E...

Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade

Essentials of Automations: Optimizing FME Workflows with Parameters

"Impact of front-end architecture on development cost", Viktor Turskyi

HTML & CSS - Le Wagon Bootcamp

1. HTML & CSS @paal_ringstad

2. https://thenounproject.com/ https://nucleoapp.com/premium-icons/ http://colorhunt.co/ https://coolors.co/ https://fonts.google.com https://getbootstrap.com/docs/3.3/ components/ http://fontawesome.io/ http://lewagon.github.io/landing/ Links

3. Decide on a Business Idea

4. Sketch

5. HTML HTML divs CSS

6. HTML

8. CSS

9. Explore Classes & Ids

10. Responsiveness

11. Flexbox - Responsive

12. Flexbox - Responsive

13. First Connect Bootstrap by pasting these links: <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=“https:// maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/ bootstrap.min.css"> </head> Bootstrap Responsivness Setup

14. <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-3">  </div> <div class="col-xs-12 col-sm-6 col-md-3">  </div> <div class="col-xs-12 col-sm-6 col-md-3">  </div> <div class="col-xs-12 col-sm-6 col-md-3">  </div> </div> </div> Bootstrap Grid

15. 6. Fontawesome

16. First Connect Fontawesome (Setup): <head> <link rel="stylesheet" href=“https:// maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/fontawesome.min.css"> </head> Fontawesome 1/2

17. Then add it to the HTML <body> … <ul> <li><a href="#"><i class="fa fa-youtube”></i></a></li> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-github"></i></a></li> </ul> … </body> Fontawesome 2/2

18. Brings technical skills to creative people

19. Ruby basics, command line & git Software engineering Database & SQL HTML, CSS, JavaScript, jQuery, Bootstrap Rails, Heroku Github flow Program outline

20. HTML & CSS @paal_ringstad

HTML & CSS - Le Wagon Bootcamp

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to HTML & CSS - Le Wagon Bootcamp

Similar to HTML & CSS - Le Wagon Bootcamp (20)

More from Paal Ringstad

More from Paal Ringstad (7)

Recently uploaded

Recently uploaded (20)

HTML & CSS - Le Wagon Bootcamp