Skip to content

Latest commit

 

History

History
 
 

3-web

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
submission
submission
 
 
.DS_Store
.DS_Store
 
 
readme.md
readme.md
 
 

readme.md

Stars Badge Forks Badge Pull Requests Badge Issues Badge GitHub contributors Visitors

Don't forget to hit the ⭐ if you like this repo.

Project 3: Web Responsive using Bootstrap

This assignment requires you to create a responsive website using the Bootstrap framework with a focus on Malaysian culture. The detailed instructions for this project:

1. Create a team

Form a team of four students, and make sure everyone has a clear understanding of the project requirements and timelines.

2. Research and planning

Conduct research on Malaysian culture and design trends. Brainstorm ideas and create a plan for your website, including the content, layout, and features. To create a website that represents Malaysian culture, choose a theme that incorporates the colors, patterns, and designs that are common in Malaysia. You can use traditional motifs and patterns to create a unique and visually appealing design.

3. Wireframing

Create a wireframe of your website using tools like Figma or Sketch. This will give you a visual representation of the website's layout and help you organize the content.

4. Design

Use your wireframe to design the website using Bootstrap.

  • Customize the design to include Malaysian cultural elements and colors.
  • Use Bootstrap's grid system: Bootstrap's grid system allows you to create a responsive layout by dividing the page into 12 columns. You can then assign classes to your HTML elements to specify how many columns they should span on different screen sizes.

5. Build the website

Build the website using HTML, CSS, and Bootstrap. Ensure that the website is responsive and works well on different screen sizes.

  • Use Bootstrap's pre-built components: Bootstrap comes with a variety of pre-built components, such as buttons, forms, and navigation menus, that are designed to work well on different screen sizes. By using these components, you can save time and ensure that your website looks great on all devices.
  • Include Malaysian cultural elements: Incorporate Malaysian cultural elements, such as traditional patterns, colors, and symbols, into your website design. This will help to make your website more visually appealing and engaging to visitors.

6. Test the website

Test the website thoroughly to ensure that it works as intended. Check for errors, broken links, and other issues. Use tools like Google's Mobile-Friendly Test or BrowserStack to test your website on different devices and screen sizes.

7. Submit the source code and report

Submit the source code for your website and a report outlining the tasks you completed, the challenges you faced, and the solutions you implemented.

Example

Examples of websites that you can referred:

  1. Kuching food hunter
  2. Sarawak Layer Cake
  3. Child Charity
  4. Mobile Web Menu - Mamak
  5. Berau-by-Benak
  6. Cultured Society Website
  7. Malaysian Food Culture
  8. BOOS - Kadazan Language Learning

File and Folder Structure

  1. Please include your contact information in the HTML <head>.
<!--html
Name:a
Matrix No:
Github id:

Project 3: Web Responsive using Bootstrap
-->
  1. You must place your file in the submission folder. Within the submission folder, create a folder called your github_id. Name the default file as index.html. Suggested folder structure for this project:
group/
├── index.html
├── css/
│   ├── bootstrap.min.css
│   └── style.css
├── js/
│   ├── jquery.min.js
│   └── bootstrap.min.js
└── images/
    ├── profile-pic.jpg
    └── project-1.jpg

In this folder structure, the main index.html file is located in the root folder. The CSS files are located in the css folder, while the JavaScript files are located in the js folder. The images used in the project are stored in the images folder.

Note that this is just one possible folder structure and can be adjusted based on personal preferences or project requirements.

Submission

No Tools File
1 Greenhorn
2 Boundless
3 Topgunners
4 FooBar
5 CEO
6 MaverickCoder
7 Zskoda

Contribution 🛠️

Please create an Issue for any improvements, suggestions or errors in the content.

You can also contact me using Linkedin for any other queries or feedback.

Visitors