Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Create Interactive Portfolio Grid using CSS and HTML
Rating: 4.2 out of 5(129 ratings)
8,205 students

Create Interactive Portfolio Grid using CSS and HTML

Become Expert In Creating Modern and Interactive CSS Widgets for Websites & Learn CSS Pseudo Class Selectors
Created byRavikumar R
Last updated 1/2019
English

What you'll learn

  • Learn Creating CSS Interactive Portfolio Grid Layout
  • Learn CSS Basics
  • Learn Creating CSS Click Functions
  • Learn Position Property in CSS
  • Learn Utilize pseudo Selectors
  • Learn Complex Pseudo Class Selectors properties in CSS
  • How to Create Special Effects using CSS
  • Learn to Use Gradient Background In CSS

Course content

1 section • 7 lectures • 50m total length

  • 1. Introduction and Set Up3:31

    Set up a portfolio project in Visual Studio Code, create css and images folders and an index.html to scaffold an interactive portfolio grid with html and css.

  • 2. Create HTML Markup for Portfolio Grid6:56

    Develop HTML markup for a portfolio grid by building a main container and repeated portfolio items with images, headings, and text, organizing content with sections.

  • 3. Adding Images to Grid2:59

    Add images to each grid item using CSS and HTML, applying background images to sections. Fix repetition with CSS in upcoming lectures.

  • 4. Styling Grid Layout Using CSS6:30

    Apply CSS to style a portfolio grid by setting up a container, removing default margins, and using gradients and floating techniques to achieve a clean grid layout.

  • 5. Styling Detail Section Using CSS9:34

    Learn to style the portfolio grid's detail section with css, including absolute positioning, centered headings, text decorations, color and background tweaks, and subtle transitions.

  • 6. Styling Arrow of the Detail Section10:03

    Style the arrow in the detail section of the portfolio grid using CSS and HTML, configuring absolute positioning, borders, padding, and 180-degree rotation to reveal detail panels beside grid items.

  • 7. Adding Click Effect Using Only CSS11:06

    Build a pure css click effect for a portfolio grid by using the target selector to reveal details with transitions, opacity fades, and sliding content on click.

Requirements

  • A Basic Understanding of HTML and CSS
  • Computer With Internet
  • Desire to learn Advanced CSS and HTML
  • Any Web Browser like Chrome, Mozilla Firefox

Description

After this course, you will be able to Build Interactive Portfolio Grid using only CSS and HTML and Learn How to achieve Click Event Without JavaScript or Any JS library. This skill will definitely enhance your creativity creating widgets for website using CSS and HTML, Which surely make you unique in your profession and achieve better productivity.

You will be more creative in work after finishing course and you will learn how to create Modern and Interactive widgets for website and WordPress.

People who are just beginners in CSS and HTML or Experienced wants to be more creative in building widgets for modern websites can enroll this course.

Who this course is for:

  • CSS Beginners
  • Anyone Who Wants to Start Front End Developer Career
  • Anyone Who Wants to Update In CSS
  • Anyone who wants to Create Interactive Widgets
  • Anyone Interested In Learning CSS Should Take This Course
  • Students / Web Developers / Web Designers

Report abuse