Marco Antonio Parra F. Msc. Engineer & Development web

Specialization Details

Full-Stack Web Development with React

Learn front-end and hybrid mobile development, with server-side support, for implementing a multi-platform solution. The first two courses in this Specialization cover front-end frameworks: Bootstrap 4 and React. On the server side, you’ll learn to implement NoSQL databases using MongoDB, work within a Node.js environment and Express framework, and communicate to the client side through a RESTful API. Learners enrolling in this Specialization are expected to have prior working knowledge of HTML, CSS and JavaScript. Ideally learners should complete the courses in the specified sequence.

Date successfully completed this Specialization: Oct. 31, 2022

Rating: 4.8

Specialization certificate offered by: The Hong Kong University of Science and Technology

https://github.com/maaferna/react_project

More about this specialization, courses details

Front-End Web UI Frameworks and Tools: Bootstrap 4

This course will give you an overview of client-side web UI frameworks. You will learn about grids and responsive design, Bootstrap CSS and JavaScript components. You will learn about CSS preprocessors, Less and Sass. You will also learn the basics of Node.js and NPM and task runners like Grunt and Gulp. At the end of this course, you will be able to a)Set up, design and style a web page using Bootstrap 4 and its components, b) Create a responsive web page design, and c) Make use of web tools to setup and manage web sites. This course also includes an honors track that enables you to work on your own project developing a website using Bootstrap 4. Students enrolling in this course should have prior good working knowledge of HTML, CSS and JavaScript.

Go to website of this course

Front- End Web Development with React

This course explores Javascript based front-end application development.

Go to website of this course

Specializations & Professional Certifications


Name	Institution/Company	Release date	View Details
Advanced Django: Mastering Django and Django Rest Framework Specialization	Codio	July 23, 2022
Full-Stack Web Development with React	The Hong Kong University of Science and Technology	Oct. 31, 2022
Learn SQL Basics for Data Science Specialization	UCDAVIS University of California	April 29, 2022
Open Source Software Development, Linux and Git Specialization	The Linux Foundation	May 8, 2022
PostgreSQL for Everybody Specialization	University of Michigan	Aug. 10, 2022
Python for Everybody Specialization	University of Michigan	Aug. 28, 2020
Django for Everybody Specialization	University of Michigan	March 26, 2022
Applied Data Science with Python	University of Michigan	March 14, 2022
Web Design for Everybody: Basics of Web Development & Coding Specialization	University of Michigan	Aug. 23, 2022
Google IT Automation with Python Professional Certificate	Google	March 22, 2022
Análisis de Datos de Google	Google	Dec. 20, 2023

Show Code

views.py Code

     }
     return render(request, 'education.html', context)
 
 
 @throttle_classes([TenCallsPerMinute])
 def specialization_details(request, specialization_id):
     module_dir = os.path.dirname(__file__)
     specializations = Certification.objects.all().order_by('offered_id')
     if request.GET.get("name", None) != None:
         specializations = specializations.filter(name__icontains=request.GET.get("name"))
     specialization = Certification.objects.get(id=specialization_id)
     courses = Course.objects.filter(certification_id=specialization_id)
     with open(os.path.join(module_dir, 'views.py'), 'r') as file:
         content = file.readlines()
     with open(os.path.join(module_dir, 'templates/specialization.html'), 'r') as file:
         content2 = file.read()
 
     template = content2
     views = " ".join(content[118:139])
     context = {'specialization': specialization, 'courses': courses,

Template

{% extends 'base.html' %}
{% block content %}
{% load static %}
{% load fontawesome_5 %}
{{ STATIC_URL }}
{% load pygmentize %}
<br><br>
<section class="container-section mb-4">
    <div class="container-fluid">
        <div class="row g-0">
            <div class="portfolio-box-caption">
                <div class="row">
                    <div class="col-1"><img src="{% static 'img/worldwide.gif' %}" alt="Skills"></div>
                    <div class="col">
                        <h2 class="portfolio-box-headers" style="text-align:center">
                           Specialization Details</h2>
                    </div>
                </div>
            </div>
            <hr>

            <div class="container">
                <div class="row" >
                    <div class="container-fluid specialization-detail" style="background: white">
                        <div class="row">
                                <h3 class="mt-9" style="margin:10px">{{ specialization.name }}</h3>
                                <p  class="d-none d-sm-block show-read-more" style="margin:10px">{{ specialization.description }}</p>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-6 col-xs-12 ">
                                <embed class="d-flex align-cls-center" style="height: 300px; width:100%" src="{% static 'shared/' %}{{specialization.filePath }}" alt="Display certificate"/>
                            </div>
                            <div class="col">
                                <h5>Date successfully completed this Specialization: <q>{{specialization.release_date}}</q></h5>
                                <p><strong>Rating: </strong>{{ specialization.rating }}</p>
                                <h6>{{specialization.offered.category}} offered by: <strong> {{specialization.offered.name}}</strong></h6>
                                <a href="{{ specialization.web_site }}"> {{specialization.web_site }}</a>
                            </div>

                        </div>
                        <div class="row">
                            <h4 class="text-white p-3">More about this specialization, courses details</h4>
                            {% for course in courses %}
                                <div class="card">
                                    <div class="card-header">
                                        {{ course.name }}
                                    </div>
                                    <div class="card-body">
                                        <p class="card-text show-read-more">{{ course.description }}</p>
                                        <a href="{{ course.website }}" class="btn btn-warning">Go to website of this course</a>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="container-section mb-4">
    <div class="container-fluid">
        <div class="row g-0">
            <div class="portfolio-box-caption">
                <div class="row">
                    <div class="col">
                        <h3 class="portfolio-box-headers" style="text-align:center">
                            Specializations & Professional Certifications</h3>
                    </div>
                </div>
            </div>
            <hr>
            <div class="container">
                <h3 class="mb-3 mt-4 p-4" style="background-color: #212529; color: #fff;"><i class="fas fa-list"> Specializations</i></h3>
                <div class="row">
                    <div class="col table-responsive">
                      <form>
                        <table class="table table-hover align-middle">
                            <thead class="table-dark">
                              <tr class="table-light">
                                  <th scope="col">
                                    <input type="text" name="name" value="" placeholder="Filter By Name Certification">
                                  </th>
                                  <th scope="col">
                                    <button type="submit" name="button" class="btn btn-warning"><a href="#specialization">Filter</a></button>
                                  </th>
                              </tr>
                              <tr>
                                    <th scope="col">Name</th>
                                    <th scope="col">Institution/Company</th>
                                    <th scope="col">Release date</th>
                                    <th scope="col">View Details</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in specializations %}
                                    <tr>
                                        <th scope="row">{{ item.name }}</th>
                                        <td>{{ item.offered.name }}</td>
                                        <td>{{ item.release_date }}</td>
                                        <td>
                                            <a href="/specialization/{{item.id}}/details" >
                                                <button class="btn btn-success btn-sm rounded-0" type="button" data-toggle="tooltip" data-placement="top" title="ViewMore"><i class="fa fa-edit"></i></button>
                                            </a>
                                        </td>
                                    </tr>
                                    {% empty %}
                                    <tr>
                                      <td colspan="7">No se encontraron datos</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                      </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="container-section mb-4">
    <div class="container-fluid">
        <div class="row g-0">
            <div class="portfolio-box-caption">
                <div class="row">
                    <div class="col col-sm-10 col-xs-12">
                        <h3 class="portfolio-box-headers" style="text-align:center">
                            Show Code</h3>
                    </div>
                    <div class="col">
                        <button type="button" class="btn btn-light" onclick="$('#section-w').toggle();">
                            Show/Hide
                        </button>
                    </div>
                </div>
            </div>
            <hr>
            <div class="container" style="display:none;" id="section-w">
                <div class="row mb-4">
                    <div class="col-sm-6 col-xs-12">
                        <h4>views.py Code</h4>
                        <div class="sourcecode">
                            {{ views|pygmentize:"python3" }}
                        </div>
                    </div>
                    <div class="col-sm-6 col-xs-12">
                        <h4>Template</h4>
                        <div class="sourcecode">
                            {{ template|pygmentize:"html" }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{% endblock %}


{% block extrahead %}
    <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.js" />
    <script type="text/javascript" src="{{ STATIC_URL }}js/scripts.js" />
{% endblock %}
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>