April 25, 2024

Set up a “Hello Microverse” project – How To Set inters Configuration – Microverse – Module 1 – Week 1 – Day 2

Set up a “Hello Microverse” project – How To Set inters Configuration – Microverse – Module 1 – Week 1 – Day 2 Today we will talk about the Microverse module 1 week 1 day 2 simple GitHub linters setup simple project. Microverse has an industrial educational environment so that all of the students can learn the process of how the programming industry works. So, let’s begin with our first simple project. I will break down the steps for this project from scratch to the end. Checkout the steps below to finish your project efficiently: Step 1 Github Repository Setup:  First of all, you need to create a repo (GH repository) in your GitHub account. You can click  on the Create button as shown in the picture below: Use the Microverse readme template from the repo template options after selecting an owner for the repo. Step 2 Clone the Repo to Local Machine:   There are different options available for cloning the repo in your local machine such as: You can you https link for cloning the repo. Just copy the link and open your terminal. You can do the same with SSH if, in your GitHub profile, you have setup SSH already instead of using https you can use SSH in your terminal after writing git clone SSH. If both these way feels complicated for you then you can also use GitHub Desktop Software that is really easy to operate but it is still recommended to get used to the terminals and code bases as a developer. Step 3 Follow GitHub Flow and Setup Linters Config: During the linters setup, you need to follow the GitHub flow in a professional way. GitHub flow is astructure to manage your repository in a professional manner. According to GitHub flow you need to add all stable codes in the main or master branch of your repo such as linters and the rest of the code which will be continuously updated due to the demand of workflow will be stored in a sub-branch of the repo. First of all, open the GitHub repo link that is given to the project repo to setup linters then select the linters configuration you want to setup for your project. There are different linter files available for different projects according the uses of programming languages. In this project we will only use html-css file since we are just going to use html-css for this project. Link for the Html-Css repo : https://github.com/microverseinc/linters-config/tree/master/html-css Go to you VS code create a folder .github/workflows then inside these folders create a file call linters.yml  copy the code from this link and paste it inside the linters.yml file: https://github.com/microverseinc/linters-config/blob/master/html-css/.github/workflows/linters.yml Create 2 files in the root level called .hintrc and stylelintrc.json copy the code from below link and paste in according to the files:  .hintrc .stylelintrc.json After completing pasting the code in the files from the top bar of your VS code click on terminal and open a new terminal. Then run the commands below one by one  but before that you need to add a .gitignore file and write node_modules in the file: Webhint A customizable linting tool that helps you improve your site’s accessibility, speed, cross-browser compatibility, and more by checking your code for best practices and common errors. NOTE: If you are running on Windows, you need to initialize npm to create package.json file. Run npm init -y Run npm install –save-dev hint@7.x Copy .hintrc to the root directory of your project. Do not make any changes in config files – they represent style guidelines that you share with your team – which is a group of all Microverse students. If you think that change is necessary – open a Pull Request in this repository and let your code reviewer know about it. Run npx hint . Fix validation errors. Stylelint A mighty, modern linter that helps you avoid errors and enforce conventions in your styles. Run npm install –save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x Copy .stylelintrc.json to the root directory of your project. Do not make any changes in config files – they represent style guidelines that you share with your team – which is a group of all Microverse students. If you think that change is necessary – open a Pull Request in this repository and let your code reviewer know about it. Run npx stylelint “**/*.{css,scss}” on the root of your directory of your project. Fix linter errors. Commit the changes with proper description and then push it to the main or master branch. Step 4 Add HTML-CSS:   Now create a new branch and checkout the branch. Add index.html and style.css file. Link CSS file in HTML properly. Add some basic code in your HTML file such as : <!DOCTYPE html> <html lang=”en”>   <head>     <meta charset=”UTF-8″ />     <meta http-equiv=”X-UA-Compatible” content=”IE=edge” />     <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />     <title>Document</title>     <link rel=”stylesheet” href=”style.css” />   </head>   <body>     <h1>Hello Microverse</h1>   </body> </html> CSS: h1 {   color: green; } You can’t leave the files empty otherwise linters will show  error in stylelint in GitHub. Commit changes and push it to GitHub in the new branch. Create pull request in your repo in GitHub and wait for linter results. If everything is green you are good to submit. Related Posts Set up a “Hello Microverse” project – How To Set inters Configuration – Microverse – Module 1 – Week 1 – Day 2 Set up a “Hello Microverse” project – How To Set inters Configuration – Microverse – Module 1 – Week 1… Read More Building a Mobile-First Portfolio: Step-by-Step Guide Building a Mobile-First Portfolio: Step-by-Step Guide In today’s digital age, having a well-designed and user-friendly portfolio… Read More Microverse: Revolutionizing the Future of Global Talent Collaboration Microverse: Revolutionizing the Future of Global Talent Collaboration Introduction:  In today’s interconnected world, the demand for… Read More How to become a software developer without CSE degree? How to become a software developer without

Set up a “Hello Microverse” project – How To Set inters Configuration – Microverse – Module 1 – Week 1 – Day 2 Read More »

Microverse: Revolutionizing the Future of Global Talent Collaboration

Building a Mobile-First Portfolio: Step-by-Step Guide

Building a Mobile-First Portfolio: Step-by-Step Guide In today’s digital age, having a well-designed and user-friendly portfolio website is essential for showcasing your skills and accomplishments. In this blog, we will explore the process of setting up a portfolio website with a mobile-first approach. We will cover the steps required to parse a Figma design, use flexbox for layout, build the toolbar and headline sections, and enhance the overall look of the website using images and backgrounds. By the end of this tutorial, you will have a solid foundation to create your own impressive portfolio website. Step 1: Repository Setup and Best Practices To begin, set up a new repository for your portfolio project and ensure that it follows the best practices. This includesconfiguring linters correctly to maintain code quality and consistency. Make sure that the linter is properly set up and that there are no errors. Avoid making custom changes to the linter configuration. Additionally, create a descriptive README file and maintain meaningful commit messages and pull request titles to enhance project documentation. Step 2: Parsing Figma Design and Flexbox Implementation Start by familiarizing yourself with the chosen Figma design template. Analyze the toolbar and headline sections, which are the focus of this milestone. Use the design as a reference to recreate the sections in HTML and CSS. Remember to utilize flexbox, a powerful CSS layout module, to position elements within the page. Flexbox allows for responsive and dynamic layouts, making it ideal for mobile-first design. Step 3: Building the Toolbar Section The toolbar section typically appears at the top of the page and includes navigation menus, logos, and other essential elements. Refer to the Figma design and recreate the toolbar using HTML and CSS. Pay attention to details such as font, colors, images, text, and margins to ensure an accurate representation of the design. Implement button interactions, including hover effects, to add interactivity to the toolbar. Step 4: Constructing the Headline Section Following the toolbar, the headline section provides a captivating introduction to your portfolio. Utilize the Figma design to build the headline section in HTML and CSS. Again, ensure that the design elements, such as font, colors, images, text, and margins, match the original template. Employ flexbox techniques to align and arrange the content as desired. Don’t forget to make the headline section responsive by using responsive values like percentages instead of fixed pixel values. Step 5: Enhancing the Look with Images and Backgrounds To make your portfolio visually appealing, leverage the power of images and backgrounds. Incorporate relevant images that highlight your work or represent your personal brand. Use CSS to apply backgrounds that complement the overall design. Experiment with color schemes and textures to create an engaging visual experience for visitors. Step 6: Ensuring Responsiveness In today’s mobile-centric world, it is crucial to make your portfolio website responsive. Test your website on different screen sizes and devices to ensure it looks great across the board. Implement responsive values in your CSS rules, such as using percentages for widths instead of fixed pixels. Set breakpoints for minimum mobile and desktop screen sizes (375px and 768px, respectively) and make necessary adjustments to ensure a seamless experience on various devices. Conclusion: Building a portfolio website requires careful planning and attention to detail. By following this step-by-step guide, you have learned how to parse a Figma design, use flexbox for layout, build the toolbar and headline sections, and enhance the look of your website with images and backgrounds. Remember to adhere to best practices, document your work professionally, and maintain consistency throughout the development process. With these skills and knowledge, you are well-equipped to create an impressive, mobile-first portfolio website that showcases your talents to the world. Related Posts Set up a “Hello Microverse” project – How To Set inters Configuration – Microverse – Module 1 – Week 1 – Day 2 … Read More Building a Mobile-First Portfolio: Step-by-Step Guide In today’s digital age, having a well-designed and user-friendly portfolio website is essential for showcasing your skills and… Read More Microverse: Revolutionizing the Future of Global Talent Collaboration Microverse: Revolutionizing the Future of Global Talent Collaboration Introduction:  In today’s interconnected world, the demand for… Read More How to become a software developer without CSE degree? How to become a software developer without a CSE degree? There are several ways to become a software developer without a CSE degree, thanks… Read More

Building a Mobile-First Portfolio: Step-by-Step Guide Read More »

Microverse: Revolutionizing the Future of Global Talent Collaboration

Microverse: Revolutionizing the Future of Global Talent Collaboration

Microverse: Revolutionizing the Future of Global Talent Collaboration Introduction:  In today’s interconnected world, the demand for global talent is rapidly increasing. Companies are seeking skilled professionals from around the globe to contribute to their projects, but geographical barriers and logistical challenges often hinder collaboration. However, with the advent of microverse, a groundbreaking concept in talent acquisition and collaboration, these barriers are being shattered. In this article, we will explore how microverse works and highlight the numerous benefits it offers for businesses and professionals alike.  1. Understanding Microverse:  Microverse is a revolutionary concept that brings together talented individuals from different countries to work collaboratively on software development projects. It operates on a unique model where students and aspiring software developers from all over the world participate in an intensive remote coding program. Through this program, they acquire the necessary skills and knowledge to work effectively in distributed teams.  2. How Microverse Works:  Microverse operates on the principle of equal opportunity and skill-based learning. Students are selected based on their potential and motivation rather than their financial status or location. The program follows a rigorous curriculum, combining technical training, coding projects, and mentorship from experienced industry professionals. The core of Microverse’s approach lies in its emphasis on remote pair programming. Students are paired with other learners from different time zones, fostering a global learning environment. By working on real-world projects, students gain practical experience and develop essential collaboration and communication skills.  3. Benefits of Microverse:    a. Global Talent Pool: Microverse taps into a vast global talent pool, breaking down geographical barriers and enabling businesses to access skilled professionals from diverse backgrounds. This allows for a more diverse and inclusive workforce, fostering innovation and creativity.   b. Cost-Effective Solution: Microverse provides a cost-effective solution for companies seeking top talent. By leveraging the global market, businesses can find skilled professionals at competitive rates without the need for relocation or travel expenses.   c. 24/7 Collaboration: With distributed teams spanning different time zones, microverse enables round-the-clock productivity. This leads to faster project development and reduces time-to-market, giving companies a competitive edge.   d. Cultural Exchange and Diversity: Microverse promotes cultural exchange and diversity by bringing together individuals from various countries and backgrounds. This exposure to different perspectives enhances creativity, problem-solving, and decision-making within teams.   e. Enhanced Learning Experience: Students in the Microverse program benefit from continuous feedback, mentorship, and real-world project experience. This immersive learning environment fosters personal and professional growth, making them highly adaptable and sought-after professionals.   f. Social Impact: Microverse is committed to making education accessible to individuals worldwide, regardless of their financial circumstances. By providing income share agreements and deferring tuition until graduates secure high-paying jobs, Microverse is democratizing education and empowering aspiring software developers.   Conclusion:  Microverse is transforming the way businesses collaborate and access global talent. By breaking down barriers and fostering a global community of skilled professionals, it is reshaping the future of work. The benefits of Microverse, including a diverse talent pool, cost-effective solutions, round-the-clock collaboration, enhanced learning experiences, and social impact, make it an ideal choice for companies seeking efficient and inclusive ways to build successful software development teams. Embracing Microverse can lead businesses into a new era of global collaboration and innovation. Related Posts Set up a “Hello Microverse” project – How To Set inters Configuration – Microverse – Module 1 – Week 1 – Day 2 … Read More Building a Mobile-First Portfolio: Step-by-Step Guide In today’s digital age, having a well-designed and user-friendly portfolio website is essential for showcasing your skills and… Read More Microverse: Revolutionizing the Future of Global Talent Collaboration Microverse: Revolutionizing the Future of Global Talent Collaboration Here are 5 steps to become a software developer without a CSE degree:… Read More How to become a software developer without CSE degree? How to become a software developer without a CSE degree? There are several ways to become a software developer without a CSE degree, thanks… Read More

Microverse: Revolutionizing the Future of Global Talent Collaboration Read More »