Gallery (Responsive web design)-summer internship

For my summer internship, we were instructed to take up a course from Coursera. So, I took “Responsive Web Design” offered by the University of London. It was a 4 weeks course.

Week 1 (Introduction )

in the first week, we were taught the basic idea behind a responsive website and how we can create a website which is responsive

Key Concepts

Recall the basic concepts of usability and user experience
Show the user where they can go with navbars
Show the user what is here with effective layout
Relate the high-level requirements of creating an accessible website

Usability and User Experience are key in any web designing process

good usability and good design results in a good user experience.

it can be achieved by knowing the key aspects of where the user is, where can they go, and what is there.

There are various techniques to design a particular website.

After that comes the navigation part where there can be hierarchical global and local.
then comes the content on a particular page and how the content can be presented.

by the end we got the basic idea of how efficiently a particular website should be designed.
we were taught some basic guidelines according to which the website should be designed

Week 2 (Bootstrap)

Key Concepts

Prepare a basic Bootstrap site
Build collapsible, responsive Bootstrap navbars
Create multiple layouts in one with a responsive grid
Use Bootstrap themes

we were taught to implement navbars in our webpages for better navigation throughout the page. during this week we got the basic idea of how a responsive website looks like with bootstraps implemented.

we also got familiarized with the concept of the bootstrap grid which is basically used to make our website more responsive. it is used to make our website looks better and compatible with a large variety of devices.

we were taught the implementation of various bootstrap themes according to our liking or our taste.

by the end of the second week, we were able to implement bootstrap to our webpage. we also learned how to add bootstrap themes to our webpage

Week 3(Page structure)

Key Concepts

Differentiate page structure from page content
Use JavaScript objects
Create JavaScript templates with Handlebars
Show different data with the same template
Show the same data with different templates
Use a Bootstrap modal

this week we got to know about the structuring and layout of our webpage.

we also got to know how we can use javascript to give structure to the webpage and how efficiently we can code for future optimization in the code

The concept of javascript objects was used for most of the code.

also, templates were used to implement the final code for the gallery app.

javascript handlebars library was used as well

Manipulation of the templates played a major role in the website.

we were taught how to use different types of templates for different objects

bootstrap modal was also taught in this week.

by the end of the third week, we learned about javascript objects and how they can be used to structure a particular webpage

Week 4 (building a responsive website)

Key Concepts

Employ an array to store objects and display them with a template
Create a search function
Use complex data structures
Select different templates dynamically

In this week we were taught the concept of javascript arrays and how they can be used to store and manipulate data for the website. how can objects be stored in an array and can be displayed using a template

The displaying of data can be done both automatically and dynamically.

there can be also implementation of a search function in case the user is looking for a particular phrase or word.

around the end, we got familiarized with how we can switch displays with the help of templates we created earlier.

by the end of this week, we were able to fully customize a website to make it responsive according to us. we learned how to customize the navbars structure of the page and finally how to combine all these in a fully build website.

To summarize this course, we were able to build a fully functional website that is responsive. the technology used for making a responsive website was HTML, CSS, and javascript. we feel pretty confident about the concepts taught in this entire course.