Index

A

• About us section
  • creating / Creating the ABOUT US section
  • creating, as responsive / Making the ABOUT US section responsive
  • styling / Styling the about section 
• adaptive design
  • about / Adaptive design
  • examples / Adaptive design
  • comparing, with responsive design / So which one is the best?
  • drawbacks / So which one is the best?
  • pros and cons / The takeaway
• Animate.css
  • about / Animate.css
  • reference / Animate.css
• Atom
  • using / Our main tool
  • about / Our main tool
  • URL / Our main tool
• attributes / HTML attributes

B

• block element
  • about / Block and inline
  • examples / Block and inline
• Blog section
  • creating / Blog section
  • creating, as responsive / Making the Blog section responsive
  • styling / Styling the Blog section
• Bootstrap
  • about / What is Bootstrap?
  • reference / Components
  • components / Components
  • Grid system / Bootstrap Grid system
  • media queries / Media queries
  • installing / Installing Bootstrap 
  • project, setting up / Setting up our project 
  • URL / Setting up our project 
  • navbar, creating / Bootstrap navbar 
  • navigation, coding / Coding the Bootstrap navigation
  • navigation bar, styling / Styling our navigation bar 
  • Hero section, styling / Styling the hero section
• Bracket
  • URL / Our main tool
• Breadcrumb
  • about / Breadcrumb
  • example / Breadcrumb

C

• Call to Action (CTA)
  • about / Call to Action
  • obvious design / Making it obvious
  • example / Making it obvious
  • contrasting color, using / Using contrasting color
  • compelling copy / Compelling copy
  • placement / Placement
• Cascading Style Sheet (CSS)
  • about / CSS – the savior
  • using / The different ways to use CSS
  • formatting / CSS formatting
  • selector / CSS formatting
  • curly bracket / CSS formatting
  • property / CSS formatting
  • value / CSS formatting
  • semicolon / CSS formatting
  • parent element / Parent and child elements
  • child element / Parent and child elements
  • classes / Classes and IDs
  • IDs / Classes and IDs
  • layout / CSS layout and dividers
  • dividers / CSS layout and dividers
  • pseudo-class / CSS pseudo-classes
• casual scripts / Casual scripts
• child element / Parent and child elements
• classes
  • about / Classes and IDs
  • versus IDs / Classes and IDs
• client-side rendering
  • about / What is client-side rendering?
  • pros and cons / Client-side rendering
• CodeKit / CodeKit
• colors
  • using / Colors
  • meanings / What colors mean
  • reference / Styling the about section 
• ColorZilla
  • about / ColorZilla
  • URL / ColorZilla
• consistency
  • about / Consistency
  • in design / Design
  • in content / Content
  • in interactions / Interactions
• Content Delivery Network (CDN) / Installing Bootstrap 
• contract samples
  • reference / Defining the scope
• CSS3 Generator / CSS3 Generator
• CSS animation
  • creating / CSS animation
• CSS box model
  • about / CSS box model  
  • properties / The boxes
  • block element / Block and inline
  • inline element / Block and inline
• CSS flexbox
  • using / CSS flexbox
• CSS position values
  • about / Positioning in CSS
  • static / Position static
  • relative / Position relative
  • absolute / Position absolute
  • fixed / Position fixed
  • sticky / Position sticky

D

• dividers, CSS / CSS layout and dividers
• domain name
  • buying / Buying a domain name
• Dreamweaver
  • URL / Our main tool
• dynamic Instagram feed
  • adding / Adding a dynamic Instagram feed
  • Instafeed.js, installing / Installing Instafeed.js
  • images, obtaining from user account / Getting images from your user account
  • userID, searching / Finding our userID and TokenAccess
  • TokenAccess, searching / Finding our userID and TokenAccess
  • access token, obtaining / Getting our access token
  • displaying / Displaying the feed

E

• elements, HTML
  • about / HTML elements
  • titles, inserting / Titles and paragraphs
  • paragraphs, adding / Titles and paragraphs
  • links, adding / Links and images
  • images, adding / Links and images

F

• Facebook like button
  • URL / Adding a Facebook like button
• favicon
  • creating / Creating a favicon
• favicon generator
  • URL / Creating a favicon
• Figma / Our design
• File Transfer Protocol (FTP) / Buying a domain name
• FileZilla
  • URL / Buying a domain name
• Flash
  • about / Introduction of Flash
  • URL / Introduction of Flash
  • reference / Introduction of Flash
• flat design / Flat design
• Fontastic / Fontastic
• fonts
  • selecting / Choosing a font that connects your brand
  • serif / Serif fonts
  • sans-serif / Sans-serif
  • casual scripts / Casual scripts
  • reference / Don't use too much typeface
  • installing, for web page / Installing our font
• footer section
  • adding / Adding the footer section
  • creating, as responsive / Making the footer section responsive
  • styling / Styling the footer
• Foundation / Foundation

G

• 960 grid system
  • reference / Responsive web design
• git / git
• goal identification
  • about / Goal identification
  • website purpose, identifying / What is the purpose of the website?
  • target audience, identifying / Who is the website for?
  • customers information, gathering / Is this useful for our audience?
  • Information Architecture (IA), defining / What do they expect to find or do there?
  • brand identity, creating / Does the website need to follow a brand or have its own brand identity?
  • competitors, identifying / Are there any competitors? If there are, how is the website different than others?
• Google Analytics
  • about / Google analytics
  • using / Google analytics
• Google Font
  • URL / Don't use too much typeface, Importing Google Font
  • importing / Importing Google Font
• Google Search Console
  • about / Google Search Console
  • URL / Google Search Console
  • using / Google Search Console
• grids
  • about / Grids
  • cons / The cons
  • reference / Styling the Blog section
• Grid system, Bootstrap / Bootstrap Grid system

H

• header
  • implementing / The header
  • menu, creating / Creating a menu
  • links, inserting / Inserting links
  • logo, adding / Adding a logo
  • right-hand side menu, creating / Right-hand side menu
  • Facebook like button, adding / Adding a Facebook like button
  • styling / Styling our header
• Hero section
  • adding / Adding the hero section
  • CSS flexbox, using / CSS flexbox
  • CSS position values / Positioning in CSS
  • creating, as responsive / Making the hero section responsive
  • styling, with Bootstrap / Styling the hero section
• home page
  • design / Our design
• HTML Boilerplate
  • installing / Installing HTML Boilerplate
  • URL / Installing HTML Boilerplate
  • index.html, editing / Editing index.html
  • about / HTML Boilerplate
• Hypertext Markup Language (HTML)
  • about / What is HTML?
  • tags / HTML tags
  • attributes / HTML attributes
  • structure / HTML structure
  • page, creating / Creating our first page
  • elements / HTML elements

I

• icons
  • about / Icons
  • describing / Describing in a nutshell  
  • users attention, drawing / Drawing attention of the users
  • directional / Directional
• IDs
  • about / Classes and IDs
  • versus classes / Classes and IDs
• images
  • adding / Links and images
• Information Architecture (IA) / What do they expect to find or do there?
• inline element
  • about / Block and inline
  • examples / Block and inline
• Instafeed.js
  • installing / Installing Instafeed.js
  • URL / Installing Instafeed.js

J

• JavaScript plugins
  • modernizr / Editing index.html
  • Jquery / Editing index.html
  • Plugin.js / Editing index.html
  • Main.js / Editing index.html
  • Google Analytics / Editing index.html
• jQuery
  • about / What is jQuery? 
  • syntax / jQuery syntax

L

• layout, CSS
  • about / CSS layout and dividers
  • creating / The basic layout
  • HTML, formatting / Formatting and indenting your HTML
  • HTML, indenting / Formatting and indenting your HTML
  • class, styling / Styling our class
• Leaner Style Sheets (LESS) / CSS preprocessor – LESS
• links
  • adding / Links and images
• Lorem Ipsum / Lorem Ipsum

M

• media queries
  • about / Responsive web design, What are media queries? , Media queries
  • inspector, opening / Opening the inspector
  • desktop design, starting / Desktop first
  / Media queries
• menu
  • designing / Designing the menu
• Minifier
  • URL / Optimizing our code
• mobile browsing / The rise of the mobile
• mobile first / So which one is the best?
• modal box
  • about / Modal
  • usages / Modal
  • examples / Modal
• Modernizr / Modernizr

N

• Namecheap / Buying a domain name
• navbar
  • creating / Bootstrap navbar 
• navigation bar
  • styling / Styling our navigation bar 

O

• OpenWeather
  • URL / OpenWeather API

P

• page
  • creating / Creating our first page
• paragraphs
  • adding / Titles and paragraphs
• parent element / Parent and child elements
• Partners section
  • adding / Adding the Partner section
  • styling / Styling the partner section
• performance optimization, website
  • about / Site performance optimization
  • images, optimizing / Optimizing images
  • code, optimizing / Optimizing our code
• project designing
  • framework, using / Designing
  • inspiration, obtaining / Get inspiration
  • design, improving / Improve
  • design, inventing / Invent
• project scope
  • defining / Defining the scope
• properties, CSS box model
  • content / The boxes
  • padding / The boxes
  • margin / The boxes
  • border / The boxes
• pseudo-class
  • about / CSS pseudo-classes
  • using / CSS pseudo-classes
  • URL / CSS pseudo-classes

R

• Racing Club project / Our situation
• responsive design
  • about / Responsive design
  • examples / Responsive design
  • comparing, with adaptive design / So which one is the best?
  • pros and cons / The takeaway
• responsive web design
  • about / Responsive web design
  • reference / Responsive web design
• Roboto font
  • URL / Importing Google Font

S

• sans-serif fonts / Sans-serif
• search bar
  • about / The search bar
  • submit button / The submit button
  • customizing / Making it noticeable
  • placing, correctly / Placing the search bar correctly
• search engine optimization (SEO)
  • about / Introduction of Flash, What is search engine optimization?
  • improvement / Basic SEO improvement
  • meta description / Meta description
  • valid HTML / Valid HTML
  • keywords / Keywords
  • links / Links
• serif fonts / Serif fonts
• server-side rendering
  • about / What is server-side rendering?
  • pros and cons / Pros and cons of server and client-side rendering
• Sketch app
  • about / Our design
  • URL / Our design
• sticky navigation
  • building / Sticky navigation 
  • Waypoints, using / JS Plugin: Waypoints
  • CSS animation, creating / CSS animation
• Sublime Text 3
  • URL / Our main tool
• syntactically awesome style sheets (SASS) / CSS preprocessor – SCSS

T

• table-based layouts / Table-based layouts
• tags / HTML tags
• text editor
  • Atom / Our main tool
• The Grid system
  • URL / Grids
• TinyPNG / TinyPNG
• titles
  • inserting / Titles and paragraphs
• typography
  • about / Typography
  • font, selecting / Choosing a font that connects your brand
  • multiple typefaces, avoiding / Don't use too much typeface

U

• Unminify
  • URL / Optimizing our code
• Unsplash
  • about / Unsplash
  • URL / Unsplash
• usability
  • about / Usability
  • simplicity / Simplicity
  • navigability / Navigability
  • accessibility / Accessibility
  • availability / Accessibility
• User Interface (UI) / Design
• UXPin
  • URL / So which one is the best?

V

• VueJS
  • about / Introducing to VueJS
  • setting up / Setting up VueJS
  • URL / Setting up VueJS
  • weather application, creating / Creating a weather application in VueJS
• Vue Material
  • using / Vue Material
  • URL / Vue Material

W

• W3 markup validator
  • URL / Valid HTML
  • about / Valid HTML
• Waypoints
  • using / JS Plugin: Waypoints
  • URL / JS Plugin: Waypoints
• weather application
  • creating, in VueJS / Creating a weather application in VueJS
  • Vue Material, using / Vue Material
  • components / Components
  • OpenWeather API, accessing / OpenWeather API
  • API call, managing / The API call
• Web 2.0 / Web 2.0
• web design
  • evolution / What's next?
  • Racing Club project / Our situation
• webflow / webflow
• web page
  • creating / Creating our web page
  • images folder, using / Images folder
  • font, installing / Installing our font
  • Google Font, importing / Importing Google Font
  • normalize.css, adding / Adding normalize.css
• website
  • history / The first ever website
  • implementing / Implementing, testing, and launching
  • testing / Implementing, testing, and launching
  • launching / Implementing, testing, and launching, Launching our website
  • performance optimization / Site performance optimization
  • domain name, buying / Buying a domain name
• wireframes
  • creating / Creating wireframes
• World Wide Web (WWW) / The first ever website
• WWW Consortium (W3C)
  • about / The first ever website
  • URL / The first ever website