design2 – the html template generic page and first component

Your template inspired by the html5up models is just getting started. You’ve hopefully defined the main font as well as a heading font and presenting these in your first draft of your elements page. I’m presently working on a template (download zip) which uses a number of design elements from Editorial. There’s a lot to […]

design2 – natours features and tours

Tutorials Section 05 Natours Features and Tours Sections, videos 038 – 041 Notes for Section 05 This week includes probably the most complex bits of CSS to build the rotating cards in the tours section. Versions to upload to your site: natours/v5-5/this-is-features-version-all-the-usual-files-folders (use the github repository for the linea icon set) natours/v5-6/this-is-tours-version-all-the-usual-files-folders Blogging Question To […]

design1 – CSS animations and transitions

Tutorials ADV Section 02, videos 004-023 The following HTML / CSS pairs will need to be completed and uploaded to your server: pseudo-class-code-a-long.html / pseudo.css pseudo-exercise.html / pseudo-exercise.css (HTML file instructions) button.html / button.css transform-code-a-long.html / transform.css transition-code-a-long.html / transition.css gallery code-a-long (sample code, compressed) gallery/index.html gallery/css/style.css gallery/img/three-images-included Blogging Questions Describe the CSS property transform […]

design2 – layout and typography template

I have a favorite set of HTML/CSS templates for you to look at created by HTML5up. Each template usually includes three parts: a homepage layout, a “generic” page, and an “elements” page. The homepages are the most complicated part of the layout, but the generic and elements pages are the practical parts. They showcase basic […]

design2 – natours about section

Tutorials Section 05 Natours About Section, videos 035 – 037 Notes for Section 05 This week you’re going to add to your HTML and write your second component. You’ll also add a number of new selectors in your typography partial Sass file. Files to upload natours/v5-4/index.html natours/v5-4/package.json natours/v5-4/css/style.css natours/v5-4/sass/main.scss natours/v5-4/sass/all-7-1-directories-and-partials Blog questions Describe how the […]

design1 – the Ringer Project Card 1

This is the start of our end of the semester problem set for which we will be building a flexible card system modeled after the using flexbox as your primary layout tool. Requirements Organize and upload your files including the following: 07-adv-css-flexbox1/index.html 07-adv-css-flexbox1/css/style.css 07-adv-css-flexbox1/img/all-images-used-from-unsplash Below are the first two tutorials used to create the […]

design1 – Advanced CSS –Layout with Flexbox – part 1

Tutorials ADV Section 04, videos 031 – 041 The following HTML and CSS pairs will need to be completed as part of the code-along and uploaded to your server: flexbox.html / flexbox.css (use this boilerplate and transfer the internal CSS to the external CSS file) sidebar.html / sidebar.css Blogging Questions Describe the two flex container […]