Build a Responsive Landing Page

This project is contributed by Mudigonda Sai Kaushik.

Prerequisite

• HTML5
• CSS
• Optional
  • Bootstrap

Requirement

Objective: Build a CodePen.io landing page that is functionally similar to this: https://codepen.io/kingsfull123/pen/zwrOZr.

Here are some ideas you can consider.

• a physical product (e.g., books, cell phones)
• a website (e.g., FaceBook)
• a python library (e.g., NumPy)
• a JavaScript framework (e.g., Bootstrap, Vue)
• a npm package (e.g., ulp-markdown)
• an organization (e.g., Women Who Code)
• a programming lanugage (e.g., JavaScript)
• a location (e.g., U.S.)

Rule: Don’t look at the example project’s code. Figure it out for yourself.

Use whichever libraries you need. Give it your own personal style.

• The webpage automatically realigns whenever the browser size is changed.
• The grids align properly when the display size is changed.
• The images are flexible.

Optional:

• I upload the website to GitHub.
• I give the website a subdomain of my personal domain.
• I polished my portfolio page from “Build a Personal Portfolio Webpage” project to be responsive.

Additional Resources

Check these Website links for help:

• https://www.w3schools.com/css/css_rwd_intro.asp.
• For making a responsive Bootstrap page: http://www.entheosweb.com/website_design/responsive_web_design.asp.

Note: CodePen.io overrides the Window.open() function, so if you want to open windows using jQuery, you will need to target invisible anchor elements like this one: <a target='_blank'>.

Remember to ask questions in Discord if you get stuck.