A mobile-first responsive homepage for Aloha Apparel Co. and it includes interactivity for feature products.
Clone project.
git clone < project directory .git >
Go to project directory.
cd < project directory >
Open the index.html file in a browser and enjoy!
- HTML
- CSS
- JavaScript
- jQuery
- Git
- GitHub
- Terminal
- Homebrew
This was produced from the following lessons from Week 1 to Week 2:
- Intro to Your Computer & HTML
- Intro to CSS & CSS Styling
- Fonts on the Web
- Flexbox
- CSS3 & Responsive Web Design
- The Command Line Interface
- Git
- CSS Best Practices
- Intro to Programming
- Programming with JavaScript
- Intro to jQuery
- Animation with jQuery
Below are the subsequent learning outcomes.
New elements for outlining and sectioning.
<header>
<nav>
<article>
<section>
<aside>
<footer></footer>
</aside>
</section>
</article>
</nav>
</header><meta>: use for responsive design<link></link>: links external css files and CDNs<script></script>: links external js files and CDNs
Font files and put declaration at top of css page to use it throughout.
- Transfonter
@font-face { }
Media queries (start with mobile-first and modify for larger widths).
@meda screen and (min-width: 1240px) {
}Use .container for header and footer of page.
<nav></nav><ul></ul><li></li>
Order can be used to create various layouts for media queries.
order: #;Flexbox assists with creating easy to code layouts.
<div></div><h1></h1>... <h6></h6><p></p><em></em><figure></figure><img><figcaption></figcaption>
<form></form><input></input>
background-image: linear-gradient(), url();- justify-content
- align-items
- text-align
- Should have used the following flex properties for the items, one class for the wide items and a second class for the smaller items.
flex-grow: ; flex-shrink: ; flex-basis: ; /* shorthand */ flex: flex-grow, flex-shrink and flex-basis;
- jQuery plugin: Flickity
- Created a button using
<input></input>. - js was applied to div of input.
- css box-shadow would appear when input type="email" was clicked.
- js was added to submit input.
Displaying none hides an element.
display: none;Used icons from Font Awesome.
Jen Lam, Full-Stack Developer student at RED Academy.
Let's connect on LinkedIn.